Accentsconagua

Integrering av Superfish-menyen i en mal

Kode
Share

Dette er en kort og enkel trinnvis veiledning for å bruke jQuery-menypluggen, Superfish, utviklet av Joel Birch.

Trinn 1 Nedlasting

Last ned Superfish Pack zip fra den offisielle nettsiden.

Trinn 2 Filstruktur

Kopier CSS og JS til temaets mappe. For vår tut er målet målet twentyeleven mappe. Katalognavnet er Superfish-css og Superfish-js.

Trinn 3 Importkommandoer

Importer CSS og JS-filene til header.php med wp_enqueue_script og wp_enqueue_style WordPress-funksjoner.

Trinn 4 klasse innstilling

Søk linjen som vises nedenfor, og endre som angitt. På denne måten gjør vi WordPress til å bruke Superfish-versjonen for hovedmenyen:

 // Endre fra dette:  'primær')); ?> // Til dette:  'primær', 'menu_class' => 'sf-meny',))); ?>

Trinn 5 Opprette en meny

Lag og lag et menysystem i WordPress-admin, så vises det i den aktuelle delen av nettstedet. Bildet nedenfor viser stedet før menyen ble lagt til:

Trinn 6 Meny lagt til

Etter at menyen er lagt til:

Trinn 7 Styling

Endre Superfish-stilene for å matche Twenty Eleven-temaet. Filen heter superfish.css. Nedenfor er detaljene:

 / * Endre dette: * / .sf-meny a, .sf-meny a: besøkt / * besøkt pseudovelger, slik at IE6 gjelder tekstfarge * / farge: # 13a;  .sf-meny li bakgrunn: # BDD2FF;  / * Til dette: * / .sf-meny a, .sf-meny a: besøkt / * besøkt pseudovelector slik at IE6 gjelder tekstfarge * / farge: # 999; / * # 13a; * / .sf-meny li bakgrunn: #ccc; / * # BDD2FF; * /
 / * Endre dette: * / .sf-meny li: svever, .sf-meny li.sfHover, .sf-meny a: fokus, .sf-meny a: svever, .sf-meny a: aktiv CFDEFF; oversikt: 0;  / * Til dette: * / .sf-meny li: svever, .sf-meny li.sfHover, .sf-menu a: fokus, .sf-meny a: svever, .sf-meny a: aktiv #eee; oversikt: 0; farge: # 111; 
 / * Endre dette: * / .sf-shadow ul bakgrunn: url ('... /images/shadow.png') ikke gjenta nederst til høyre; polstring: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-grense-topp-høyre-radius: 17px; -webkit-grense-bunn-venstre-radius: 17px;  / * Til dette: * / .sf-skygge ul / * bakgrunn: url ('... /images/shadow.png') ikke gjenta nederst til høyre; polstring: 0 8px 9px 0; -moz-border-radius-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-grense-topp-høyre-radius: 17px; -webkit-grense-bunn-venstre-radius: 17px; * /

Trinn 8 Ferdig versjon

Slik ser det ut når det er ferdig:

Kode
×