La ricerca per il menu verticale perfetta ...
Parte 1 di questa esercitazione descritto processo graduale di costruzione di menu orizzontale multilivello nidificata per il tema Thesis WordPress . Parte 2 continuerà a migliorare questa funzionalità. Qui si aggiunge la versione "dark" del menu di navigazione orizzontale e ti insegnerò come passare da una "brillante" e la versione "dark". Parte 2 è il superset della parte 1. Esso comprende tutto dalla parte 1 + aggiunge più cool stuff.
L'idea principale che ho voluto presentare è l'aggiunta di menu verticale al tema della tesi (e WordPress in generale). Stavo cercando veramente flessibile, SEO friendly e multi-browser compatibile con menù verticale che permette 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, andato in pezzi, supportato solo un numero limitato di livelli o comportato male in + Gates junksplorer Ballmer 6. Finalmente sono tornato a fidati menu Dynamic Drive come i loro campioni verticali dimostrato di essere un bel caso che si adatta miei severi requisiti. Ho dovuto modificare il loro modo significativo anche se per assicurarsi che si adatta modello Tesi.
La ricerca della perfezione ... continua
Ho passato circa 16 ore alla ricerca, assemblaggio, collaudo, di fissaggio, la lucidatura e l'ottimizzazione CSS menu verticale e. Codice js e 3/4 del tempo è stato speso rende lavorare in MSIE 6.
Comunque, ero felice con il risultato finale. Portato menu di navigazione verticale ha gli stessi vantaggi che menu orizzontale ha.
Avere possibilità di aggiungere menu verticale è molto importante per circa il 70-80% di portali sul web. Menu orizzontali hanno limitato "spazio" per accogliere le scelte di menu, ma molti menu verticale non ha questa limitazione e sarebbe di grande aiuto. Quindi qui si va.
Un sacco di passaggi per farlo accadere sono già descritte nella parte 1 del tutorial quindi questo lo farà per un po 'più corta, ma con risultati molto più ricchi di funzionalità.
Quindi ecco qui:
Edificio SEO friendly, verticale, multilivello, menu gerarchicamente nidificato per WordPress e il tema della tesi. Passo dopo passo
(... Quello che non avete mai creduto possibile ...)
- Installare il plugin di php exec e attivarlo. Ci sarà bisogno perché userò PHP all'interno del widget di testo per creare codice HTML menu verticale '.
- Sei i passaggi 1 - 6 da parte 1 del tutorial . Fondamentalmente è necessario installare e attivare il plugin di utilizzare NAVT + visivamente costruire il vostro menu. Assicurarsi che il nome del gruppo di menu è 'menu1'. Questo nome è codificato in custom_functions.php
- Fare clic sull'icona 'marcia' per il gruppo 'menu1' per modificare le sue proprietà:
- Segue i passi di 7,1 -7.3 Parte 1 tutorial per impostare "Opzioni", "visualizzazione" e "CSS" Impostazioni schede.
- Ora cliccate sul tab "Tema" di questa finestra di dialogo. Noi sovrascrivere alcune impostazioni lì (se seguito passo 1). Questo è ok - non si perde nulla - ma questi cambiamenti sono necessari perché ho cambiato qualche codice dal punto 1.
Ecco come questo dialogo deve essere compilata:- All'interno di "Theme XPath:" area inserisci questo codice (che comanda di sostituire qualsiasi tag con queste classi):
.jquerycssmenu, .jqueryslidemenu - Impostare "Action" a "Sostituisci con"
- All'interno di "Aggiungi un tag prima dell'avvio della navigazione del gruppo" area immettere questo codice:
<div class='jquerycssmenu' style='margin-top:5px;'> - All'interno di "Aggiungi tag dopo di navigazione del gruppo" area immettere questo codice:
<br style='clear: left' /></div> - Fare clic su [salva / Chiudi].
- All'interno di "Theme XPath:" area inserisci questo codice (che comanda di sostituire qualsiasi tag con queste classi):
- Ora andate al pannello di WordPress admin -> Aspetto -> Widgets.
- Trascinate i widget di "Testo" (dal grande area "widgets disponibili") in area "Sidebar 1" sulla destra. Ci sarà l'aggiunta di codice nel widget di testo che ci aiuterà a materializzare menu verticale.
NOTA: Presumo che hai "Sidebar 1" in esistenza. Tesi opzioni consente di spegnerlo - ma per il bene di questo tutorial lasciare fare sia. - Una volta trascinati Questo widget - si apre come un fiore (mi sento romantica, ora che la lotta MSIE è finita).
- Nella zona di "Titolo" enter "migliore del mondo menu verticale" ... Beh, sentitevi liberi di usare la tua creatività - che il testo andrà sopra il menu appena nato verticale.
- 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;
?> - Premere il pulsante [Salva], fare clic sul link "Chiudi".
- Scarica aggiornato insieme di file qui .
Questo archivio comprende:- Versione aggiornata del codice "brillante" menu orizzontale
- La versione "Dark" del menu orizzontale
- I codici dei menu verticali
- Versione aggiornata di custom_functions.php
- Ora è necessario decomprimere l'archivio e caricarlo nella directory 'custom' del vostro tema Tesi.
Nota: se avete fatto tutte le personalizzazioni dentro custom_functions.php - avresti bisogno di unirle. In caso contrario - sentitevi liberi di sovrascrivere con la mia versione. - Voila! Ora si può ricaricare il vostro sito e vedere la stessa "brillante" menu orizzontale + menu neato verticale nella barra laterale sinistra.
- Compito BONUS: permette di cambiare menu "brillante" orizzontale sul sistema di "dark" del colore.
- Dentro il 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 una linea e commentando l'altra. - Ora vai a WordPress Admin-> Strumenti-> Elenchi NAVT e cliccare su cui sopra l'icona "marcia" per modificare le proprietà del vostro gruppo 'menu1'.
- Fare clic sulla scheda "Tema".
- All'interno di "Aggiungi un tag prima dell'avvio della navigazione del gruppo" area immettere questo codice:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ora - ricaricherà la pagina - e il vostro menu principale di navigazione orizzontale "magicamente" diventato buio, qualcosa di simile:
Tesi tema - multilivello menù nested CSS - palette scura
Tavolozza di colore scuro potrebbe essere più adatto per alcuni siti che il colore della luce. Così ora avete una libertà di scelta nella tua vita!
- Per tornare al regime di "brillante" color - basta annullare sopra "bonus" passi.
- Dentro il file custom_functions.php:
- Conclusione:
Amo Tema Tesi, amo WordPress e mi piace il fatto che abbiamo diversi modi per aggiungere menu di navigazione decenti ai nostri portali.
20 dollari
Buon divertimento!
Gleb Esman
{Commenti su questa voce sono chiusi}
