Jagten på den perfekte Lodret menu ...
Del 1 af denne tutorial , der er beskrevet trinvis proces med at opbygge vandret flere niveauer indlejret menu til Wordpress Speciale tema . Del 2 vil fortsætte med at forbedre denne funktionalitet. Her vil vi tilføje "mørke" version af horisontale navigationsmenu, og jeg vil lære dig at skifte mellem "lyst" og "mørke" version. Del 2 er den supersæt i del 1. Det omfatter alle fra del 1 + tilføjer mere cool stuff.
Hovedidéen at jeg ønskede at præsentere er at tilføje lodrette menu til Speciale tema (og til Wordpress i almindelighed). Jeg var på udkig efter virkelig fleksibel, SEO venlige og multi-browser kompatibel vertikal menu, der gør 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 sammen, faldet fra hinanden, understøttes kun et begrænset antal niveauer eller misbehaved i Gates + Ballmers junksplorer 6. Endelig fik jeg tilbage til afprøvede og pålidelige Dynamic Drive menuer som deres vertikale prøver viste sig at være en dejlig sag, passer til min strenge krav. Jeg var nødt til at væsentligt ændre dem selv for at sikre det passer Speciale model.
Den søgen efter perfektion fortsætter ...
Jeg brugte omkring 16 timer på at søge, montage, afprøvning, fastsættelse, polering og tuning lodrette menu er CSS og. Js kode og 3 / 4 af tiden gik med at gøre 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.
Have mulighed 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 menuvalg, men vertikal menu har ikke denne begrænsning, og ville hjælpe enormt. Så her vi går.
Masser af skridt til at gøre det til at ske, er allerede beskrevet i del 1 i selvstudium , så dette vil gøre det til en lidt kortere, men med langt mere funktionsrige resultater.
Så her går det:
Building SEO venlige, lodret, flere niveauer, hierarkisk indlejrede menu til Wordpress og Thesis 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 vertikal menu 'HTML-kode.
- Gør trin 1 - 6 fra del 1 af selvstudium . Dybest set skal du installere og aktivere brugen NAVT plugin + visuelt bygge din menu. Sørg for, at din menu gruppens navn er 'menu1'. Dette navn er indkodet i custom_functions.php
- Klik på 'gear' ikonet for din 'menu1' gruppe for at redigere det er egenskaber:
- Følger Steps 7,1 -7,3 del 1 tutorial til at indstille "Indstillinger", "Vis" og "CSS" faneblade indstillinger.
- Klik nu på "Tema" fane i dialogen. Vi vil overskrive antallet af indstillinger, der (hvis du har fulgt trin 1). Dette er ok - du vil ikke miste noget - men disse ændringer er nødvendige, fordi jeg har ændret noget kode fra trin 1.
Her er hvordan denne dialog skal udfyldes:- Inde i "Theme XPath:" område indtaste denne kode (det kommandoer at udskifte tag med disse klasser):
.jquerycssmenu, .jqueryslidemenu - Indstil "Action" til "Erstat med"
- Inde på "Tilføj tags, før gruppen Navigation" område indtaste denne kode:
<div class='jquerycssmenu' style='margin-top:5px;'> - Inde på "Tilføj tags efter gruppen Navigation" område indtaste denne kode:
<br style='clear: left' /></div> - Klik på [Gem / Luk]-knappen.
- Inde i "Theme XPath:" område indtaste denne kode (det kommandoer at udskifte tag med disse klasser):
- Nu begive sig til Wordpress admin panel -> Udseende -> Widgets.
- Træk "Tekst" widget (fra den store "Tilgængelige widgets" område) i "Sidebar 1"-området til højre. Vi vil tilføje kode i tekst-widget, som vil hjælpe os med at materialisere lodret menu.
BEMÆRK: Jeg formoder du har "Sidebar 1" i eksistens. Speciale indstillinger giver dig mulighed for at slukke for den - men af hensyn til denne tutorial lad gør det være. - Når du trækkes og slippes denne widget - det vil åbner sig som en blomst (jeg føler romantiske nu, at MSIE kamp er overstået).
- I "Title" område enter "Verdens bedste lodrette menu" ... Nå, er du velkommen til at bruge din kreativitet - at teksten vil gå over dit nyfødte lodret menu.
- I stort område for tekst - ind i denne 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å knappen [Gem], klik på "Luk" link.
- Hent opdaterede sæt af filer her .
Dette arkiv omfatter:- Opdateret version af "lyse" horisontale menu kode
- "Dark" version af vandrette menu
- Lodret menu koder
- Opdateret version af custom_functions.php
- Nu skal du unzip dette arkiv og uploade den til 'custom' mappe på din Thesis tema .
Bemærk: hvis du har gjort eventuelle tilpasninger inde custom_functions.php - du nødt til at flette dem. Hvis ikke - er du velkommen til at overskrive det 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 change "lyse" horisontal menuen på "mørke" farveskema.
- Inde 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å førnævnte "gear" ikonet for at redigere egenskaberne for din 'menu1' gruppe.
- Klik på "Theme" fanen.
- Inde på "Tilføj tags, før gruppen Navigation" 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:
Thesis tema - flere niveauer indlejret CSS menu - mørk palet
Mørke farve palette kan være mere egnet til visse steder end den lyse farve én. Så nu har du en valgfrihed i dit liv!
- For at komme tilbage til "lyse" farveskema - bare undo over "Bonus" skridt.
- Inde 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 en anstændig navigationsmenuer til vores portaler.
$ 20
Enjoy!
Gleb Esman
comments } { 5 kommentarer }
