Menu aninhada hierárquica verticale, un vários níveis para Wordpress

Adicionando multinivel aninhada, menù de Navegação amigável, SEO para WordPress - Parte 2

por gesman il 10 luglio 2009

Un busca para o menu verticale perfeito ...

Parte 1 deste esercitazione descrito Processo passo un passo da construção de menu aninhados multinivel orizzontale para WordPress Tese tema . Parte 2 Ira continuar a aumentar funcionalidade ESSA. Aqui vamos adicionar un versão "dark" fai menù de Navegação orizzontale e vou ensiná-lo un alternar entre "brilhante" EA versão "dark". Parte 2 é o superconjunto da Parte 1. Ele Inclui todos da Parte 1 + adiciona mais coisas legais.

Un Idéia principale que eu queria apresentar é un adição de menu verticale para (e WordPress em geral). Eu estava procurando muito flexível, SEO amigável e menu verticale compatível com multi-NAVEGADOR que permitiria un Criacao de níveis de aninhamento ilimitados.

WEB tem toneladas Páginas de sobre o assunto, mas QUANDO comecei un experimentar todas estas amostras - Eles nem quebrou, caiu por terra, com o apoio apenas um número de limitado níveis ou sé comportado mal em Gates + junksplorer de Ballmer 6 Finalmente voltei ao. testate e confiáveis ​​menu di Dynamic Drive como suas amostras verticais provou ser um bom Caso que se encaixa come minhas esigenze rigorosas. Eu tivo que modi-los de forma significativa embora para ter certeza que se encaixa modelo de Tese.
Un busca da perfeição continua ...

Eu passei cerca de 16 horas em busca, montagem, testicoli, conserto, polimento e ajuste fare menu verticale CSS e Código. Js e 3/4 do Tempo foi gasto Tornando-se un trabalhar em MSIE 6.
De qualquer forma, Fiquei feliz com o Resultado finale. Menu de Navegação verticale resultou tem todos os mesmos Beneficios que tem o orizzontale del menu.

Ter capacidade de menu adicionar verticale é muito Importante para cerca 70-80% portais na Menu horizontais TEM limitado "Espaço" para acomodar Muitas Opções menù menù de de web. De verticale, mas não tem ESSA limitação e ajudaria imensamente. Então, vamos lá .

Muitos Passos para que isso aconteça já Estao descritos na parte 1 fanno esercitazione para que isso IRA torna-lo Pouco um um mais Curto, mas com muito mais Recursos resultados ricos.

Então aqui vai:

Building SEO amigável, menu verticale multinivel, hierarquicamente aninhado para WordPress e Teses tema. Passo a Passo
(... O que você nunca pensou ser possivel ...)

  1. Instale exec php plug-in e ATIVA-lo. Vamos precisar dele porque eu vou usar PHP Dentro da Janela de texto para emitir Código menù HTML verticale.
  2. Esegui os Passos 1-6 da parte 1 fare esercitazione . Basicamente, você Precisa Instalar e Ativar o fare uso plug TAVN + visualmente Construir menù seu. verifique sé o seu menù de nomo do grupo é menu1 ". Este nomo é codificado em custom_functions. php
  3. Clique no ícone 'engrenagem' para o grupo 'menu1' para editar suas Propriedades:
    navt_customize_menu
  4. Segue Passos 7,1 -7,3 da Parte 1 esercitazione para definir "Opções", e "Mostrar" "CSS" Configurações guias.
  5. Agora cricca na aba "Tema" deste diálogo Vamos substituir número de configurações lá (se você estiver seguindo o passo 1) Este é ok -.. Você não vai perder nada - mas Essas Mudanças são necessárias porque eu mudei algum Código do passo 1.
    Veja como esse Diálogo tem de ser preenchido:
    1. Dentro de "Tema do XPath:" Area Digite o Código (que comanda un substituir Qualquer tag com classi Essas):
      .jquerycssmenu, .jqueryslidemenu
    2. Defina "Ação" para "substituir por"
    3. Dentro de "adicionar Etiquetas antes de Navegação grupo" AREA Inserir o seguinte Código:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Dentro de "adicionar tag após Navegação grupo" AREA Inserir o seguinte Código:
      <br style='clear: left' /></div>
    5. Clique no botão [Salvar / Fechar].
  6. Agora vá AO painel de administração fare WordPress -> Aparência -> Widget.
  7. Arraste widget di "Texto" (a partir da grande area "Widget disponíveis") em "Sidebar uma" area A Direita. Nós estaremos adicionando Código para o widget di de texto que vai nos ajudar un menu materializar verticale.
    NOTA: Eu Presumo que você tem "Box 1" na ExisTenCia Tese Opções Permite que você desligá-lo - mas por Causa deste esercitazione vamos fazer com que Seja..
  8. Uma vez que você arrastar e soltar widget di Este - ele vai se abre como uma flor (eu estou sentindo agorà ROMANTICO que Luta MSIE mais e).
  9. Na área "Título" entrar "menù verticale melhor do mundo" ... Bem, fique à vontade para usar SUA criatividade - que o texto vai acima seu menu verticale Recém-nascido.
  10. Na grande área para o texto - Digite 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. Pressione o botão [Salva], cricca no link "Fechar".
  12. Baixar atualizada conjunto de arquivos aqui .
    Este Arquivo Inclui:


    • Versão atualizada do Código fare menu orizzontale "brilhante"
    • Versão "Dark" fare menu orizzontale
    • Códigos menu verticale
    • Versão atualizada fare custom_functions.php
  13. Agora você Precisa descompactar esse Arquivo e Envia-lo para o diretório 'custom' de Sua Tese tema.
    Nota: se você Tiver Feito todas come personalizações Dentro custom_functions.php - você precisará giunta-las Se não - fique à vontade para substituí-lo com a minha versão..
  14. Voila! Agora você pode recarregar seu sito di e ver o menu verticale neato na Barra esquerda mesmo menù laterale "brilhante" + orizzontale.
  15. Tarefa BONUS: Vamos Mudar o menu "brilhante" orizzontali para o esquema de core "dark".
    1. Dentro fare Arquivo custom_functions.php:
      substituir este Código:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      com este Código:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      Basicamente, estamos comentando uma Linha e descomentar un outra.
    2. Agora vá para o WordPress Admin-> Ferramentas-> TAVN Listas e cricca non ícone acima mencionado "engrenagem" para editar come Propriedades fanno menu1 seu grupo '.
    3. Clique na aba "Tema".
    4. Dentro de "adicionar Etiquetas antes de Navegação grupo" AREA Inserir o seguinte Código:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Agora - recarregar SUA página - e seu menù de Navegação orizzontale "magicamente" se tornou Escuro, algo assim:
      Thesis theme - multilevel nested CSS menu - dark palette

      Multinivel aninhada Menu CSS - paleta escura Tese tema

      A paleta de core escuras Podem ser mais adequados para determinados sitios do que a luz de uma cor. Então, agorà você tem uma Liberdade de escolha em SUA vida!

    6. Para Voltar ao esquema de core "brilhante" - apenas desfazer os Passos acima "bonus".
  16. Conclusão:
    Eu amo tema da Tese, eu adoro WordPress e eu adoro o fato de que nós temos Maneiras de adicionar menu de Navegação decentes para Nossos portais.

$ 20


Divirta-se!

Gleb Esman

{Comentários sobre esta entrada Estao fechados}

Multinivel, aninhado, SEO de menu amigável - Tutorial Tese Tema

Tese Tutorial Theme - acrescentando multinivel, aninhado, o menù de Navegação amigável SEO para WordPress

por gesman em 08 de Julho de 2009

La ricerca per il menu perfeito ...

Esta é una Parte 1 fare esercitazione
Parte 2 deste esercitazione ensina como Construir menu verticale + paleta de cor escura para a orizzontale

Eu decidi começar Tese tema , porque um dos meus clientes me informado sobre problemas de compatibilidade entre Tese e meu wordpress Associação do site fare plug MemberWing. Fixei-lo e, Então, decidiu dar uma olhada em Teses e Realmente se preocupou em Assistir vídeos nd Primeira página do principale Tese locale - Diythemes.com .
O que mais mi impressionou é un atenção AOS detalhes, facilidade de utilização e acima de tudo - Recursos de SEO que são tão bem Pensado.
MemberWing plug adesão de foi projetado desde o Início para os locais da Sociedade que precisam puxar suco de SEO, Tanto Quanto possivel. Então eu paguei muita atenção un Multiplicidade de SEO melhorias e perfeições em MemberWing. Muitos dos meus clientes Estao perguntando sobre temas diferentes para USAR posta ter TEMA que foi bem Tao SEO otimizado de Dentro Seria uma excelente opção para os empreendedores do Portal de adesão.

Combinando SEO poderes de MemberWing com SEO poderes da daria o melhor de Oportunidades de Classifica para os meus clientes. Então, eu tenho Tese e brincou com ele por um dia.

É um excelente Tema de todas come Maneiras. Una parte de Navegação do mesmo, porém, é um pouco limitado na função. Una tesi partir 1.5 + é apenas um menù de nível. Meu desejo solito é poder personalizar un Navegação, Tanto Quanto necessário. alguns siti tem apenas Algumas Páginas, muitos outro Tem de toneladas de Paginas estáticas + zilhões de Artigos / post + um monte de Categorias.
Assim, no mundo ideale, ter la possibilità de criar bom olhar o menù de Navegação amigável hierarquicamente organizada é uma necessidade. Tese logo de Cara tem uma boa Navegação procurando, mas eu NOTEi que todos os siti baseados em Tese Estao parecendo Gêmeos. Personalizando o menù de Navegação Tese Realmente não é fácil para un maioria das pessoas Simplesmente deixar como está. Não há maneira de Mudar un ordem das categorías nessun menu ou posicioná-entre los come Páginas. E, novamente, un capacidade de criar Estruturas de menu aninhados está faltando. Então eu decidi ver O que Poderia ser Feito sobre isso.
Depois de tentar cerca de meia dúzia de menu de Navegação / plugins relacionados eu definir un minha escolha em WordPress Plugin Navegação Lista TAVN .
Plugin de TAVN é essencialmente gerador de Lista ordenada com super-chic e uma interfaccia de administração de difícil descobrir po 'non tradizionale. O. engañosa sobre ele é que ele não Realmente criar menù à procura de fantasia por SI só. Ele faz una Parte di mais difícil do trabalho - embora lhe dá uma capacidade de puxar visualmente Juntos, e Gerar una Lista ordenada - esqueleto de seu menù-a-ser E você pode criar vários menu também Você Pode puxar todos os tipos de WordPress coisas nessun menu de Navegação:.. Páginas, messaggi, Artigos, categorías, usuarios, blocos de Código, link externos, divisórias, separadores e misturar e combinar e Ninho e organizar e Personaliza-los em qualquer estrutura Árvore de como você querem.
TAVN gera para você resultou HTML Lista não ordenada Segundo Beleza da TAVN é que ele Ajuda a Inserir O Novo menù em seu TEMA através fare Famoso Lógica baseada em JQuery, mas sem necessidade de alterar qualquer Código TAVN Permite que você especifique:.! "Substituir este Elemento # com meu novo menù TAVN ". # Elemento Poderia ser um id ou classe de caminho de menu nell'esistenza ou Marca de Elemento div que está sendo Gerada pelo seu tema atual. Então TAVN faz esta substituição para você, sem Forca-lo un ir em Código Tema e torna-lo mais confuso do que já é tudo isso Se soa como jargão -. não se preocupe -. eu vou Guia-Lo Passo a Passo em Breve A Parte mais desafiadora de TAVN para todos é que você vai ter que vir para Cima com reale CSS + imagens + Código JavaScript para o seu menù de si mesmo. E cabe A Voce descobrir Onde posta como INTEGRAR esses Arquivos posta fazer Essas coisas corretamente sé Juntos conectar.
Sinceramente sem sciabola JQuery + alguns + CSS + PHP com experiência decente com WordPress - ESSA coisa é difícil de puxar.
Alegremente eu sei Essas coisas um pouco, Então eu decidi que morder una bala e Guia una Humanidade para a Liberdade na construção fare melhor dos melhores menu de Navegação para WordPress. Eu só precisava descobrir fontes para alguns bons menu CSS horizontais Peguei olhar. sito o Dynamic Drive para seus melhores seleções, dimostrazioni di applicazioni e Fontes.

Dediquei um dia para estudar Teses e Jogar com o plug TAVN. Nessun finale eu orgulhosamente criado personalizado, flexível, SEO otimizado, multinivel, estrutura navigazione nidificato para o meu WordPress + locale baseada Tese.

Lista de Recursos de multinivel, aninhada menù para tema da Tese
(Você tem que amar Essas coisas):

  • Professionista olhar, Limpo e Sentir.
  • Suporte para todos os Navegadores modernos, incluindo 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome, Tanto javascript e modos não-javascript.
  • Graciosamente downgradable para não Navegadores-javascript. Você cardápio será utilizável, visualmente semelhantes e trabalhar mesmo para Navegadores JavaScript desabilitados (embora Navegação nível superiore in modo será visível e não flyouts vai acontecer, claro, como por eles são feitos javascript).
  • Características amigáveis ​​SEO - ordenada Código do menù Lista é Gerada Dentro de HTML Google e outros mecanismo de busca será Capaz de indexar SUA estrutura de Navegação e os link para come Páginas internas..
  • Suporte para níveis de aninhamento ilimitadas posta subníveis.
  • Suporte para qualquer fim ou Páginas, Mensagens (tramite URI definido pelo usuario), come Categorias, os usuarios, os blocos de Código personalizado e collegamenti externos Dentro fare menu.
  • Suporte de texto, bem como Elementos fare menù a base de Imagem. (Eu tenho que ainda experimentar Estes embora).
  • Estrutura fare menù e Conteúdo é visualmente ajustável zona di Via Administrativa TAVN.
  • Compacto: icone a comparsa baseados JQuery para níveis aninhados.
  • Rápido: JQuery para o menu E Carregado à partir de servidores fare Google (eu próprio amor Tese de fazer o mesmo ao Investor de Puxa-lo localmente) Isso Iria acelerar um pouco come coisas..
  • Escalabilidade - Este Tipo de menu E editável posta configurável un Qualquer Momento através de configurações fanno plug TAVN sem un necessidade de codificação em qualquer lugar.

USEI este excelente menù de unidade dinâmica portale como base. Eu tiva que personalizar o código javascript um pouco, bem como INCLUIR pedaço de PHP em custom_functions.php para Faze-lo funcionar com Tese. tambem Foram utilizados o número de Páginas pré-existentes, Categorias e postos de meu sito para montar un estrutura fare menu come suas especificidades locale será diferente -. mas Conceitos será o mesmo.
Então, vamos continuar, vamos?

INSTRUÇÕES passo un passo para configurar TAVN baseado nidificato, customizável, multinivel, SEO amigável
e simplesmente olhar affresco e Tese Tema

  1. Ir para o painel de administração fare WordPress. Plugins-> adicionar novo, procurare por "TAVN." O plug será exibido. Clique em [Install] [Instalar agorà], "Ativar Plugin".
  2. Ferramentas-> Liste TAVN, Dentro da área "Navegação Gruppo" encontrar "nomo do grupo" e Digite: "menu1" no campo, Pressione o botão [Criar] "Menu1" área do retângulo foi criada..
    Esta área "menu1" será o principale campo de jogos para Construção de menu. Você eStara arrastando e soltando aqui seus Elementos de menu.
  3. Na área de "ativos" encontrar "outro" Caixa de listagem e clique em "Home" escolha "Home" coisinha vai aparecer Dentro da área "não atribuído" Estranho, não é Não se preocupe, enquanto ele funciona -..? E será para NOS.
  4. Arraste esta "Home" thingie da área "ativos" em "menu1" área do retângulo. Vai tornar-se o voce di un menu "Home".
    • Repita os Passos 3-4 para Algumas Páginas da área de "Páginas", bem como para come Categorias na área de "Categorias". Arraste quaisquer outros itens que você deseja estar em seu menù dentro "menu1" retângulo. Você Pode clicar em Páginas , Categorias, usuarios posta alguns Elementos personalizados, como "Lista divisore" e "Bloco de Código." Bloco de Código é un maneira legale de adicionar trechos personalizados Dentro fanno menu.
    • Você pode arrastar itens de menu Dentro da área "menu1" para reorganizar un Ordem.
    • Você pode ajustar un posição hierárquica de cada voce di menu che fare com "<" e ">" flechas.
    • Clicando no nomo do texto de cada voce di fare del menu -. Abre una Mente de Diálogo de personalização adicional incompreensível para este voce Eu USEI na maior altera parte defaults mas Tecnicamente você pode ficar louco e começar una fazer escolhas de menu com di base em imagens e adicionar pedaços de Código HTML Dentro dele. Proceda com cuidado embora.
    • Para sottomenu unclikable linkless que servirão como "pais" para outros "sub-Filhos" que eu USEI "Código bloco tipo". Por exemplo, Quando una tal voce personalização Bloco de Código que entrei para o "Voce di menu de Apelido" = "MemberWing "e" Enter Bloco de Código: "=" <a href='#'> MemberWing </ a> "Tendo href =" # "fará com que não clicável, mas agindo como um" pai "opção de menu válido..
  5. Veja como estrutura "menu1 'costruire minha TAVN parecia quase concluída:
    navt_building_icon
  6. Terminar un inicial e construção, em seguida, cricca non ícone de "engrenagem" para personalizar A Sua estrutura de menu:
    navt_customize_menu
  7. Ele vai abrir diálogo com quatro guias: Opções, Exibir, CSS, Tema.
    1. Vá para un aba "Opzioni" e certifique-se que tudo está desmarcada e "nomo do grupo", diz: "menu1"
    2. Vá em "Display" Guia e certifique-se tudo no "grupo Mostrar Navegação su ..." área está Marcada [x]. Deixe o restauri em padrões.
    3. Vá para un aba "CSS" e Selecione o botão de Radio (x) "Não se aplicam come classi CSS".
    4. Vá para un aba "Tema" e preenchê-lo assim:
      navt_configuration_theme_tab_icon
      Inserir em "adicionar ETIQUETAS antes ..." área este Código:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Inserir em "adicionar Etiquetas Depois ..." área este Código:
      <br style='clear: left' /></div>
    5. Botão [Salvar / Fechar] Prima
  8. Neste edificio del menu de ponto de Dentro Opções fanno plug TAVN está completa.
    Agora é hora de fazer um pouco de Música para Tese de tema para Deixa-lo pronto Para isso, precisamos adicionar alguns arquivos personalizados -. CSS e javascript que pertence ao cardápio e atualização Tese 'custom_functions.php
  9. Faça o scaricare fare conjunto completo de arquivos aqui .
  10. . Descompacte o Arquivo Se você atualizou seu custom_functions.php com suas personalizações -. Você Precisa giunta las-com come minhas coisas Vou deixar isso para você.
    Se você não Ainda tocou - Sinta-se livre para substituí-lo com o meu Por favor, nota:. Eu preferia posição fare menù singhiozzo o sito web cabeçalho (o padrão é em cima) - por isso un minha adaptação incluiu ESSA Preferencia também.
  11. Carica de Arquivo, incluindo Todos os subdiretórios e arquivos singhiozzo o diretório 'custom' SUA Tese tema, como este:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...
    Eu não toquei custom.css - Eu prefiro Manter CSS específicas fanno menù em seus proprios locais para evitar criar Confusão Dentro custom.css
  12. Neste ponto, você pode recarregar o seu sito di e ver o novo novo multinivel, aninhada, menù belo otimizado SEO.
  13. Você pode Semper Voltar para TAVN configurações e personalizar o seu menù com mais Opções ou reposicionar nada. Ele será refletido nessun locale ao vivo Automaticamente.

O caminho pela frente ...

Este esercitazione incluído Exemplo criativo de um tipo de menù Eu joguei com um outro - só para ver como menù de cor escura seria parecido com.:

Thesis theme - multilevel nested CSS menu - dark palette

Multinivel aninhada Menu CSS - paleta escura Tese tema

. Eu acho que é bastante agradável Há muitos Esempi Nell'esempio mais Navegação disponíveis senza Dynamic Drive - todos eles são Possìveis de personalizar para Teses e outros temas WordPress com algum esforço:

Dynamic Drive Horizontal Menus

Unidade Menu horizontais dinámicas

Eu espero que você vai encontrar este esercitazione benefico e útil Como eu Disse, E possivel personalizar Qualquer um menu destes para Tesi -. Que é Dado tempo e vontade de fazer acontecer.

Eu Poderia fazer este trabalho para você em uma base di contratual. Basta escolher o menù que quiser, entrar em contato Comigo e eu vou trabalhar non Código e come INSTRUÇÕES Sito para o seu.

$ 20

E, claro, se você per mangiato un construção de Super SEO otimizado Prémio wordpress portale adesão - un melhor solução para isso:
Tese Tema + MemberWing plug de adesão + auto-hospedado WordPress é claro.

{ 15 comentários } comments} { 15 comentários }

Prêmio Post 3

05 de Julho de 2009

Isso é provocação Gratuita para o Prémio mensagem 3 Este Artigo contém Conteúdo combinado:.. A Primeira altera parte está visível para os Membros Oro, Todo o Artigo é apenas visível para os Membros Platinum Tente entrar Como: Membro de ouro Primeira (username / password = ouro / ouro) - Você vai ver mais Conteúdo .... E, em seguida, logoff e login novamente como platina [...]

Leia o Artigo completo →

Prêmio Pos 2

05 de Julho de 2009

. Isso é provocação Gratuita para o Prémio Pos 2 O Resto é visível para o ouro e apenas os Membros Dica -. Ouro Membro login / password = ouro / ouro ......

{{{Ouro | platina}}}
O restante deste Artigo está disponível apenas para Membros premio.

Leia o Artigo completo →

Prêmio Mensagem 1

05 de Julho de 2009

Este é o Artigo demo para MemberWing-X. Com MemberWing-X deste Artigo é feito para a compra un um preço único de US $ 2,95 ou assinando programa "Gold Membership". Então, isso é provocação Gratuita para o Prémio pos 1 . O restante deste Artigo visível é apenas para os que Membros compraram por US $ 2,95 Oro ou subscrito "[...]

Leia o Artigo completo →

Tese Tema e Membros do sito Plugin MemberWing para os melhores siti de adesão SEO

05 de Julho de 2009

MemberWing é um plugin di wordpress fare adesão sito criado especificamente para SEO portais adesão otimizados Com ele teaser é indexáveis ​​flexíveis, suporte para Google Primeiro Clique Livre Norma, Conteúdo digitale e proteção de scaricare Habilitada com PromoFusion -. Que Garante SUA participação nessun sito Rápida indexação e classificações mais elevadas. enquanto outro: Membro fare softwares sito Gosta de desativar Completamente o acesso [...]

Leia o Artigo completo →