Jakten på den perfekte vertikale menyen ...

Del 1 av denne opplæringen beskrives trinnvis prosess med å bygge horisontale multilevel nestet menyen for Wordpress Thesis tema . Del 2 vil fortsette å forbedre denne funksjonaliteten. Her vil vi legge til "mørke" versjon av horisontal navigasjonsmeny, og jeg vil lære deg hvordan å veksle mellom "lyse" og "mørk" utgave. Del 2 er supersett av Del 1. Det inkluderer alt fra Part 1 + legger mer kule ting.

Hovedideen at jeg ønsket å presentere er å legge vertikale menyen til Thesis tema (og til Wordpress generelt). Jeg var på utkikk etter virkelig fleksibel, SEO vennlig og multi-browser kompatible vertikale menyen som ville tillate å opprette ubegrenset hekkende nivåer.

Web har tonnevis av sider om emnet, men da jeg begynte å prøve alle disse prøvene - de enten brøt ned, falt fra hverandre, støttet kun begrenset antall nivåer eller misbehaved i Gates + Ballmer er junksplorer 6. Endelig fikk jeg tilbake til prøvde og pålitelige Dynamic Drive menyene som deres vertikale prøvene viste seg å være en fin sak som passer til min strenge krav. Jeg måtte betydelig modifisere dem om å sørge for at den passer Thesis modell.
Jakten på perfeksjon fortsetter ...

Jeg brukte omtrent 16 timer å søke, montering, testing, fikse, polering og tuning vertikale menyen i CSS og. JS kode og 3 / 4 av tiden ble brukt slik at det å jobbe i MSIE 6.
Anyways, jeg var fornøyd med det endelige resultatet. Resulterte vertikale navigasjonsmenyen har alle de samme fordelene som horisontale menyen har.

Å ha muligheten til å legge vertikale menyen er veldig viktig til ca 70-80% av portaler på nettet. Horisontale menyer har begrenset "space" for å imøtekomme mange menyvalg, men vertikale menyen har ikke denne begrensningen og ville hjelpe utrolig. Så here we go.

Mange skritt for å gjøre det skje allerede er beskrevet i del 1 av opplæringen slik at dette vil gjøre det for litt kortere, men med mye mer funksjonsrikt resultater.

Så her går det:

Building SEO vennlig, vertikal, multilevel, hierarkisk nestet meny for Wordpress og Thesis tema . Step by Step
(... Hva du aldri trodde var mulig ...)

1. Installer exec php plugin og aktivere den. Vi trenger det fordi jeg vil bruke PHP inne i teksten widgeten til å slippe ut vertikale menyen 'HTML-kode.
2. Har trinn 1 - 6 fra del 1 av opplæringen . I utgangspunktet må du installere og aktivere bruken NAVT plugin + visuelt bygge din meny. Sørg for at menyen gruppen heter "menu1 '. Dette navnet er hardkodet i custom_functions.php
3. Klikk på "giret"-ikonet for din "menu1 'gruppe for å redigere den egenskaper:
   
4. Følger Steps 7,1 -7,3 av Del 1 tutorial for å sette "Options", "Display" og "CSS" tabs innstillinger.
5. Klikk nå på "Theme"-kategorien i denne dialogboksen. Vi vil overskrive antall innstillinger der (hvis du har fulgt trinn 1). Dette er ok - du vil ikke miste noe - men disse endringene er nødvendig fordi jeg har endret noen koden fra trinn 1.
   Her er hvordan denne dialogen må fylles ut:
   1. Innsiden av "Theme XPath:" området inn denne koden (det kommandoer for å erstatte eventuelle tag med disse klassene):
      .jquerycssmenu, .jqueryslidemenu
   2. Sett "Action" til "Erstatt med"
   3. Innsiden av "Add tags før navigasjonen gruppen" området inn denne koden:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Inne på "Legg til koder etter navigering gruppen" området inn denne koden:
      <br style='clear: left' /></div>
   5. Klikk på [Lagre / lukke]-knappen.
6. Nå gå til Wordpress admin panel -> Utseende -> Widgets.
7. Dra "Tekst" widget (fra den store "Tilgjengelige widgets" område) i "Sidebar 1" område til høyre. Vi vil legge kode inn i tekst-widget som vil hjelpe oss å materialisere vertikale menyen.
   MERK: Jeg antar at du har "Sidebar 1" i tilværelsen. Thesis alternativene kan du slå den av - men på grunn av denne opplæringen la gjør det være.
8. Når du dras og slippes denne widgeten - det vil åpnes som en blomst (jeg føler romantisk nå som MSIE kampen er over).
9. I "Tittel" område enter "Verdens beste vertikale menyen" ... Vel, føler seg fri til å bruke din kreativitet - som teksten vil gå over den nylig født vertikale menyen.
10. I store område for teksten - inn 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;
?>
11. Trykk [Lagre] knappen, klikk på "Close"-linken.
12. Last ned oppdatert sett med filer her .
    Dette arkivet omfatter:

    
    

    • Oppdatert versjon av "lyse" horisontal meny kode
    • "Dark" versjon av horisontale menyen
    • Vertikale menyen koder
    • Oppdatert versjon av custom_functions.php
13. Nå må du pakke ut dette arkivet og laste den inn i "egendefinert" katalogen av Thesis tema .
    Merk: hvis du har gjort noen tilpasninger inne custom_functions.php - du vil trenge å sette dem sammen. Hvis ikke - føler seg fri til å overskrive den med versjonen min.
14. Voila! Nå kan du laste inn nettsiden og se den samme "lyse" horisontale menyen + neato vertikale menyen i venstre sidebar.
15. BONUS oppgave: La endre "lyse" horisontale menyen på "mørk" farge ordningen.
    1. Inne custom_functions.php file:
       erstatte denne koden:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       med denne koden:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       I utgangspunktet er vi kommentere ut en linje og uncommenting den andre.
    2. Nå gå til Wordpress admin-> Verktøy-> NAVT Lister og klikk på ovennevnte "utstyr"-ikonet for å redigere egenskapene for 'menu1' gruppe.
    3. Klikk på "Theme"-kategorien.
    4. Innsiden av "Add tags før navigasjonen gruppen" området inn denne koden:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Nå - reload din side - og din viktigste horisontal navigasjonsmeny "magisk" ble mørkt, noe sånt som at:
       

       Thesis tema - multilevel nestet CSS meny - mørk palett

       Mørk fargepalett kan være mer egnet for visse områder enn lyset farge en. Så nå har du en valgfrihet i ditt liv!

    6. For å komme tilbake til "lyse" farger - bare angre over "Bonus" trinn.
16. Konklusjon:
    Jeg elsker Thesis Theme , jeg elsker Wordpress og jeg elsker det faktum at vi har et stykke å legge anstendig navigasjon menyer til våre portaler.

$ 20

Enjoy!

Gleb Esman

Tagged som: hierarkisk meny for WordPress , hvordan å bygge wordpress navigasjon , multilevel menyen for wordpress , navigasjonsmenyen for WordPress , avhandling tema , thesis tema menyen , avhandling tema tutorial , wordpress menyen , wordpress navigasjon , wordpress nestet menyen