La recerca del menú vertical perfecta ...
Part 1 d'aquest tutorial es descriu pas a pas el procés de creació de menús niats multinivell horitzontal per WordPress tema de tesi . Part 2 continuarà per millorar aquesta funcionalitat. Aquí anem a afegir la versió "fosca" del menú de navegació horitzontal i jo li ensenyarem com canviar entre "brillant" i la versió "dark". Part 2 és el subconjunt de la part 1. Inclou tota la part 1 + afegeix més coses interessants.
La idea principal que volia presentar és l'addició de menú vertical de tema de tesi (i per WordPress en general). Jo estava buscant molt flexible, SEO amigable i menú vertical múltiple compatible amb el navegador que permeti crear un nombre il · limitat de nivells de niament.
WEB té un munt de pàgines sobre el tema, però quan vaig començar a provar totes aquestes mostres - que o bé es va trencar, va caure a trossos, admet només nombre limitat de nivells o es portava malament en portes de Ballmer junksplorer juny. Finalment vaig arribar a provat i de confiança menús Dynamic Drive com les seves mostres verticals resultar ser un cas agradable que s'adapti a les meves exigències estrictes. Vaig haver de modificar de manera significativa, encara que per assegurar-se que encaixa model Thesis.
La recerca de la perfecció continua ...
Vaig passar prop de 16 hores de recerca, muntatge, proves, fixació, neteja i ajust de CSS del menú vertical. Codi js i 3/4 del temps el passem pel que és treballar en MSIE 6.
De totes maneres, jo estava content amb el resultat final. Menú de navegació vertical resultar té els mateixos beneficis que el menú horitzontal té.
Tenir capacitat per afegir menú vertical és molt important al voltant del 70-80% dels portals a la web. Menús horitzontals han limitat "espai" per donar cabuda a moltes opcions de menú, però menú vertical no té aquesta limitació i seria de gran ajuda. Així que aquí anem.
Hi ha molts graons perquè això passi ja s'han descrit en la part 1 del tutorial així que això farà que sigui una mica més curt, però amb resultats molt més rics de la característica.
Així que aquí va:
Building SEO friendly, vertical, de diversos nivells, menú jeràrquicament niats per WordPress i el tema de tesi. Pas a pas
(... El que mai va creure possible ...)
- Instal · lar Plugin executiu php i activar-lo. El necessitarem perquè vaig a utilitzar PHP en el giny de text per emetre codi HTML de menú vertical ".
- Feu els passos 1 - 6 la part 1 del tutorial . Bàsicament, vostè necessita per instal lar i activar l'ús NAVT plugin de construcció + visualment el seu menú. Assegureu-vos que el menú del nom del grup és "menu1 '. Aquest nom està codificat en custom_functions.php
- Feu clic a la icona de "engranatge" per al seu grup menu1 'per editar les seves propietats:
- Segueix els passos 7,1 -7,3 de la part 1 tutorial per configurar "Opcions", "pantalla" i la configuració de les pestanyes "CSS".
- Ara feu clic a la pestanya "Temes" d'aquest diàleg. Anem a sobreescriure sèrie d'ajustos allà (si has seguit el pas 1). Això està bé - no es perd res - però es necessiten aquests canvis, ja que he canviat una mica de codi en el pas 1.
Es fa així necessari aquest diàleg ha de ser emplenat:- Dins del "Tema xpath:" àrea Introduir el codi (que ordena reemplaçar qualsevol etiqueta amb aquestes classes):
.jquerycssmenu, .jqueryslidemenu - Ajust "acció" a "Reemplaça amb"
- Dins de "Afegeix etiquetes abans de la navegació del grup" zona escrigui aquest codi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dins de "Afegeix etiquetes després de la navegació del grup" zona escrigui aquest codi:
<br style='clear: left' /></div> - Feu clic a [Desar / Tancar].
- Dins del "Tema xpath:" àrea Introduir el codi (que ordena reemplaçar qualsevol etiqueta amb aquestes classes):
- Ara aneu al tauler de WordPress admin -> Aparença -> Widgets.
- Arrossegament giny de "Text" (des de l'àrea gran "Ginys disponibles") a la zona de "Barra Lateral 1" a la dreta. Anem a afegir codi en el giny de text que ens ajudarà a materialitzar menú vertical.
NOTA: Suposo que tens "Sidebar 1" en l'existència. Opcions de tesi li permet apagar - però pel bé d'aquest tutorial farem que sigui. - Un cop arrossegar i deixar anar aquest giny - s'obre com una flor (em sento romàntica ara que la lluita ha acabat MSIE).
- A l'àrea "Títol" entrar "millor menú vertical del món" ... Bé, no dubteu a utilitzar la seva creativitat - que el text passarà per sobre del seu menú vertical nounat.
- En gran àrea per al text - introduir aquest codi 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;
?> - Premi el botó [Guardar], feu clic a l'enllaç "Tancar".
- Descarrega actualitzat dels arxius aquí .
Aquest fitxer inclou:- Versió actualitzada de "brillant" codi menu horitzontal
- Versió "Dark" del menú horitzontal
- Codis dels menús verticals
- Versió actualitzada de custom_functions.php
- Ara cal descomprimir l'arxiu i pujar-lo al directori 'custom' del seu tema de tesi.
Nota: Si vostè ha fet qualsevol personalització dins custom_functions.php - que havia necessitat de combinar-los. Si no és així - no dubti en per sobreescriure amb la meva versió. - Voila! Ara vostè pot recarregar el seu lloc web i veure el mateix "brillant" del menú horitzontal + menú vertical neato a la barra lateral esquerra.
- Tasca BONUS: Anem a canviar "brillant" del menú horitzontal en l'esquema de color "fosc".
- Dins d'arxiu custom_functions.php:
substituir aquest codi:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
amb aquest codi:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Bàsicament estem comentant a terme una línia i eliminant el comentari de l'altra. - Ara veu a WordPress Admin-> Eines-> Llistes NAVT i feu clic a la icona abans esmentat "eines" per editar les propietats del seu grup 'menu1'.
- Feu clic a la pestanya "Temes".
- Dins de "Afegeix etiquetes abans de la navegació del grup" zona escrigui aquest codi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ara - recarregar la pàgina - i el menú principal de navegació horitzontal "màgicament" es va convertir en fosc, una cosa així:
Paleta de color fosc pot ser més adequat per a certs llocs que el color de la llum un. Així que ara vostè té una llibertat d'elecció en la seva vida!
- Per tornar a l'esquema de color "brillant" - simplement desfer els passos anteriors "bonus".
- Dins d'arxiu custom_functions.php:
- Conclusió:
M'encanta tema de tesi, m'encanta WordPress i m'encanta el fet que tenim una manera d'afegir menús de navegació decent als nostres portals.
$ 20
Gaudiu!
Gleb Esman
{Els comentaris sobre aquesta entrada estan tancats}





