La búsqueda del menu verticale perfecta ...
Parte 1 de este esercitazione SE descrivere paso a paso el proceso de creación de I menu anidados multinivel orizzontale para WordPress Tema de Tesis . Parte 2 continuará para mejorar esta funcionalidad. Aquí vamos a añadir la version "oscura" del menú de navegación orizzontale y yo le enseñaremos Cómo cambiar entre "Brillante" y la version "dark". parte 2 es el superconjunto de la parte 1. INCLUYE toda la parte 1 + ANADE más cosas interesantes.
La idea principale que quería presentar es la adición de menu verticale di Tema de Tesis (y para WordPress en general). Yo estaba buscando muy flessibile, SEO amigable y menú múltiple verticale compatibile con el que explorador permita crear ONU número de ilimitado niveles de anidamiento .
WEB Tiene ONU montón Páginas de sobre el tema, pero cuando empecé un ProBar todas estas muestras - que o bien sé rompió, Cayo un pedazos, admite sólo número de limitado niveles Ó Sé portaba mal en Portones de Ballmer junksplorer 6 Finalmente llegué un probado. y de confianza menu di Dynamic Drive como sus muestras verticales resultó ser Un caso agradable que se adapte un mis esigenze estrictas. Tuve que Modificar de manera significativa, aunque para asegurarse de que encaja modelo Tesi.
La búsqueda de la perfección Continua ...
Pase cerca de 16 horas de búsqueda, montaggio, pruebas, fijación, limpieza y ajuste de CSS del menu verticale. Código js y 3/4 del tiempo lo pasamos por lo que es trabajar en MSIE 6.
De todas formas, yo estaba contento con el Resultado finale. Menú de navegación verticale Resultó Tiene los Mismos beneficios que el menú Tiene orizzontale.
Tener capacidad para agregar menu verticale es muy Importante alrededor del 70-80% de Los Portales en la web. Menu di horizontales han limitado "espacio" para dar cabida un muchas opciones de menu, pero menu verticale no tiene esta limitación y Seria de Gran ayuda . Así que aquí vamos.
Hay muchos escalones para que esto ocurra ya se han descrito en la parte 1 del tutorial di así que esto Hara que sea un poco más corto, pero CON resultados Mucho Mas ricos de la característica.
Así que aquí VA:
Costruire SEO friendly, verticale, de varios niveles, Menu jerárquicamente anidados para WordPress y el tema de Tesis. Paso a paso
(... Lo que nunca creyó posible ...)
- Instalar Plugin ejecutivo php y activarlo. Lo necesitaremos porque voy a usar PHP en el widget di de texto para emitir HTML Código de menu verticale ".
- Realice los pasos 1-6 de la parte 1 del Tutorial . Básicamente, usted necesita para instalar y activar el uso NAVT plug de construcción + visualmente su menú Asegúrese de que el nombre del menú del grupo es "menu1 'Este nombre está codificado.. it custom_functions.php
- Haga clic en el icono de "engranaje" para do grupo menu1 'para sus editar propiedades:
- Sigue los pasos 7,1 -7,3 de la parte 1 esercitazione para configurar "Opciones", "Pantalla" y la configuración de las pestañas "CSS".
- Ahora Haga clic en la pestaña "Temas" de este diálogo Vamos a sobreescribir serie de ajustes allí (SI ha seguido el paso 1) Esto está bien -.. No se pierde nada - pero se necesitan ESTOS cambios, ya que ha cambiado un poco Código de en el paso 1.
Se hace así necesario este diálogo debe ser rellenado:- Dentro del "Tema XPath:" área introducir el Código (que Ordena reemplazar cualquier Etiqueta CON estas clases):
.jquerycssmenu, .jqueryslidemenu - Ajuste "Acción" a "Reemplazar con"
- Dentro de "Añadir Etiquetas antes de la navegación del grupo" zona escriba este Código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "Añadir Etiquetas después de la navegación del grupo" zona escriba este Código:
<br style='clear: left' /></div> - Haga clic en [Guardar / Cerrar].
- Dentro del "Tema XPath:" área introducir el Código (que Ordena reemplazar cualquier Etiqueta CON estas clases):
- Ahora vaya al pannello di WordPress admin -> apariencia -> Widget.
- Arrastre widget di de "Texto" (desde el área Grande "disponibles Widgets") en la zona de "Barra laterale 1" a la derecha. Vamos a añadir Código en el widget di de texto que nos ayudará un materializar menu verticale.
NOTA: Supongo que tienes "Box 1" en la existencia Opciones de Tesis le Permite apagarlo - pero por el bien de este esercitazione vamos a hacer que sea.. - Una vez que arrastró y este widget di Solto - se abre Como Una Flor (me siento romántica ahora que la lucha ha terminado MSIE).
- En el área "Título" entrar "mejor menu verticale del mundo" ... Bueno, nessun tizio en utilizar su creatividad - que el texto Pasara por encima de su menu verticale recién nacido.
- En gran área para el texto - introducir este 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 el botón [Guardar], Haga clic en el enlace "Cerrar".
- Descarga actualizado de los archivos aqui .
Este archivo incluye:- Versión actualizada de "brillante" del menu orizzontale Código
- La versione "Dark" del menu orizzontale
- Códigos de los i menu verticales
- Versión actualizada de custom_functions.php
- Ahora que hay descomprimir el archivo y subirlo al directorio 'custom' de su Tema de Tesis.
Nota: si usted ha hecho cualquier personalizzazione Dentro custom_functions.php - que había necessidad de combinarlos Si no es así - nessun tizio en para sobrescribir con mi versión.. - Voila! Ahora usted puede Recargar do sitio web y ver lo mismo "brillante" del menu orizzontale + menu verticale neato en la barra laterale izquierda.
- Tarea BONUS: Vamos a cambiar "brillante" del menu orizzontale en el esquema de color "oscuro".
- Dentro de archivo custom_functions.php:
sustituir 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 un cabo Una línea y eliminando el comentario de La Otra. - Ahora ve un WordPress Admin-> Attrezzi-> Listas NAVT y haga clic en el icono antes mencionado "Attrezzi" para las editar propiedades de su grupo 'menu1'.
- Haga clic en la pestaña "Temas".
- Dentro de "Añadir Etiquetas antes de la navegación del grupo" zona escriba este Código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Ahora - Recargar la página - y el menú principale de navegación orizzontale "magicamente" se convirtió en oscuro, algo así:
Tema de Tesis - multinivel menú anidado CSS - paleta oscura
Paleta de color oscuro puede ser más adecuado para ciertos sitios que el color de la luz Uno. Así que ahora usted Tiene Una libertad de elección en su vida!
- Para volver al esquema de colore "brillante" - Simplemente deshacer los pasos Anteriores "bonus".
- Dentro de archivo custom_functions.php:
- Conclusione:
Me encanta Tema de Tesis, me encanta WordPress y me encanta el hecho de que tenemos UNA manera de Anadir i menu de NAVEGACION decente a nuestros Portales.
$ 20
Disfrute!
Gleb Esman
{Los comentarios sobre esta entrada están cerrados}
