La recerca del menú vertical perfecta ...
Part 1 d'aquesta guia es descriu pas a pas el procés de construcció de menú horitzontal de diversos nivells imbricats de Tesi WordPress Tema . Part 2 continuarà per millorar aquesta funció. Aquí anem a afegir "fosc" de la versió del menú de navegació horitzontal i t'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 cool.
La idea principal que volia presentar és l'addició de menú vertical de tema de tesi (i Wordpress en general). Jo estava buscant realment flexible, SEO friendly i multi-navegador compatible menú vertical que permet crear un nombre il · limitat nivells d'anidamiento.
WEB té un munt de pàgines sobre el tema, però quan vaig començar a provar totes aquestes mostres - o bé es va enfonsar, ensorrat, amb el suport només nombre limitat de nivells o de mal comportament en Gates + Ballmer junksplorer 6. Finalment vaig arribar a provats 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 de manera significativa tot i assegurar-se que encaixa el model de tesi.
La recerca de la perfecció segueix ...
Vaig passar al voltant de 16 hores de recerca, muntatge, proves, fixar, polir i posada a punt CSS menú vertical i. Js codi i 3 / 4 del temps es va dedicar a fer que funcioni en MSIE 6.
De tota manera, estic content amb el resultat final. Menú de navegació vertical ha donat tots els beneficis que té el menú horitzontal.
Tenir capacitat d'agregar menú vertical és molt important per el 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 té aquesta limitació i que ajudaria moltíssim. Així que aquí anem.
Un munt de passos perquè això passi ja s'han descrit en la part 1 del tutorial així que això ho farà per una una mica més curt, però amb resultats molt més rics disposen.
Així que aquí va:
La construcció de SEO, vertical, menú de nivells múltiples, jerarquitzats per Wordpress i el tema de tesi . Pas a pas
(... El que mai va creure possible ...)
- Instal · lar plugin de php executiu i que s'activi. Nosaltres ho necessitem, perquè vaig a utilitzar PHP dins del giny de text per emetre el codi HTML del menú vertical ".
- Seguiu els passos 1 a 6 de la part 1 del tutorial . Bàsicament el que necessita per a instal · lar i activar l'ús plugin de NAVT + visualment crear el seu menú. Assegureu-vos que el nom del grup de menú 'menu1'. Aquest nom està codificada en custom_functions.php
- Feu clic al 'equip' 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", "Display" i "CSS" pestanyes de configuració.
- Ara feu clic al "tema" pestanya d'aquest diàleg. Anem a sobreescriure nombre d'ajustos d'allà (si has estat seguint el pas 1). Això està bé - no es perd res - però aquests canvis són necessaris perquè he canviat una mica de codi des del pas 1.
Així és com aquest diàleg ha de ser completa:- A l'interior de "Tema xpath:" àrea d'introduir aquest codi (que comandaments per substituir a qualsevol etiqueta amb aquestes classes):
.jquerycssmenu, .jqueryslidemenu - Conjunt "d'acció" a "Reemplaça amb"
- Dins de "Afegeix etiquetes abans de la navegació del grup" zona d'introduir aquest codi:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dins de "Afegeix etiquetes després de la navegació del grup" àrea d'introduir aquest codi:
<br style='clear: left' /></div> - Feu clic a [Desar / Tancar] botó.
- A l'interior de "Tema xpath:" àrea d'introduir aquest codi (que comandaments per substituir a qualsevol etiqueta amb aquestes classes):
- Ara cita en el panell d'administració de Wordpress -> Aparença -> Widgets.
- Arrossegament "Text" flash (dels grans "ginys disponibles" zona) en "Sidebar una" zona de la dreta. Anem a afegir codi en el giny de text que ens ajudarà a materialitzar el menú vertical.
NOTA: Suposo que té "una barra lateral" de l'existència. Les opcions de tesi li permet apagar - però pel bé d'aquest tutorial anem fer que sigui. - Una vegada que arrossegar i col · locar aquest widget - s'obre com una flor (em sento romàntica ara que ha acabat la lluita MSIE).
- A "Títol" àrea d'entrar a "El Món és el millor menú vertical" ... Bé, no dubti a utilitzar la seva creativitat - que el text passarà per sobre del seu menú de nadons vertical.
- A l'àrea gran de 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 [Desar], 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 verticals menú
- Versió actualitzada de custom_functions.php
- Ara has de descomprimir l'arxiu i pujar-lo a la 'costum' 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 dubti en sobreescriure amb la meva versió. - ¡Voilà! Ara vostè pot recarregar el seu lloc web i veure el mateix "brillant" al menú horitzontal + menú neat vertical a la barra lateral esquerra.
- Tasca BONUS: Anem a canviar "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 en l'esmentat "engranatge" icona per editar les propietats del seu 'menu1' del grup.
- Feu clic a "Theme" fitxa.
- Dins de "Afegeix etiquetes abans de la navegació del grup" zona d'introduir aquest codi:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ara - Actualitzar la pàgina - i el seu menú principal de navegació horitzontal "màgicament" es va convertir en fosc, una cosa així:
Tema de tesi - menú de diversos nivells imbricats CSS - paleta fosca
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" 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 una manera d'afegir menús de navegació decent als nostres portals.
20 $
Gaudiu!
Gleb Esman
comments } { 5 comentaris }
