Accentsconagua

Integrazione del menu Superfish in un modello

Codice
Share

Questa è una guida passo-passo per l'utilizzo del plugin del menu jQuery, Superfish, sviluppato da Joel Birch.

Passaggio 1 Download

Scarica il pacchetto pack Superfish dal sito ufficiale.

Passaggio 2 Struttura del file

Copia il CSS e JS nella cartella del tema. Per il nostro tut, l'obiettivo è il TwentyEleven cartella. I nomi delle directory sono superfish-css e superfish-js.

Passaggio 3: Comandi di importazione

Importa i file CSS e JS in header.php con wp_enqueue_script e wp_enqueue_style Funzioni di WordPress.

Fase 4 Impostazione della classe

Cerca la linea mostrata sotto e cambia come indicato. In questo modo, facciamo in modo che WordPress utilizzi la versione Superfish per il menu principale:

 // Cambia da questo:  'primario')); ?> // A questo:  'primary', 'menu_class' => 'sf-menu',)); ?>

Passaggio 5 Creazione di un menu

Crea e salva un sistema di menu nell'amministratore di WordPress, quindi verrà visualizzato nella parte appropriata del sito. L'immagine sotto mostra il sito prima che il menu aggiungesse:

Passaggio 6 Menu aggiunto

Dopo aver aggiunto il menu:

Step 7 Styling

Modifica gli stili Superfish per abbinarli al tema Twenty Eleven. Il file si chiama superfish.css. Di seguito sono i dettagli:

 / * Cambia questo: * / .sf-menu a, .sf-menu a: visited / * visitato pseudo-selettore, quindi IE6 applica il colore del testo * / color: # 13a;  .sf-menu li background: # BDD2FF;  / * A questo: * / .sf-menu a, .sf-menu a: visited / * visitato pseudo-selettore, quindi IE6 applica il colore del testo * / color: # 999; / * # 13a; * / .sf-menu li background: #ccc; / * # BDD2FF; * /
 / * Cambia questo: * / .sf-menu li: hover, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: hover, .sf-menu a: active background: # CFDEFF; contorni: 0;  / * A questo: * / .sf-menu li: hover, .sf-menu li.sfHover, .sf-menu a: focus, .sf-menu a: hover, .sf-menu a: active background: #eee; contorni: 0; colore: # 111; 
 / * Cambia questo: * / .sf-shadow ul background: url ('... /images/shadow.png') no-repeat in basso a destra; padding: 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;  / * A questo: * / .sf-shadow ul / * background: url ('... /images/shadow.png') no-repeat in basso a destra; padding: 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; * /

Passaggio 8: versione completata

Ecco come apparirà al termine:

Codice
×