A Quest para o menu perfeito ...
Esta é a parte 1 do tutorial
Parte 2 deste tutorial ensina como construir + menu vertical paleta de cores escuras para a horizontal
Eu decidi ir tema da tese , porque um dos meus clientes me informou sobre problemas de compatibilidade entre a Tese ea minha adesão plugin wordpress site MemberWing. Fixei-lo e então decidiu tomar um olhar mais atento Teses e realmente se preocupou em assistir vídeos na página do site principal tese - Diythemes.com .
O que me impressionou mais é a atenção ao detalhe, facilidade de utilização e características de SEO, acima de tudo - que são tão bem pensado.
plugin adesão MemberWing foi projetado desde o início para os locais da sociedade que precisa puxar como suco de SEO possível. Então eu paguei muita atenção ao grande número de aperfeiçoamentos em SEO e perfeições MemberWing. Muitos dos meus próprios clientes estão perguntando sobre diferentes temas de usar e com tema que foi tão bem SEO optimized do interior profundo seria um ajuste excelente para a adesão empresários portal.
SEO Combinando poderes de MemberWing com poderes de SEO tema da tese daria o melhor ranking de oportunidades para meus clientes. Então, eu tenho de Teses e brincou com ele por um dia.
É um excelente tema de todas as maneiras. A parte de navegação do que ele é um pouco limitado na função. A partir de Tese 1.5 + é um menu único nível. Meu desejo sempre é ser capaz de personalizar a navegação, tanto quanto necessário. Alguns sites têm apenas poucas páginas, muitos outros têm de toneladas de páginas estáticas + zilhões de artigos / posts + lotes de categorias.
Assim, no mundo ideal de ter a chance de criar olhando agradável organizados hierarquicamente menu de navegação do usuário amigável é uma obrigação. Tese direita fora do bastão tem boa procura de navegação, mas notei que todos os sites Tese baseados são parecidos com os gêmeos. Personalizando o menu de navegação tese não é realmente fácil assim a maioria das pessoas simplesmente deixá-la como está. Não há nenhuma maneira de alterar a ordem das categorias no menu ou posicioná-los entre as páginas. E, novamente, a capacidade de criar estruturas aninhadas menu está em falta. Então eu decidi ver o que poderia ser feito sobre isso.
Depois de tentar a metade dúzia menu / navegação plugins relacionados pus a minha escolha na lista de navegação Wordpress Plugin TAVN .
plugin TAVN é essencialmente gerador de lista não ordenada com super chique e um pouco difícil de imaginar interface admin untraditional. O enganosa sobre ele é que ele realmente não criar menus fantasia procurando por si mesmo. Ele faz a parte mais difícil do trabalho - embora lhe dá a capacidade de reunir visualmente, e gerar a lista não-ordenada - o esqueleto de seu menu-a-ser. E você pode criar menus de muitos também. Você pode puxar todos os tipos de coisas Wordpress para o menu de navegação: páginas, posts, artigos, categorias, usuários, blocos de código, as ligações externas, divisórias, separadores e misturar e combinar e ninho e organizar e personalizá-los em qualquer estrutura de árvore que quer.
TAVN gera para você resultou HTML lista não ordenada. Segundo a beleza da TAVN é que ele ajuda a inserir o seu novo menu em seu tema através de lógica baseado JQuery famoso, mas sem a necessidade de alterar qualquer código! TAVN permite que você especifique: "substituir este elemento # menu TAVN com meu novo". # Elemento poderia ser uma id ou classe de caminho de menu existente ou tag div elemento que está sendo gerada por seu tema atual. Então TAVN não esta substituição para você sem forçá-lo a ir para o código do tema e torná-lo mais confuso do que já é. Se isso tudo soa como o jargão - não se preocupe - Eu vou guiá-lo passo a passo em breve. A parte desafiadora da TAVN para todos é que você vai ter que vir para cima com CSS reais + imagens + código javascript para o seu menu de si mesmo. E cabe a você descobrir onde e como integrar esses arquivos e fazer esse material chegar correctamente ligados entre si.
Sinceramente, sem saber JQuery + PHP + alguns + CSS com experiência decente com Wordpress - essa coisa é difícil de puxar.
Alegremente eu sei que essas coisas um pouco assim que eu decidi morder a bala e guiar a humanidade para a liberdade na construção do melhor da melhor menus de navegação para Wordpress. Eu só precisava descobrir fontes para alguns olhando agradável menus horizontal CSS. Eu escolhi website unidade dinâmica de suas melhores seleções, demos e fontes.
Dediquei um dia para estudar e brincar com Teses plugin TAVN. No final eu orgulhosamente criado personalizado, flexível, otimizado SEO, multilevel, aninhada estrutura funcionalidade de navegação para o meu site Wordpress Thesis + baseado.
Lista de recursos de vários níveis Wordpress menu de navegação aninhados, para Tema Teses
(Você tem que amar esse material):
- Professional, um aspecto limpo e sentir.
- Suporte para todos os browsers modernos, incluindo 6,7 MSIE, Opera, Safari, Firefox 3.x, o Google Chrome em ambos os modos de javascript e não javascript.
- Graciosamente desatualizar para navegadores não-JavaScript. Você menu será usável, visualmente semelhantes e de trabalho, mesmo para os navegadores javascript desativado (embora apenas de navegação de nível superior serão visíveis e não flyouts acontecerá naturalmente como eles são feitos por javascript).
- características SEO amigável - Código menu desordenadas lista é gerada dentro do HTML. Google e aranhas outro motor de busca será capaz de indexar a sua estrutura de navegação e links para páginas internas.
- Suporte para ilimitada níveis de aninhamento e subníveis.
- Suporte para qualquer fim ou páginas, posts (definido pelo usuário via URIs), categorias, usuários, blocos de código personalizado e links externos dentro do menu.
- Suporte de texto, bem como elementos de menu baseado em imagem. (Ainda tenho que experimentar estes embora).
- Menu estrutura eo conteúdo é visualmente ajustável através TAVN área administrativa.
- Compacto: flyouts JQuery base para os níveis aninhados.
- Fast: JQuery para o menu é carregado a partir de servidores do Google (que eu Tese amor próprio a fazer o mesmo ao invés de puxá-lo localmente). Isso vai acelerar um pouco as coisas.
- Escalabilidade - Este tipo de menu é editável e configurável, a qualquer momento através das definições plugin TAVN, sem necessidade de codificação em qualquer lugar.
Eu usei este excelente menu do disco dinâmico portal como uma base. Eu tive que customizar o código javascript um pouco, assim como incluir pedaço de PHP em custom_functions.php para que ele funcione com a tese. Também o número de páginas pré-existentes, categorias e posts do meu site foram usadas para montar a estrutura do menu. Seu site específicos serão diferentes - mas os conceitos são os mesmos.
Então vamos continuar, vamos?
Passo a passo as instruções para instalação TAVN baseado aninhados, personalizável, multinível, SEO friendly
e simplesmente olhar fresco menu de navegação para Wordpress e Teses Temas
- Ir para o painel de administração Wordpress. Plugins-> Adicionar nova busca por "TAVN". O plugin será mostrado. Clique em [Install], [Instalar agora], "Ativar plugin".
- Ferramentas-> Lista de TAVN, Inside "Navegação" Grupo zona encontrar "o nome do grupo" e digite: "menu1" no campo, pressione [botão Criar]. "Menu1 área do retângulo" foi criada.
Este "menu1 área" será o principal parque para a construção do menu. Você estará arrastando e soltando elementos aqui o seu menu. - Em "bens" área de encontrar "listbox" outro e clique em "Home" escolha. "Home thingie" irá aparecer dentro de "atribuído" área. Estranho, hein? Não se preocupe, contanto que funcione - e ele será para nós.
- Arraste este "Home thingie" de "activos" em área "menu1 área do retângulo". Vai tornar-se "Home" item no menu.
- Repita os passos 3-4 para algumas páginas de "Páginas" área, bem como para as categorias em "categorias" área. Arraste quaisquer outros itens que você deseja estar em seu menu dentro "menu1" retângulo. Você pode clicar nas páginas, categorias, usuários e alguns elementos personalizados como "divisor de lista" e "bloco de código". bloco de código é legal forma de adicionar trechos personalizado dentro do menu.
- Você pode arrastar os itens de menu dentro "menu1" espaço para reorganizar sua ordem.
- Você pode ajustar a posição hierárquica de cada item do menu com "<" e ">" flechas.
- Clicando no nome do texto de cada item de menu - abre incompreensível diálogo extra de personalização para este item. Eu padrões mais utilizados, mas tecnicamente você pode ficar louco e começar a fazer escolhas de menu baseado em imagem e adicionar pedaços de código HTML para ela. Proceda com cuidado though.
- Para linkless submenus unclikable que servirão como "pais" para outros "sub-crianças" Eu usei o "bloco de código tipo". Por exemplo, quando a personalização item bloco de código como eu entrei para o "alias Menu item =" MemberWing "e" Enter bloco de código: = "<a href='#'> MemberWing </ a>". Tendo em href = "#" vai fazer isso, mas agindo como um válido "menu" mãe escolha clickable não.
- Veja como estruturar minha TAVN 'menu1' construir parecia quase concluído:
- Concluir a construção inicial e, em seguida, clique em "gear" ícone para personalizar a sua estrutura de menu:
- Será aberto de diálogo com quatro guias: Options, Display, CSS, Tema.
- Vá em "Opções" guia e se certificar que tudo está desmarcada e "nome do grupo", diz: "menu1"
- Vá para a guia "Exibir" e fazer tudo certo no "Show do grupo de navegação ..." área está marcada [x]. Deixe o resto em padrões.
- Ir para "CSS" guia e selecione o botão de rádio (x) "Não se aplicam as classes CSS.
- Ir para "Theme" guia e preenchê-lo assim:
Inserir em "Adicionar tags antes ..." esta área de código:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Inserir em "Adicionar tags depois ..." esta área de código:
<br style='clear: left' /></div> - Pressione [Salvar / Fechar] botão
- Neste ponto a partir do menu de construção dentro de TAVN opções plugin está completo.
Agora é hora de fazer uma pequena melodia até para tema da tese de obtê-lo pronto. Para isso, precisamos adicionar alguns arquivos personalizados - CSS e JavaScript, que pertence ao menu e atualizar custom_functions.php tese " - Faça o download do conjunto completo de arquivos aqui .
- Descompacte o arquivo. Se você tiver atualizado o seu custom_functions.php com suas personalizações - você precisa de mesclá-los com as minhas coisas. Vou deixar isso para você.
Se você ainda não tocou - fique à vontade para substituí-lo com o meu. Atenção: Eu preferia posição menu sob o cabeçalho website (padrão está acima) - por isso a minha adaptação incluiu esta preferência, bem. - Upload de arquivo, incluindo todos os subdiretórios e arquivos em seu tema de tese "costume" de diretório, como este:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Eu não toquei custom.css - Eu prefiro manter CSS menu específico em suas próprias posições, para evitar criar confusão dentro custom.css - Neste ponto, você pode recarregar o seu site e ver o novo belo novo multinível, aninhada, SEO optimized menu.
- Você pode sempre voltar para as configurações TAVN e personalizar o seu menu com mais opções ou reposicionar nada. Isso será refletido no local vivem automaticamente.
O caminho pela frente ...
Este tutorial incluído exemplo criativo de um tipo de menu. Joguei com um outro - só para ver como o menu de cor escura ficaria assim:
Tese tema - menu CSS nested multinível - paleta escura
Eu acho que é bastante agradável. Há muitos mais exemplos de navegação disponíveis no Dynamic Drive - todos eles são possíveis de personalizar a tese de Wordpress e outros temas com algum esforço:
Dynamic Drive Menus Horizontal
Eu espero que você vai encontrar este tutorial benéfico e útil. Como eu disse, é possível personalizar qualquer um destes menus para a tese - que é dado tempo e vontade de fazer acontecer.
Eu poderia fazer este trabalho para você em uma base contratual. Basta escolher o menu que você gosta, entre em contato comigo e eu vou trabalhar no código e as instruções para seu site.
$ 20
E, claro, se você for até a construção de SEO super otimizada adesão wordpress premium portal - a melhor solução para isso:
Tema Teses + plugin adesão MemberWing + auto hospedado Wordpress , é claro.
