Accentsconagua

Integrering av Superfish-menyn i en mall

Koda
Share

Detta är en kort och enkel steg-för-steg guide för att använda jQuery-menypluggen Superfish, utvecklad av Joel Birch.

Steg 1 Nedladdning

Ladda ner Superfish pack zip från den officiella hemsidan.

Steg 2 Filstruktur

Kopiera CSS och JS till temans mapp. För vår tut är målet målet tjugo elva mapp. Katalognamnen är Superfish-css och Superfish-js.

Steg 3 Importera kommandon

Importera CSS och JS-filerna till header.php med wp_enqueue_script och wp_enqueue_style WordPress-funktioner.

Steg 4 klassinställning

Sök efter linjen som visas nedan och ändra som angivet. På så sätt gör vi WordPress för att använda Superfish-versionen för huvudmenyn:

 // Ändra från detta:  "primär")); ?> // Till detta:  'primary', 'menu_class' => 'sf-meny',))); ?>

Steg 5 Skapa en meny

Gör och spara ett menysystem i WordPress-administratorn, så kommer det att visas i den relevanta delen av webbplatsen. Bilden nedan visar platsen innan menyn läggs till:

Steg 6 Meny tillagd

Efter att menyn har lagts till:

Steg 7 Styling

Ändra Superfish-stilar för att matcha Twenty Eleven-temat. Filen heter superfish.css. Nedan finns detaljerna:

 / * Ändra det här: * / .sf-menyn a, .sf-meny a: besökta / * besökta pseudovelector så IE6 gäller textfärg * / färg: # 13a;  .sf-meny li bakgrund: # BDD2FF;  / * Till detta: * / .sf-meny a, .sf-meny a: besökte / * besökta pseudovelector så IE6 tillämpar textfärg * / färg: # 999; / * # 13a; * / .sf-meny li bakgrund: #ccc; / * # BDD2FF; * /
 / * Ändra detta: * / .sf-meny li: sväva, .sf-meny li.sfHover, .sf-meny a: fokus, .sf-meny a: sväva, .sf-meny a: aktiv bakgrund: CFDEFF; kontur: 0;  / * Till detta: * / .sf-meny li: sväva, .sf-meny li.sfHover, .sf-meny a: fokus, .sf-meny a: sväva, .sf-meny a: aktiv #eee; kontur: 0; färg: # 111; 
 / * Ändra det här: * / .sf-shadow ul background: url ('... /images/shadow.png') no-repeat nederst till höger; vaddering: 0 8px 9px 0; -moz-gränsen-radie-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-gräns-topp-högra radie: 17px; -webkit-border-bottom-left-radius: 17px;  / * Till detta: * / .sf-skugga ul / * bakgrund: url ('... /images/shadow.png') nej-upprepa nedre höger; vaddering: 0 8px 9px 0; -moz-gränsen-radie-bottomleft: 17px; -moz-border-radius-topright: 17px; -webkit-gräns-topp-högra radie: 17px; -webkit-gräns-botten-vänster-radien: 17px; * /

Steg 8 Slutförd version

Så här ser det ut när det är klart:

Koda
×