A todo o menú perfecto ...

Esta é a parte 1 do tutorial
Parte 2 deste tutorial ensina como crear menú vertical + paleta de cores escuras para a horizontal

Eu decidir ir tema de tese, porque un dos meus clientes me informou sobre os problemas de compatibilidade entre Tese e meu WordPress adhesión MemberWing plugin sitio. Eu fixo-lo e daquela decidimos dar un ollo á tese e realmente se preocupou en asistir vídeos na páxina principal do Sitio Web tese principal - Diythemes.com.
O que me impresionou a máis é a atención aos detalles, facilidade de uso e, por riba de todo - SEO que están tan ben pensado.
Extensión adhesión MemberWing foi deseñado desde o principio para adhesión sitios que sería necesario para puxar o zume de SEO tanto como sexa posible. Entón eu paguen moita atención a multitude de melloras SEO e perfeições en MemberWing. Moitos dos meus propios clientes están pregunta sobre diferentes temas de usar e con tema que foi tan ben SEO óptimo do interior profundo sería un axuste excelente para adherirse empresarios portal.

Combinando os poderes de SEO MemberWing con poderes de SEO tema Tese daría o mellor das oportunidades de clasificación para os meus clientes. Entón, eu teño de Teses e chanceou con el por un día.

É un excelente tema de todas as maneiras. A parte de navegación que aínda que sexa un pouco limitado a función. A partir de Tese de 1,5 + é un menú de nivel só. O meu desexo habitual é ser capaz de adaptar a navegación, tanto como sexa necesario. Algúns sitios teñen só algunhas páxinas, moitos outros teñen de toneladas de páxinas estáticas + zilhões de artículos / posts + lotes de categorías.
Así, no mundo ideal, tendo a oportunidade de crear boa aparencia organizada xerarquicamente menú de navegación do usuario agradable é unha obriga. Tese de dereito fóra do bastón ten bo aspecto de navegación, pero eu notei que todas as Teses de sitios baseados están mirando como xemelgos. Personalizando o menú de navegación Tese realmente non é fácil para a maioría da xente simplemente deixar como está. Non hai ningunha forma de cambiar a orde das categorías no menú ou posiciónase-los entre as páxinas. E, de novo, a capacidade de crear estruturas aniñados menú está en falta. Entón eu decidín ver o que podería ser feito sobre iso.
Despois de tentar preto de media ducia de menú / navegación plugins relacionados define miña elección en lista de navegación WordPress Plugin TAVN.
TAVN plugin é esencialmente xerador de lista ordenada con super chique e un pouco difícil de figura interface de administración non tradicional. Erro sobre o que é que realmente non crear menús de fantasía buscando por si só. El fai a parte máis difícil do traballo que - dálle unha capacidade de reunir visual, e xerar unha lista ordenada - esqueleto seu menú a ser. E podes crear menús de moitos tamén. Podes puxar todos os tipos de cousas WordPress no menú de navegación: páxinas, posts, artigos, categorías, usuarios, bloques de código, ligazóns externas, anteparos, separados e mesturar e combinar e niño e organizar e personalizar-los en calquera estrutura de árbore ten querer.
TAVN xera para ti resultou HTML lista, ordenada. Segundo a beleza de TAVN é que axuda a introducir o novo menú no seu tema a través JQuery famosa base lóxica, pero sen necesidade de alterar o código! TAVN permite especificar: "substituír este elemento # co meu menú TAVN novo". # Elemento podería ser unha id ou clase de camiño de menú existe o tag DIV elemento que está sendo xerado polo seu tema actual. Así TAVN fai isto para vostede substitución sen forza-lo a ir para o código do tema e facelo máis confuso do que xa é. Se iso todo soa como xerga - non se preocupe - Eu vou guía-lo paso a paso en breve. A parte reto de TAVN para todos é que vai ter que vir cara arriba con imaxes reais + CSS + código JavaScript para o seu menú de si mesmo. E é ata a descubrir onde e como integrar eses arquivos e facer isto correctamente estar conectado xunto.
Sinceramente, sen saber algúns JQuery + PHP + CSS + con experiencia decente con WordPress - isto é difícil de puxar.
Alegría sei que isto unha excursión así que eu decidir morder a burbulla e guiar a humanidade para a liberdade na creación de mellores do mellores menús de navegación para WordPress. Eu só precisaba atopar fontes para algúns mirando agradable menús horizontais CSS. Eu escollín website unidade dinámica das súas mellores seleccións, demos e fontes.

Dediques un día para o estudo de Teses e xogar con extensión TAVN. Ao final eu orgullosos creado personalizado, flexible, SEO óptimo, con varios niveis, a estrutura aninhado funcionalidade da navegación para o meu WordPress sitio Tese + base.

Lista de recursos de varios niveis de menú de navegación, aninhado WordPress para Teses theme
(You got to love this stuff):

• Profesional, clean look and feel.
• Soporte para todos os navegadores modernos, incluíndo MSIE 6,7, Opera, Safari, Firefox 3.x, o Google Chrome en JavaScript e os modos non javascript.
• Graciosamente desactualizados para navegadores non-JavaScript. Vostede menú será utilizable, visualmente similares e de traballo, mesmo para navegadores Javascript deshabilitado (aínda que só a navegación de nivel superior serán visibles e non flyouts vai ocorrer naturalmente como son feitas por JavaScript).
• Características SEO amigable - o código do menú unordered lista vén dentro do HTML. Google e arañas outro motor de procura serán capaces de indexar súa estrutura de navegación e atopar enlaces a páxinas internas.
• Soporte para ilimitada niveis de aninhado e subníveis.
• Soporte para calquera fin ou páxinas, artigos (definidos polo usuario a través de URI), categorías, usuarios, bloques de código personalizado e ligazóns externas do menú.
• Soporte de texto-imaxe, así como nos elementos do menú. (Aínda estou a tratar estes aínda).
• Estrutura de menús e contidos é visualmente axustable mediante TAVN área administrativa.
• Compacto: flyouts JQuery base para os niveis aniñados.
• Fast: JQuery o menú é cargado dos servidores de Google (eu adoraria Tese-se a facer o mesmo en vez de puxa-lo local). Isto vai acelerar un pouco as cousas.
• Marcas - Este tipo de menú é editável e configurable en calquera momento, a través das definicións plugin TAVN sen necesidade de codificación en calquera lugar.

Eu usei este excelente menú do portal unidade dinámica como base. Eu tiven que adaptar un pouco de código JavaScript así como incluír peza de PHP en custom_functions.php para que funcione a tese. Tamén o número de páxinas preexistentes, categorías e entradas do meu sitio foron usadas para montar a estrutura do menú. Especificidades seu sitio vai ser diferente -, pero os conceptos son os mesmos.
Entón imos continuar, imos?

Instrucións paso a paso para TAVN configuración baseada SEO aniñados, personalizada, con varios niveis, agradable
e simplemente ollar fresco menú de navegación para WordPress e Teses theme

1. Ir ao Panel de Administración WordPress. Extensións-> Engadir nova procura de "TAVN". O plugin será mostrado. Fai clic en [Install], [Instalar agora], "Activar extensión".
2. Ferramentas-> TAVN Guías, Inside "Navegación Group área" atopar "o nome do grupo" e escribe: "menu1" no campo, prema [Crear] botón. "Menu1 área do rectángulo" foi creada.
   Este "menu1 área" será o principal parque infantil para a construción do menú. Estará arrastrando e soltando elementos aquí seu menú.
3. En "activos" zona de atopar "listbox" outros e faga clic en "Inicio" elección. "Home thingie" será amosado dentro do "asignado" área. Estraño, ne? Non te preocupes, mentres ela traballa - e el será para nós.
4. Arrastre este "Home thingie" de "activos" na zona "menu1" área do rectángulo. Vai tornar-se "Home" elemento do menú.
   • Repita os pasos 3-4 a algunhas páxinas de "Páxinas área", así como para as categorías en "categorías" área. Arrastre outros elementos que quere estar no seu menú dentro "menu1" rectángulo. Podes premer nas páxinas, categorías, usuarios e algúns elementos personalizados como "divisor de lista" e "bloque de código". Bloque de código maneira é legal para engadir etiquetas personalizadas dentro do menú.
   • Podes arrastrar elementos de menú dentro "menu1" área para reorganizar a orde.
   • Pode axustar a posición xerárquica de cada ítem do menú con "<" e ">" frechas.
   • Premendo no nome do texto de cada elemento do menú - abre a mente de diálogo de personalización incomprensible extra para este elemento. Eu patróns máis utilizados, pero tecnicamente pode estar tolo e comezar a facer opcións con base en imaxe de menú e engadir os anacos de HTML nel. Prossiga con coidado though.
   • Para linkless submenus unclikable que servirá como "pais" para "sub outros nenos" Eu usei o "bloque" Código do tipo. Por exemplo, cando a personalización elemento bloque tal código, entrei para o "alias Menu item" = "MemberWing" e para "Inserte un bloque de código:" = "<a href='#'> MemberWing </ a>". Tendo href = "#" ha facelo clicável, pero non actuar como un pai "válida" a opción do menú.
5. Vexa como o meu TAVN 'menu1' construír a estrutura parecía case rematada:
   
6. Finalizar a construción inicial e, de seguido, clique en "artes" icono para personalizar a súa estructura do menú:
   
7. Permanecerá aberto de diálogo con 4 abas: Options, Display, CSS Theme.
   1. Vaia a "Opcións" da guía e asegurarse que todo está desmarcada e nome do grupo ", di:" menu1 "
   2. Vai á pestana "Ver" e facer todo certo no "Show do Grupo de navegación ..." zona está marcada [x]. Deixe o resto en estándares.
   3. Vaia a "CSS" tab e seleccione o botón de radio (x) "non se aplican as clases CSS".
   4. Vaia a "theme" guía e enche-lo así:
      
      Inserir en "engadir etiquetas antes ..." zona este código:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Inserir en "engadir etiquetas despois ..." zona este código:
      <br style='clear: left' /></div>
   5. Prema [Gardar / cerrar] botón
8. Neste edificio punto no menú de opcións do plugin TAVN está completo.
   Agora é hora de facer un pequeno axuste para riba do tema Tese para obtelo preparado. Para iso necesitamos engadir un personalizado arquivos poucos - CSS e Javascript, que pertence ao menú e actualizar custom_functions.php tese "
9. Baixo o conxunto completo de arquivos aquí.
10. Descompactá o arquivo. Se actualizou o seu custom_functions.php coas súas personalizações - que precisa para fundi-los con miñas cousas. Vou deixar isto para vostede.
    Se aínda non tocou - se a vontade para substituílo o meu. Por favor note: eu prefería a posición do menú na cabeceira do sitio web (o patrón é superior) - por iso a miña adaptación incluíu esta preferencia tamén.
11. Carga de ficheiros, incluídos todos os subdirectorio e arquivos no seu tema de tese "directorio personalizado ', como este:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Eu non toque custom.css - Eu prefiro manter-menú CSS específico cos seus propios locais para evitar crear confusión dentro custom.css
12. Neste punto, pode actualizar o seu sitio web e ver o novo menú novo bonito multinivel, aninhado, SEO óptimo.
13. Pode sempre volver a configuración TAVN e personalizar o seu menú con máis opcións ou recolocala nada. Esta será contemplado no lugar viven automaticamente.

O camiño por diante ...

Este tutorial incluído exemplo creativa de un tipo de menú. Eu Joguei con outro - só para ver quão escuro menú colorido sería parecido a:

Tese tema - multilevel menú CSS aniñados - Dark paleta

Coido que é moi agradable. Hai moitos máis exemplos de navegación dispoñible no Dynamic Drive - todos eles son posibles para personalizar a tese e outros temas WordPress con algún esforzo:

Dynamic Drive Horizontal Menús

Eu espero que atopar este tutorial benéfica e útil. Cómo dixo, se pode personalizar calquera destes menús a tese - que é xa un tempo e ganas de facer ocorrer.

Eu podería facer ese traballo para ti nunha base contractual. Só ten que escoller o menú que ti queiras, poñerse en contacto comigo e eu vou traballar no código e instruccións para o seu sitio.

$ 20

E, claro, se for ata a construción de SEO óptimo super Premium portal adhesión WordPress - a mellor solución para iso:
Tema Tese + MemberWing plugin adhesión + auto-Hosted WordPress, é claro.

Tagged as: CSS menú para WordPress, tema da tese, tema de tese de menús xerárquicos, menú tese tema multinivel, funcionalidade de navegación tema da tese, tema da tese menús aniñados, tema da tese tutorial, menú css wordpress, wordpress menú aninhado