A busca para o menu vertical perfeito ...
Parte 1 deste tutorial descrito processo passo a passo da construção de menus aninhados multinível horizontal para WordPress Tese tema . Parte 2 irá continuar a aumentar 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". 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 Tese tema (e WordPress em geral). Eu estava procurando muito flexível, SEO amigável e menu vertical compatível com multi-navegador que permitiria a criação de níveis de aninhamento ilimitados.
WEB tem toneladas de páginas sobre o assunto, mas quando comecei a experimentar todas estas amostras - eles nem quebrou, caiu por terra, com o apoio apenas um número limitado de níveis ou se comportado mal em Gates + junksplorer de Ballmer 6. Finalmente voltei ao testadas e confiáveis menus Dynamic Drive como suas amostras verticais provou ser um bom caso que se encaixa as minhas exigências rigorosas. Eu tive que modificá-los de forma significativa embora para ter certeza que se encaixa modelo de Tese.
A busca da perfeição continua ...
Eu passei cerca de 16 horas em busca, montagem, testes, conserto, polimento e ajuste do menu vertical CSS e código. Js 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 vertical resultou tem todos os mesmos benefícios que o menu horizontal tem.
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 menu vertical, mas não tem essa limitação e ajudaria imensamente. Então, vamos lá.
Muitos passos para que isso aconteça já estão descritos na parte 1 do tutorial para que isso irá torná-lo um pouco um mais curto, mas com muito mais recursos resultados ricos.
Então aqui vai:
Building SEO amigável, vertical multinível menu, hierarquicamente aninhado para WordPress e Teses tema. Passo a passo
(... O que você nunca pensou ser possível ...)
- Instale exec php plug-in 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 da parte 1 do tutorial . Basicamente, você precisa instalar e ativar o uso do plugin TAVN + visualmente construir seu menu. Verifique se o seu menu de nome do grupo é "menu1. Este nome é codificado em custom_functions.php
- Clique no ícone 'engrenagem' para o grupo 'menu1' para editar suas propriedades:
- Segue Passos 7,1 -7,3 da Parte 1 tutorial para definir "Opções", "mostrar" e "CSS" Configurações guias.
- Agora clique na aba "Tema" deste diálogo. Vamos substituir número de configurações lá (se você estiver seguindo o passo 1). Este é ok - você não vai perder nada - mas essas mudanças são necessárias porque eu mudei algum código do passo 1.
Veja como esse diálogo tem de ser preenchido:- Dentro de "Tema do xpath:" Área digite o código (que comanda a substituir qualquer tag com essas classes):
.jquerycssmenu, .jqueryslidemenu - Defina "Ação" para "Substituir por"
- Dentro de "Adicionar etiquetas antes de navegação grupo" Área inserir o seguinte código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "adicionar tags após navegação grupo" Área inserir o seguinte código:
<br style='clear: left' /></div> - Clique no botão [Salvar / Fechar].
- Dentro de "Tema do xpath:" Área digite o código (que comanda a substituir qualquer tag com essas classes):
- Agora vá ao painel de administração do WordPress -> Aparência -> Widgets.
- Arraste widget "Texto" (a partir da grande área "Widgets disponíveis") em "Sidebar uma" área à direita. Nós estaremos adicionando código para o widget de texto que vai 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 fazer com que seja. - Uma vez que você arrastar e soltar este widget - ele vai se abre como uma flor (eu estou sentindo agora romântico que luta MSIE é mais).
- Na área "Título" entrar "melhor menu vertical do mundo" ... Bem, fique à vontade para usar sua criatividade - que o texto vai acima seu menu vertical recém-nascido.
- 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 o botão [Save], clique no link "Fechar".
- Baixar atualizada conjunto de arquivos aqui .
Este arquivo inclui:- Versão atualizada do código do menu horizontal "brilhante"
- Versão "Dark" do menu horizontal
- Códigos menu vertical
- Versão atualizada do custom_functions.php
- Agora você precisa descompactar esse arquivo e enviá-lo para o diretório 'custom' de sua tese tema.
Nota: se você tiver feito todas as personalizações dentro custom_functions.php - você precisará juntá-las. Se não - fique à vontade para substituí-lo com a minha versão. - Voila! Agora você pode recarregar seu site e ver o menu vertical neato na barra lateral esquerda mesmo "brilhante" menu horizontal +.
- Tarefa BONUS: Vamos mudar o "brilhante" menu horizontal para 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 o WordPress Admin-> Ferramentas-> TAVN Listas e clique no ícone acima mencionado "engrenagem" para editar as propriedades do seu grupo 'menu1.
- Clique na aba "Tema".
- Dentro de "Adicionar etiquetas antes de navegação grupo" Área inserir o seguinte código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Agora - recarregar sua página - e seu menu de navegação horizontal "magicamente" se tornou escuro, algo assim:
Multinível aninhada Menu CSS - - paleta escura tese tema
A paleta de cores escuras podem ser mais adequados para determinados sítios do que a luz de uma cor. Então, agora você tem uma liberdade de escolha em sua vida!
- Para voltar ao esquema de cores "brilhante" - apenas desfazer os passos acima "bônus".
- Dentro do arquivo custom_functions.php:
- Conclusão:
Eu amo tema da tese, eu adoro WordPress e eu adoro o fato de que nós temos maneiras de adicionar menus de navegação decentes para nossos portais.
$ 20
Divirta-se!
Gleb Esman
Comentários sobre esta entrada estão fechados.