Sökandet efter den perfekta vertikala menyn ...

Del 1 av den här guiden beskrivs steg för steg process för att bygga horisontella nivåer kapslade menyn för Wordpress avhandling tema . Del 2 kommer att fortsätta på att förbättra denna funktion. Här kommer vi att lägga till "mörk" version av horisontell navigering menyn och jag kommer att lära dig hur du växlar mellan "ljusa" och "mörk" version. Del 2 är superset del 1. Den innehåller allt från del 1 + ger mer cool stuff.

Tanken att jag ville presentera är att lägga vertikala menyn till Avhandling tema (och Wordpress i allmänhet). Jag letade efter riktigt flexibel, SEO vänliga och multi-webbläsare kompatibel vertikal meny som skulle göra det möjligt att skapa obegränsade häckande nivåer.

WEB har massor av sidor på ämnet men när jag började prova alla dessa prover - de antingen gick sönder, fallit isär, stöds endast begränsat antal nivåer eller misskött sig i Gates + Ballmer: s junksplorer 6. Till slut fick jag tillbaka till beprövade och pålitliga Dynamic Drive menyer som deras vertikala prover visade sig vara en trevlig fallet som passar mina höga krav. Jag var tvungen att väsentligt ändra dem om att se till att den passar Thesis modell.
Strävan efter perfektion fortsätter ...

Jag spenderade ca 16 timmar med att söka, montering, provning, fastställande, polering och trimma vertikala menyer CSS och. JS kod och 3/4 av tiden ägnades åt att den ska fungera i MSIE 6.
Iaf, jag var nöjd med slutresultatet. Resulterade vertikala navigeringsmenyn har alla de samma fördelar som horisontell meny har.

Med möjlighet att lägga till vertikala menyn är mycket viktigt att ca 70-80% av portaler på webben. Horisontella menyer har begränsat "utrymme" för att rymma många menyval, men vertikal meny inte har denna begränsning och skulle hjälpa oerhört. Så här kör vi.

Massor av åtgärder för att få det att hända har redan beskrivits i del 1 av läraren , så detta kommer att göra det för lite kortare en, men med mycket mer funktionsrika resultat.

Så här går det:

Building SEO vänliga, vertikal, multilevel, hierarkiskt kapslas meny för Wordpress och Thesis temat . Steg för steg
(... Vad du aldrig trodde var möjligt ...)

1. Installera exec php plugin och aktivera den. Vi kommer att behöva det eftersom jag kommer att använda PHP inne i texten widgeten att avge vertikal meny "HTML-kod.
2. Göra steg 1 - 6 från del 1 av handledning . I grund och botten måste du installera och aktivera använd NAVT plugin + visuellt bygga din meny. Se menyn gruppnamnet är "menu1". Detta namn är hårdkodad i custom_functions.php
3. Klicka på "växel" ikonen för "menu1" gruppen för att redigera IT: s egenskaper:
   
4. Följer steg 7,1 -7,3 i del 1 handledning för att ställa in Alternativ "," Visa "och" CSS "flikar inställningar.
5. Klicka nu på "tema"-fliken i den här dialogrutan. Vi kommer att skriva över antal inställningar där (om du följt steg 1). Det är ok - du kommer inte förlora något - men dessa förändringar är nödvändiga för att jag har ändrat lite kod från steg 1.
   Så här här dialogrutan måste fyllas i:
   1. Inuti "Theme XPath:" område in denna kod (den kommandon för att ersätta en tagg med dessa klasser):
      .jquerycssmenu, .jqueryslidemenu
   2. Ställ in "Action" till "Ersätt med"
   3. Inuti "Lägg till taggar innan navigationen grupp" området in denna kod:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Inuti "Lägg till taggar efter gruppen Navigering" område in denna kod:
      <br style='clear: left' /></div>
   5. Klicka på [Spara / Stäng].
6. Nu gå till Wordpress admin panel -> Utseende -> Widgets.
7. Dra "Text" widget (från den stora "Tillgängliga widgets" område) i "Sidebar 1" område på höger. Vi kommer att lägga kod i Text widget som kommer att hjälpa oss att förverkliga vertikal meny.
   OBS: Jag antar att du har "Sidebar 1" i tillvaron. Avhandling ger dig möjlighet att stänga av den - men till förmån för denna tutorial låter gör det vara.
8. När du dra och släppa denna widget - det öppnar sig som en blomma (jag känner romantiska nu MSIE kamp är över).
9. I "Titel" område enter "Världens bästa vertikal meny" ... Ja, gärna använda din kreativitet - att texten kommer att gå över din nystartade vertikal meny.
10. I stort område för text - in denna PHP-kod:
    <?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;
?>
11. Tryck på [Spara]-knappen, klicka på "Stäng"-länken.
12. Ladda ner uppdaterade filer här .
    Arkivet innehåller:

    
    

    • Uppdaterad version av "ljusa" horisontell meny koden
    • "Dark" version av horisontella menyn
    • Vertikala meny-koder
    • Uppdaterad version av custom_functions.php
13. Nu måste du packa detta arkiv och ladda det i "anpassad" katalog i din avhandling tema .
    Obs: om du har gjort några anpassningar inom custom_functions.php - du skulle behöva slå samman dem. Om inte - välkommen att skriva det med min version.
14. Voila! Nu kan du ladda din webbplats och se samma "ljusa" horisontell meny + Neato vertikala menyn till vänster.
15. BONUS uppgift: Låt ändra "ljusa" horisontell meny på den "mörka" färgschema.
    1. Insidan custom_functions.php fil:
       ersätter denna kod:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       med denna kod:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       I grunden är vi kommenterar ut en linje och avkommenterat den andra.
    2. Gå nu till Wordpress admin-> Verktyg-> NAVT listor och klicka på ovan nämnda "växel" ikonen för att redigera egenskaperna för din "menu1" grupp.
    3. Klicka på "Tema"-fliken.
    4. Inuti "Lägg till taggar innan navigationen grupp" området in denna kod:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Nu - ladda din sida - och din huvudsakliga horisontell navigation menyn "magiskt" blev mörkt, något sånt:
       

       Examensarbete theme - multilevel kapslade CSS meny - mörk paletten

       Mörk färgpalett kan vara mer lämpliga för vissa platser än den ljusa färgen en. Så nu har du en valfrihet i ditt liv!

    6. För att komma tillbaka till "ljusa" färgskalan - bara ångra ovanför "Bonus" steg.
16. Slutsats:
    Jag älskar Examensarbete Theme , jag älskar Wordpress och jag älskar det faktum att vi har en sätt att lägga till anständiga navigeringsmenyer till våra portaler.

$ 20

Njut!

Gleb Esman

Taggad som: hierarkisk meny för WordPress , hur man bygger wordpress navigation , nivåer menyn för wordpress , navigation meny för wordpress , examensarbete tema , uppsats tema menyn , avhandlingen tema handledningen , wordpress menyn , wordpress navigering , wordpress kapslade menyn