La búsqueda del menú vertical perfecta ...
Parte 1 de esta guía se describe paso a paso el proceso de construcción de menú horizontal de varios niveles anidados de Tesis WordPress Tema . Parte 2 continuará para mejorar esta función. Aquí vamos a añadir "oscuro" de la versión del menú de navegación horizontal y te enseñaré cómo cambiar entre "brillante" y la versión "oscura". La parte 2 es el superconjunto de la Parte 1. Incluye todas las de la Parte 1 + añade más cosas cool.
La idea principal que quería presentar es la adición de menú vertical de tema de tesis (y Wordpress en general). Yo estaba buscando realmente flexible, SEO friendly y multi-navegador compatible menú vertical que permite crear un número ilimitado niveles de anidamiento.
WEB tiene un montón de páginas sobre el tema, pero cuando empecé a probar todas estas muestras - o bien se vino abajo, derrumbado, con el apoyo sólo número limitado de niveles o de mal comportamiento en Gates + Ballmer junksplorer 6. Finalmente llegué a probados y de confianza menús Dynamic Drive como sus muestras verticales resultó ser un buen caso que se adapte a mis necesidades estrictas. Tuve que modificar de manera significativa a pesar de asegurarse de que encaja el modelo de tesis.
La búsqueda de la perfección sigue ...
Pasé alrededor de 16 horas de búsqueda, montaje, pruebas, fijar, pulir y puesta a punto CSS menú vertical y. Js código y 3 / 4 del tiempo se dedicó a hacer que funcione en MSIE 6.
De todas formas, estoy contento con el resultado final. Menú de navegación vertical ha dado todos los beneficios que tiene el menú horizontal.
Tener capacidad de agregar menú vertical es muy importante para el 70-80% de los portales en la web. Menús horizontales han limitado "espacio" para dar cabida a muchas opciones de menú, pero el menú vertical no tiene esta limitación y que ayudaría muchísimo. Así que aquí vamos.
Un montón de pasos para que esto ocurra ya se han descrito en la parte 1 del tutorial así que esto lo hará por una un poco más corto, pero con resultados mucho más ricos disponen.
Así que aquí va:
La construcción de SEO, vertical, menú de niveles múltiples, jerarquizados por Wordpress y el tema de tesis . Paso a paso
(... Lo que nunca creyó posible ...)
- Instalar plugin de php ejecutivo y que se active. Nosotros lo necesitamos, porque voy a usar PHP dentro del widget de texto para emitir el código HTML del menú vertical ".
- Siga los pasos 1 a 6 de la parte 1 del tutorial . Básicamente lo que necesita para instalar y activar el uso plugin de NAVT + visualmente crear su menú. Asegúrese de que el nombre del grupo de menú 'menu1'. Este nombre está codificada en custom_functions.php
- Haga clic en el 'equipo' icono de la 'menu1' grupo para editar sus propiedades:
- Sigue los pasos 7,1 -7,3 de la parte 1 tutorial para configurar "Opciones", "Display" y "CSS" pestañas de configuración.
- Ahora haga clic en el "tema" pestaña de este diálogo. Vamos a sobreescribir número de ajustes de allí (si has estado siguiendo el paso 1). Esto está bien - no se pierde nada - pero estos cambios son necesarios porque he cambiado algo de código desde el paso 1.
Así es como este diálogo tiene que ser completa:- En el interior de "Tema xpath:" área de introducir este código (que comandos para sustituir a cualquier etiqueta con estas clases):
.jquerycssmenu, .jqueryslidemenu - Conjunto "de acción" a "Reemplazar con"
- Dentro de "Agregar etiquetas antes de la navegación del grupo" zona de introducir este código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "Agregar etiquetas después de la navegación del grupo" área de introducir este código:
<br style='clear: left' /></div> - Haga clic en [Guardar / Cerrar] botón.
- En el interior de "Tema xpath:" área de introducir este código (que comandos para sustituir a cualquier etiqueta con estas clases):
- Ahora ve al panel de administración de Wordpress -> Apariencia -> Widgets.
- Arrastre "Texto" flash (de los grandes "widgets disponibles" zona) en "Sidebar una" zona de la derecha. Vamos a añadir código en el widget de texto que nos ayudará a materializar el menú vertical.
NOTA: Supongo que tiene "una barra lateral" de la existencia. Las opciones de tesis le permite apagarlo - pero por el bien de este tutorial vamos hacer que sea. - Una vez que arrastrar y colocar este widget - se abre como una flor (me siento romántica ahora que ha terminado la lucha MSIE).
- En "Título" área de entrar en "El Mundo es el mejor menú vertical" ... Bueno, no dude en utilizar su creatividad - que el texto pasará por encima de su menú de recién nacidos vertical.
- En el área grande de texto - introduzca el código 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;
?> - Pulse [Guardar], haga clic en "Cerrar" link.
- Descargar actualizado de los archivos aquí .
Este archivo incluye:- Versión actualizada de "brillante" código de menú horizontal
- "Oscuro" versión del menú horizontal
- Códigos verticales menú
- Versión actualizada de custom_functions.php
- Ahora tienes que descomprimir el archivo y subirlo a la 'costumbre' de su tema de tesis .
Nota: si usted ha hecho todas las personalizaciones en el interior custom_functions.php - que había necesidad de combinarlos. Si no es así - no dude en sobrescribir con mi versión. - ¡Voilá! Ahora usted puede recargar su sitio web y ver lo mismo "brillante" en el menú horizontal + menú neato vertical en la barra lateral izquierda.
- Tarea BONUS: Vamos a cambiar "brillante" en el menú horizontal en el esquema de "oscuro" de color.
- Dentro del archivo custom_functions.php:
reemplazar este código:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
con este código:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Básicamente estamos comentando una línea y habilitando el otro. - Ahora ve a Wordpress admin-> Herramientas-> Listas NAVT y haga clic en el mencionado "engranaje" icono para editar las propiedades de su 'menu1' del grupo.
- Haga clic en "Theme" ficha.
- Dentro de "Agregar etiquetas antes de la navegación del grupo" zona de introducir este código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ahora - Actualizar la página - y su menú principal de navegación horizontal "mágicamente" se convirtió en oscuro, algo así:
Tema de tesis - menú de varios niveles anidados CSS - paleta oscura
Paleta de color oscuro pueden ser más adecuados para ciertos sitios que el color de la luz. Así que ahora usted tiene una libertad de elección en su vida!
- Para volver al esquema de "brillante" color - sólo deshacer por encima de "Bonus" pasos.
- Dentro del archivo custom_functions.php:
- Conclusión:
Me encanta tema de tesis , me encanta Wordpress y me encanta el hecho de que tenemos una manera de añadir menús de navegación decente a nuestros portales.
$ 20
Disfrute!
Gleb Esman
comments } { 5 comentarios }
