A busca para o menu perfeito ...
Esta é a Parte 1 do tutorial
Parte 2 deste tutorial ensina como criar menu vertical + paleta de cor escura para o horizontal
Eu decidi começar tema da tese , porque um dos meus clientes me informou sobre problemas de compatibilidade entre a tese ea minha filiação wordpress plugin local MemberWing. 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 principal tese - Diythemes.com .
O que mais me impressionou é a atenção aos detalhes facilidade de utilização, e acima de tudo -. Características de SEO que são tão bem pensado
Plugin de adesão MemberWing foi projetado desde o início para os locais da sociedade que precisa puxar tanto suco de SEO possível. Então eu pago muita atenção a multiplicidade de SEO melhorias e perfeições em MemberWing. Muitos dos meus próprios clientes estão perguntando sobre temas diferentes de usar e ter tema que foi tão bem SEO otimizado de dentro seria uma excelente opção para empresários portal de adesão.
Combinando poderes de SEO do MemberWing com poderes de SEO do tema da tese daria o melhor de oportunidades de classificação para os meus clientes. Então, eu tenho Tese e brincou com ele por um dia.
É um excelente tema de todas as maneiras. A parte de navegação do mesmo, porém, é um pouco limitado na função. A partir de Tese 1,5 + é um menu de nível só. Meu desejo usual é a de ser capaz de personalizar de navegação como muito, conforme necessário. Alguns sites têm páginas apenas alguns, muitos outros têm toneladas de páginas estáticas + de zilhões de artigos / posts + lotes de categorias.
Assim, no mundo ideal ter a chance de criar olhando agradável hierarquicamente organizada usuário menu de navegação amigável é uma obrigação. Tese direito fora do bastão tem navegação com boa aparência, mas notei que todos os sites Tese baseados estão parecendo gêmeos. Personalizando menu de Tese de navegação não é muito fácil para a maioria das pessoas apenas deixá-lo como é. 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 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 a minha escolha sobre Wordpress TAVN Plugin Lista de navegação .
Plugin TAVN é essencialmente desordenada gerador de lista com fantasia de super e uma interface difícil de entender untraditional bit admin. O enganosa sobre ele é que ele realmente não criar menus extravagantes que procuram por si só. Ele faz a parte mais difícil do trabalho - embora lhe dá uma capacidade de reunir visualmente e gerar lista não ordenada - esqueleto de seu menu-a-ser. E você pode criar menus de muitos também. Você pode puxar todo o tipo de coisas Wordpress para o menu de navegação: páginas, posts, artigos, categorias, usuários, blocos de código, links externos, 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 da lógica baseada em JQuery famoso, mas sem necessidade de alterar o código! TAVN permite que você especifique: "substituir este elemento # com meu menu TAVN novo". # Elemento poderia ser um ID ou classe de caminho de menu existente ou marca de elemento div que está sendo gerada por seu tema atual. Então TAVN faz esta substituição para você, sem forçá-lo a ir em código tema e torná-lo mais confuso do que já é. Se isso tudo soa como 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 real CSS + imagens + código javascript para o seu menu de si mesmo. E cabe a você descobrir onde e como integrar esses arquivos e fazer essas coisas corretamente ficar conectados juntos.
Sinceramente sem saber JQuery + PHP + CSS algum + 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 humanidade guia para a liberdade de construir o melhor dos melhores menus de navegação para Wordpress. Eu só precisava descobrir fontes para algumas agradáveis procurando menus horizontais CSS. Eu escolhi site Dynamic Drive para os seus melhores seleções, demos e fontes.
Dediquei um dia para estudar Teses e jogar com o plugin TAVN. No final eu orgulhosamente criado personalizado, flexível, otimizado SEO, a vários níveis, a estrutura nagivation aninhada em meu site Tese Wordpress + base.
Lista de recursos de vários níveis aninhados Wordpress, menu de navegação para Tema de Tese
(Você tem que amar essas coisas):
- Aparência profissional, limpo e sentir.
- Suporte para todos os navegadores modernos, incluindo MSIE 6,7, Opera, Safari, Firefox 3.x, Chrome do Google tanto em javascript e não javascript modos.
- Graciosamente downgradable para não-javascript navegadores. Você menu será utilizável, visualmente semelhantes e trabalhando mesmo para navegadores JavaScript desabilitados (embora navegação nível superior só será visível e não flyouts vai acontecer, claro, como eles são feitos por javascript).
- Características SEO amigável - sem ordem código do menu lista é gerada dentro de HTML. Google e outros spiders de busca vai ser capaz de indexar a sua estrutura de navegação e encontrar links para páginas internas.
- Suporte para ilimitados níveis e subníveis de nidificação.
- Suporte para qualquer fim ou páginas, mensagens (via definida pelo usuário URIs), categorias, usuários, blocos de código personalizado e links externos dentro do menu.
- Suporte de texto, bem como elementos de imagem baseados em menu. (Eu ainda tenho que tentar estes embora).
- Estrutura do menu e conteúdo é visualmente ajustável através TAVN área administrativa.
- Compacto: JQuery flyouts base para níveis aninhados.
- Fast: JQuery para o menu é carregado a partir de servidores do Google (eu adoraria Tese-se a fazer o mesmo ao invés de puxá-lo localmente). Isso iria 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 personalizar o código javascript um pouco, 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 do seu site vai ser diferente -, mas os conceitos mais será a mesma.
Então, vamos continuar, vamos?
Instruções passo a passo para configurar TAVN baseado em nested, customizável, multinível, SEO friendly
e apenas menu de navegação simples olhar fresco para Wordpress e Tese Tema
- Ir para Wordpress painel de administração. Plugins-> Adicionar novo, procure por "TAVN". O plug-in será mostrado. Clique em [Install], [Instalar agora], "Activar Plugin".
- Ferramentas-> Listas TAVN Inside "Navegação Grupo" área de encontrar "nome do grupo" e digite: "menu1" no campo, pressione [Criar] botão. "Menu1" área do retângulo foi criada.
Este "menu1" área será o playground principal para a construção de menus. Você vai se arrastando e soltando aqui elementos de menu. - Em "ativos" área listbox encontrar "outro" e clique em "Home" escolha. Thingie "Home" será exibida dentro do "não atribuído" a área. Estranho, hein? Não se preocupe, contanto que trabalha - e será para nós.
- Arraste este "Home" thingie de "ativos" área em área do retângulo "menu1". 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, tais como "divisor de lista" e "bloco de código". Bloco de código é muito legal para adicionar snippets personalizados dentro do menu.
- Você pode arrastar itens do menu dentro "menu1" área para reorganizar a ordem.
- Você pode ajustar a posição hierárquica de cada item de menu com "<" e ">" flechas.
- Clicando no nome do texto de cada item de menu - abre a mente de diálogo de personalização incompreensível extra para este item. Eu, principalmente, usado defaults mas tecnicamente você pode enlouquecer e começar a fazer escolhas com base em imagem de menu e adicionar pedaços de código HTML para ele. Proceda com cuidado embora.
- Para linkless submenus unclikable que servirão como "pais" para outros "sub-crianças" que eu usei "Código bloco" tipo. Por exemplo, quando a personalização item de bloco tal código que eu entrou para "Item de menu alias" = "MemberWing" e "Enter bloco de código:" = "MemberWing href='#'> <a </ a>". Tendo href = "#" fará com que ele não clicável, mas agindo como uma escolha "pai" válido menu.
- Aqui está como o meu TAVN "menu1" estrutura de construção parecia quase concluída:
- Concluir construção inicial e, em seguida, clique em "engrenagem" ícone para personalizar a sua estrutura de menu:
- Ele irá abrir diálogo com 4 abas: Opções, tema da exibição, CSS,.
- Vá em "Opções" guia e verifique se tudo está desmarcada e "nome do grupo", diz: "menu1"
- Ir para a guia "Exibir" e se certificar que tudo em "Mostrar no grupo navegação ..." área está marcada [x]. Deixe o resto em padrões.
- Vá para "CSS" 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 ..." área este código:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Inserir em "Adicionar tags depois ..." área este código:
<br style='clear: left' /></div> - Pressione [Salvar / Fechar] botão
- Neste edifício de menu a partir do ponto de opções do plugin TAVN está completa.
Agora é hora de fazer um pouco de música até para tema da tese de obtê-lo pronto. Para isso, precisamos adicionar alguns arquivos personalizados - CSS e javascript que pertence ao menu e custom_functions.php Tese update ' - Faça o download do conjunto completo de arquivos aqui .
- Descompacte arquivo. Se você atualizou seu custom_functions.php com suas personalizações - você precisa para mesclá-los com as minhas coisas. Vou deixar isso para você.
Se você ainda não tocou - fique à vontade para substituí-lo com a minha. Por favor, note: eu preferia posição do menu sob o cabeçalho website (padrão está acima) - assim que meu ajustamento incluía essa preferência também. - Upload de arquivo, incluindo todos os subdiretórios e arquivos em seu tema Tese diretório "custom", como este:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Eu não toquei custom.css - Eu prefiro manter-menu específico CSS em seus próprios locais para evitar a criação de bagunça dentro custom.css - Neste ponto, você pode recarregar o seu site e ver o novo belo novo multinível, aninhada, SEO menu de otimizado.
- Você pode sempre voltar a TAVN configurações e personalizar o seu menu com mais opções ou reposicionar nada. Irá ser refletidas no site ao vivo automaticamente.
O caminho pela frente ...
Este tutorial incluído exemplo criativo de um tipo de menu. Joguei com um outro - só para ver como menu de cor escura ficaria assim:
Tema da tese - multilevel menu CSS nested - 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 para Teses e outros temas Wordpress com algum esforço:
Menus dinâmicos drive horizontal
Eu espero que você encontrar este tutorial benéfico e útil. Como eu disse, é possível personalizar qualquer um destes menus de Teses - que é dado tempo e vontade de fazer acontecer.
Eu poderia fazer este trabalho para você com base num contrato. Basta escolher o menu que você quiser, entre em contato comigo e eu vou trabalhar no código e as instruções para o seu site.
$ 20
E, claro, se você for até a construção de super-otimizado SEO wordpress prêmio de filiação portal - a melhor solução para isso:
Tema de Tese + plugin de adesão MemberWing + auto-hospedado Wordpress é claro.
