Quest ao menú perfecto ...

Esta é a parte 1 do titorial
Parte 2 deste tutorial ensina como construír menú vertical + paleta de cores escuras para o horizontal

Eu decidir comezar tema Thesis , porque un dos meus clientes me informou sobre problemas de compatibilidade entre Tese ea miña filiación WordPress plugin local MemberWing. Eu fixo-lo e entón decide dar un ollo a Teses e realmente se preocupou en ver vídeos na páxina principal do sitio web Tese principal - Diythemes.com .
O que máis me impresionou é a atención ao detalle, facilidade de uso e por riba de todo - SEO características que son tan ben pensado.
Extensión de filiación MemberWing foi deseñado desde o principio para lugares da sociedade que precisa tirar tanto o zume SEO posible. Entón, eu paguei moita atención a multiplicidade de SEO melloras e perfeccións en MemberWing. Moitos dos meus propios clientes están preguntando sobre distintos temas de usar e ter tema que foi tan ben óptimo SEO alí de dentro sería unha excelente opción para empresarios portal asociación.

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

É un excelente tema de todos os xeitos. A parte de navegación que que é un pouco limitado en función. A partir de Tese 1.5 + é un menú de nivel só. O meu desexo sempre é poder personalizar a navegación, na medida do necesario. Algúns sitios teñen poucas páxinas, moitos outros teñen de toneladas de páxinas estáticas + zilhões de artigos / posts + lotes de categorías.
Así, no mundo ideal ter a oportunidade de crear mirando agradable xerarquicamente organizada usuario menú de navegación agradable é unha obriga. Tese dereito fóra do pau ten navegación con bo aspecto, pero notei que todos os sitios Tese baseados están parecendo xemelgos. Personalizando menú de navegación Tese non é realmente doado para a maioría da xente simplemente deixar como está. Non hai ningunha forma de cambiar a orde das categorías do menú ou posiciona-los entre páxinas. E, de novo, a capacidade de crear estruturas de menú aniñados falta. Entón eu decidir ver o que podería ser feito sobre iso.
Despois de tentar preto de media ducia de plugins menú / navegación relacionados Eu define a miña elección sobre Wordpress TAVN Extensión Lista de navegación .
Extensión TAVN é esencialmente non-ordenada xerador de lista con fantasía de super e un pouco difíciles de descubrir interfaz de administración non-tradicionais. Que erro sobre el é que realmente non crear menús fantasía buscando por si só. El fai a parte máis difícil do traballo - aínda que lle dá unha capacidade de reunir visual e xerar lista non ordenada - esqueleto do seu menú a ser. E pode crear menús moitos tamén. Podes puxar todo tipo de cousas Wordpress ao menú de navegación: páxinas, artigos, artigos, categorías, usuarios, bloques de código, links externos, anteparos, separadores e mesturar e combinar e niño e organizar e personalizar-los en calquera estrutura de árbore que desexa.
TAVN xera para ti resultou HTML lista non ordenada. Beleza segundo TAVN é que axuda a escribir o seu novo menú no seu tema por medio de lóxica JQuery famosa base, pero sen precisar cambiar ningún código! TAVN permite que especifique: "substituír este elemento # co meu menú TAVN novo". # Elemento podería ser un id ou clase de camiño de menú existente ou marca de elemento div que está a ser xerada polo seu tema actual. Entón TAVN fai esta substitución para ti sen forza-lo a ir en código tema e facelo máis confuso do que xa é. Se todo isto soa como xerga - non te preocupes - 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 reais CSS + imaxes + código javascript no seu menú de si mesmo. E cómpre a vostede descubrir onde e como integrar eses arquivos e facer isto correctamente conectar xuntos.
Sinceramente sen saber JQuery + PHP + CSS algunhas + con experiencia decente con Wordpress - esa cousa é difícil de tirar.
Alegremente sei estas cousas un pouco así que eu decidín morder a burbulla e guía a humanidade para a liberdade na construción de mellor do mellor menús de navegación para Wordpress. Eu só precisaba descubrir fontes para algúns mirando agradable menús horizontal CSS. Eu escollín web unidade dinámica para mellor as súas seleccións, demos e fontes.

Dediquei un día para estudar e xogar con Tese plugin de TAVN. Ao final eu orgullosos creado personalizado, flexible, óptimo SEO, multinível, a estrutura nagivation nested para o meu sitio Tese WordPress + baseado.

Lista de recursos de varios niveis aniñados Wordpress, menú de navegación para tema de Tese
(Ten que amar estas cousas):

• Profesional, aparencia limpa e sentir.
• Soporte para todos os navegadores modernos, incluíndo MSIE 6,7, Opera, Safari, Firefox 3.x, Chrome de Google nos dous javascript e non javascript modos.
• Graciosamente downgradable para non javascript navegadores. Vostede menú será utilizable, visualmente similares e traballando mesmo para navegadores JavaScript desactivados (aínda que só de navegación de nivel superior será visible e non flyouts vai pasar naturalmente a medida que se fixeron por javascript).
• Características SEO agradable - unordered código do menú lista é xerada dentro HTML. Google e arañas outro buscador será capaz de indexar súa estrutura de navegación e atopar con páxinas internas.
• Soporte para ilimitada niveis de aniñamento e subníveis.
• Soporte para o propósito ou páxinas, mensaxes (vía definida polo usuario URI), categorías, usuarios, bloques de código personalizado e ligazóns externos dentro do menú.
• Soporte de texto, así como elementos de imaxe baseados en menús. (Eu aínda teño que probar eses aínda).
• Estrutura de menús e contido visual axustable través TAVN área administrativa.
• Compacto: JQuery flyouts baseado para niveis aniñados.
• Fast: JQuery ao menú é cargado dende servidores de Google (eu adoro Tese-se a facer o mesmo no canto de puxa-lo localmente). Iso sería acelerar un pouco as cousas.
• Módulos - Este tipo de menú se pode cambiar e configurable en calquera momento, a través de opcións do plugin TAVN sen necesidade de codificación en calquera lugar.

Eu usei este excelente menú do disco dinámico portal como unha base. Tiven que personalizar o código javascript un pouco, así como incluír peza de PHP en custom_functions.php para que funcione con Thesis. Tamén o número de páxinas pre-existentes, categorías e artigos do meu sitio foron usadas para montar a estrutura do menú. Especificidades seu sitio web vai ser diferente -, pero os conceptos serán os mesmos.
Entón imos seguir, imos?

Instrucións paso a paso para configurar TAVN baseado en nested, customizável, multinível, SEO Friendly
e só menú de navegación simple ollar fresco para o WordPress e Tese tema

1. Cambiar a WordPress panel de administración. Extensións-> Engadir novo, busque por "TAVN". O plug-in amósase. Prema en [Install], [Instalar agora], "Activar o plugin".
2. Ferramentas-> Listas TAVN, Inside "Navigation Group" área de atopar "nome do grupo" e escriba: "menu1" no campo, prema [Crea] botón. "Menu1" área do rectángulo foi creada.
   Este "menu1" área será o playground principal para a construción de menús. Estará arrastrando e soltando elementos aquí o seu menú.
3. En "activos" área listbox atopar "outros" e prema en "Inicio" opción. Thingie "Home" aparecerá dentro do "non asignado" a área. Estraño, hein? Non te preocupes, sempre que funciona - e será para nós.
4. Arrastre este "Home" thingie de "activos" área en área do rectángulo "menu1". Vai chegar a ser "Home" elemento do menú.
   • Repita os pasos 3-4 para algunhas páxinas de "Páxina" área, así como para as categorías en "categorías" área. Arrastre os elementos que quere estar no seu menú dentro "menu1" rectángulo. Podes premer nas páxinas, categorías, usuarios e dalgúns elementos personalizados como "divisor de lista" e "bloque de código". Bloque de código é moi legal para engadir snippets personalizados dentro do menú.
   • Pode arrastrar elementos de menú dentro "menu1" área para reorganizar a orde.
   • Pode axustar a posición xerárquica de cada elemento de menú con "<" e ">" frechas.
   • Premendo no nome do texto de cada elemento do menú - abre a mente de diálogo de personalización boggling extra para este elemento. Eu, sobre todo, usado defaults pero técnicamente pode enlouquecer e comezar a facer opcións con base en imaxes do menú e engadir anacos de HTML para ela. Proceder con cautela aínda.
   • Para linkless submenús unclikable que servirán como "pais" para outros "sub-fillos" Eu usei o "Código bloque" tipo. Por exemplo, cando a personalización elemento de bloquear tal código entrei "elemento apelido Menú" "MemberWing" = e "Enter bloque de código:" = "MemberWing href ='#'> <a </ a>". Tendo href = "#" fará que non clicáveis, pero actuando como unha opción "pai" válido menú.
5. Aquí está como o meu TAVN "menu1" estrutura construír parecía case rematada:
   
6. Completar a construción inicial e, a continuación, prema en "gear" icona para personalizar a súa estrutura de menú:
   
7. El vai abrir de diálogo con catro guías: Options, Mostrar, CSS, tema.
   1. Vaia a "Opcións" guía e asegurarse que todo está desmarcada e "nome do grupo", di: "menu1"
   2. Cambiar a guía "Mostrar" e facer todo certo en "grupo de navegación Amosar en ..." área está marcada [x]. Deixe o resto en estándares.
   3. Ir a "CSS" e selecciona o botón de radio (x) "Non se aplican as clases CSS".
   4. Vaia a "Theme" guía e enche-lo así:
      
      Inserir en "Add tags 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 [save / close] botón
8. Neste punto do menú construír dentro opcións do plugin TAVN está completa.
   Agora é hora de facer unha pequena melodía ata a tema Thesis para obtelo listo. Para iso necesitamos engadir algúns arquivos personalizados - CSS e javascript, que pertence ao menú e custom_functions.php Tese update '
9. Descarga o conxunto completo de ficheiros aquí .
10. Descomprimir arquivos. Se actualizou o seu custom_functions.php coas súas personalizacións - precisa para mestura-los con as miñas cousas. Vou deixar isto para vostede.
    Se aínda non tocou - Sinto-se libre para substitúe-lo coa miña. Teña en conta: eu prefería posición do menú baixo a cabeceira web (por defecto está por riba) - así que o meu axuste incluía esa preferencia tamén.
11. Subida de arquivos, incluíndo todos os subdirectorios e ficheiros no seu tema Thesis directorio "custom", como este:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Non toquei custom.css - Eu prefiro manter menú específico CSS nos seus propios locais para evitar a creación desorde dentro custom.css
12. Neste punto, pode volver cargar o seu sitio e ver o novo fermoso novo multinível, aniñados, menú SEO óptimo.
13. Sempre poderá volver a TAVN configuración e personalizar o seu menú con máis opcións ou reposicionar nada. Será reflectida na web en directo automaticamente.

O camiño por diante ...

Este tutorial incluído exemplo creativo dun tipo de menú. Xoguei con outro - só para ver quão escuro menú de cor quedaría así:

Tema da tese - multilevel menú CSS aniñados - paleta escura

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

Menús dinámicos Unidade Horizontal

Eu espero que atopar este tutorial beneficioso e útil. Como dixen, é posible personalizar calquera destes menús de Teses - que é xa tempo e ganas de facer pasar.

Eu podería facer este traballo para ti con base nun contrato. Só ten que escoller o menú que lle gusta, póñase en contacto comigo e eu vou traballar no código e instruccións para o seu sitio.

$ 20

E, claro, se é ata a construción de súper óptimo SEO WordPress premio de filiación portal - a mellor solución para iso:
Tema tese + plugins MemberWing asociación + auto-Hosted WordPress por suposto.

Tagged as: CSS menú para WordPress , tema da tese , tese de menús xerárquicos tema , menú de tema tese multinível , nagivation tema da tese , tese de menús aniñados tema , tema da tese tutorial , WordPress css do menú , WordPress menú aniñados