A busca para o menu perfeito Vertical ...
Parte 1 deste tutorial descrito processo passo a passo da construção do menu horizontal multinível aninhada para WordPress tema da tese . Parte 2 irá continuar para melhorar essa funcionalidade. Aqui vamos adicionar a versão "dark" do menu de navegação horizontal e eu vou ensinar você como alternar entre "brilhante" ea versão "dark". Parte 2 é o superconjunto da Parte 1. Ele inclui todos da Parte 1 + adiciona mais coisas legais.
A idéia principal que eu queria apresentar é a adição de menu vertical para tema da tese (e WordPress em geral). Eu estava procurando muito flexível, SEO amigável e multi-navegador de menus compatível vertical que permitiria criar ilimitados níveis de aninhamento.
WEB tem toneladas de páginas sobre o assunto, mas quando eu comecei a tentar 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 minhas exigências rigorosas. Eu tive que modificar significativamente los embora para ter certeza que se encaixa modelo de tese.
A busca pela perfeição continua ...
Eu passei cerca de 16 horas pesquisando, montagem, testes, conserto, polimento e ajuste CSS menu vertical e. Código js e 3/4 do tempo foi gasto a fazer ela funcionar no MSIE 6.
De qualquer forma, fiquei feliz com o resultado final. Menu de navegação resultou vertical tem os mesmos benefícios que tem menu horizontal.
Tendo em capacidade de adicionar menu vertical é muito importante para cerca de 70-80% de portais na teia. 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á fazer isso por um pouco mais curto, mas com resultados característica muito mais ricos.
Então aqui vai:
Edifício SEO amigável, vertical, menu, a vários níveis hierarquicamente aninhado para WordPress e tema da tese. Passo a Passo
(... O que você nunca pensou ser possível ...)
- Instale exec plugin do php e ativá-lo. Vamos precisar dele, porque eu vou usar PHP dentro da janela de texto para emitir código HTML menu vertical ".
- Execute os passos 1 - 6 de parte 1 do tutorial . Basicamente, você precisa instalar e ativar o uso do plugin TAVN + construir visualmente o seu menu. Verifique se o seu nome do grupo de menu é 'menu1'. Este nome é codificado em custom_functions.php
- Clique no botão 'engrenagem' ícone para o seu 'menu1' grupo para editar suas propriedades:
- Segue os passos de 7,1 -7.3 tutorial Part 1 para definir "Opções", "Mostrar" e "CSS" configurações de guias.
- Agora clique em "Theme" guia dessa caixa de diálogo. Vamos substituir o número de configurações de lá (se você estiver seguindo o passo 1). Isto é ok - você não vai perder nada - mas essas mudanças são necessárias porque eu mudei alguns códigos a partir do passo 1.
Veja como este diálogo precisa ser preenchido:- Dentro do "Tema xpath:" área de introduzir este código (que comanda a substituir qualquer etiqueta com essas classes):
.jquerycssmenu, .jqueryslidemenu - Defina "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 de navegação depois do grupo" área insira este código:
<br style='clear: left' /></div> - Clique em [salvar / fechar] botão.
- Dentro do "Tema xpath:" área de introduzir este código (que comanda a substituir qualquer etiqueta com essas classes):
- Agora vá para WordPress painel de admin -> Aparência -> Widgets.
- Arraste "Texto" widget (a partir do "widgets disponíveis" grande área) em "Sidebar 1" área à direita. Nós estaremos adicionando código para o widget de texto que nos ajudará a materializar menu vertical.
NOTA: Eu presumo que você tem "Sidebar 1" na existência. Tese opções permite que você desligá-lo - mas por causa deste tutorial vamos fazê-lo ser. - Uma vez que você arrastar e soltar este widget - ele se abre como uma flor (eu estou sentindo agora romântica que luta MSIE é mais).
- Em "Title" área de entrar "mundo melhor menu vertical" ... Bem, sinta-se livre para usar sua criatividade - que o texto vai acima do seu menu de recém-nascido vertical.
- Na grande área para o texto - digite o 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".
- Baixe 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á-las. Se não - fique à vontade para substituí-lo com a minha versão. - Voila! Agora você pode recarregar seu site e ver o mesmo menu "brilhante" horizontal + neato menu vertical na barra lateral esquerda.
- Tarefa BONUS: Vamos mudar o menu "brilhante" horizontal sobre o esquema de cores "dark".
- Dentro 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 TAVN e clique no supracitado "gear" ícone para editar as propriedades do seu 'menu1' grupo.
- Clique em "Theme" guia.
- Dentro de "Adicionar tags antes navegação grupo" área insira este código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Agora - recarregar sua página - e seu menu de navegação principal horizontal "magicamente" se tornou escuro, algo assim:
Tema da tese - multilevel menu CSS nested - paleta escura
Paleta de cor escura podem ser mais adequados para determinados sites que a cor da luz. Então agora você tem uma liberdade de escolha em sua vida!
- Para voltar ao esquema de cores "brilhante" - apenas acima desfazer "Bonus" passos.
- Dentro arquivo custom_functions.php:
- Conclusão:
Eu amo Tema de Tese, eu amo WordPress e eu adoro o fato de que temos algumas maneiras para adicionar menus de navegação decente para os nossos portais.
$ 20
Divirta-se!
Gleb Esman
{Comentários sobre esta entrada estão fechados}
