A procura para o menú vertical perfecto ...
Parte 1 deste tutorial describe proceso paso a paso da construción menús aniñados multinivel horizontal para WordPress Tese tema . Parte 2 continuará aumentando esa función. Aquí imos engadir a versión "dark" do menú de navegación horizontal e vou ensinalo a cambiar de "brillante" ea versión "dark". Parte 2 é o superconjunto da Parte 1. Inclúe todos da parte 1 + engade máis cousas legais.
A idea principal que eu quería presentar é a adición de menú vertical para Tese tema (e WordPress en xeral). Eu estaba a buscar moi flexible, SEO agradable e menú vertical compatible con multi-navegador que permitiría a creación de niveis de aninhamento ilimitados.
WEB ten toneladas de páxinas sobre o tema, pero cando comecei a probar todas estas mostras - eles nin rompe, caeu por terra, co apoio só un número limitado de niveis ou se comportan mal Gates + junksplorer de Ballmer 6. Finalmente volvín ao probadas e fiables menús Dynamic Drive como as súas mostras verticais demostrou ser un bo caso que encaixa as miñas esixencias rigorosas. Tiven que modificalo los de xeito significativo aínda para ter seguro que encaixa modelo de Tese.
A procura da perfección continúa ...
Eu pasei preto de 16 horas en busca, montaxe, probas, reparación, pulido e axuste do menú vertical CSS e código. Js e 3/4 do tempo foi gasto tornándose a traballar en MSIE 6.
Sexa como sexa, quedei feliz co resultado final. Menú de navegación horizontal resultou ten todos os mesmos beneficios que o menú horizontal.
Ter capacidade de engadir menú vertical é moi importante a preto de 70-80% de portais web. Menús horizontais teñen limitado "espazo" para acomodar moitas opcións de menú menú vertical, pero non ten esa limitación e axudaría inmensamente. Entón, imos alí.
Moitos pasos para que isto ocorre xa están descritos na parte 1 do titorial para que isto pode facelo un pouco un máis curto, pero con moito máis recursos resultados ricos.
Entón aquí vai:
Building SEO agradable, vertical multinivel menú, xerarquicamente aninhado para WordPress e Teses tema. Paso a paso
(... Que nunca penso ser posible ...)
- Instala exec php plugin e activa-lo. Imos ter del porque eu vou usar PHP dentro da xanela de texto para emitir código HTML menú vertical.
- Executa os pasos 1-6 da parte 1 do titorial . Basicamente, ten que instalar e activar o uso do plugin TAVN + visualmente construír o seu menú. Asegúrese de que o seu menú de nome do grupo é "menu1. Este nome é codificado en custom_functions.php
- Fai clic na icona 'engrenaxe' para o grupo 'menu1' para editar as súas propiedades:
- Segue Pasos 7,1 -7,3 da parte 1 tutorial para definir "Opcións", "Mostrar" e "CSS" Configuración guías.
- Agora prema na pestana "tema" deste diálogo. Imos substituír número de opcións alí (se está seguindo o paso 1). Este é OK - non vai perder nada - pero estas modificacións son necesarias porque eu mudei algún código do paso 1.
Mira como este diálogo ten que ser cuberto:- Dentro de "Tema do XPath:" Área escriba o código (que comanda a substituír calquera tag con esas clases):
.jquerycssmenu, .jqueryslidemenu - Defina "Acción" a "Substituír por"
- Dentro de "Engadir etiquetas antes de navegación grupo" Área introducir o seguinte código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro de "engadir etiquetas despois navegación grupo" Área introducir o seguinte código:
<br style='clear: left' /></div> - Preme o botón [Gardar / Pechar].
- Dentro de "Tema do XPath:" Área escriba o código (que comanda a substituír calquera tag con esas clases):
- Agora vai ao panel de administración do WordPress -> Aparencia -> Widgets.
- Arrastre widget "Texto" (a partir da gran área "Widgets dispoñibles") en "Sidebar unha" zona da dereita. Estaremos engadindo código ao widget de texto que vai axudarnos a materializar menú vertical.
NOTA: Eu presumo que ten "Sidebar 1" na existencia. Tese opcións permite que desactiva-lo - pero por mor deste tutorial imos facer que sexa. - Unha vez que arrastrar e soltar este widget - que vai se abre como unha flor (eu estou sentindo agora romántico que loita MSIE é máis).
- Na área "Título" entrar "mellor menú vertical do mundo" ... Ben, sexa a vontade para usar a súa creatividade - que o texto vai enriba seu menú vertical recentemente nado.
- Na gran área para o texto - introduza 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;
?> - Prema o botón [Save], prema na ligazón "Pechar".
- Descargar actualizada conxunto de ficheiros aquí .
Este ficheiro inclúe:- Versión actualizada do código do menú horizontal "brillante"
- Versión "Dark" do menú horizontal
- Códigos menú vertical
- Versión actualizada do custom_functions.php
- Agora ten que descomprimir o ficheiro e enviá-lo para o directorio 'custom' da súa tese tema.
Nota: se ten feito todas as personalizacións dentro custom_functions.php - necesitará xuntalas. Se non - sexa a vontade para substitúe-lo coa miña versión. - Listo! Agora pode actualizar o seu sitio web e ver o menú vertical neato na barra lateral esquerda mesmo "brillante" menú horizontal +.
- Tarefa Bonus: Imos cambiar o "brillante" menú horizontal para o esquema de cores "dark".
- Dentro do arquivo custom_functions.php:
substituír este código:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
con este código:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Basicamente, estamos comentando unha liña e descomentar a outra. - Agora vai para WordPress Admin-> Ferramentas-> TAVN Listas e prema na icona mencionado "engrenaxe" para editar as propiedades do seu grupo 'menu1.
- Prema na pestana "tema".
- Dentro de "Engadir etiquetas antes de navegación grupo" Área introducir o seguinte código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Agora - recargar a súa páxina - eo seu menú de navegación horizontal "Magic" se fixo escuro, algo así:
Multinivel aninhado Menú CSS - paleta escura tese tema
A paleta de cores escuras poden ser máis axeitados para determinados sitios do que a luz dunha cor. Entón, agora ten unha liberdade de elección na súa vida!
- Para volver ao esquema de cores "brillante" - só desfacer os pasos anteriores "extra".
- Dentro do arquivo custom_functions.php:
- Conclusión:
Amo tema da tese, encántame WordPress e eu adoro o feito de que temos formas de engadir menús de navegación decentes para os nosos portais.
$ 20
Divírtete!
Gleb Esman
{Comentarios sobre esta entrada están pechadas}
