La búsqueda para el 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 tema de tesis de WordPress . 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 voy a 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 interesantes.
La idea principal que yo quería presentar es la adición de menú vertical de tema de tesis (y WordPress en general). Yo estaba buscando realmente flexible, SEO amigable y multi-navegador compatible con el menú vertical que permite crear un número ilimitado de niveles de anidamiento.
WEB tiene un montón de páginas sobre el tema, pero cuando empecé a probar todos estos ejemplos - que o bien se vino abajo, derrumbado, con el apoyo sólo número limitado de niveles o de mal comportamiento en las puertas + Ballmer junksplorer 6. Finalmente llegué a juzgados 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 modificarlos de manera significativa, aunque para asegurarse de que se ajusta al modelo de tesis.
La búsqueda de la perfección sigue ...
Pasé alrededor de 16 horas de búsqueda, montaje, pruebas, fijar, pulir y afinar CSS menú vertical y. Código JS y 3/4 del tiempo se dedicó a hacer que funcione en MSIE 6.
De todas formas, yo estaba feliz con el resultado final. Menú de navegación vertical resultado tiene los mismos beneficios que el menú horizontal tiene.
Tener capacidad de agregar menú vertical es muy importante alrededor del 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 tienen esta limitación y que ayudaría enormemente. Así que aquí vamos.
Muchos de los pasos para que esto ocurra ya se han descrito en la parte 1 del tutorial así que esto lo hará por uno poco más corto, pero con resultados mucho más ricos en funciones.
Así que aquí va:
Edificio SEO, vertical, menús multinivel, jerarquizados para 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 ".
- Realice los pasos 1 a 6 de la parte 1 del tutorial . Básicamente lo que necesita para instalar y activar utilizar el plugin NAVT + visual construir su menú. Asegúrese de que el nombre del grupo de menú es 'menu1'. Este nombre está codificada en custom_functions.php
- Haga clic en el 'arte' icono de la 'menu1' grupo para editar sus propiedades:
- Sigue los pasos 7,1 -7,3 de la parte 1 tutorial para configurar "Opciones", "Pantalla" y "CSS" ajustes de las fichas.
- Ahora haga clic en el "tema" de la pestaña de este diálogo. Vamos a sobreescribir número de ajustes de allí (si estado siguiendo el paso 1). Esto está bien - no se pierde nada - pero estos cambios son necesarios porque he cambiado un poco el código del paso 1.
Así es como este diálogo debe ser llenado en:- Dentro del "Tema xpath:" área de introducir este código (que manda para sustituir a cualquier etiqueta con estas clases):
.jquerycssmenu, .jqueryslidemenu - Ajuste "Acción" a "Reemplazar con"
- Dentro de "Agregar etiquetas antes de la navegación grupo de" área de introducir este código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "Añadir etiquetas de grupo después de la navegación" zona este código:
<br style='clear: left' /></div> - Haga clic en [Guardar / Cerrar] botón.
- Dentro del "Tema xpath:" área de introducir este código (que manda para sustituir a cualquier etiqueta con estas clases):
- Ahora ve al panel de administración de WordPress -> Apariencia -> Widgets.
- Arrastre "Texto" widget (a partir de la gran "widgets disponibles" de área) en la "barra lateral un" área de la derecha. Vamos a añadir un código en el widget de texto que nos ayudará a materializar menú vertical.
NOTA: Supongo que usted tiene "barra lateral 1" en la existencia. Opciones de tesis le permite apagarlo - sino por el bien de este tutorial vamos hacer que sea. - Una vez que arrastrar y soltar 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 mejor Mundial de menú vertical" ... Bueno, no dude en utilizar su creatividad - que el texto va a ir por encima de su menú vertical de los recién nacidos.
- En el área grande para el texto - ingrese 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 de menú vertical
- Versión actualizada de custom_functions.php
- Ahora hay que descomprimir el archivo y subirlo a la "costumbre" del directorio 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. - Voila! Ahora usted puede cargar su sitio web y ver lo mismo "brillante" en el menú horizontal + menú neato vertical en la barra lateral izquierda.
- Tarea BONUS: Que cambie "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 mencionada "engranaje" icono para editar las propiedades de su 'menu1' grupo.
- Haga clic en "Tema" ficha.
- Dentro de "Agregar etiquetas antes de la navegación grupo de" área de introducir este código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ahora - vuelva a cargar la página - y su menú principal de navegación horizontal "mágicamente" se convirtió en oscuro, algo así:
Tema de tesis - el menú de niveles múltiples anidado 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" de 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 varias formas de añadir menús decentes de navegación para nuestros portales.
$ 20
Disfrute!
Gleb Esman
{Los comentarios sobre esta entrada están cerrados}
