La búsqueda para el menú perfecto ...
Esta es la parte 1 del tutorial
Parte 2 de este tutorial enseña cómo construir un menú vertical + paleta de color oscuro para el horizontal
Decidí tema de tesis, porque uno de mis clientes me ha informado sobre problemas de compatibilidad entre la tesis y mi sitio de wordpress MemberWing miembros plugin. Lo arreglé y luego decidió tomar una mirada más cercana a tesis y se tomó la molestia de ver videos en la página principal del sitio de la tesis principal - Diythemes.com.
Lo que más me impresionó es la atención al detalle, facilidad de uso y sobre todo - las características de SEO que son tan bien pensado.
Plugin de miembros MemberWing fue diseñado desde cero para los sitios de adhesión que tienen que sacar el jugo de SEO de lo posible. Así que fui a un montón de atención a multitud de mejoras SEO y perfecciones en MemberWing. Muchos de mis propios clientes se preguntan acerca de diferentes temas de usar y tener tema de que estaba tan bien SEO optimizados desde lo más profundo sería un complemento excelente para la adhesión a los empresarios del portal.
La combinación de los poderes de SEO de MemberWing con poderes de SEO de tema de tesis que dar lo mejor de las oportunidades de clasificación para mis clientes. Así que me tesis y jugar con él durante un día.
Es un excelente tema en todos los sentidos. La parte de navegación de que aunque es un poco limitado en sus funciones. A partir de la tesis de 1,5 + es un menú único nivel. Mi deseo siempre es ser capaz de personalizar la navegación tanto como sea necesario. Algunos sitios tienen sólo unas pocas páginas, muchos otros han de toneladas de páginas estáticas + infinidad de artículos y puestos de + un montón de categorías.
Así que en el mundo ideal que tiene la oportunidad de crear bonitas organizados jerárquicamente amigable menú de navegación del usuario es un deber. Derecho de tesis del palo tiene un buen aspecto de navegación, pero me di cuenta de que todos los sitios web basados en tesis están buscando como gemelos. Personalizar el menú de navegación de tesis no es realmente fácil, así que la mayoría de la gente simplemente dejarlo como está. No hay manera de cambiar el orden de las categorías en el menú o la posición en entre las páginas. Y de nuevo, la capacidad de crear estructuras de menús anidados falta. Así que me decidí a ver qué se podía hacer al respecto.
Después de probar cerca de la mitad de menú docena / plugins relacionados con la navegación puedo definir mi elección en Wordpress Plugin NAVT lista de navegación.
Plugin NAVT es esencialmente generador de lista no ordenada con súper lujo y un poco duro-a-figura la interfaz de administración no tradicionales. Lo engañoso de todo es que en realidad no crear menús de lujo en busca de sí mismo. Lo hace la parte más difícil del trabajo bien - le da una capacidad visual a reunir, y generar una lista no ordenada - esqueleto de su menú-a-ser. Y usted puede crear los menús de muchos también. Usted puede tirar todo tipo de cosas de Wordpress en el menú de navegación: páginas, posts, artículos, categorías, los usuarios, los bloques de código, los enlaces externos, divisores, separadores y mezclar y combinar y anidan y organizar y personalizar en cualquier estructura de árbol que querer.
NAVT genera para que resultó la lista del HTML desordenada. La belleza de la Segunda NAVT es que te ayuda a insertar el nuevo menú en su tema a través de la lógica basada en JQuery famoso, pero sin necesidad de modificar el código! NAVT le permite especificar: "sustituir este elemento # con mi menú NAVT nuevo". # elemento podría ser un ID de clase o de la trayectoria de menú existente o la etiqueta de elemento div que está siendo generado por su tema actual. Así NAVT hace esta sustitución para usted sin forzar a ir en el código de tema y hacerlo más complicado de lo que ya es. Si todo esto suena un galimatías - No te preocupes - me guiará paso a paso pronto. La parte difícil de NAVT para todos es que usted tendrá que venir para arriba con CSS real + imágenes + código de JavaScript para su menú de ti mismo. Y es a usted a averiguar dónde y cómo integrar estos archivos y hacer estas cosas correctamente conectar juntos.
Sinceramente, sin saber algunos JQuery + PHP + CSS + experiencia decente teniendo con Wordpress - esto es difícil de tirar.
Con mucho gusto yo sé estas cosas un poco, así que decidí hacer de tripas corazón y la guía de la humanidad a la libertad en la construcción del mejor de los mejores menús de navegación para Wordpress. Sólo necesitaba para averiguar las fuentes de algunas buenas horizontal buscando menús CSS. Cogí web impulso dinámico de sus mejores selecciones, demos y fuentes.
Me dedicó un día al estudio de tesis y jugar con el plugin NAVT. Al final he creado con orgullo personalizado, flexible, SEO optimizados, de múltiples niveles, la estructura anidada nagivation de un sitio basado en Wordpress + Tesis.
Lista de funciones de menú de niveles múltiples, anidados de navegación para Wordpress Tema de tesis
(You Got to love this stuff):
- Profesional, la mirada limpia y se siente.
- Soporte para todos los navegadores modernos, incluyendo 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome en JavaScript y no tanto en los modos de javascript.
- Gracia downgradable para navegadores no javascript. Usted menú será utilizable, una similitud visual y de trabajo, incluso para navegadores JavaScript desactivado (aunque sólo sea de navegación de alto nivel será visible y no flyouts va a pasar, por supuesto, siempre que estén constituidos por javascript).
- Características SEO friendly - desordenada código de menú lista se genera dentro del HTML. Google y otras arañas de los motores de búsqueda será capaz de índice de su estructura de navegación y encontrar enlaces a páginas interiores.
- Apoyo a los niveles de anidamiento ilimitado y subniveles.
- Soporte para cualquier fin o páginas, mensajes (definidos por el usuario a través de URIs), las categorías, los usuarios, los bloques de código personalizado y enlaces externos en el menú.
- Soporte de texto-así como la imagen basada en elementos de menú. (Todavía tengo que probar estas sin embargo).
- Estructura de menús y el contenido visual es ajustable mediante el área de administración NAVT.
- Compacto: flyouts JQuery base para los niveles anidados.
- Rápido: jQuery para el menú se carga desde los servidores de Google (me encantaría propia tesis a hacer lo mismo en vez de tirar de forma local). Esto podría acelerar las cosas un poco.
- Escalabilidad - Este tipo de menú es editable y configurable en cualquier momento mediante la configuración de plug-in NAVT sin necesidad de codificación en cualquier lugar.
Yo este menú excelente portal de conducción dinámica como base. Tuve que personalizar el código Javascript un poco, así como incluir trozo de PHP en custom_functions.php para que funcione con la tesis. También el número de páginas pre-existentes, las categorías y puestos de mi sitio web se utiliza para ensamblar la estructura de menú. Su sitio será específicos diferentes - pero los conceptos será el mismo.
Así que adelante, ¿de acuerdo?
Instrucciones paso a paso a NAVT de configuración basado en SEO anidados, personalizable, de múltiples niveles, amistoso
y simplemente genial mirando el menú de navegación para Wordpress y tesis Tema
- Ir al panel de administración de Wordpress. Plugins-> Agregar nuevo, busque "navt". El plugin se mostrará. Haga clic en [Instalar], [Instalar ahora], "Activar plugin".
- Herramientas-> Listas NAVT, Inside "zona de navegación por el grupo" encontrar "el nombre del grupo" y escriba: "menu1" en el campo, pulse [Crear] el botón. "Menu1" área rectangular se creó.
Este "menu1" zona será el patio principal para la construcción de menú. Usted será arrastrar y colocar aquí los elementos de menú. - En los "activos" zona de encontrar "otro" cuadro de lista y haga clic en "Inicio elección". "Home" thingie aparecerá dentro de "asignar" la zona. Raro, ¿eh? No se preocupe, siempre y cuando las obras - y será para nosotros.
- Arrastra este "Home" thingie de "activos" en la zona "menu1" área rectangular. Se convertirá en "Home" en el menú.
- Repita los pasos 3-4 para algunas páginas de "Páginas de la zona", así como para las categorías de "categorías" de la zona. Arrastre cualquier otro elemento que desee estar en el menú de su interior "menu1" rectángulo. Puede hacer clic en las páginas, las categorías, los usuarios y algunos elementos personalizados, como "divisor de la lista" y "bloque de código". Bloque de código es la forma fría para añadir fragmentos de costumbre dentro del menú.
- Usted puede arrastrar los elementos de menú dentro de "menu1" área para cambiar su orden.
- Usted puede ajustar la posición jerárquica de cada elemento del menú con "<" y ">" flechas.
- Al hacer clic en el nombre de texto de cada elemento de menú - se abre la mente alucinante adicionales de personalización de diálogo para este tema. I utiliza sobre todo por defecto, pero técnicamente puede volverse loco y empezar a hacer la imagen basada en opciones de menú y añada trozos de código HTML en él. Proceda con precaución cuando.
- Para linkless submenús unclikable que servirá como "padres" de otras sub "niños de" Yo "bloque" Código de tipo. Por ejemplo cuando se personaliza como elemento de bloque de código que entré para "alias elemento de menú" = "MemberWing" y para "Enter bloque de código:" = "<a href='#'> MemberWing </ a>". Habiendo href = "#" hará que no puede hacer clic, pero actuando como un padre válida "" opción de menú.
- Aquí es cómo mi NAVT 'menu1' construir una estructura que parecía casi terminada:
- Finalizar la construcción inicial y luego haga clic en "engranaje" icono para personalizar la estructura de su menú:
- Se abrirá el diálogo con 4 pestañas: Opciones de visualización, CSS, Tema.
- Ir a la pestaña "Opciones" y asegurarse de que todo está sin control y "el nombre del grupo", dice: "menu1"
- Ir a la pestaña "Pantalla" y asegurarse de que todo el "grupo de navegación ... Mostrar en el área" está marcada [x]. Deja el resto en valores predeterminados.
- Ir a la pestaña "CSS" y seleccione el botón de radio (x) "no se aplican las clases CSS".
- Ir a la pestaña "Tema" rellenando el formulario así:
Insertar en "Agregar etiquetas antes de ..." zona de este código:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Insertar en "Agregar etiquetas después de ..." zona de este código:
<br style='clear: left' /></div> - Pulse [Guardar / Close]
- En este edificio desde el punto de menú Opciones de plug-NAVT es completa.
Ahora es el momento de hacer una pequeña melodía para tema de tesis para dejarlo listo. Para eso necesitamos añadir un archivo personalizado pocos - CSS y JavaScript que pertenece al menú y actualización custom_functions.php tesis " - Descargar el juego completo de los archivos aquí.
- Archivo Descomprimir. Si ha actualizado su custom_functions.php con las personalizaciones - usted necesidad de fusionar con mis cosas. Voy a dejar a usted.
Si usted no ha tocado - siéntase libre para sobrescribir con la mía. Tenga en cuenta: he preferido a la posición de menú bajo el encabezado de página web (por defecto es arriba) - por lo que mi adaptación incluido esta preferencia también. - Subir archivo incluyendo todos los subdirectorios y archivos bajo su tema de tesis directorio 'custom', como este:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
No he tocado custom.css - Yo prefiero mantener menú CSS específicas en sus propios lugares para evitar crear confusión dentro de custom.css - En este punto usted puede recargar su sitio web y ver el menú nuevo y hermoso nuevos niveles, anidados, SEO optimizado.
- Usted siempre puede volver a la configuración de NAVT y personalizar el menú con más opciones, o colocar cualquier cosa. Que se verá reflejado en el sitio en vivo de forma automática.
El camino por recorrer ...
Este tutorial incluido ejemplo creativo de un tipo de menú. Jugué con otra - sólo para ver cómo el menú de color oscuro se vería así:
Tema de tesis - de varios niveles de menú CSS anidados - Dark paleta de
Creo que es bastante agradable. Hay muchas muestras de navegación más disponible en Dynamic Drive - todos ellos son posibles de personalizar para tesis y otros temas de Wordpress con un poco de esfuerzo:
Dynamic Drive Horizontal Menús
Espero que encontrarás en este tutorial beneficiosa y útil. Como he dicho, es posible personalizar cualquiera de estos menús para tesis - que se da el tiempo y el deseo de hacer que suceda.
Que podía hacer este trabajo para usted en una base contractual. Simplemente elija el menú que desea, póngase en contacto conmigo y yo trabajo en el código y las instrucciones para su sitio web.
$ 20
Y, por supuesto, si usted está hasta la construcción de SEO super optimizada wordpress portal de la membresía premium - la mejor solución para esto:
Tema de tesis + MemberWing plugin pertenencia + Alojamiento propio Wordpress, por supuesto.
