Hi per al menú vertical perfecta ...
Part 1 d'aquesta guia es descriu pas a pas el procés de construcció de menú horitzontal de diversos nivells niats de tema de tesi de WordPress . Part 2 continuarà per millorar aquesta funció. Aquí anem a afegir "fosc" de la versió del menú de navegació horitzontal i et vaig a ensenyar com canviar entre "brillant" i la versió "fosca". La part 2 és el superconjunt de la part 1. Inclou totes les de la part 1 + afegeix més coses interessants.
La idea principal que jo volia presentar és l'addició de menú vertical de tema de tesi (i WordPress en general). Jo estava buscant realment flexible, SEO amigable i multi-navegador compatible amb el menú vertical que permet crear un nombre il · limitat de nivells d'anidamiento.
WEB té un munt de pàgines sobre el tema, però quan vaig començar a provar tots aquests exemples - que o bé es va enfonsar, ensorrat, amb el suport només nombre limitat de nivells o de mal comportament a les portes + Ballmer junksplorer 6. Finalment vaig arribar a jutjats i de confiança menús Dynamic Drive com les seves mostres verticals resultar ser un bon cas que s'adapti a les meves necessitats estrictes. Vaig haver de modificar-los de manera significativa, encara que per assegurar-se que s'ajusta al model de tesi.
La recerca de la perfecció segueix ...
Vaig passar al voltant de 16 hores de recerca, muntatge, proves, fixar, polir i afinar CSS menú vertical i. Codi JS i 3/4 del temps es va dedicar a fer que funcioni en MSIE 6.
De tota manera, jo estava feliç amb el resultat final. Anar al web vertical resultat té els mateixos beneficis que el menú horitzontal té.
Tenir capacitat d'agregar 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ò el menú vertical no tenen aquesta limitació i que ajudaria enormement. Així que aquí anem.
Molts dels passos perquè això passi ja s'han descrit en la part 1 del tutorial així que això ho farà per un poc més curt, però amb resultats molt més rics en funcions.
Així que aquí va:
Edifici SEO, vertical, menús multinivell, jerarquitzats per WordPress i el tema de tesi. Pas a pas
(... El que mai va creure possible ...)
- Instal · lar plugin del PHP executiu i que s'activi. Nosaltres el necessitem, perquè vaig a utilitzar PHP dins del giny de text per emetre el codi HTML del menú vertical ".
- Feu els passos 1 a 6 de la part 1 del tutorial . Bàsicament el que necessita per instal · lar i activar utilitzar el plugin NAVT + visual construir el seu menú. Assegureu-vos que el nom del grup de menú és 'menu1'. Aquest nom està codificada en custom_functions.php
- Feu clic al 'art' icona de la 'menu1' grup per editar les seves propietats:
- Segueix els passos 7,1 -7,3 de la part 1 tutorial per configurar "Opcions", "Pantalla" i "CSS" ajustos de les fitxes.
- Ara feu clic al "tema" de la pestanya d'aquest diàleg. Anem a sobreescriure nombre d'ajustos d'allí (si estat seguint el pas 1). Això està bé - no es perd res - però aquests canvis són necessaris perquè he canviat una mica el codi del pas 1.
Així és com aquest diàleg ha de ser omplert a:- Dins del "Tema xpath:" àrea d'introduir aquest codi (que mana per substituir qualsevol etiqueta amb aquestes classes):
.jquerycssmenu, .jqueryslidemenu - Ajust "Acció" a "Reemplaça amb"
- Dintre de "Afegeix etiquetes abans de la navegació grup de" àrea d'introduir aquest codi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dins de "Afegeix etiquetes de grup després de la navegació" zona aquest codi:
<br style='clear: left' /></div> - Feu clic a [Desa / Cerrar] botó.
- Dins del "Tema xpath:" àrea d'introduir aquest codi (que mana per substituir qualsevol etiqueta amb aquestes classes):
- Ara cita en el panell d'administració de WordPress -> Aparença -> Widgets.
- Arrossegament "Text" widget (a partir de la gran "widgets disponibles" d'àrea) a la "barra lateral una" àrea de la dreta. Anem a afegir un codi en el giny de text que ens ajudarà a materialitzar menú vertical.
NOTA: Suposo que vostè té "barra lateral 1" en l'existència. Opcions de tesi li permet apagar - sinó pel bé d'aquest tutorial anem fer que sigui. - Una vegada que arrossegar i deixar anar aquest giny - s'obre com una flor (em sento romàntica ara que ha acabat la lluita MSIE).
- A "Títol" àrea d'entrar en "el millor Mundial de menú vertical" ... Bé, no dubteu a utilitzar la seva creativitat - que el text anirà per sobre del seu menú vertical dels nadons.
- A l'àrea gran per al text - introduïu el 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;
?> - Premeu [Guardar], feu clic a "Tancar" link.
- Descarregar actualitzat dels arxius aquí .
Aquest arxiu inclou:- Versió actualitzada de "brillant" codi de menú horitzontal
- "Fosc" versió del menú horitzontal
- Codis de menú vertical
- Versió actualitzada de custom_functions.php
- Ara cal descomprimir l'arxiu i pujar-lo a la "costum" del directori del seu tema de tesi.
Nota: si vostè ha fet totes les personalitzacions a l'interior custom_functions.php - que havia necessitat de combinar-los. Si no és així - no dubteu a sobreescriure amb la meva versió. - Voila! Ara vostè pot carregar el seu lloc web i veure el mateix "brillant" al menú horitzontal + menú neato vertical a la barra lateral esquerra.
- Tasca BONUS: Que canviï "brillant" al menú horitzontal en l'esquema de "fosc" de color.
- Dins de l'arxiu custom_functions.php:
reemplaçar 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 una línia i habilitant l'altre. - Ara veu a WordPress Admin-> Eines-> Llistes NAVT i feu clic a esmentada "engranatge" icona per editar les propietats del seu 'menu1' grup.
- Feu clic a "Tema" fitxa.
- Dintre de "Afegeix etiquetes abans de la navegació grup de" àrea d'introduir aquest codi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ara - torni a carregar la pàgina - i el seu menú principal de navegació horitzontal "màgicament" es va convertir en fosc, alguna cosa així:
Paleta de color fosc poden ser més adequats per a certs llocs que el color de la llum. Així que ara vostè té una llibertat d'elecció en la seva vida!
- Per tornar a l'esquema de "brillant" de color - només desfer per sobre de "bonus" passos.
- Dins de l'arxiu custom_functions.php:
- Conclusió:
M'encanta tema de tesi, m'encanta WordPress i m'encanta el fet que tenim diverses formes d'afegir menús decents de navegació per als nostres portals.
20 $
Gaudiu!
Gleb Esman
{Els comentaris sobre aquesta entrada estan tancats}





