Multilevel menú xerárquico vertical, aninhada para WordPress

Engadido varios niveis, aninhada, SEO menú de navegación agradable para WordPress - parte 2

por gesman o 10 xullo 2009

A procura ao menú perfecto Vertical ...

Parte 1 deste tutorial descrito proceso paso a paso da construción do menú horizontal multinivel aninhada para WordPress tema da tese . Parte 2 seguirá para mellorar esa función. Aquí imos engadir unha versión "dark" do menú de navegación horizontal e eu vou ensinar como cambiar entre "brillante" ea versión "dark". Parte 2 é o superconjunto da Parte 1. Inclúe todos da parte 1 + engadir máis cousas legais.

A idea principal que eu quería presentar é a adición de menú vertical para (e WordPress en xeral). Eu estaba a buscar moi flexible, SEO agradable e multi-navegador do menú compatible vertical que permitiría crear ilimitados niveis de aninhamento.

WEB ten toneladas de páxinas sobre o tema, pero cando comecei a tentar todas estas mostras - que quere rompe, caeu por terra, apoiada só un número limitado de niveis ou se comportado mal Gates + Ballmer junksplorer 6. Finalmente volvín ao probadas e fiables menús Dynamic Drive como as súas mostras verticais demostrou ser un bo caso de que encaixa miñas esixencias rigorosas. Tiven que cambiar significativamente los aínda que para estar seguro que encaixa modelo de tese.
A procura da perfección segue ...

Eu pasei preto de 16 horas buscando, montaxe, probas, reparación, pulido e axuste CSS menú vertical e. Código js e 3/4 do tempo foi gasto a facer ela funcionar no MSIE 6.
En calquera caso, quedei contento co resultado final. Menú de navegación resultou vertical ten os mesmos beneficios que ten menú horizontal.

Tendo en capacidade de engadir menú vertical é moi importante para preto de 70-80% de portais na tea. Menús horizontais limitaron "espazo" para acomodar moitas opcións do menú, pero menú vertical non ten esa limitación e axudaría inmensamente. Entón, imos alí.

Lotes de pasos para que isto ocorre xa están descritos na parte 1 do tutorial para que isto pode facelo un pouco máis curto, pero con resultados característica moito máis ricos.

Entón aquí vai:

Edificio SEO agradable, vertical, menú, a varios niveis xerarquicamente aninhado para WordPress e tema da tese. Paso a Paso
(... O que nunca penso se é posible ...)

  1. Instalar exec plugin do php e activa-lo. Imos ter del, porque eu vou usar PHP dentro da xanela de texto para emitir código HTML menú vertical ".
  2. Siga os pasos 1 - 6 de parte 1 do tutorial . Basicamente, ten que instalar e activar o uso do plugin TAVN + construír visualmente o seu menú. Asegúrese de que o seu nome do grupo de menú 'menu1'. O nome codificado en custom_functions.php
  3. Prema no botón 'engrenaxe' icona para o seu 'menu1' grupo para editar as súas propiedades:
    navt_customize_menu
  4. Segue os pasos de 7,1 -7.3 tutorial Parte 1 para definir "Opcións", "Mostrar" e "CSS" opcións de guías.
  5. Agora prema en "Theme" guía desa caixa de diálogo. Imos substituír o número de opcións de alí (se está seguindo o paso 1). Isto é ok - non vai perder nada - pero estas modificacións son necesarias porque eu mudei algúns códigos dende o paso 1.
    Vexa como este diálogo ten que ser cuberto:
    1. Dentro do "Tema XPath:" área de introducir este código (que comanda a substituír calquera etiqueta con esas clases):
      .jquerycssmenu, .jqueryslidemenu
    2. Estableza "Action" para "Substituír por"
    3. Dentro "Engadir tags antes navegación grupo" área introduce este código:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Dentro "Engadir etiquetas de navegación despois do grupo" área introduce este código:
      <br style='clear: left' /></div>
    5. Prema en [Gardar / pechar] botón.
  6. Agora vai para WordPress panel de admin -> Aparencia -> Widgets.
  7. Arrastre "Texto" widget (dende o "widgets dispoñibles" grande área) en "Sidebar 1" área á dereita. Nós estar engadindo código ao widget de texto que nos axudará a materializar menú vertical.
    NOTA: Eu presumo que ten "Sidebar 1" na existencia. Tese opcións permite que desactiva-lo - pero por mor deste tutorial imos facelo ser.
  8. Unha vez que arrastrar e soltar este widget - el ábrese como unha flor (eu estou sentindo agora romántica que loita MSIE é máis).
  9. En "Title" área de entrar "mundo mellor menú vertical" ... Ben, Sinto-se a liberdade de usar a súa creatividade - que o texto vai por enriba do seu menú de acabado de nacer vertical.
  10. Na gran área para o texto - insira o 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;
    ?>
  11. Prema [Gardar], prema na ligazón "Pechar".
  12. Baixo actualizado conxunto de arquivos aquí .
    Este ficheiro inclúe:


    • Versión actualizada do "brillante" código de menú horizontal
    • Versión "Dark" do menú horizontal
    • Vertical códigos de menú
    • Versión actualizada do custom_functions.php
  13. Agora ten que descomprimir este ficheiro e enviá-lo para o cartafol "custom" do seu tema de tese.
    Nota: se ten feito todas as personalizacións dentro custom_functions.php - precisa para mestura-las. Se non - sexa a vontade para substitúe-lo coa miña versión.
  14. Listo! Agora podes actualizar o seu sitio web e ver o mesmo menú "brillante" horizontal + neato menú vertical da barra lateral esquerda.
  15. Tarefa Bônus: Imos cambiar o menú "brillante" horizontal sobre o esquema de cores "dark".
    1. Dentro arquivo custom_functions.php:
      substituír 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
      Basicamente, estamos comentando unha liña e descomentar a outra.
    2. Agora vai para WordPress Admin-> Ferramentas-> Listas TAVN e prema o devandito "gear" icona para editar as propiedades do seu 'menu1' grupo.
    3. Prema en "Theme" guía.
    4. Dentro "Engadir tags antes navegación grupo" área introduce este código:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Agora - recargar a súa páxina - e seu menú de navegación principal horizontal "Magic" se fixo escuro, algo así:
      Thesis theme - multilevel nested CSS menu - dark palette

      Tema da tese - multilevel menú CSS nested - paleta escura

      Paleta de cor escura poden ser máis axeitados para determinados sitios que a cor da luz. Entón agora ten unha liberdade de elección na súa vida!

    6. Para volver ao esquema de cores "brillante" - só por riba desfacer "Bonus" pasos.
  16. Conclusión:
    Eu amo tema de tese, eu amo WordPress e eu adoro o feito de que temos algunhas formas para engadir menús de navegación decente para os nosos portais.

$ 20


Disfrútao se!

Gleb Esman

{Comentarios sobre esta entrada están pechadas}

Tema de tese - multinivel, aninhada, menú SEO agradable - Tutorial

Tese Tutorial tema - engadindo varios niveis, aninhada, SEO Friendly menú de navegación para WordPress

por gesman o 08 de xullo de 2009

A procura ao menú perfecto ...

Esta é a parte 1 do titorial
Parte 2 deste tutorial ensina como crear menú vertical + paleta de cor escura para o horizontal

Eu decidimos comezar tema da tese , porque un dos meus clientes me informou sobre problemas de compatibilidade entre a tese ea miña filiación WordPress plugin local MemberWing. Eu fixo-lo e, entón, decidiu dar un ollo á Tese e realmente se preocupou en ver vídeos na páxina principal do sitio principal tese - Diythemes.com .
O que máis me impresionou é a atención aos detalles facilidade de uso, e por riba de todo -. Características de SEO que son tan ben pensado
Plugin de adhesión MemberWing foi deseñado desde o inicio para os locais da sociedade que precisa tirar tanto zume de SEO posible. Entón eu pago moita atención a multiplicidade de SEO melloras e perfeccións en MemberWing. Moitos dos meus propios clientes están preguntando sobre temas diferentes de usar e ter tema que foi tan ben SEO óptimo de dentro sería unha excelente opción para empresarios portal de adhesión.

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

É un excelente tema de todos os xeitos. A parte de navegación do mesmo, pero é un pouco limitado en función. A partir de Tese 1,5 + é un menú de nivel só. O desexo usual é para ser capaz de personalizar navegación, na medida do necesario. Algúns sitios teñen páxinas só algúns, moitos outros teñen toneladas de páxinas estáticas + de zilhões de artigos / entradas + 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 Tese de navegación non é moi doado para a maioría da xente só deixar lo como é. Non hai ningunha forma de cambiar a orde das categorías do menú ou posicionamento los entre as 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 menú de navegación / plugins relacionados eu definir a miña escolla o WordPress plugin TAVN lista de navegación .
Plugin TAVN é esencialmente desordenada xerador de lista con fantasía de super e unha interface difícil de entender untraditional bit admin. O erro sobre el é que realmente non crear menús extravagantes que buscan 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 de moitos tamén. Pode tirar todo tipo de cousas WordPress para o 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 quere.
TAVN xera para ti resultou HTML lista non ordenada. Segundo a beleza da TAVN é que axuda a escribir o seu novo menú no seu tema a través da lóxica baseada en JQuery famoso, pero sen necesidade de cambiar o 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 iso todo 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 real 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 estar conectados xuntos.
Sinceramente sen saber JQuery + PHP + CSS algún + con experiencia decente con WordPress - esa cousa é difícil de tirar.
Alegremente sei que estas cousas un pouco así que eu decidín morder a burbulla e humanidade guía para a liberdade de construír o mellor dos mellores menús de navegación para WordPress. Eu só precisaba descubrir fontes para algunhas agradables buscando menús horizontais CSS. Eu escollín web Dynamic Drive para os seus mellores seleccións, demos e fontes.

Dediquei un día para estudar Teses e xogar co plugin TAVN. Ao final eu orgullosos creado personalizado, flexible, óptimo SEO, a varios niveis, a estrutura nagivation aninhada no meu sitio Tese WordPress + base.

Lista de recursos de varios niveis aninhado, de menú Theme Tese
(Ten que amar estas cousas):

  • Aspecto profesional, limpo e sentir.
  • Soporte para todos os navegadores modernos, incluíndo MSIE 6,7, Opera, Safari, Firefox 3.x, Chrome de Google tanto en 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 navegación nivel superior só será visible e non flyouts vai pasar, por suposto, como son feitos por JavaScript).
  • Características SEO agradable - sen orde código do menú lista é xerada dentro HTML. Google e outros spiders de busca será capaz de indexar a súa estrutura de navegación e atopar con páxinas internas.
  • Soporte para ilimitados niveis e subníveis de nidificación.
  • Soporte para o propósito ou páxinas, mensaxes (vía definida polo usuario URI), categorías, usuarios, bloques de código personalizado e links externos dentro do menú.
  • Soporte de texto, así como elementos de imaxe baseados en menús. (Eu aínda teño que probar estes aínda).
  • Estrutura do menú e contido visual axustable través TAVN área administrativa.
  • Compacto: JQuery flyouts base para niveis aniñados.
  • Fast: JQuery ao menú é cargado a partir de servidores de Google (eu adoro Tese-se a facer o mesmo no canto de puxa-lo localmente). Poderían acelerar un pouco as cousas.
  • Módulos - Este tipo de menú se pode cambiar e configurable en calquera momento, a través da configuración do plugin TAVN sen necesidade de codificación en calquera lugar.

Eu usei este excelente menú do disco dinámico portal como unha base. Eu tiven que adaptar o código javascript un pouco, así como incluír peza de PHP en custom_functions.php para que funcione coa tese. 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ú. Particularidades do seu sitio vai ser diferente -, pero os conceptos máis será a mesma.
Entón, imos seguir, imos?

Instrucións paso a paso para configurar TAVN baseado en nested, personalizable, multinivel, SEO Friendly
e simplemente ollar fresco e Tese tema

  1. Ir a WordPress panel de administración. Plugins-> Engadir novo, busque por "TAVN". O plug-in será mostrado. Prema en [Install] [Instalar agora], "Activar o plugin".
  2. Ferramentas-> Listas TAVN Inside "Navegación Grupo" á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 principal parque infantil para a construción de menús. Vai arrastrando e soltando aquí elementos de menú.
  3. En "activos" área listbox atopar "outro" e prema en "Inicio" opción. Thingie "Home" aparecerá dentro do "non asignado" a área. Estraño, hein? Non te preocupes, sempre que traballa - e será para nós.
  4. Arrastre este "Home" thingie de "activos" área en área do rectángulo "menu1". Vai converterse en "Home" elemento do menú.
    • Repita os pasos 3-4 para 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. Pode facer clic 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 do 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 de menú - abre a mente de diálogo de personalización incomprensible extra para este elemento. Eu, sobre todo, usado Defaults pero técnicamente pode enlouquecer e comezar a facer opcións con base en imaxe de menú e engadir anacos de HTML para el. Proceda con coidado aínda.
    • Para linkless submenús unclikable que servirán como "pais" para outros "sub-nenos" que eu usei "Código bloque" tipo. Por exemplo, cando a personalización elemento de bloque tal código que entrou "Ítem de menú alias" = "MemberWing" e "Enter bloque de código:" = "MemberWing href = '#'> <a </ a>". Tendo href = "#" fará que non previsión, pero actuando como unha opción "pai" válido menú.
  5. Aquí está como o meu TAVN "menu1" estrutura de construción parecía case rematada:
    navt_building_icon
  6. Concluír construción inicial e, a continuación, prema en "engrenaxe" icona para personalizar a súa estrutura de menú:
    navt_customize_menu
  7. El ha abrir diálogo con 4 pestanas: Opcións, tema da mostra, CSS,.
    1. Vaia a "Opcións" guía e comproba que todo está desmarcada e "nome do grupo", di: "menu1"
    2. Ir á guía "Ver" e asegurarse que todo en "Amosar o grupo navegación ..." área está marcada [x]. Deixe o resto en estándares.
    3. Vai 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í:
      navt_configuration_theme_tab_icon
      Inserir en "engadir etiquetas antes ..." zona este código:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Inserir en "engadir etiquetas despois ..." área este código:
      <br style='clear: left' /></div>
    5. Prema [Gardar / Pechar] botón
  8. Neste edificio do menú dende o punto de opcións do plugin TAVN está completa.
    Agora é hora de facer un pouco de música ata o tema thesis para obtelo listo. Para iso, cómpre 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. Descompactá arquivo. 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 - sexa a vontade para substitúe-lo coa miña. Ten 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. Subir arquivos, incluíndo todos os subdirectorios e os arquivos baixo o directorio 'custom' o seu tema de tese, como este:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...
    Eu non toquei custom.css - Eu prefiro manter menú específico CSS nos seus propios locais para evitar a creación de desorde dentro custom.css
  12. Neste punto, pode volver cargar o seu sitio e ver o novo fermoso novo multinivel, aninhada, SEO menú óptimo.
  13. Sempre poderá volver a TAVN configuración e personalizar o seu menú con máis opcións ou reposicionar nada. Pode ser reflectidas no sitio 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 como menú de cor escura quedaría así:

Thesis theme - multilevel nested CSS menu - dark palette

Tema da tese - multilevel menú CSS nested - paleta escura

Eu creo 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:

Dynamic Drive Horizontal Menus

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 nada.

Eu podería facer este traballo para ti con base nun contrato. Só ten que escoller o menú que sexa, 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 de Tese + plugin de adhesión MemberWing + auto-Hosted WordPress por suposto.

comments } { 15 comentarios }

Premio Post 3

05 de xullo de 2009

Isto é provocación gratuíta para o premio post 3. Este artigo contén contido mixto: Primeira parte é visible para membros ouro, todo o artigo só é visible para membros Platinum. Tente poñerse como membro primeira medalla de ouro (nome de usuario / contrasinal = ouro / ouro) - vai ver máis contido. Logoff ... e, a continuación, e re-login como platino [...]

Lea o artigo completo →

Premio Post 2

05 de xullo de 2009

Isto é provocación gratuíta para o premio pos 2. O resto é visible para o ouro e só os membros. Consello - Rexistro membro de ouro / contrasinal = ouro / ouro ......

{{{Ouro | platino}}}
O resto deste artigo está dispoñible só para membros Premium.

Lea o artigo completo →

Premio Post 1

05 de xullo de 2009

Este artigo é demo para MemberWing-X. Con MemberWing X deste artigo está feita para a compra a un prezo único de US $ 2,95 ou rexístrese do programa "Gold Membership". Entón, iso é provocación gratuíta para o premio pos 1. O resto deste artigo só é visible para os membros que comprou a $ 2,95 ou subscrito "Gold [...]

Lea o artigo completo →

Tema da tese e Asociación MemberWing plugin do sitio web para os mellores sitios de adhesión SEO

05 de xullo de 2009

MemberWing é un WordPress plugin membro do sitio deseñado especialmente para portais de adhesión SEO optimizados. Con el é flexible teasers indexáveis, soporte a Google Primeiro Prema gratis defecto, contido dixital e protección de descarga habilitada con PromoFusion - que garante a súa indexación web adhesión rápida e clasificacións máis elevadas. Mentres membro do sitio outros programas gusta de desactivar completamente o acceso [...]

Lea o artigo completo →