A busca do menu perfeito Vertical ...
Parte 1 deste tutorial descrito processo passo a passo da construção do menu horizontal multinível aninhados para Wordpress tema Thesis . Parte 2 vai continuar para melhorar essa funcionalidade. Aqui vamos adicionar a versão "dark" do menu de navegação horizontal e vou ensiná-lo a alternar entre "brilhante" ea versão "dark". A parte 2 é o superconjunto da Parte 1. Ele inclui todos da Parte 1 + adiciona um material mais fresco.
Idéia principal que eu queria apresentar é a adição de menu vertical para tema de Tese (e Wordpress em geral). Eu estava procurando realmente flexível, SEO amigável e multi-browser menus compatíveis vertical que permitiria criar ilimitada níveis de aninhamento.
WEB tem toneladas de páginas sobre o assunto, mas quando eu comecei a experimentar todas estas amostras - que quer quebrou, caiu por terra, apoiada apenas um número limitado de níveis ou se comportado mal em Gates + Ballmer junksplorer 6. Finalmente voltei ao testadas e confiáveis menus Dynamic Drive como suas amostras verticais provou ser um bom caso que se encaixa meus requisitos rigorosos. Eu tive que modificar significativamente los embora para ter certeza que se encaixa modelo de Tese.
A busca pela perfeição continua ...
Passei cerca de 16 horas pesquisando, montagem, teste, fixação, polimento e ajuste CSS menu vertical e. Js código e 3 / 4 do tempo foi gasto tornando-se a trabalhar em MSIE 6.
De qualquer forma, fiquei feliz com o resultado final. Menu de navegação resultou vertical tem todos os mesmos benefícios que tem menu horizontal.
Ter capacidade de adicionar menu vertical é muito importante para cerca de 70-80% de portais na web. Menus horizontais têm limitado "espaço" para acomodar muitas opções de menu, mas menu vertical não tem essa limitação e ajudaria imensamente. Então, vamos lá.
Lotes de passos para que isso aconteça já estão descritos na parte 1 do tutorial para que isso irá fazê-lo para uma um pouco menor, mas com resultados característica muito mais rico.
Então aqui vai:
Construção de SEO friendly, vertical, menu, multilevel hierarquicamente aninhado para Wordpress e tema da tese . Passo a passo
(... O que você nunca pensou ser possível ...)
- Instale exec php plugins e ativá-lo. Vamos precisar dele, porque eu vou usar PHP dentro do widget de texto para emitir código HTML menu vertical ".
- Execute os passos 1-6 da parte 1 do tutorial . Basicamente, você precisa instalar e ativar o plugin do uso TAVN + visualmente construir o seu menu. Verifique se o seu nome do grupo de menu é 'menu1'. Este nome é codificado em custom_functions.php
- Clique em 'engrenagem' ícone para o seu 'menu1' grupo para editar suas propriedades:
- Segue Passos 7,1 -7,3 da parte 1 tutorial para definir "Opções", "Display" e "CSS" tabs configurações.
- Agora clique em "Theme" guia dessa caixa de diálogo. Vamos substituir número de configurações lá (se você estiver seguindo passo 1). Isto é ok - você não vai perder nada - mas essas mudanças são necessárias porque eu mudei alguns códigos do passo 1.
Veja como este diálogo tem de ser preenchido:- Dentro do "Tema xpath:" entrar nesta área de código (comandos para substituir qualquer tag com essas classes):
.jquerycssmenu, .jqueryslidemenu - Conjunto de "Action" para "Substituir por"
- Dentro de "Adicionar tags antes navegação grupo" área insira este código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "Adicionar tags depois de navegação grupo" área insira este código:
<br style='clear: left' /></div> - Clique em [salvar / fechar] botão.
- Dentro do "Tema xpath:" entrar nesta área de código (comandos para substituir qualquer tag com essas classes):
- Agora vá para painel de administração Wordpress -> Aparência -> Widgets.
- Arraste "Text" widget (do grande "Disponível widgets" área) em "Sidebar uma" área à direita. Nós estaremos adicionando código no widget de texto que nos ajudará a materializar menu vertical.
NOTA: Eu presumo que você tem "Sidebar 1" na existência. Opções tese permite que você desligá-lo - mas por causa deste tutorial vamos fazê-lo ser. - Uma vez que você arrastar e soltar este widget - ele vai se abre como uma flor (eu estou sentindo agora romântica de que a luta é mais MSIE).
- Em "Title" área enter "mundo melhor menu vertical" ... Bem, fique à vontade para usar sua criatividade - que o texto vai acima do seu menu de recém-nascidos vertical.
- Na grande área para o texto - digite este 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;
?> - Pressione [Salvar], clique no link "Fechar".
- Baixar atualizado conjunto de arquivos aqui .
Este arquivo inclui:- Versão atualizada do "brilhante" código de menu horizontal
- Versão "Dark" do menu horizontal
- Vertical códigos de menu
- Versão atualizada do custom_functions.php
- Agora você precisa descompactar este arquivo e enviá-lo para o diretório "custom" de seu tema de Tese .
Nota: se você tiver feito todas as personalizações dentro custom_functions.php - você precisa para mesclá-los. Se não - fique à vontade para substituí-lo com a minha versão. - Voila! Agora você pode recarregar o seu site e ver o mesmo menu "brilhante" horizontal + neato menu vertical na barra lateral esquerda.
- Tarefa BONUS: Vamos mudar menu "brilhante" horizontal sobre o esquema de cores "dark".
- Dentro do 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 a outra. - Agora vá para Wordpress admin-> Ferramentas-> Listas de TAVN acima e clique em "gear" ícone para editar as propriedades do seu 'menu1' do grupo.
- Clique em "Theme" tab.
- Dentro de "Adicionar tags antes navegação grupo" área insira este código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Agora - recarregar a página - e seu menu de navegação principal horizontal "magicamente" se tornou escuro, algo assim:
Tema da tese - multilevel menu CSS aninhados - paleta escura
Paleta de cor escura podem ser mais adequados para determinados sites do que a cor clara. Então agora você tem uma liberdade de escolha em sua vida!
- Para voltar ao esquema de cores "brilhantes" - apenas acima desfazer "Bonus" passos.
- Dentro do arquivo custom_functions.php:
- Conclusão:
Eu amo Tema de Tese , eu amo Wordpress e eu amo o fato de que temos uma maneiras de adicionar menus de navegação decente para nossos portais.
$ 20
Divirta-se!
Gleb Esman
comments } { 5 comentários }
