A procura para o menu perfeito ...
Esta é a parte 1 do tutorial
Parte 2 deste tutorial ensina como criar menu vertical + paleta de cores escuras para a horizontal
Eu decidi ir tema de tese, porque um dos meus clientes me informou sobre problemas de compatibilidade entre Tese e meu wordpress adesão MemberWing plugin site. Eu fixo-lo e então decidiu dar uma olhada na tese e realmente se preocupou em assistir vídeos na página principal do site tese principal - Diythemes.com.
O que me impressionou com a mais é a atenção aos detalhes, facilidade de utilização e, acima de tudo - SEO que estão tão bem pensado.
Plugin adesão MemberWing foi projetado desde o início para adesão sites que seria necessário para puxar o sumo de SEO tanto quanto possível. Então eu paguei muita atenção a multiplicidade de melhorias SEO e perfeições em MemberWing. Muitos dos meus próprios clientes estão perguntando sobre diferentes temas de usar e com tema que foi tão bem SEO otimizado do interior profundo seria um ajuste excelente para a adesão empresários portal.
Combinando os poderes de SEO MemberWing com poderes de SEO tema Tese daria o melhor das oportunidades de classificação para os 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 que embora seja um pouco limitado na função. A partir de Tese de 1,5 + é um menu de nível apenas. Meu desejo habitual é ser capaz de personalizar a navegação, tanto quanto necessário. Alguns sites têm apenas algumas 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, tendo a oportunidade de criar boa aparência organizada hierarquicamente menu de navegação do usuário amigável é uma obrigação. Tese de direito fora do bastão tem bom aspecto de navegação, mas eu notei que todas as Teses de sites baseados estão olhando como gêmeos. Personalizando o menu de navegação tese não é muito fácil para a maioria das pessoas simplesmente deixá-lo 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 cerca de meia dúzia de menu / navegação plugins relacionados defino minha escolha em lista de navegação Wordpress Plugin TAVN.
TAVN plugin é essencialmente gerador de lista ordenada com super chique e um pouco difícil de figura interface de administração não-tradicional. Enganosa sobre o que é que ele realmente não criar menus de fantasia procurando por si só. Ele faz a parte mais difícil do trabalho que - dá-lhe uma capacidade de reunir visualmente, e gerar a lista ordenada - esqueleto de seu menu-a-ser. E você pode criar menus de muitos também. Você pode puxar todos os tipos de coisas Wordpress no menu de navegação: páginas, posts, artigos, categorias, usuários, blocos de código, ligações externas, divisórias, separadores e misturar e combinar e ninho e organizar e personalizá-los em qualquer estrutura de árvore você querer.
TAVN gera para você resultou HTML lista não ordenada. Segundo a beleza de TAVN é que ajuda você a inserir o novo menu em seu tema através JQuery famosa base lógica, mas sem necessidade de alterar o código! TAVN permite especificar: "substituir este elemento # com meu menu TAVN novo". # elemento poderia ser uma id ou classe de caminho de menu existente ou a tag DIV elemento que está sendo gerada pelo seu tema atual. Assim TAVN faz isso para você substituição 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 de TAVN para todos é que você vai ter que vir para cima com imagens reais + CSS + código javascript para o seu menu de si mesmo. E é até você para descobrir onde e como integrar esses arquivos e fazer essas coisas corretamente ficar ligado junto.
Sinceramente, sem saber alguns JQuery + PHP + CSS + com experiência decente com Wordpress - isto é difícil de puxar.
Alegremente eu sei que essas coisas um bocado assim que eu decidi morder a bala e guiar a humanidade para a liberdade na criação de melhores do melhores menus de navegação para Wordpress. Eu só precisava encontrar fontes para alguns olhando agradável menus horizontais CSS. Eu escolhi website unidade dinâmica de suas melhores seleções, demos e fontes.
Dediquei um dia para o estudo de Teses e jogar com plugin TAVN. No final eu orgulhosamente criado personalizado, flexível, SEO otimizado, com vários níveis, a estrutura aninhada funcionalidade de navegação para o meu Wordpress site Tese + base.
Lista de recursos de vários níveis de menu de navegação, aninhada Wordpress para Teses Theme
(You Got to love this material):
- Profissional, clean look and feel.
- Suporte para todos os navegadores modernos, incluindo MSIE 6,7, Opera, Safari, Firefox 3.x, o Google Chrome em JavaScript e os modos não javascript.
- Graciosamente desatualizar para navegadores não-JavaScript. Você menu será utilizável, visualmente semelhantes e de trabalho, mesmo para navegadores JavaScript desabilitado (embora apenas a navegação de nível superior serão visíveis e não flyouts vai acontecer naturalmente como elas são feitas por javascript).
- Características SEO amigável - o código do menu unordered lista é gerada dentro do HTML. Google e aranhas outro motor de busca serão capazes de indexar sua estrutura de navegação e encontrar links para páginas internas.
- Suporte para ilimitada níveis de aninhamento e subníveis.
- Suporte para qualquer fim ou páginas, artigos (definidos pelo usuário através de URIs), categorias, usuários, blocos de código personalizado e ligações externas dentro do menu.
- Suporte de texto-imagem, bem como nos elementos do menu. (Ainda estou a tentar estes embora).
- Estrutura de menus e conteúdos é visualmente ajustável através TAVN área administrativa.
- Compacto: flyouts JQuery base para os níveis aninhados.
- Fast: JQuery para o menu é carregado dos servidores do Google (eu adoraria Tese-se 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 em qualquer momento através das definições plugin TAVN sem qualquer necessidade de codificação em qualquer lugar.
Eu usei este excelente menu do portal unidade dinâmica como base. Eu tive que personalizar um pouco de código JavaScript bem 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. Especificidades Seu site vai ser diferente -, mas os conceitos são os mesmos.
Então vamos continuar, vamos?
Instruções passo a passo para TAVN configuração baseada SEO aninhadas, personalizada, com vários níveis, amigável
e simplesmente olhar fresco menu de navegação para Wordpress e Teses Theme
- Ir para o painel de administração Wordpress. Plugins-> Adicionar nova pesquisa para "TAVN". O plug-in será mostrado. Clique em [Install], [Instalar agora], "Ativar plugin".
- Ferramentas-> TAVN Listas, Inside "Navegação Group área" encontrar "o nome do grupo" e digite: "menu1" no campo, prima [Criar] botão. "Menu1 área do retângulo" foi criada.
Este "menu1 área" será o principal parque infantil para a construção do menu. Você estará arrastando e soltando elementos aqui seu menu. - Em "activos" zona de encontrar "listbox" outros e clique em "Home" escolha. "Home thingie" será exibido dentro do "atribuído" área. Estranho, né? Não se preocupe, enquanto ela trabalha - e ele será para nós.
- Arraste este "Home thingie" de "activos" na área "menu1" área do retângulo. Vai tornar-se "Home" item no menu.
- Repita as etapas 3-4 para algumas páginas de "Páginas área", bem como para as categorias em "categorias" área. Arraste quaisquer outros itens que 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 maneira é legal para adicionar códigos personalizados dentro do menu.
- Você pode arrastar itens de menu dentro "menu1" área para reorganizar a 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 do menu - abre a mente de diálogo de personalização incompreensível extra para este item. Eu padrões mais utilizados, mas tecnicamente você pode ficar louco e começar a fazer escolhas com base em imagem de menu e adicionar os pedaços de código HTML nele. Prossiga com cuidado though.
- Para linkless submenus unclikable que servirá como "pais" para "sub outras crianças" Eu usei o "bloco" Código de tipo. Por exemplo, quando a personalização item bloco tal código, entrei para o "alias Menu item" = "MemberWing" e para "Inserir bloco de código:" = "<a href='#'> MemberWing </ a>". Tendo em href = "#" irá torná-lo clicável, mas não agindo como um pai "válido" opção de menu.
- Veja como o meu TAVN 'menu1' construir a estrutura parecia quase concluída:
- Concluir a construção inicial e, em seguida, clique em "artes" ícone para personalizar sua estrutura do menu:
- Será aberto de diálogo com 4 abas: Options, Display, CSS Theme.
- Vá em "Opções" da guia e se certificar que tudo está desmarcada e "nome do grupo", diz: "menu1"
- Ir para a guia "Exibir" e fazer tudo certo no "Show do grupo de navegação ..." zona está marcada [x]. Deixe o resto em padrões.
- Vá para "CSS" tab e selecione o botão de rádio (x) "não se aplicam as classes CSS".
- Vá em "Theme" guia e preenchê-lo assim:
Inserir em "Adicionar tags antes ..." zona este código:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Inserir em "Adicionar tags depois ..." zona este código:
<br style='clear: left' /></div> - Pressione [Salvar / fechar] botão
- Neste edifício ponto a partir do menu de opções do plugin TAVN está completo.
Agora é hora de fazer um pequeno ajuste para cima do tema Tese para obtê-lo pronto. Para isso precisamos adicionar um personalizado arquivos poucos - CSS e JavaScript, que pertence ao menu e atualizar custom_functions.php tese " - Baixe o conjunto completo de arquivos aqui.
- Descompacte o arquivo. Se você atualizou seu custom_functions.php com suas personalizações - você precisa de mesclá-los com minhas coisas. Vou deixar isso para você.
Se você ainda não tocou - se à vontade para substituí-lo com o meu. Por favor note: eu preferia a posição do menu no cabeçalho do site (o padrão é acima) - por isso a minha adaptação incluiu esta preferência também. - Upload de arquivo, incluindo todos os subdiretórios e arquivos em seu tema de tese "diretório personalizado ', 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 nos seus próprios locais para evitar criar confusão dentro custom.css - Neste ponto, você pode recarregar o seu site e ver o novo menu novo bonito multinível, aninhada, SEO otimizado.
- Você pode sempre voltar para as configurações TAVN e personalizar o seu menu com mais opções ou reposicionar nada. Ele será contemplado no local vivem automaticamente.
O caminho pela frente ...
Este tutorial incluído exemplo criativo de um tipo de menu. Eu joguei com um outro - só para ver quão escuro menu colorido seria parecido com:
Tese tema - multilevel menu CSS aninhados - Dark paleta
Eu acho que é bastante agradável. Há muitos mais exemplos de navegação disponível no Dynamic Drive - todos eles são possíveis para personalizar a tese e outros temas Wordpress com esforço:
Dynamic Drive Horizontal Menus
Eu espero que você encontrar este tutorial benéfica e útil. Como eu disse, é possível personalizar qualquer destes menus para a tese - que é dado um tempo e vontade de fazer acontecer.
Eu poderia fazer esse trabalho para você em uma base contratual. Basta escolher o menu que quiser, entrar em contato comigo e eu vou trabalhar no código e instruções para o seu site.
$ 20
E, claro, se você for até a construção de SEO otimizado super premium portal adesão WordPress - a melhor solução para isso:
Tema Tese + MemberWing plugin adesão + auto-hospedado Wordpress, é claro.
