Accentsconagua

Integrarea meniului Superfish într-un șablon

Cod
Share

Acesta este un ghid scurt și ușor de parcurs pentru utilizarea pluginului meniului jQuery, Superfish, dezvoltat de Joel Birch.

Pasul 1 Descărcarea

Descărcați zipul pachetului Superfish de pe site-ul oficial.

Pasul 2 Structura fișierului

Copiați CSS și JS în dosarul temei. Pentru tut, tinta noastra este douazeci unsprezece pliant. Numele de directoare sunt Superfish-css și Superfish-js.

Pasul 3 Comenzi de import

Importați fișierele CSS și JS în header.php cu wp_enqueue_script și wp_enqueue_style Funcțiile WordPress.

Pasul 4 Setarea clasei

Căutați linia afișată mai jos și modificați indicațiile. În acest fel, facem WordPress să folosească versiunea Superfish pentru meniul principal:

 // Schimbați de la:  "primar")); ?> La acest lucru:  'primar', 'menu_class' => 'sf-menu',)); ?>

Pasul 5 Crearea unui meniu

Efectuați și salvați un sistem de meniuri în administratorul WordPress, apoi va apărea în partea corespunzătoare a site-ului. Imaginea de mai jos afișează site-ul înainte de adăugarea meniului:

Pasul 6 Meniu adăugat

După ce este adăugat meniul:

Pasul 7 Styling

Modificați stilurile Superfish pentru a se potrivi cu tema Twenty Eleven. Fișierul se numește superfish.css. Mai jos sunt detaliile:

 / * Schimba acest: * / .sf-meniu a, .sf-meniu a: vizitat / * vizitat pseudo selector astfel încât IE6 aplică text culoare * / culoare: # 13a;  .sf-meniul li fundal: # BDD2FF;  / * La acest: * / .sf-meniu a, .sf-meniu a: vizitat / * vizitat pseudo selector, astfel că IE6 aplică text color * / color: # 999; / * # 13a; * / .sf-meniul li fundal: #ccc; / * # BDD2FF; * /
 / * Schimba aceasta: * / .sf-meniul li: hover, .sf-menu li.sfHover, .sf-meniu a: focus, .sf-meniu a: CFDEFF; contur: 0;  / * Pentru acest: * / .sf-meniu li: hover, .sf-meniu li.sfHover, .sf-meniu a: focalizare, .sf-meniu a: #eee; contur: 0; culoare: # 111; 
 / * Schimbați aceasta: * / .sf-shadow ul background: url ('... /images/shadow.png') nu-repeta dreapta jos; umplutura: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px;  / * La aceasta: * / .sf-shadow ul / * background: url ('... /images/shadow.png') nu-repeta dreapta jos; umplutura: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-border-top-right-radius: 17px; -webkit-border-bottom-left-radius: 17px; * /

Pasul 8 Versiunea finalizată

Iată cum va arăta când este terminat:

Cod
×