Dodajanje več ravneh, ugnezdena, SEO prijazen navigacijski meni v WordPress - 2. del

Prizadevanje za popolno Vertical meniju ...

Del 1 te vaje je opisano korak za korakom proces izgradnje horizontalno ravneh ugnezdenih menu za WordPress Thesis teme . 2. del se bo nadaljeval na izboljšanje te funkcije. Tu bomo dodali "temno" različico horizontalni navigacijski meni in vas bom naučil, kako lahko preklapljate med "svetla" in "temna" različico. Del 2 je nadgradnja 1. dela. Vključuje vse iz dela 1 + dodaja bolj kul stvari.

Glavna ideja, ki sem želel predstaviti je dodal navpično meni, da Thesis teme (in WordPress na splošno). Iskal sem zelo prilagodljiv, SEO prijazen in multi-brskalnik združljiva vertikalni meni, da bi se omogočilo, da ustvarite neomejeno gnezdijo ravni.

WEB je ton strani na to temo, vendar, ko sem začel, da bi poskušali vse te vzorce - bodisi propadla, razpadla, podpira le omejeno število ravni ali izneveril v Gates + Ballmer je junksplorer 6. Končno sem dobil nazaj na preizkušen in zaupanja vreden Dynamic Drive menijih njihovi vertikalni vzorci izkazala za lep primer, ki se prilega moje stroge zahteve. Moral sem jih bistveno spremeniti, čeprav se prepričajte, da ustreza modelu Thesis.
Prizadevanje za popolnost nadaljuje ...

Sem porabil približno 16 ur iskali, montaža, testiranje, pritrjevanje, poliranje in tuning vertikalnih menuja je CSS in. Js kodo in 3/4 časa je bilo porabljenega kar je za delo v MSIE 6.
Kakorkoli že, sem zadovoljen s končnim rezultatom. Rezultat vertikalne navigacijski meni ima vse enake koristi , ki jih ima horizontalni menu.

Ob možnost, da dodate navpično meni je zelo pomembno, da se približno 70-80% portalov na spletu. Horizontalni meniji so omejeni "prostor" za namestitev veliko izbire menija, ampak vertikalno meni nima te omejitve in bi pomagal neizmerno. Torej, gremo.

Veliko korakov, da bi se zgodilo že opisano v delu 1 tutorski , tako da bo to uspelo za nekoliko krajša eno, vendar z veliko več funkcijami bogato rezultatov.

Torej, tukaj gre:

Stavba SEO prijazen, vertikalni ravneh, hierarhično ugnezdeni meni za WordPress in diplomske teme. Korak za korakom
(... Kaj si nikoli mislil, mogoče ...)

1. Namestite exec php plugin in ga aktivirati. Ga bomo potrebovali, ker bom uporabil PHP znotraj besedila widget oddajajo Vertikalna "meniju HTML kodo.
2. Narediti korake 1-6 iz dela 1 vadnici . V bistvu morate namestiti in aktivirati uporabo NAVT plugin + vizualno zgraditi svoj jedilnik. Poskrbite, da vaš ime menija skupina "menu1". To ime so zakodirani v custom_functions.php
3. Kliknite na "orodja" ikono za vašo skupino "menu1" urediti svoj 'lastnosti:
   
4. Naslednji koraki 7,1 -7,3 iz dela 1 tutorial, da nastavite "Možnosti", "Display" in "CSS" Nastavitve zavihke.
5. Sedaj kliknite na "temo" kartici tem pogovornem oknu. Mi bo prepisalo številne nastavitve tam (če ste bili po korak 1). To je ok - ne boste izgubili ničesar - vendar so potrebni te spremembe, ker sem spremenil nekaj kode iz 1. koraka.
   Tukaj je, kako je treba ta dialog je treba izpolniti:
   1. Znotraj "Theme XPath:" Področje to kodo (to zapoveduje nadomestiti kakršno koli obešanko s temi razredi):
      .jquerycssmenu, .jqueryslidemenu
   2. Nastavite "ukrep", da "Zamenjaj z"
   3. Znotraj "Dodaj oznake in skupine navigacije" območje vnesite naslednjo kodo:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Znotraj "Dodaj oznake po skupini navigacije" območje vnesite naslednjo kodo:
      <br style='clear: left' /></div>
   5. Kliknite na [Save / zapreti] gumb.
6. Zdaj pa pojdite na WordPress admin panel -> Videz -> Widgets.
7. Drag "besedilo" widget (od velikega "Razpoložljivi widgets" območje) na "kredenca 1" območje na desni strani. Bomo dodajali kode v besedilo widget, ki nam bo pomagalo, da se uresniči vertikalni meni.
   OPOMBA: Predvidevam, da imate "kredenca 1" v obstoj. Možnosti teza vam omogoča, da ga izklopite - vendar zaradi te vaje naj bi bilo.
8. Ko enkrat povleče in spusti ta widget - bo odpre kot cvet (imam občutek, romantična sedaj, ko je MSIE boj več).
9. V "Naslov" območje vnesite "najboljši svetovni navpično meni" ... No, vas prosimo, da uporabite svojo kreativnost - to besedilo bo šel nad svojim na novo rojeni navpični meniju.
10. V velikem prostoru za besedilo - vstopiti v ta PHP kodo:
    <?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. Pritisnite gumb [Save], kliknite na "Zapri" link.
12. Prenesete posodobljen nabor datotek tukaj .
    Ta arhiv vsebuje:

    
    

    • Posodobljena različica "svetlo" horizontalnem oznako menija
    • "Dark" različica horizontalnega menija
    • Vertikalne kode menija
    • Posodobljena različica custom_functions.php
13. Zdaj morate razširite to arhiva in jo naložite v "custom" direktorij vašega diplomske teme.
    Opomba: Če ste storili vse prilagoditve v notranjosti custom_functions.php - bi si morali, da jih združiti. Če ne - vas prosimo, da jo prepiše s svojo različico.
14. Voila! Sedaj lahko naložite svoje spletne strani in videli isto "svetlo" horizontalno meni + neato vertikalni menija na levi stranski vrstici.
15. BONUS naloga: Naj spremeniti "svetlo" horizontalno meni namestite na "temno" barvno shemo.
    1. Znotraj custom_functions.php datoteke:
       zamenjati to kodo:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       s to oznako:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       V bistvu smo komentirate eno vrstico in Odkomentiranje drugega.
    2. Zdaj pa pojdite na WordPress Admin-> Orodja-> NAVT seznamov in kliknite na zgoraj navedene "orodja" ikono za urejanje lastnosti vaše skupine "menu1".
    3. Kliknite "Theme" zanka.
    4. Znotraj "Dodaj oznake in skupine navigacije" območje vnesite naslednjo kodo:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Zdaj - osvežite stran - in vaš glavni horizontalni navigacijski meni "čudežno" postala temna, nekaj takega:
       

       Thesis Tema - večnivojsko ugnezdena CSS menu - temno paleta

       Temno barvno paleto lahko bolj primeren za nekatera območja kot svetlo barvo enega. Torej, sedaj imate možnost izbire v svojem življenju!

    6. Da se vrnem na "svetlo" barvno shemo - preprosto razveljavite zgoraj "bonus" korakih.
16. Zaključek:
    Ljubim Thesis Tema, ljubim WordPress in ljubim dejstvo, da imamo možnosti za dodajanje dostojno navigacijske menije naših portalih.

20 $

Uživajte!

Gleb Esman

Označili kot: hierarhični meni za WordPress , kako graditi WordPress navigacije , ravneh menija za WordPress , navigacija menija za WordPress , teza teme , meni tema disertacije , teza temo učbenik , WordPress meni , WordPress navigacija , WordPress ugnezdena meni