Ønsket om den perfekte Lodret menu ...
Del 1 i denne tutorial er beskrevet trinvis proces med at opbygge horisontale multilevel indlejret menu for Wordpress Thesis tema . Del 2 vil fortsætte med at øge denne funktionalitet. Her vil vi tilføje "mørk" version af horisontale navigationsmenu, og jeg vil lære dig at skifte mellem "lyse" og "mørk" version. Del 2 er overordnet del 1. Det omfatter alt fra Del 1 + tilføjer mere cool stuff.
Hovedtanken, at jeg ville forelægge tilføjer lodret menu til Tese tema (og Wordpress i almindelighed). Jeg var på udkig efter virkelig fleksibel, SEO venlige og multi-browser kompatibel lodrette menu, der ville gøre det muligt at skabe ubegrænset nesting niveauer.
WEB har tonsvis af sider om emnet, men da jeg begyndte at prøve alle disse prøver - de enten brød ned, faldet fra hinanden, understøttes kun et begrænset antal niveauer eller misbehaved i Gates + Ballmer's junksplorer 6. Endelig fik jeg tilbage til prøvede og betroede Dynamic Drive menuer som deres vertikale prøver viste sig at være en hyggelig sag, der passer til min strenge krav. Jeg havde en markant ændre dem selv at sørge for det passer Eksamensprojekt model.
Ønsket om perfektion fortsætter ...
Jeg brugte omkring 16 timer på at finde, samling, prøvning, fastsættelse, polering og tuning vertikale menu's CSS og. Js-kode og 3 / 4 af tiden blev brugt som gør det at arbejde i MSIE 6.
Anyways, jeg var tilfreds med det endelige resultat. Resulterede lodrette navigationsmenu har alle de samme fordele , at horisontale menu er.
Under muligheden for at tilføje lodrette menu er meget vigtigt at omkring 70-80% af portaler på nettet. Vandret menuer har begrænset "plads" til at rumme mange menu valg, men lodret menu har ikke denne begrænsning og ville hjælpe enormt. Så here we go.
Masser af skridt til at gøre det ske, er allerede beskrevet i del 1 i tutorial så dette vil gøre det til en lidt kortere, men med meget mere funktionsrige resultater.
Så her det går:
Building SEO venlige, lodret, multilevel, hierarkisk nested menu for Wordpress og Eksamensprojekt tema . Trin for Trin
(... Hvad du aldrig troede muligt ...)
- Installer exec php plugin og aktivere den. Vi får brug for det, fordi jeg vil bruge PHP inde i teksten widget til at udlede vertikale menu 'HTML-kode.
- Må trin 1 - 6 fra del 1 tutorial . Dybest set skal du installere og aktivere brugen NAVT plugin + visuelt bygge din menu. Sørg for, at menuen gruppens navn er 'menu1 «. Dette navn er indkodet i custom_functions.php
- Klik på 'gear' ikonet for din 'menu1' gruppe for at redigere det egenskaber:
- Følger Steps 7,1 -7,3 del 1 tutorial for at indstille "Options", "Display" og "CSS" faner indstillinger.
- Klik nu på "Theme" tab af denne dialog. Vi vil overskrive antal indstillinger der (hvis du fulgt trin 1). Dette er ok - du vil ikke miste noget - men disse ændringer er nødvendige, fordi jeg har skiftet noget kode fra trin 1.
Her er hvordan denne dialog skal udfyldes:- Inde i "Theme XPath:" område indtaste koden (den kommandoer til erstatning tag med disse klasser):
.jquerycssmenu, .jqueryslidemenu - Indstil "Action" til "Erstat med"
- Inde på "Tilføj tags før navigation gruppen" område indtaste denne kode:
<div class='jquerycssmenu' style='margin-top:5px;'> - Inde på "Tilføj tags efter navigation gruppen" område indtaste denne kode:
<br style='clear: left' /></div> - Klik på [gem / luk] knappen.
- Inde i "Theme XPath:" område indtaste koden (den kommandoer til erstatning tag med disse klasser):
- Nu begive sig til Wordpress admin panel -> Udseende -> Widgets.
- Træk "Tekst" widget (fra den store "Tilgængelig widgets" område) i "Sidebar 1" område til højre. Vi vil føje kode til tekst widget, der vil hjælpe os med at materialisere lodret menu.
BEMÆRK: Jeg formoder, du har "Sidebar 1" i eksistens. Afhandling muligheder giver dig mulighed for at slukke det - men af hensyn til denne tutorial lad gøre det. - Når du trækkes og slippes denne widget - det vil åbner som en blomst (Jeg føler mig romantisk, nu hvor MSIE kamp er slut).
- I "Title" område indtaste "Verdens bedste vertikale menu" ... Nå, er du velkommen til at bruge din kreativitet - at teksten vil gå over din nyfødtes lodret menu.
- I store område, for teksten - gå ind på dette PHP kode:
<?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;
?> - Tryk på [Save] knappen, klik på "Luk" link.
- Download opdateret sæt filer her .
Dette arkiv omfatter:- Opdateret version af "lyse" horisontal menu kode
- "Dark" version af horisontale menu
- Lodret menu koder
- Opdateret version af custom_functions.php
- Nu skal du unzippe dette arkiv og uploade det i "skik" mappe i din afhandling tema .
Bemærk: hvis du har gjort noget tilpasninger inden custom_functions.php - du nødt til at flette dem. Hvis ikke - er du velkommen til at overskrive den med min version. - Voila! Nu kan du genindlæse din hjemmeside og se de samme "lyse" horisontale menu + neato lodret menu i venstre sidebar.
- BONUS opgave: Lad forandring "lyse" horisontale menu ind på "mørke" farveskema.
- Inside custom_functions.php fil:
erstatte denne kode:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
med denne kode:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Dybest set er vi udkommentere en linje og afkommentering den anden. - Nu begive sig til Wordpress admin-> Værktøj-> NAVT Lister og klik på ovennævnte "gear" ikonet for at redigere egenskaberne for din 'menu1' gruppe.
- Klik på "Theme" tab.
- Inde på "Tilføj tags før navigation gruppen" område indtaste denne kode:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Nu - genindlæse din side - og din største horisontale navigationsmenu "magisk" blev mørkt, noget i den retning:
Afhandling tema - multilevel indlejrede CSS menu - mørk palet
Mørk farve palette kan være mere egnet til visse lokaliteter end den lyse farve én. Så nu har du en valgfrihed i dit liv!
- For at komme tilbage til "lyse" farveskema - bare fortryde ovenstående "Bonus" skridt.
- Inside custom_functions.php fil:
- Konklusion:
Jeg elsker Thesis Theme , jeg elsker Wordpress, og jeg elsker det faktum, at vi har en måder at tilføje anstændigt navigationsmenuer til vores portaler.
$ 20
God fornøjelse!
Gleb Esman
comments } ( 5 kommentarer )
