Pátranie po dokonalej menu ...
To je súčasťou 1 tutorial
Časť 2 tohto kurzu učia, ako stavať vertikálne menu + tmavé farebné palety pre horizontálne
Rozhodol som sa, aby sa téma dizertačnej práce , pretože jeden z mojich klientov, informoval ma o problémy s kompatibilitou medzi mojej práce a WordPress plugin členstvo stránkach MemberWing. Opravil som to a potom sa rozhodol, aby sa bližšie pozrieť na práce a v skutočnosti obťažoval sledovať videá na titulnej stránke hlavnú tézu webu - Diythemes.com .
Čo ma zaujala najviac pozornosti na detail, užívateľskej prívetivosti a predovšetkým - SEO funkcie, ktoré sú tak dobre myšlienka.
MemberWing členstvo plugin bol navrhnutý od základov pre členstvo miesta, 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 vo MemberWing. Mnoho z mojich vlastných klientov sa pýtate na rôzne témy na použitie a že téma, ktoré bolo tak dobre SEO optimalizované z hĺbky by bolo ideálne riešenie pre podnikateľov členstvo portálu.
Kombinácia SEO právomoci MemberWing s právomocami SEO na tému dizertačnej práce by najlepšie hodnotenie príležitostí svojim klientom. Tak som si práce a hral s ním na jeden deň.
Je to vynikajúca téma vo všetkých smeroch. Súčasťou navigácie je ale je to trochu obmedzené funkcie. Od práce 1,5 + Jedná sa o jednu úroveň ponuky len. My obvykle túžbou je byť schopný prispôsobiť navigáciu toľko, koľko potrebujete. Niektoré stránky majú iba pár stránok, mnoho ďalších ton statických stránok + zillions článkov / príspevkov + veľa kategórií.
Takže v ideálnom svete, ktoré majú šancu vytvoriť pekne vyzerajúce hierarchicky usporiadaných užívateľsky príjemný navigačné menu je potrebné. Práca hned bat sa dobre vyzerajúce navigáciu, ale všimol som si, že všetky práce na báze webové stránky vyzerajú ako dvojčatá. Vlastnej práce navigačné menu, nie je rýchle, takže väčšina ľudí ho nechajte 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á ponuka štruktúry chýba. Tak som sa rozhodol zistiť, čo by sa dalo robiť.
Po vyskúšaní asi pol tucta menu / navigácie súvisiace pluginy som moja voľba na Wordpress Plugin List Navigácia NAVT .
NAVT plugin je v podstate zoznamu generátor s veľmi efektné a trochu ťažko Obrázok netradičné administrátorského rozhrania. Čo zavádzajúce tom je, že to nie je v skutočnosti vytvára chuť hľadať ponúk sám. Je to najťažšia časť práce i keď - poskytuje možnosť vizuálne ťahať za jeden povraz, a vytvárať jednoduchého zoznamu - kostra z menu-k-byť. A môžete vytvoriť mnoho ponúk tiež. Môžete si stiahnuť všetky tie veci Wordpress do menu: stránky, príspevky, články, kategórie, užívatelia, bloky kódu, externé odkazy, oddeľovače, oddeľovače a kombinovať a hniezda a zariadiť a upraviť v ľubovoľnom stromovej štruktúry, ktorú chcete.
NAVT generuje pre vás viedlo HTML zoznamu. Druhá krása NAVT je to, že vám pomôže vložiť nové ponuky do témy cez slávny JQuery na logike, ale bez nutnosti meniť kód! NAVT umožňuje zadať: "nahradiť tento element # s mojím novým NAVT menu". # Prvok môže byť číslo alebo triedy cesty existujúce ponuky a div element tag, ktorý je generovaný pomocou aktuálna téma. Takže NAVT to náhrada za vás bez toho, aby ste ísť do témy kódu a robiť to viac chaotický, než už je. Ak to všetko znie ako táranie - nebojte sa - budem vás krok za krokom čoskoro. Najťažšia časť NAVT pre každého je to, že budete musieť prísť s aktuálne CSS + obrázky + javascript kód menu seba. 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ť.
Rád Viem, že tieto veci trochu, takže som sa rozhodol zaťať zuby a viesť ľudstvo k slobode v budove najlepší z najlepších navigačných menu pre Wordpress. Len som potreboval zistiť zdrojom niektorých pekne vyzerajúce horizontálne menu CSS. Vybral som si Dynamic Drive stránky pre ich najlepšie demo výber a zdrojov.
Som venoval denne študovať práce a hrať sa s NAVT plugin. Na konci som sa hrdo vytvorili vlastné, pružný, SEO optimalizovaný, multilevel, vnorené nagivation štruktúru pre svoje Wordpress + práce na webe.
Zoznam funkcií viacúrovňové, vnorené menu pre Wordpress Téma dizertačnej práce
(Musíš milovať tohle):
- Profesionálny, čistý vzhľad.
- Podpora pre všetky moderné prehliadače vrátane MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome na JavaScript a non-JavaScriptu režimov.
- Elegantne downgradable pre non-JavaScriptu prehliadača. Tie ponuky budú použiteľné, vizuálne podobné, a práce aj pre prehliadače JavaScript zdravotne postihnutých (aj keď len na najvyššej úrovni navigácie bude vidieť a žiadne flyouts sa stane, samozrejme, pretože sú vyrobené JavaScript).
- SEO prívetivých funkcií - výpočtu ponuka kód je vygenerovaný v HTML. Google a ďalších vyhľadávačov budú môcť index navigačné štruktúry a odkazy na vnútorné stránky.
- Podpora pre neobmedzený úrovní vnorenia a podúrovní.
- Podpora ľubovoľnom poradí alebo stránok, príspevkov (pomocou užívateľsky definovaných URI), kategória užívateľov, vlastný kód blokov a externých odkazov v menu.
- Podpora textu i obrazu na základe ponuky prvkov. (Mám ešte skúsiť tieto hoci).
- Štruktúra menu a obsah, je vizuálne nastaviteľné oblasti admin NAVT.
- Kompaktné: JQuery na flyouts na vložené množstvo.
- Rýchly: JQuery pre menu je načítaný z Google serverov (rád by som sa práce, aby urobili to isté miesto ťahom na mieste). To by urýchlil veci trochu.
- Škálovateľnosť - Tento typ ponuky je možné upravovať a konfigurovať kedykoľvek prostredníctvom NAVT plugin nastavenia, bez nutnosti kódovania kdekoľvek.
Použil som tento skvelý menu Dynamic Drive portálu ako základ. Musel som upraviť kód JavaScriptu 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ánok boli použité na zostavenie 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é, prispôsobiteľné, viacúrovňové, SEO priateľská
a proste cool hľadajú navigačné menu pre Wordpress a práce Téma
- Prejsť na Wordpress admin panel. Plugins-> Pridanie novej hľadanie "navt". Plugin budú zobrazené. Kliknite na tlačidlo [Inštalovať], [Nainštalovať], "Aktivovať Plugin".
- Nástroje-> NAVT zoznamy, Inside "Navigácia Group" oblasti nájsť "Názov skupiny" a zadajte: "menu1" v poli, stlačte tlačidlo [Create] tlačidlo. "Menu1" obdĺžniku oblasť má vytvorený.
Tento "menu1" oblasti bude hlavné ihrisko pre ponuku výstavby. Budete pretiahnutím tu svoje ponuky prvky. - V "majetok" na plochu nájdete "ostatné" listbox a kliknite na "Home" voľby. "Home" thingie objaví vo vnútri "priradená" oblasti. Divné, čo? Žiadne starosti, tak dlho, ako to funguje - a to bude pre nás.
- Presuňte tento "Home" z thingie "aktív" do oblasti "menu1" obdĺžnik oblasti. Sa stane "Home" v menu.
- Opakujte kroky 3-4 pre niektoré stránky z "stránky" oblasti, rovnako ako u kategórie "kategórií" priestoru. Presuňte ďalšie položky, ktoré chcete, aby sa na vašom jedálničku vnútri "menu1" obdĺžnik. Môžete kliknite na stránky, kategórie užívateľov a niektoré vlastné prvky, ako je "Zoznam rozdeľovač" a "blok kódu". Bloku kódu je skvelý spôsob, ako pridať vlastné kúsky v menu.
- Môžete pretiahnuť položky vnútri "menu1" priestor na usporiadanie ich poradie.
- Môžete nastaviť hierarchické postavenie jednotlivých menu sa "<" a ">" šípky.
- Kliknutím na text Názov každej položky menu - otvorí sa priamo strašná ďalšie úpravy dialóg pre túto položku. Ja väčšinou používaný predvolené, ale technicky sa môžete zblázniť a začať robiť image na báze menu a pridať kúsky HTML kódu do neho. Postupovať s opatrnosťou hoci.
- Pre linkless unclikable podmenu, ktoré budú slúžiť ako "rodičia" pre ostatné "sub-deti," som použil "blok kódu" typu. Napríklad pri prispôsobení ako blok kódu položky som vstúpil na "menu alebo" = "MemberWing" a "Vložiť blok kódu:" = "<a href='#'> MemberWing </ a>". Po href = "#", bude to nedá kliknúť, ale ako platný "rodič" výber z menu.
- Tu je návod, ako moje NAVT "menu1" budovanie štruktúry vyzeral takmer dokončená:
- Dokončiť prvé budovy a potom kliknite na "rýchlosť" ikonu prispôsobiť štruktúru menu:
- To sa otvorí dialógové okno so 4 záložkami: Možnosti, Zobrazenie, CSS, tému.
- Choď na "Options" kartu a uistite sa, že všetko je začiarknuté a "Názov skupiny", hovorí: "menu1"
- Prejdite na záložku "Display" a uistite sa, že všetko na "Zobraziť skupine Navigácia na ..." oblasť je kontrolovaná [x]. Nechajte zvyšok na predvolené hodnoty.
- Choď na "CSS" kartu a vyberte prepínač (x) "sa nevzťahujú CSS triedy".
- Choď na "Téma" kartu a vyplňte ho, ako že:
Vložiť do "Pridať značky, ako ..." 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 [Uložiť / Zavrieť]
- Na mieste tejto budovy ponuky v rámci možností plugin NAVT je kompletný.
Teraz je čas urobiť si krátku melódiu pre tému dizertačnej práce , aby si to pripravený. V prípade, že je potrebné pridať niekoľko vlastných súborov - CSS a JavaScript, ktoré patria do menu a update práce "custom_functions.php - Stiahnite si kompletnú sadu súborov tu .
- Rozbaľte archív. Ak ste aktualizovali svoje custom_functions.php s Prispôsobenie - treba zlúčiť s moje veci. Nechám to na vás.
Ak ste sa dotkla - nebojte sa prepísať moje. Pozor prosím: Ja sa radšej pozíciu menu v záhlaví stránky (predvolená je vyššie) - takže moja nastavenie súčasťou tejto preferencie tiež. - Pridať archívu vrátane všetkých podadresárov a súborov pod tému dizertačnej práce "na zákazku" adresára, napríklad:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Som sa nedotkol custom.css - ja radšej držať ponuku špecifických CSS pod svojou vlastnou miestach, aby sa zabránilo vytváraniu neporiadku vo vnútri custom.css - Na tomto mieste môžete znovu načítať vaše webové stránky a uvidíte nové krásne nové viacúrovňový, vnorené, SEO optimalizované menu.
- Môžete sa vždy vrátiť do NAVT nastavení a prispôsobiť svoje menu s väčší výber alebo premiestnenie nič. To sa prejaví na živom webe automaticky.
Cesta pred nami ...
Tento výukový program zahŕňal kreatívne príklad jedného druhu menu. Hral som s inou - len aby ste videli, ako tmavé farby ponuke bude vyzerať:
Téma dizertačnej práce - multilevel vložené CSS menu - tmavá paletu
Myslím, že je celkom pekné. Existuje mnoho ďalších navigačné vzoriek k dispozícii na Dynamic Drive - všetky z nich je možné upraviť pre ďalšie práce a Wordpress Témy s istým úsilím:
Dynamic Drive horizontálne menu
Dúfam, že nájdete tento tutoriál prospešné a užitočné. Ako som povedal, je možné upraviť niektorú z týchto ponúk pre práce - to je danej dobe a túžba, aby sa to stalo.
Ja som mohol 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é premium členstvo WordPress portál - najlepšie riešenie pre takto:
Téma dizertačnej práce + MemberWing členstvo plugin + vlastné hostil Wordpress samozrejme.
