A procura ao menú perfecto Vertical ...
Parte 1 deste tutorial descrito proceso paso a paso da construción do menú horizontal multinivel aninhada para WordPress tema da tese . Da peza de 2 continuará en para mellorar este funcionalidade. Aquí imos engadir unha versión "dark" do menú de navegación horizontal e eu vou ensinar como cambiar entre "brillante" ea versión "dark". Parte 2 é o superconjunto da Parte 1. Inclúe todos da parte 1 + engadir máis cousas legais.
A idea principal que eu quería presentar é a adición de menú vertical para tema da tese (e para o WordPress en xeral). Eu estaba a buscar moi flexible, SEO agradable e multi-navegador menús compatible vertical que permitiría a creación de ilimitadas niveis de aninhamento.
WEB ten toneladas de páxinas sobre o tema, pero cando comecei a tentar todas estas mostras - que quere rompe, caeu por terra, apoiada só un número limitado de niveis ou se comportado mal Gates + Ballmer junksplorer 6. Finalmente volvín ao probadas e fiables menús Dynamic Drive como as súas mostras verticais demostrou ser un bo caso de que encaixa miñas esixencias rigorosas. Tiven que cambiar significativamente los aínda que para estar seguro que encaixa modelo de tese.
A procura da perfección segue ...
Eu pasei preto de 16 horas buscando, montaxe, probas, reparación, pulido e axuste CSS menú vertical e. Código js e 3/4 do tempo foi gasto a facer ela funcionar no MSIE 6.
En calquera caso, quedei contento co resultado final. Menú de navegación resultou vertical ten os mesmos beneficios que ten menú horizontal.
Tendo en capacidade de engadir menú vertical é moi importante para preto de 70-80% de portais web. Menús horizontais limitaron "espazo" para acomodar moitas opcións do menú, pero menú vertical non ten esa limitación e axudaría inmensamente. Entón, imos alí.
Lotes de pasos para que isto ocorre xa están descritos na parte 1 do tutorial para que isto pode facelo un pouco máis curto, pero con resultados característica moito máis ricos.
Entón aquí vai:
Edificio SEO agradable, vertical, menú, a varios niveis xerarquicamente aninhado para WordPress e tema da tese . Paso a Paso
(... O que nunca penso se é posible ...)
- Instalar exec plugin do php e activa-lo. Imos ter del, porque eu vou usar PHP dentro do widget de texto para emitir código HTML menú vertical ".
- Siga os pasos 1 - 6 de parte 1 do tutorial . Basicamente, ten que instalar e activar o uso do plugin TAVN + construír visualmente o seu menú. Asegúrese de que o seu nome do grupo de menú 'menu1'. O nome codificado en custom_functions.php
- Prema no botón 'engrenaxe' icona para o seu 'menu1' grupo para editar as súas propiedades:
- Segue os pasos de 7,1 -7.3 tutorial Parte 1 para definir "Opcións", "Mostrar" e "CSS" opcións de guías.
- Agora prema en "Theme" guía desa caixa de diálogo. Imos substituír o número de opcións de alí (se está seguindo o paso 1). Isto é ok - non vai perder nada - pero estas modificacións son necesarias porque eu mudei algúns códigos dende o paso 1.
Vexa como este diálogo ten que ser cuberto:- Dentro do "Tema XPath:" área de introducir este código (que comanda a substituír calquera etiqueta con esas clases):
.jquerycssmenu, .jqueryslidemenu - Estableza "Action" para "Substituír por"
- Dentro "Engadir tags antes navegación grupo" área introduce este código:
<div class='jquerycssmenu' style='margin-top:5px;'> - Dentro "Engadir etiquetas de navegación despois do grupo" área introduce este código:
<br style='clear: left' /></div> - Prema en [Gardar / pechar] botón.
- Dentro do "Tema XPath:" área de introducir este código (que comanda a substituír calquera etiqueta con esas clases):
- Agora vai para WordPress panel de admin -> Aparencia -> Widgets.
- Arrastre "Texto" widget (do "widgets dispoñibles" grande área) en "Sidebar 1" área á dereita. Nós estar engadindo código no widget de texto que nos axudará 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 facelo ser. - Unha vez que arrastrar e soltar este widget - el ábrese como unha flor (eu estou sentindo agora romántica que loita MSIE é máis).
- En "Title" área de entrar "mundo mellor menú vertical" ... Ben, Sinto-se a liberdade de usar a súa creatividade - que o texto vai por enriba do seu menú de acabado de nacer vertical.
- Na gran área para o texto - insira 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 [Gardar], prema na ligazón "Pechar".
- Descarga actualizado conxunto de arquivos aquí .
Este ficheiro inclúe:- Versión actualizada do "brillante" código de menú horizontal
- Versión "Dark" do menú horizontal
- Vertical códigos de menú
- Versión actualizada do custom_functions.php
- Agora ten que descomprimir este ficheiro e enviá-lo para o cartafol "custom" do seu tema da tese .
Nota: se ten feito todas as personalizacións dentro custom_functions.php - precisa para mestura-las. Se non - sexa a vontade para substitúe-lo coa miña versión. - Listo! Agora podes actualizar o seu sitio web e ver o mesmo menú "brillante" horizontal + neato menú vertical da barra lateral esquerda.
- Tarefa Bônus: Imos cambiar o menú "brillante" horizontal sobre o esquema de cores "dark".
- Dentro 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 o WordPress Admin-> Ferramentas-> Listas TAVN e prema o devandito "gear" icona para editar as propiedades do seu 'menu1' grupo.
- Prema en "Theme" guía.
- Dentro "Engadir tags antes navegación grupo" área introduce este código:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Agora - recargar a súa páxina - e seu menú de navegación principal horizontal "Magic" se fixo escuro, algo así:
Tema da tese - multilevel menú CSS nested - paleta escura
Paleta de cor escura poden ser máis axeitados para determinados sitios que a cor da luz. Entón agora ten unha liberdade de elección na súa vida!
- Para volver ao esquema de cores "brillante" - só por riba desfacer "Bonus" pasos.
- Dentro arquivo custom_functions.php:
- Conclusión:
Eu amo tema de tese , eu amo o Wordpress e eu adoro o feito de que temos algunhas formas para engadir menús de navegación decente para os nosos portais.
$ 20
Disfrútao se!
Gleb Esman
comments } { 5 comentarios }
