Pátranie po dokonalej menu ...
Toto je časť 1 učiteľský
2. časť tohto návodu učia, ako vytvoriť vertikálne menu + tmavé farebné palety pre horizontálne
Rozhodol som sa dostať Thesis tému, pretože jedna z mojich klientov ma informoval o problémoch s kompatibilitou medzi DP a moje členstvo stránky wordpress plugin MemberWing. Opravil som to a potom sa rozhodol pozrieť sa bližšie na práce a skutočne obťažoval sledovať videá na prednej strane hlavnej stránky práce - Diythemes.com.
Čo mňa najviac zapôsobila, je zmysel pre detail, ovládateľnosť a predovšetkým - SEO funkcie, ktoré sú tak vymyslené.
MemberWing členstvo plugin bol navrhnutý od základu pre členstvo stránky, ktoré budú musieť vytiahnuť čo najviac šťavy SEO je to možné. Tak som sa venovať veľa pozornosti mnohých SEO vylepšenia a dokonalosti v MemberWing. Mnohé z mojich vlastných klienti žiadajú o rôznych témach, ktoré majú používať, a tému, ktoré bolo tak dobre SEO optimalizovaný z hĺbky by bolo vynikajúce spôsobilosti pre členstvo v portáli podnikateľa.
Kombináciou SEO právomocí MemberWing s SEO právomocí téme práce by najlepšie hodnotenie príležitostí k mojím klientom. Tak som si prácu a hral s ním na jeden deň.
Je to vynikajúci témou vo všetkých smeroch. Navigačné časti, aj keď je trochu obmedzené funkcie. Od 1.5 + práca to je len jedna úroveň menu. Moja zvyčajná želanie má byť schopný prispôsobiť navigačné čo najviac potrebné. Niektoré stránky majú len pár stránok, mnoho ďalších ton statických stránok + zillions výrobkov / miest + veľa kategórií.
Takže v ideálnom svete, ktoré majú šancu vytvoriť pekne vyzerajúce hierarchicky organizovaný užívateľsky príjemný navigačné menu je nutnosťou. Diplomová práca hneď nazačátek má dobré hľadá navigáciu, ale všimol som si, že všetky práce-založené webovej stránky sú vyzerali ako dvojičky. Vlastný projekt navigačné menu nie je naozaj jednoduché, takže väčšina ľudí, nech to byť, ako je. Neexistuje žiadny spôsob, ako zmeniť poradie kategórií v menu, alebo je v pozícii medzi stránkami. A opäť, schopnosť vytvárať vnorené menu štruktúry chýba. Tak som sa rozhodol zistiť, čo by sa dalo robiť.
Po vyskúšaní asi pol tucta menu / navigácia súvisiace plugins môžem nastaviť výber na Wordpress Plugin List Navigation navtech.
Navtech plugin je v podstate neusporiadaný zoznam generátor so super chuť a trochu tvrdý-k-postava netradičné administrátorského rozhrania. Čo si o zavádzajúce je, že nie je vlastne vytvoriť luxusné hľadá menu sám. Je to najťažšia časť práce však - vám dáva možnosť vizuálne ťahať za jeden povraz, a spôsobí neusporiadaný zoznam - kostra menu-k-byť. A môžete vytvárať príliš veľa ponúk. Môžete vytiahnuť všetky druhy vecí Wordpress do navigačného menu: stránky, príspevky, články, kategórií, užívateľov, blokov kódu, externé odkazy, oddeľovače, oddeľovače a kombinovať a hniezda a zariadiť a upraviť je v každom strome-ako štruktúry, ktorú chcieť.
Navtech generuje pre vás viedlo HTML neusporiadaný zoznam. Druhý krása navtech je, že vám pomôže vložiť novú ponuku do Vášho téme cez slávny JQuery na logike, ale bez nutnosti meniť ľubovoľný kód! Navtech umožňuje určiť: "# nahradiť tento prvok s mojou novou navtech menu". # Prvok by mohol byť id alebo triedy cestu existujúcej ponuky alebo div element tag, ktorý je vytvorený aktuálnu tému. Takže navtech to náhrada za vás bez vás núti ísť do témy kódu a urobiť z nej špinavá, než v skutočnosti je. V prípade, že všetky zvuky ako bľabotania - nebojte sa - I'll sprievodca vás krok za krokom čoskoro. Náročná časť navtech pre každého je, že budete musieť prísť s aktuálnym CSS + obrázky + javascript kód pre menu seba. A je na vás, aby ste zistili, kde a ako integrovať tieto súbory a tohle si správne prepojené.
S úctou, bez toho aby vedel, JQuery + nejaký PHP + CSS + má slušné skúsenosti s Wordpress - tohle je ťažké vytiahnuť.
Viem, že to rád veci trochu, takže som sa rozhodol zatnout zuby a sprievodca ľudstvo k slobode v budovaní najlepší z najlepších navigačných menu pre Wordpress. Len som potreboval nájsť sa zdrojom niektorých pekne vyzerajúce horizontálnom menu CSS. Vzal som riadiť dynamické webové stránky pre svoje najlepší výber, demá a zdrojov.
Som venoval na štúdium denné práce a hrať sa s pluginom navtech. Na konci som hrdo vytvorili vlastné, pružný, SEO optimalizované, viacúrovňové, vnorené nagivation štruktúry pre môj Wordpress + práca na webe.
Zoznam funkcií viacúrovňových, vnorené menu navigácia pre Wordpress Témy DP
(musíš milovať tohle):
- Profesionálny, čistý vzhľad a dojem.
- Podpora pre všetky moderné prehliadače, vrátane 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome ako v javascriptu a non-JavaScript režimy.
- Ladne downgradable pre non-javascript prehliadača. Menu vám bude použiteľný, vzhľadovo podobné a pracuje aj pre zdravotne postihnutých javascript prehliadačov (aj keď len na najvyššej úrovni navigácia bude viditeľná aj bez flyouts dôjde samozrejme tak, ako sú zo strany JavaScript).
- SEO prívetivé funkcie - neusporiadaný zoznam menu kód je vygenerovaný v HTML. Google a ďalších vyhľadávačov bude schopný indexovať navigačné štruktúry a nájsť odkazy na vnútorné stránky.
- Podpora pre neobmedzený hniezdenie úrovne a sublevels.
- Podpora pre akýkoľvek príkaz alebo stránky, príspevky (cez užívateľsky definovaných URI), kategórií, užívateľov, bloky vlastný kód a externých odkazov v menu.
- Podpora text-i-image na menu prvkov. (Mám ešte skúsiť tieto hoci).
- Štruktúra menu a obsah je vizuálne nastaviteľná oblasti admin navtech.
- Kompaktné: JQuery na flyouts pre vnorených úrovní.
- Fast: JQuery pre menu je načítaný zo serverov Google (SEND love práca sama o sebe, aby urobili to isté miesto Ťahom lokálne). To by urýchlilo veci trochu.
- Škálovateľnosť - Tento typ menu je upraviteľný a konfigurovateľný kedykoľvek prostredníctvom pluginu nastavenia navtech bez nutnosti kódovania kdekoľvek.
Použil som tento vynikajúci menu z dynamického disku portálu ako základ. Musel som sa prispôsobiť javascript kód trochu zahrnúť aj kus PHP do custom_functions.php, aby bola práca s práce. Aj počet pre-existujúce stránky, kategórie a miesta z mojej stránky boli použité na zostavenie štruktúry ponúk. Vaše stránky sú špecifiká sa budú líšiť - ale koncepcia bude rovnaká.
Tak nech pokračovať, nie?
Krok za krokom inštrukcie pre nastavenie navtech-založené vnorené, prispôsobiteľné, viacúrovňové, SEO priateľský
a jednoducho cool looking navigačné menu pre Wordpress a práca Témy
- Prejsť na panel admin Wordpress. Pluginy-> Pridať nový hľadajte "navtech". Plugin budú zobrazené. Kliknite na tlačidlo [Install], [Inštalovať], "Aktivovať Plugin".
- Nástroje-> navtech Zoznamy, Inside "Navigácia skupiny" stredisko nájsť "názov skupiny" a zadajte: "menu1" v tejto oblasti, stlačte [Vytvoriť] tlačidlo. "Menu1" obdĺžnik priestor dostal vytvoril.
Tento "menu1" oblasť bude hlavným menu ihrisko pre výstavbu. Budete preťahovanie sem menu prvkov. - V "aktív" priestor nájsť "ostatné" listbox a kliknite na "Home" voľby. "Home" thingie objaví vnútri "unassigned" oblasti. Divný, co? Bez obáv, ako dlho, ako to funguje - a to bude pre nás.
- Presuňte tento "Home" thingie z "majetok" v oblasti "menu1" obdĺžnik oblasti. To sa stane "Home" v menu.
- Opakujte kroky 3-4 pre niektoré stránky z "Stránky" oblasti, rovnako ako u kategórie "kategória" oblasti. Pretiahnuť akékoľvek ďalšie položky, ktoré chcete, aby sa na vašom jedálničku vnútri "menu1" obdĺžnik. Môžete kliknúť na stránky, kategórie, užívateľov a niektoré vlastné prvky, ako je "zoznam delič" a "blok kódu". Blok kódu je super spôsob, ako pridať vlastné úryvky vnútri menu.
- Môžete pretiahnuť položky vnútri "menu1" priestor pre usporiadanie ich poradie.
- Môžete upraviť hierarchické postavenie každej položky ponuky "<" a ">" šípy.
- Kliknutím na názov textu každú položku - otvorí priamo úděsné ďalších úprav dialóg pre túto položku. Ja väčšinou používa predvolené nastavenia, ale technicky sa môžete zblázniť a začať robiť image-založené voľby ponuky a pridať kúsky kódu HTML do neho. Postupovať s opatrnosťou hoci.
- Pre linkless unclikable submenu, ktoré bude slúžiť ako "rodičia" pre ďalšie "sub-deti" som použil "Code block" typu. Napríklad pri prispôsobovaní ako blok kódu riadok som vstúpil na "položku alias Menu" = "MemberWing" a "Enter blok kódu:" = "<a href='#'> MemberWing </ a>". S href = "#" Bude robiť to nedá kliknúť, ale pôsobí ako platné "materských" menu.
- Tu je návod, ako má navtech 'menu1' vybudovať štruktúru vyzeral takmer dokončený:
- Povrchová úprava pôvodnej budovy a potom kliknite na "rýchlosť", ikonu si môžete prispôsobiť štruktúru menu:
- To otvorí dialógové okno s 4 karty: Možnosti, Zobrazenie, CSS, Theme.
- Choď na "Možnosti" kartu a uistite sa, všetko je nekontrolované a "názov skupiny", hovorí: "menu1"
- Choď na "Zobraziť" kartu a uistite sa, všetko na "skupine navigácia Zobraziť v ..." oblasť je kontrolovaná [x]. Ostatné nechajte na predvolené hodnoty.
- Choď na "CSS" kartu a vyberte prepínač (x) "sa neaplikuje CSS triedy".
- Choď na "Theme" kartu a vyplňte ho takhle:
Vložiť do "Add tags pred ..." oblasť tento kód:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Vložiť do "Add tags po ..." oblasť tento kód:
<br style='clear: left' /></div> - Stlačte tlačidlo [uložiť / zavrieť] tlačidlo
- V tejto budove bod z menu plugin do volieb navtech je kompletný.
Teraz je na čase urobiť niečo naladiť sa na tému práce, aby si to pripravený. Za tým musíme pridať niekoľko vlastných súborov - CSS a JavaScriptu, ktorá patrí do menu a aktualizácie DP 'custom_functions.php - Stiahnuť kompletnú sadu súborov tu.
- Rozbaľte archív. Ak máte aktualizovať svoje custom_functions.php s vašou vlastnou nastavenie - musíte je zlúčiť sa moje veci. Nechám to na vás.
Ak ste sa nedotkol je - nebojte sa prepísať to s mojím. Upozornenie: Ja sa radšej miesto menu v záhlaví stránky (predvolená hodnota je vyššia) - takže moje úpravy zahŕňal túto preferenciu rovnako. - Upload archívu vrátane všetkých podadresárov a súborov v rámci svojej práce tému 'custom' adresári, ako tento:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Som sa nedotkol custom.css - radšej držať menu-špecifické CSS pod svojou vlastnou umiestnenie, aby sa zabránilo vytváraniu neporiadok vnútri custom.css - Na tomto mieste môžete načítať svoje webové stránky a vidieť nové krásne nové viacúrovňovej, vnorené, SEO optimalizované menu.
- Môžete vždy vrátiť do navtech nastavenia a prispôsobiť svoju ponuku s väčším výberom, alebo premiestniť čokoľvek. To sa prejaví na živých webe automaticky.
Ceste vpred ...
Tento tutoriál súčasťou tvorivej príklad jedného typu menu. Som hral s ešte jeden - len aby zistila, ako tmavú farbu menu bude vyzerať nasledovne:
Téma diplomové práce - multilevel vnorené CSS menu - tmavé palety
Myslím, že je docela pěkné. Existuje mnoho ďalších navigačné vzoriek k dispozícii na adrese Dynamic Drive - to všetko je možné upraviť pre DP a ostatné Wordpress témy s niektorými úsilie:
Dynamic Drive Horizontálne Menu
Dúfam, že nájdete tento tutoriál prospešné a užitočné. Ako som povedal, že je možné upraviť niektorú z týchto ponúk pre práce - to je daný čas a želanie, aby sa to stalo.
Mohol by som robiť túto prácu za vás na základe zmluvy. Stačí si vybrať v menu sa vám páči, kontaktujte ma a ja budem pracovať na kód a inštrukcie pre vaše webové stránky.
20 dolárov
A samozrejme, ak ste až po stavebné super SEO optimalizované poistné wordpress členstvo portál - najlepšie riešenie pre toto:
Téma diplomové práce + MemberWing členstvo plugin + vlastné hostované Wordpress samozrejme.
