Pátranie po dokonalej menu ...

Toto je 1. časť návodu
Časť 2 tohto kurzu učia, ako stavať vertikálne menu + tmavo farebná paleta pre horizontálne jeden

Rozhodol som sa dostať Téma dizertačnej práce , pretože jeden z mojich klientov informoval mňa je to s kompatibilitou medzi mojej práce a členstva wordpress plugin webu MemberWing. Opravil som to a potom sa rozhodol, aby sa bližšie pozrieť na práce a skutočne sa neobťažoval sledovať videá na titulnej strane hlavnej stránky práce - Diythemes.com .
Aký dojem ma najviac, je dôraz na detail, užívateľskej prívetivosti a väčšina zo všetkých - SEO funkcie, ktoré sú tak dobre mysleli.
MemberWing členstvo plugin bol navrhnutý od základu pre členské stránky, ktoré by potrebovala k ťahu toľko SEO šťavu ako je to možné. Tak som zaplatil veľa pozornosti mnohých SEO vylepšení a dokonalosti vo MemberWing. Mnoho z mojich klientov sa pýta o rôznych témach, ktoré používajú a majú tému, ktoré bolo tak dobre SEO optimalizovaný z hlboko vnútri by bolo vynikajúce vhodné pre podnikateľov členstvo portálu.

Kombinácia SEO právomoci MemberWing s právomocami SEO Téma dizertačnej práce by to najlepšie z rebríčka príležitostí svojim klientom. Tak som si prácu a hral si s ním na jeden deň.

Je to vynikajúci tému vo všetkých smeroch. Súčasťou navigačné to aj keď je trochu obmedzené funkcie. Počnúc práce 1.5 + je o jednu úroveň menu za pouhých. Môj obvyklý túžbou je byť schopný prispôsobiť navigáciu, rovnako ako potreby. Niektoré stránky majú iba pár stránok, veľa iní majú tony statické stránky viac zillions článkov / stĺpiky a viac veľa kategórií.
Takže v ideálnom svete má šancu vytvoriť pekne vyzerajúce hierarchicky organizovanej užívateľsky prívetivý navigačné menu je nutnosťou. Práca hned bat má dobrú hľadáte navigáciu, ale všimol som si, že všetky práce na báze webovej stránky hľadajú ako dvojčatá. Prispôsobenie Diplomový navigačné menu nie je rýchle, takže väčšina ľudí len tak nechať ako je. Neexistuje žiadny spôsob, ako zmeniť poradie kategórií v menu a umiestniť ich medzi stránkami. A opäť, schopnosť vytvárať vnorené štruktúry menu chýba. Tak som sa rozhodol zistiť, čo by sa dalo robiť.
Po vyskúšaní asi pol tucta menu / navigácia súvisiace pluginy môžem nastaviť výber na Wordpress Plugin Zoznam Navigácia NAVT .
NAVT plugin je v podstate zoznamu generátor so super fantáziu a trochu ťažko vymyslieť netradičný admin rozhranie. Aký omyl o tom, že to nie je vlastne vytvoriť efektné vyzerajúce menu samo o sebe. To robí najťažšie časť práce i keď - dáva vám možnosť vizuálne ťahať za jeden povraz, a vytvárať Nečíslovaný zoznam - kostra vašej ponuky-k-byť. A môžete vytvoriť mnoho ponúk tiež. Môžete vytiahnuť všetky druhy vecí Wordpress do menu navigácie: stránky, príspevky, články, kategórie, užívatelia, bloky kódu, externé odkazy, rozdeľovače, odlučovače a kombinovať a hniezdo a zariadiť a upraviť je v každom stromovej štruktúre si chcete.
NAVT vytvára pre vás viedlo HTML neusporiadané zoznam. Druhá krása NAVT je, že vám pomôže vložiť novú ponuku do témy prostredníctvom známeho jQuery založené na logike, ale bez nutnosti meniť žiadny kód! NAVT umožňuje zadať: "nahradiť Element # s mojím novým NAVT menu". # Prvok môže byť id alebo trieda cesty existujúcej ponuky alebo element div tag, ktorý je vytvorený aktuálna téma. Takže NAVT robí túto výmenu za vás bez vás núti ísť do zábavného kódu a robiť to viac nepríjemné, než už je. Ak to všetko sa javí ako blábol - nebojte sa - budem viesť vás krok za krokom skoro. Náročná časť NAVT pre každého je to, že budete musieť prísť s vlastnou CSS + obrázky + Javascript kód pre vaše menu sami. A je len na vás, zistiť, kde a ako integrovať tieto súbory a robiť tie veci poriadne prepojené.
S pozdravom, bez toho aby vedel jQuery + nejaký PHP + CSS + má slušné skúsenosti s Wordpress - to, čo je ťažké vytiahnuť.
Viem, že rád tieto veci trochu, takže som sa rozhodol zaťať zuby a sprievodca ľudstvo k slobode v budove najlepší z najlepších navigačných menu pre Wordpress. Len som potreboval zistiť zdroje pre niektoré pekne vyzerajúce horizontálne menu CSS. Vzal som Dynamic Drive webové stránky pre ich najlepšie demo voľby a zdrojov.

Som venoval jeden deň študovať prácu a hrať si s pluginu NAVT. Na konci som hrdo vytvoril vlastnú, flexibilné, SEO optimalizácia, viacúrovňové a vnorené nagivation štruktúru pre moje Wordpress a viac práce založené na webe.

Zoznam funkcií a vnorených viacúrovňových Wordpress navigačné menu pre Téma dizertačnej práce
(Musíš milovať tie veci):

• Profesionálny, čistý vzhľad.
• Podpora pre všetky moderné prehliadače vrátane MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome ako v javascriptu a non-javascript dopravy.
• Elegantne downgradable pre non-javascript prehliadača. Tie ponuky budú použiteľné, vizuálne podobné a práce aj pre prehliadače javascript zakázané (aj keď len najvyššiu úroveň navigácie budú viditeľné a žiadne flyouts sa stane, samozrejme, pretože sú vyrobené JavaScript).
• SEO priateľské funkcie - neusporiadané Zoznam ponuka kód je generovaný vo formáte HTML. Google a ďalšie vyhľadávačov budú môcť index navigačné štruktúru a odkazy na vnútorných stranách.
• Podpora pre neobmedzený počet hniezdiacich úrovne a podhladiny.
• Podpora takéhoto príkazu alebo stránky, pôšt ods cez definované užívateľom URI), kategória užívateľov, vlastný kód bloky a externými odkazy v menu.
• Podpora textu, rovnako ako obraz na báze menu prvky. (Ešte som sa pokúsiť tieto hoci).
• Štruktúra menu a obsah je vizuálne nastaviteľné oblasti admin NAVT.
• Kompaktný: jQuery založené flyouts pre vnorené úrovni.
• Rýchlo: jQuery pre menu je načítaný z Google servery (rád by som Thesis sám urobiť to isté miesto ťahom na mieste). To by urýchliť veci trochu.
• Škálovateľnosť - Tento typ menu je upraviteľný a konfigurovateľný kedykoľvek prostredníctvom pluginu nastavenie NAVT bez nutnosti kódovania kdekoľvek.

Použil som túto vynikajúcu ponuku z dynamickej jazdy portálu ako základ. Musel som sa prispôsobiť kód JavaScript trochu zahrnúť aj kus PHP do custom_functions.php, aby to fungovalo s práce. Tiež počet už existujúcich stránok, kategórií a príspevkov z mojich stránkach 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 k nastaveniu NAVT založené vnorené, prispôsobiteľný, viacúrovňové, SEO priateľská
a proste cool hľadajú navigačné menu pre Wordpress a práce Téma

1. Prejsť na Wordpress admin panelu. Plugins-> Pridať nový hľadanie "navt". Plugin budú zobrazené. Kliknite na tlačidlo [Install], [Nainštalovať], "Aktivovať Plugin".
2. Nástroje-> NAVT Zoznamy, Inside "navigácia" Skupina oblasti nájsť "Názov skupiny" a zadajte: "menu1" v poli, stlačte tlačidlo [Vytvoriť] tlačidlo. "Menu1" obdĺžnik priestor dostal vytvorený.
   Tento "menu1" oblasť bude hlavným menu ihrisko pre výstavbu. Budete pretiahnutím tu svoje ponuky prvky.
3. "Aktíva" v oblasti nájsť "iný", listbox a kliknite na "domáce" výber. "Domov" thingie objaví vo vnútri "nepriradené" oblasti. Divne, čo? Žiadne starosti, tak dlho, ako to funguje - a bude pre nás.
4. Presuňte tento "domovom" thingie z "Aktíva" v oblasti "menu1" obdĺžnik oblasti. Stane sa "domov" položka v menu.
   • Opakujte kroky 3-4 pre niektoré stránky z "stránky" oblasti, rovnako ako pre kategórie "v kategóriách" oblasti. Presuňte ďalšie položky, ktoré chcete mať na svojom menu vnútri "menu1" obdĺžnika. Môžete kliknúť na stránky, kategórie užívateľov a niektoré vlastné prvky, ako je "zoznam deliče" a "CODE bloku. Blok kódu je v pohode spôsob, ako pridať vlastné fragmenty vnútri menu.
   • Môžete pretiahnuť položky vnútri "menu1" oblasti, na usporiadanie ich poradie.
   • Môžete nastaviť hierarchickej pozícii každú položku s "<" a ">" šípkami.
   • Kliknutím na texte názvu každej položky ponuky - otvorí priamo strašná ďalšie úpravy na 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 na báze voľby menu a pridať kúsky kódu HTML do neho. Postupovať opatrne hoci.
   • Pre linkless unclikable podponukách, ktoré budú slúžiť ako "rodičia" pre ostatné "sub-deti" som použil, kód bloku "typ. Napríklad pri prispôsobovaní taký blok kódu položky som vstúpil na položku menu alias "=" MemberWing "a" Enter blok kódu: "=" <a href='#'> MemberWing </ a> ". S href = "#" bude to nedá kliknúť, ale ako platný "materská" menu voľby.
5. Tu je návod, ako moje NAVT To menu1 "Build štruktúra vyzerala takmer dokončená:
   
6. Dokončiť prvú budovu a potom kliknite na "rýchlosť" ikonu si môžete prispôsobiť štruktúru menu:
   
7. To sa otvorí dialógové okno so 4 záložkami: Možnosti displeja, CSS, tému.
   1. Choď na "Možnosti" kartu a uistite sa, že všetko je začiarknuté a "meno skupiny", hovorí: "menu1"
   2. Choď na "Zobraziť" kartu a uistite sa, že všetko, čo na "Zobraziť skupine navigácia na ..." oblasť je kontrolovaná [x]. Nechajte zvyšok na predvolené hodnoty.
   3. Choď na "CSS" kartu a vyberte prepínač (x) "sa nevzťahujú CSS triedy".
   4. Prejdite na záložku "téma" a vyplňte ho, ako že:
      
      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>
   5. Stlačte tlačidlo [Uložiť / zavrieť] Tlačidlo
8. V tomto bode menu budovy zvnútra plugin možnosťou NAVT je kompletný.
   Teraz je čas, aby sme sa trochu naladiť na tému práce , aby si to pripravení. K tomu musíme pridať niekoľko vlastných súborov - CSS a JavaScript, ktorý patrí do menu a update teórií custom_functions.php
9. Stiahnite si kompletnú sadu súborov tu .
10. Rozbaľte archív. Ak ste aktualizovali custom_functions.php so svojimi úprav - je potrebné zlúčiť s mojou vecou. Nechám to na vás.
    Ak ste sa dotkol - pokojne ho prepísať s mojím. Vezmite prosím na vedomie: Ja sa radšej umiestniť menu pod záhlavie stránky (predvolená je vyššie) - takže moja úprava túto možnosť preferencie tiež.
11. Upload archív vrátane všetkých podadresárov a súborov v rámci vášho Téma dizertačnej práce 'Vlastné' adresári, ako je toto:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Som sa dotkol custom.css - ja radšej držať menu konkrétnej CSS podľa svojich vlastných miest, aby sa zabránilo vytváraniu neporiadok vo vnútri custom.css
12. Na tomto mieste môžete načítať svoje webové stránky a uvidíte, nový krásny nový viacúrovňový a vnorené, SEO optimalizované menu.
13. Môžete sa vždy vrátiť do NAVT nastavení a prispôsobiť svoju ponuku s väčší výber alebo premiestnenie nič. To sa prejaví na živé webe automaticky.

Cesta vpred ...

Tento výukový program zahŕňal kreatívne príklad jedného druhu ponuky. Hral som si s iným - len aby ste videli, ako tmavé farby ponuka bude vyzerať takto:

Téma dizertačnej práce - viacúrovňové vnorené CSS menu - tmavá Paleta

Myslím, že je celkom pekné. Existuje mnoho ďalších navigačné vzorky sú k dispozícii na Dynamic Drive - všetci z nich je možné upraviť pre práce a ďalších tém Wordpress s nejakou snahou:

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 pre práce -, ktorý je uvedený čas a túžbu, aby sa to stalo.

Ja som mohol robiť túto prácu za vás na základe zmluvného vzťahu. Stačí si vybrať menu sa vám páči, kontaktujte ma a ja budem pracovať na kóde a inštrukcie pre vaše webové stránky.

20 dolárov

A samozrejme, ak ste sa na budovanie super SEO optimalizovaný Premium Wordpress členstvo portálu - najlepšie riešenie pre takto:
Téma dizertačnej práce + MemberWing členstvo plugin + vlastné hostované Wordpress samozrejme.

comments } { 15 komentárov }