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ù de Navegação para WordPress Tema Teses
(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 o menù de Navegação olhar affresco para WordPress 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.

Comentários sobre esta entrada Estao fechados.

Posta anteriore:

Próximo messaggio: