Pridanie multilevel, vnorené, SEO priateľský navigačné menu WordPress - 2. časť

Pátranie po dokonalej vertikálnej menu ...

Časť 1 tohto návodu popísané krok za krokom procesu budovania horizontálne viacúrovňové vnorené menu pre tému práce WordPress . Časť 2 bude pokračovať posilniť túto funkciu. Tu pridáme "dark", verzia horizontálne navigačné menu a ja vás naučí, ako prepínať medzi "jasný" a "temnú" verziu. Časť 2 je podmnožinou časti 1. Obsahuje všetko z Časti 1 + pridáva ďalšie cool veci.

Hlavná myšlienka, že by som chcel predstaviť pridáva vertikálne menu k téme práce (a WordPress všeobecne). Hľadal som naozaj flexibilné, SEO priateľský a multi-kompatibilný prehliadač vertikálne menu, ktoré by umožnilo vytvoriť neobmedzené množstvo úrovní vnorenia.

WEB má veľa stránok na túto tému, ale keď som sa začal snažiť všetky tieto vzorky - buď sa pokazili, rozpadla, podporované iba obmedzený počet úrovní alebo hneval vo Gates + junksplorer Ballmer 6. Nakoniec som sa vrátil do osvedčenej Dynamic Drive menu ako ich vertikálnej vzorky sa ukázala byť pekné puzdro, ktorá vyhovuje mojej prísne požiadavky. Musel som významne upravovať keď sa uistiť, že sa hodí Diplomový model.
Pátranie po dokonalosti pokračuje ...

Som strávil asi 16 hodín hľadania, montáž, skúšanie, upevnenie, leštenie a ladenie vertikálne menu v CSS a JS. Kód a 3/4 času strávil robiť to pracovať v MSIE 6.
Tak ako tak, bol som spokojný s konečným výsledkom. Výsledkom vertikálne navigačné menu obsahuje všetky rovnaké výhody , ktoré má horizontálne menu.

S schopnosť pridať vertikálne menu je veľmi dôležité, aby o 70-80% portálov na webe. Horizontálne menu majú obmedzený "priestor", aby ubytovať mnoho ponuky možností, ale vertikálne menu nemá toto obmedzenie a pomôže nesmierne. Tak ideme na to.

Veľa krokov, aby sa to stalo už popísané v časti 1 tutoriále takže to bude robiť to pre trochu kratšie, ale s oveľa viac výsledkov nabitý funkciami.

Tak tu to je:

Stavebné SEO priateľský, vertikálne, viacúrovňový, hierarchicky vnorené menu pre WordPress a tému práce. Krok za krokom
(... Čo nikdy nenapadlo, že je to možné ...)

1. Nainštalujte exec php plugin a aktivovať ho. Budeme potrebovať, pretože budem používať PHP vnútri textového widgetu vydávať vertikálne menu "HTML kód.
2. Vykonajte kroky 1-6 z časti 1 tutoriálu . V podstate je potrebné nainštalovať a aktivovať pomocou NAVT plugin + vizuálne vytvárať vaše menu. Uistite sa, že vaša ponuka je názov skupiny "Menu1". Tento názov je napevno v custom_functions.php
3. Kliknite na "prevodovky" ikonu "Nabídka1" skupiny ho upraviť vlastnosti:
   
4. Vyplýva kroky 7,1 -7,3 z Časti 1 kurzu pre nastavenie "Options", "DISPLAY" a "CSS" tabs nastavenie.
5. Teraz kliknite na "tému" záložke dialógu. Budeme prepísať niektoré nastavenia (pokiaľ ste tam boli po kroku 1). To je v poriadku - nebudete nič stratiť - ale tieto zmeny sú potrebné, pretože som zmenil nejaký kód z kroku 1.
   Tu je návod, ako tento dialóg musí byť vyplnené:
   1. Vnútri "Téma xpath:" Oblasť zadajte tento kód (to prikazuje nahradiť akýkoľvek štítok s týmito tried):
      .jquerycssmenu, .jqueryslidemenu
   2. Nastavte "Akcie" na "Nahradiť"
   3. Vnútri "Pridať tagy do skupiny" oblasti navigácie zadajte tento kód:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Vnútri "pridať vyhľadávacie slová po navigačnej skupiny" oblasti zadajte tento kód:
      <br style='clear: left' /></div>
   5. Kliknite na [Save / Zatvoriť].
6. Teraz prejdite na WordPress admin panel -> Vzhľad -> Widgety.
7. Presuňte "Text" výtvor (z veľkého "Dostupné widgety" plochy) na "1" Sidebar oblasti na pravej strane. Budeme pridávať kód do textového widgetu, ktorý nám pomôže zhmotniť vertikálne menu.
   Poznámka: Predpokladám, že máte "Bočný panel 1" v existenciu. Diplomová práca Možnosti umožňuje vypnúť - ale pre účely tohto tutoriálu nechať, aby to bolo.
8. Akonáhle budete preťahovať tento widget - bude sa otvára ako kvet (mám pocit, že sa romantická MSIE boj je u konca).
9. V "hlave" zapíšte "najlepších svetových vertikálne menu" ... No, neváhajte využiť svoju kreativitu - tento text sa ísť nad novo narodeného vertikálne menu.
10. Vo veľkom priestore pre text - zadajte tento kód PHP:
    <?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. Stlačte tlačidlo [Uložiť] tlačidlo, kliknite na tlačidlo "Zavrieť" link.
12. Stiahnite si aktualizovaný súbor súbory tu .
    Tento archív obsahuje:

    
    

    • Aktualizovaná verzia "jasné" horizontálne menu kódu
    • "Temný" verzia horizontálne ponuke
    • Vertikálne menu kódy
    • Aktualizovaná verzia custom_functions.php
13. Teraz je potrebné rozbaliť tento archív a nahrajte ho do "vlastnej" adresára Téma diplomovej práce.
    Poznámka: Ak ste urobili nejaké úpravy vnútri custom_functions.php - si musíte zlúčiť. Ak nie - pokojne ho prepísať s mojou verzii.
14. Voila! Teraz môžete načítať vaše webové stránky a nájdete rovnakú "jasné" horizontálne menu + NEAT vertikálne menu v ľavom stĺpci.
15. BONUS úloha: Poďme zmeniť "jasné" horizontálne menu na "temné" farebnú schému.
    1. Vnútri custom_functions.php súboru:
       nahradiť tento kód:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       s týmto kódom:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       V podstate sme okomentovaní jeden riadok a uncommenting druhú.
    2. Teraz prejdite na WordPress Admin-> Nástroje-> NAVT Zoznamy a kliknite na vyššie uvedené "prevodovky" ikonu upravovať vlastnosti vášho "Nabídka1" skupiny.
    3. Kliknite na "tému" kartu.
    4. Vnútri "Pridať tagy do skupiny" oblasti navigácie zadajte tento kód:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Teraz - reload stránky - a vaše hlavné horizontálne navigačné menu "magicky" zatemnený, niečo také:
       

       Téma diplomovej práce - multilevel vnorené CSS menu - tmavá paleta

       Tmavá farebná paleta môže byť vhodnejšie pre určité webové lokality, ako svetlú farbu jeden. Takže teraz máte slobodu voľby vo svojom živote!

    6. Ak sa chcete vrátiť k "jasné" farebná schéma - stačí zrušiť vyššie uvedené kroky "bonus".
16. Záver:
    Milujem práce na tému, milujem WordPress a ja som rád, že máme spôsoby, ako pridať slušné navigačné menu našich portáloch.

20 dolárov

Užite si to!

Gleb Esper

Tagged as: hierarchické menu pre WordPress , ako budovať wordpress navigácia , viacúrovňové ponuky pre WordPress , navigačné menu pre WordPress , tému práca , ponuka práce na tému , práca na tému tutorial , wordpress ponuku , wordpress navigácia , wordpress podponuky