Aggiunta multilivello, nidificato, SEO menu di navigazione amichevole per WordPress - parte 2

La ricerca per il menu verticale perfetta ...

Parte 1 di questo tutorial descritto processo graduale di costruzione orizzontale del menu nidificato multilivello per tema WordPress Tesi . Parte 2 continuerà a migliorare questa funzionalità. Qui si aggiungerà la versione "dark" del menu di navigazione orizzontale e vi insegnerò come passare da "brillante" e la versione "dark". Parte 2 è il superset della parte 1. Include tutti dalla parte 1 + aggiunge roba più cool.

L'idea principale che ho voluto presentare è l'aggiunta di menu verticale a tema Thesis (e per WordPress in generale). Ero alla ricerca di veramente flessibile, SEO friendly e multi-browser compatibile menu verticale che permetterebbe di creare un numero illimitato di livelli di nidificazione.

WEB ha tonnellate di pagine sull'argomento, ma quando ho iniziato a provare tutti questi campioni - si sia rotto, caduto a parte, supportata solo numero limitato di livelli o comportato male nei Gates + junksplorer di Ballmer 6. Finalmente sono tornato fidati menù Dynamic Drive , come i loro campioni verticali dimostrato di essere un bel caso che si adatta alle mie esigenze stringenti. Ho dovuto modificare in modo significativo loro però per assicurarsi che si adatta modello Thesis.
La ricerca della perfezione continua ...

Ho passato circa 16 ore di ricerca, l'assemblaggio, il collaudo, la fissazione, la lucidatura e la messa a punto CSS del menu verticale e. Codice js e 3/4 del tempo è stato speso rendendo di lavorare in MSIE 6.
In ogni modo, ero soddisfatto del risultato finale. Portato menu di navigazione verticale ha tutti gli stessi benefici che menu orizzontale ha.

Avere capacità di aggiungere menu verticale è molto importante per circa il 70-80% dei portali sul web. Menu orizzontale hanno limitato "spazio" per accogliere molte scelte di menu, ma menu verticale non ha questa limitazione e avrebbe aiutato immensamente. Quindi qui si va.

Un sacco di passaggi per realizzarlo sono già descritte nella parte 1 di esercitazione quindi questo renderà un po 'più corto, ma con molto più ricco di funzionalità risultati.

Quindi qui si va:

Costruire SEO friendly, verticale, multilivello, menù gerarchicamente nidificato per WordPress e il tema della tesi. Step by Step
(... Quello che non avete mai pensato possibile ...)

1. Installare exec plugin di php e attivarlo. Avremo bisogno perché userò PHP all'interno del widget di testo per emettere menu verticale 'di codice HTML.
2. Eseguire i passi 1 - 6 da parte 1 di esercitazione . Fondamentalmente è necessario installare e attivare usare plugin di NAVT costruire + visivamente il vostro menu. Assicurati che il tuo menù nome del gruppo è 'menu1'. Questo nome è codificato in custom_functions.php
3. Fare clic sull'icona 'marcia' per il gruppo 'menu1' di modificare le sue proprietà:
   
4. Segue i passi 7,1 -7,3 della parte 1 tutorial per impostare "Opzioni", "esposizione" e le impostazioni "CSS" schede.
5. Ora cliccate sul tab "Tema" di questa finestra di dialogo. Noi sovrascrivere alcune impostazioni lì (se state seguendo passo 1). Questo è ok - non si perde nulla - ma sono necessari questi cambiamenti perché ho cambiato qualche codice dal punto 1.
   Ecco come questo dialogo deve essere compilato:
   1. All'interno del "Tema XPath:" Area Inserire questo codice (che comanda di sostituire qualunque nome con queste classi):
      .jquerycssmenu, .jqueryslidemenu
   2. Impostare "Azione" per "Sostituisci con"
   3. All'interno di "Aggiungi tag prima di navigazione del gruppo" Area inserire questo codice:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. All'interno di "aggiungere tag dopo di navigazione del gruppo" Area inserire questo codice:
      <br style='clear: left' /></div>
   5. Fare clic sul pulsante [SAVE / CLOSE].
6. Ora andate al pannello di WordPress admin -> Aspetto -> Widgets.
7. Trascinare widget di "Testo" (dal grande area "I widget disponibili") nella zona "Box 1" a destra. Ci sarà l'aggiunta di codice nel widget di testo che ci aiuterà a materializzare menu verticale.
   NOTA: Presumo che tu hai "Box 1" in esistenza. Opzioni Tesi consente di spegnerlo - ma per il bene di questo tutorial consentono fanno essere.
8. Una volta trascinati Questo widget - si apre come un fiore (mi sento romantica ora che MSIE lotta è finita).
9. Nella zona "Titolo" inserire "miglior menù del mondo verticale" ... Beh, sentitevi liberi di utilizzare la vostra creatività - che il testo andrà sopra il tuo menu verticale appena nato.
10. Nella grande area per il testo - inserire questo codice PHP:
    <?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?>
11. Premere il pulsante [Salva], clicca sul link "Chiudi".
12. Scarica aggiornato insieme di file qui .
    Questo archivio comprende:

    
    

    • Versione aggiornata del "brillante" codice di menu orizzontale
    • Versione "Dark" del menu orizzontale
    • Codici di menu verticale
    • Versione aggiornata del custom_functions.php
13. Ora è necessario decomprimere questo archivio e caricarlo nella directory 'personalizzata' del vostro tema Thesis.
    Nota: se avete fatto tutte le personalizzazioni all'interno custom_functions.php - avresti bisogno di unirle. Se non - sentitevi liberi di sovrascriverlo con la mia versione.
14. Voila! Ora si può ricaricare il vostro sito web e vedere la stessa "brillante" menu orizzontale + neato menu verticale nella barra laterale sinistra.
15. Compito BONUS: Let cambiare menu orizzontale "brillante" sullo schema di colore "dark".
    1. All'interno del file custom_functions.php:
       sostituire questo codice:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       con questo codice:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Fondamentalmente stiamo commentando fuori una riga e togliendo l'altra.
    2. Ora vai a WordPress Admin-> Strumenti-> Liste NAVT e cliccare su citata sull'icona "ingranaggio" per modificare le proprietà del tuo gruppo 'menu1'.
    3. Fare clic sulla scheda "Tema".
    4. All'interno di "Aggiungi tag prima di navigazione del gruppo" Area inserire questo codice:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Ora - ricaricare la pagina - e il vostro menu principale di navigazione orizzontale "magicamente" diventato buio, qualcosa del genere:
       

       Tema Thesis - multilivello nested menù CSS - tavolozza scura

       Tavolozza di colore scuro può essere più adatto per alcuni siti che il colore una luce. Così ora avete una libertà di scelta nella vostra vita!

    6. Per tornare alla combinazione di colori "brillante" - basta svitare sopra passi "bonus".
16. Conclusione:
    Amo tema della tesi, amo WordPress e mi piace il fatto che abbiamo un modo di aggiungere menu di navigazione decenti per i nostri portali.

$ 20

Buon divertimento!

Gleb Esman

Tagged as: menu gerarchico per wordpress , come costruire navigazione wordpress , menù multilivello per wordpress , menu di navigazione per wordpress , tema tesi , menù a tema tesi , tesi di laurea tema esercitazione , menu di wordpress , navigazione wordpress , wordpress menù nidificato