Pátranie po dokonalej vertikálne menu ...
Časť 1 tohto návodu je popísané krok za krokom procesu budovania horizontálne viacúrovňové vnorené menu pre Wordpress tému práce . Časť 2 bude pokračovať na posilnenie tejto funkcie. Tu budeme pridávať "dark" verziu horizontálne navigačné menu a ja vás naučí, ako sa prepínať medzi "jasný" a "dark" verziu. Časť 2 je podmnožinou časti 1. Zahŕňa všetky z časti 1 + pridáva viac cool stuff.
Hlavná myšlienka, že som chcel predstaviť, je pridanie vertikálne menu na tému práce (a k Wordpress všeobecne). Hľadala som naozaj flexibilné, SEO priateľská a multi-kompatibilný so všetkými prehliadačmi vertikálne menu, ktoré by umožnili vytvoriť neobmedzené hniezdenia úrovniach.
WEB má tony stránok na danú tému, ale keď som sa začal snažiť všetky tieto vzorky - buď sa porouchala, rozpadla, podporuje len obmedzený počet úrovní, alebo zle sa správať v junksplorer Gatesa + Ballmer je 6. Konečne som sa dostal späť do osvedčené Dynamic Drive menu ako ich vertikálnej vzorky sa ukázala byť pekný prípad, ktorý sa hodí moje prísne požiadavky. Musel som výrazne zmeniť im ale, aby sa ubezpečil, že sa vojde Práca model.
Snaha o dokonalosť pokračuje ...
Strávil som asi 16 hodín hľadanie, montáž, skúšanie, ktorým sa ustanovuje, leštenie a ladenie zvislé menu 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 má všetky rovnaké výhody , že horizontálne menu má.
S možnosťou pridania zvislej menu je veľmi dôležité, aby o 70-80% portálov na internete. Horizontálne menu má obmedzený "space" ubytovať veľa možností menu, ale vertikálne menu nemá toto obmedzenie, a pomôže nesmierne. Takže ideme na to.
Veľa krokov, aby sa to stalo, sú už opísané v časti 1 tutorial , takže to bude znamenať pre o niečo kratšie, ale s oveľa viac funkcií bohatý výsledky.
Tak tu to ide:
Stavebné SEO priateľský, vertikálne, viacúrovňové, hierarchicky vnorené menu pre Wordpress a tému práce . Krok za krokom
(... Čo si nikdy nemyslel, možná ...)
- Nainštalujte exec php plugin a aktivovať. Budeme potrebovať, pretože budem používať PHP vnútri text widget vydávať vertikálne menu 'HTML kód.
- Do kroky 1 - 6 z časti 1 tutorial . V podstate je potreba nainštalovať a aktivovať použitie NAVT plugin + vizuálne vytvárať menu. Uistite sa, že menu Názov skupiny je 'Menu1'. Toto meno je napevno v custom_functions.php
- Kliknite na 'zariadenia' ikonu 'Menu1' skupiny ju upraviť vlastností:
- Vyplýva kroky 7,1 -7,3 časti 1 tutorial pre nastavenie "Options", "Display" a "CSS" záložiek nastavenia.
- Teraz kliknite na "tému", záložka tohto dialógu. My prepíše počet nastavení, ktoré sa (ak ste boli po kroku 1). To je v poriadku - Nestratíte nič - 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é:- Vnútri "XPath Téma:" oblasť zadajte tento kód (to príkazy nahradiť akýkoľvek štítok s týmito triedy):
.jquerycssmenu, .jqueryslidemenu - Set "Akcia" na "Nahradiť za"
- Vnútri "Pridať značky pred navigácia skupiny" oblasti, zadajte tento kód:
<div class='jquerycssmenu' style='margin-top:5px;'> - Vnútri "Pridať značky po Navigácia skupiny" oblasť zadajte tento kód:
<br style='clear: left' /></div> - Kliknite na [Save / zavrieť] tlačidlo.
- Vnútri "XPath Téma:" oblasť zadajte tento kód (to príkazy nahradiť akýkoľvek štítok s týmito triedy):
- Teraz prejdite do panelu admin Wordpress -> Vzhľad -> Widget.
- Drag "Text" widget (z veľkej "k dispozícii widgety" oblasť), do "Sidebar 1" priestor na pravej strane. Budeme pridaním kódu do widget Text, ktorý nám pomôže k realizácii vertikálneho menu.
POZNÁMKA: Predpokladám, že ste "Sidebar 1" v existenciu. Práca možnosti vám umožní vypnúť - ale pre účely tohto tutoriálu nechať urobiť to byť. - Akonáhle ste preťažené tento widget - bude sa otvorí ako kvet (mám pocit, romantické teraz, že MSIE boj je u konca).
- V "hlave" na plochu vstúpiť "najlepších svetových zvislej menu" ... No, bez obáv používať svoj tvorivý prístup - že text pôjde nad vašou novo narodených zvislé menu.
- Vo veľkých priestor pre text - zadanie tohto kódu 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;
?> - Stlačte tlačidlo [Save] tlačidlo, kliknite na "Close" link.
- Stiahnite si aktualizovanú sadu súborov tu .
Tento archív obsahuje:- Aktualizovaná verzia "jasné" horizontálne menu kód
- "Dark" verziu horizontálne menu
- Vertikálne menu kódy
- Aktualizovaná verzia custom_functions.php
- Teraz je potrebné rozbaliť tento archív a presúvať ich do 'vlastné' adresári téme práce .
Poznámka: ak ste urobili žiadne úpravy vnútri custom_functions.php - si musíte spojiť ich. Ak nie - pokojne ho prepísať s mojou verziu. - Voila! Teraz môžete reload vaše webové stránky a uvidíte rovnakú "jasné" horizontálneho menu + neat zvislé menu v ľavom bočnom paneli.
- BONUS úloha: Let zmena "jasné" horizontálneho menu na "dark" farebnú schému.
- Vnútri custom_functions.php súbor:
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 komentoval v jednom riadku a odkomentováním druhý. - Teraz prejdite do Wordpress admin-> Nástroje-> NAVT Zoznamy a kliknite na vyššie uvedené "rýchlosť" ikonu upravovať vlastnosti vášho 'Menu1' skupiny.
- Kliknite na "tému" kartu.
- Vnútri "Pridať značky pred navigácia skupiny" oblasti, zadajte tento kód:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Teraz - reload stránky - a svoje hlavné horizontálne navigačné menu "magicky" sa stala tmavá, niečo ako že:
Téma diplomovej práce - multilevel nested CSS menu - tmavé palety
Dark paletu farieb, môže byť vhodnejšie pre niektoré lokality, ako svetlé farby jeden. Takže teraz máte slobodu voľby vo svojom živote!
- Vrátiť sa k "jasné" farebnú schému - len vrátiť späť nad "kroky Bonus".
- Vnútri custom_functions.php súbor:
- Záver:
Miluju Téma diplomovej práce , som rád Wordpress a ja som rád, že sme spôsob, ako pridať slušnú navigáciu menu na naše portály.
20 dolárov
Užite si to!
Gleb Esper
comments } ( 5 komentárov )
