Quest pre dokonalé menu ...
To je časť 1 tutorial
Časť 2 tohto návodu učia, ako budovať zvislé menu + tmavé farebné palety pre vodorovné
Rozhodol som sa dostať Téma diplomovej práce , pretože jeden z mojich klientov mi povedal, o problémoch s kompatibilitou medzi DP a mojím wordpress členstvo mieste plugin MemberWing. Opravil som to a potom sa rozhodol, aby sa bližšie pozrieť na prácu a skutočne obťažoval sledovať videá na titulnej strane hlavnej stránky práce - Diythemes.com .
Čo na mňa zapôsobila najviac, je dôraz na detail, užívateľskú prívetivosť a zo všetkého najviac - SEO funkcie, ktoré sú tak dobre myšlienka.
MemberWing členstvo plugin bol navrhnutý od základu pre členstvo stránky, ktoré budú musieť ťahať toľko SEO džús je to možné. Tak som sa venovať veľa pozornosti mnohých SEO vylepšení a dokonalosti v MemberWing. Mnoho z mojich vlastných klientov sa pýtate na rôzne témy na použitie a majú tému, ktoré bolo tak dobre SEO optimalizované z hĺbky by bolo ideálne riešenie pre členstvo portál podnikateľov.
Kombinácia SEO právomocí MemberWing sa SEO právomocí tému práce by najlepšie hodnotenie možností svojim klientom. Tak som dostal prácu a hral s ním na jeden deň.
Je to vynikajúca téma vo všetkých smeroch. Navigačný časť aj keď je trochu obmedzená vo funkcii. Počnúc práce 1,5 + Jedná sa o jednu úroveň menu len. Môj obvyklý prianím je, aby sa mohol prispôsobiť navigácia toľko, koľko potrebujete. Niektoré weby majú len niekoľko stránok, mnoho ďalších ton statických stránok + zillions články / príspevky + veľa kategórií.
Takže v ideálnom svete, ktoré majú šancu vytvoriť pekne vyzerajúce hierarchicky usporiadaných užívateľsky prívetivé menu navigácie je potrebné. Práca hneď bat má dobre vyzerajúci navigáciu, ale všimol som si, že všetky práce-založenej webovej stránky vyzerali ako dvojičky. Prispôsobenie Práca navigačné menu, nie je naozaj jednoduché, takže väčšina ľudí jednoducho ho nechajte ako je. Neexistuje žiadny spôsob, ako meniť poradie kategórií v menu, alebo postavenie im medzi stránkami. A opäť, schopnosť vytvárať vnorené menu štruktúry chýba. Rozhodol som sa teda pozrieť, čo by mohlo byť robené o tom.
Po vyskúšaní asi pol tucta menu / navigácia súvisiace Pluginy som môjho výberu na Wordpress Zoznam Navigácia Plugin NAVT .
NAVT plugin je v podstate Nečíslovaný zoznam generátor super efektné a trochu tvrdý-k-postava netradičné admin rozhrania. Čo je zavádzajúce o tom je, že nie je vlastne vytvoriť efektné hľadajú menu samo o sebe. Je to najťažšie časť práce však - vám dáva možnosť vizuálne ťahať za jeden povraz, a vytvárať Nečíslovaný zoznam - kostra z vášho menu-k-byť. A tie môžu vytvoriť veľa ponúk tiež. Môžete vytiahnuť všetky druhy vecí Wordpress do navigačného menu: stránky, príspevky, články, kategórie, užívateľov, blokov kódu, externé odkazy, oddeľovače, oddeľovače a kombinovať a hniezda a zariadiť a prispôsobiť ich v každom stromu-ako štruktúra vás chcem.
NAVT generuje pre vás viedlo HTML neusporiadaný zoznam. Druhé krása NAVT je, že vám pomôže k vloženie nového menu do vášho téme cez slávny JQuery na logike, ale bez nutnosti meniť kód! NAVT umožňuje zadať: "nahradiť # prvok s mojou novou NAVT menu". # Element by mohol byť id alebo druh cesty existujúcich menu alebo div element značka, ktorá je vytvorená aktuálna téma. Takže NAVT to náhrada za vás bez vás núti ísť do témy kód a urobiť z nej binec, než v skutočnosti je. Ak to všetko znie ako blabol - nebojte sa - budem sprievodca vás krok za krokom čoskoro. Náročná časť NAVT pre každého je to, že budete musieť prísť s aktuálne CSS + obrázky + javascript kód pre vaše menu seba. A to je na vás, aby ste zistili, kde a ako integrovať tieto súbory a urobiť túto vec riadne si sú navzájom spojené.
S pozdravom, bez toho aby vedel, JQuery + nejaký PHP + CSS + majú slušné skúsenosti s Wordpress - tá vec je ťažké vytiahnuť.
Rád Viem, že tohle trochu a tak som sa rozhodol zaťať zuby a sprievodca ľudstvo k slobode v budove najlepší z najlepších navigačných menu pre Wordpress. Iba som potreboval zistiť zdroje pre niektoré pekne vyzerajúce horizontálne CSS menu. Vzal som Dynamic Drive webové stránky pre ich najlepší výber, demá a zdrojov.
I venovanej deň, k štúdiu Práca a hrať si s plugin NAVT. Na konci som sa 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é, vnorené menu navigácie Wordpress pre Téma diplomovej práce
(Máte radi tohle):
- Professional, čistý vzhľad a pocit.
- Podpora pre všetky moderné prehliadače vrátane MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome v oboch javascript a non-javascript režimy.
- Pôvabne downgradable pre non-javascript prehliadačov. Môžete menu bude použiteľný, vizuálne podobné, a pracovné i pre JavaScript so zdravotným postihnutím prehliadača (hoci len na najvyššej úrovni navigácia bude viditeľná, a nie flyouts dôjde samozrejme, ako sú vytvorená JavaScript).
- SEO prívetivých funkcií - Nečíslovaný zoznam menu kód je vygenerovaný v HTML. Google a ďalšie vyhľadávače pavúky budú môcť index vaše navigačné štruktúry a odkazy na vnútorné stránky.
- Podpora pre neobmedzené hniezdenie úrovne a podhladiny.
- Podpora pre každú objednávku alebo stránky, príspevky (cez užívateľom definované URI), kategória, používatelia, vlastný kód blokov a externých odkazov v menu.
- Podpora text-rovnako ako image-založené menu prvky. (Mám ešte skúsiť tieto hoci).
- Menu štruktúra a obsah je vizuálne nastaviteľná cez oblasť admin NAVT.
- Kompaktné: jQuery vychádza flyouts pre vnorené úrovne.
- Rýchle: JQuery pre menu je načítaný zo serverov Google (já bych rád práca sama o sebe, aby urobili to isté miesto ťahom lokálne). To by urýchlilo to bit.
- Škálovateľnosť - Tento typ menu je upraviteľný a konfigurovateľný kedykoľvek cez plugin nastavenia NAVT bez nutnosti kódovania kdekoľvek.
Použil som tento vynikajúci menu z Dynamic Drive portálu ako základ. Musel som sa prispôsobiť javascript kód bit, rovnako ako patrí kus PHP do custom_functions.php, aby to fungovalo s DP. Tiež počet pre-existujúcich stránok, kategórií a príspevky z môjho webu boli použité na zostavenie štruktúru menu. Vaše stránky špecifiká sa budú líšiť - ale koncepcia bude rovnaký.
Tak nech pokračovať, nie?
Krok za krokom inštrukcie pre nastavenie NAVT -založené vnorené, nastaviteľné, viacúrovňové, SEO priateľská
a proste a jednoducho vychladnúť hľadajú navigačné menu pre Wordpress a práce s námetom
- Prejsť na panel admin Wordpress. Pluginy-> Pridať nový Hľadať "navt". Plugin sa zobrazí. Kliknite na [Install], [Inštalovať teraz], "Aktivovať Plugin".
- Nástroje-> NAVT zoznamy, Inside "Navigácia Group" oblasť hľadania "meno skupiny" a zadajte: "Menu1" v oblasti, stlačte tlačidlo [Vytvoriť] tlačidlo. "Menu1" obdĺžnik priestor dostal vytvoril.
Tento "Menu1" oblasť bude hlavným ihriskom pre menu výstavbu. Budete pretiahnutím tu vaše menu prvky. - V "majetok" na plochu nájsť "ostatné" listbox a kliknite na "Home" voľba. "Home" thingie objaví vnútri "nepoužíva" oblasti. Divný, čo? Bez obáv, ako dlho ako to funguje - a to bude pre nás.
- Presuňte tento "Home" thingie z "aktív", oblasť, do "Menu1" obdĺžnik oblasti. To sa stane "Home", položka v menu.
- Opakujte kroky 3-4 pre niektoré stránky z "Články" oblasť, rovnako ako pre kategórie v "kategória" oblasti. Drag akékoľvek iné položky, ktoré chcete byť na menu vnútri "Menu1" obdĺžnik. Môžete kliknúť na stránky, kategórie užívateľov a niektoré vlastné prvky, ako je "Zoznam deliče" a "kód bloku". Blok kódu je super spôsob, ako pridať vlastné úryvky v menu.
- Môžete drag položky v menu vnútri "Menu1" oblasti, na usporiadanie ich poradie.
- Môžete upraviť hierarchické postavenie jednotlivých menu sa "<" a ">" šípy.
- Kliknutím na text Názov každej položky menu - otvorí priamo úděsná extra prispôsobenie dialógu pre túto položku. Aj väčšinou používa predvolené nastavenia, ale technicky sa môžete zblázniť a začať robiť image-založené menu voľby a pridajte kúsky kódu HTML do neho. Postupujte opatrne hoci.
- Pre linkless unclikable podponúk, ktoré budú slúžiť ako "rodičia" pre iné "deti sub-" som použil "blok kódu" typ. Napríklad pri prispôsobovaní, ako blok kódu položky som vstúpil do "alias menu" = "MemberWing" a pre "Enter blok kódu:" = "<a href='#'> MemberWing </ a>". S href = "#", bude to nedá kliknúť, ale ako platný "materskej" menu voľba.
- Tu je návod, ako moja NAVT 'Menu1' budovať štruktúru vyzerala takmer dokončená:
- Dokončiť prvú budovu a potom kliknite na "zariadenie", ikonu si môžete prispôsobiť štruktúru menu:
- To otvorí dialógové okno so 4 záložkami: Voľby, Display, CSS, tému.
- Choď na "Možnosti", záložka a uistite sa, že všetko je nekontrolovateľnú a "meno skupiny", hovorí: "Menu1"
- Choď na "Display" kartu a uistite sa, že všetko na "skupine navigácia Zobraziť ..." oblasť je kontrolovaná [x]. Ostatné nechajte na predvolené hodnoty.
- Choď na "CSS" kartu a vyberte prepínač (x) "sa nevzťahujú CSS triedy".
- Choď na "Theme" kartu a vyplňte ju takhle:
Vložiť do "Pridať značky do ...", oblasť tento kód:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Vložiť do "Pridať značky po ..." oblasť tento kód:
<br style='clear: left' /></div> - Stlačte tlačidlo [Save / zavrieť] tlačidlo
- V tomto bode menu budova zvnútra NAVT plugin možnosťou je kompletná.
Teraz je čas, aby sme sa trochu naladiť na tému práce , aby si to pripravený. U že potrebujeme pridať niekoľko vlastných súborov - CSS a JavaScript, ktorý patrí do menu a update práce 'custom_functions.php - Stiahnite si kompletnú sadu súborov tu .
- Rozbaľte archív. Ak ste aktualizovali custom_functions.php s vašou vlastnou nastavenia - musíte spojiť ich s moje veci. Nechám to na vás.
Ak ste sa dotkol - nebojte sa prepísať to s mojím. Vezmite prosím na vedomie: radšej som na pozícii menu pod stránkach hlavičku (predvolená je hore) - takže moja úprava súčasťou tejto preferencie rovnako. - Upload archív vrátane všetkých podadresárov a súborov v rámci vášho témy práce 'vlastné' adresára, ako je táto:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Som sa ani nedotkol custom.css - radšej držať menu-špecifické CSS pod svojou vlastnou umiestnenie, aby nedochádzalo k vytváraniu neporiadok vnútri custom.css - Na tomto mieste môžete reload vaše webové stránky a vidieť nové krásne nové viacúrovňového, vnorené, SEO optimalizované menu.
- Môžete vždy vrátiť do NAVT nastavenia a prispôsobiť svoje menu s väčším výberu alebo premiestniť nič. To sa prejaví na živé webe automaticky.
Cestu pred sebou ...
Tento tutoriál súčasťou tvorivej príklad jedného druhu menu. Hral som si s ďalší - len aby zistili, ako tmavé farby menu vyzerať:
Téma diplomovej práce - multilevel nested CSS menu - tmavé palety
Myslím, že je celkom pekné. Existuje mnoho ďalších navigačné vzoriek k dispozícii na adrese Dynamic Drive - všetky z nich je možné upraviť pre prácu a iné Wordpress témy sa určité úsilie:
Dynamic Drive Horizontálne menu
Dúfam, že nájdete tento návod, prospešné a užitočné. Ako som povedal, je možné upraviť niektoré z týchto ponúk na prácu - to je danej dobe a túžba, aby sa to stalo.
Mohol by som to urobiť prácu za vás na základe zmluvy. Stačí vybrať menu sa vám páči, kontaktujte ma a budem pracovať na kód a pokyny pre vaše webové stránky.
20 dolárov
A samozrejme, ak ste až po stavebné super SEO optimalizované Premium Wordpress členstvo portál - najlepšie riešenie pre tento:
Téma diplomovej práce + MemberWing členstvo plugin + vlastné hostované Wordpress samozrejme.
