Quest pro dokonalé menu ...
To je část 1 tutorial
Část 2 tohoto návodu učí, jak budovat svislé menu + tmavé barevné palety pro vodorovné
Rozhodl jsem se dostat Téma diplomové práce , protože jeden z mých klientů mi sdělil, o problémech s kompatibilitou mezi DP a mým wordpress členství místě plugin MemberWing. Opravil jsem to a pak se rozhodl, aby se blíže podívat na práci a skutečně obtěžoval sledovat videa na titulní straně hlavní stránky práce - Diythemes.com .
Co na mne zapůsobilo nejvíce, je důraz na detail, uživatelskou přívětivost a ze všeho nejvíce - SEO funkce, které jsou tak dobře myšlenka.
MemberWing členství plugin byl navržen od základu pro členství stránky, které budou muset tahat tolik SEO džus je to možné. Tak jsem se věnovat hodně pozornosti mnoha SEO vylepšení a dokonalosti v MemberWing. Mnoho z mých vlastních klientů se ptáte na různá témata k použití a mají téma, které bylo tak dobře SEO optimalizované z hloubi by bylo ideální řešení pro členství portál podnikatele.
Kombinace SEO pravomocí MemberWing se SEO pravomocí téma práce by nejlepší hodnocení možností svým klientům. Tak jsem dostal práci a hrál s ním na jeden den.
Je to vynikající téma ve všech směrech. Navigační část i když je trochu omezená ve funkci. Počínaje práce 1,5 + Jedná se o jednu úroveň menu pouze. Můj obvyklý přáním je, aby se mohl přizpůsobit navigace tolik, kolik potřebujete. Některé weby mají jen několik stránek, mnoho dalších tun statických stránek + zillions články / příspěvky + spoustu kategorií.
Takže v ideálním světě, které mají šanci vytvořit pěkně vypadající hierarchicky uspořádaných uživatelsky přívětivé menu navigace je třeba. Práce hned bat má dobře vypadající navigaci, ale všiml jsem si, že všechny práce-založené webové stránky vypadaly jako dvojčata. Přizpůsobení Práce navigační menu, není opravdu jednoduché, takže většina lidí prostě jej nechte jak je. Neexistuje žádný způsob, jak měnit pořadí kategorií v menu, nebo postavení jim mezi stránkami. A opět, schopnost vytvářet vnořené menu struktury chybí. Rozhodl jsem se tedy podívat, co by mohlo být děláno o tom.
Po vyzkoušení asi půl tuctu menu / navigace související Pluginy jsem mého výběru na Wordpress Seznam Navigace Plugin NAVT .
NAVT plugin je v podstatě Nečíslovaný seznam generátor super efektní a trochu tvrdý-k-postava netradiční admin rozhraní. Co je zavádějící o tom je, že není vlastně vytvořit efektní hledají menu samo o sobě. Je to nejtěžší část práce však - vám dává možnost vizuálně táhnout za jeden provaz, a vytvářet Nečíslovaný seznam - kostra z vašeho menu-k-být. A ty mohou vytvořit mnoho nabídek také. Můžete vytáhnout všechny druhy věcí Wordpress do navigačního menu: stránky, příspěvky, články, kategorie, uživatelů, bloků kódu, externí odkazy, oddělovače, oddělovače a kombinovat a hnízda a zařídit a přizpůsobit je v každém stromu-jako struktura vás chci.
NAVT generuje pro vás vedlo HTML neuspořádaný seznam. Druhé krása NAVT je, že vám pomůže k vložení nového menu do vašeho tématu přes slavný JQuery na logice, ale bez nutnosti měnit kód! NAVT umožňuje zadat: "nahradit # prvek s mou novou NAVT menu". # Element by mohl být id nebo druh cesty existujících menu nebo div element značka, která je vytvořená aktuální téma. Takže NAVT to náhrada za vás bez vás nutí jít do tématu kód a učinit z ní binec, než ve skutečnosti je. Pokud to všechno zní jako blábol - nebojte se - budu průvodce vás krok za krokem brzy. Náročná část NAVT pro každého je to, že budete muset přijít s aktuální CSS + obrázky + javascript kód pro vaše menu sebe. A to je na vás, abyste zjistili, kde a jak integrovat tyto soubory a učinit tuto věc řádně si jsou navzájem spojeny.
S pozdravem, aniž by věděl, JQuery + nějaký PHP + CSS + mají slušné zkušenosti s Wordpress - ta věc je těžké vytáhnout.
Rád Vím, že tohle trochu a tak jsem se rozhodl zatnout zuby a průvodce lidstvo ke svobodě v budově nejlepší z nejlepších navigačních menu pro Wordpress. Jenom jsem potřeboval zjistit zdroje pro některé pěkně vypadající horizontální CSS menu. Vzal jsem Dynamic Drive webové stránky pro jejich nejlepší výběr, dema a zdrojů.
I věnované den, ke studiu Práce a hrát si s plugin NAVT. Na konci jsem se hrdě vytvořili vlastní, pružný, SEO optimalizovaný, víceúrovňové, vnořené nagivation struktury pro můj Wordpress + práce na webu.
Seznam funkcí víceúrovňové, vnořené menu navigace Wordpress pro Téma diplomové práce
(Máte rádi tohle):
- Professional, čistý vzhled a pocit.
- Podpora pro všechny moderní prohlížeče včetně MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome v obou javascript a non-javascript režimy.
- Půvabně downgradable pro non-javascript prohlížečů. Můžete menu bude použitelný, vizuálně podobné, a pracovní i pro JavaScript se zdravotním postižením prohlížeče (byť jen na nejvyšší úrovni navigace bude viditelná, a ne flyouts dojde samozřejmě, jak jsou vytvořena JavaScript).
- SEO přívětivých funkcí - Nečíslovaný seznam menu kód je vygenerován v HTML. Google a další vyhledávače pavouci budou moci index vaše navigační struktury a odkazy na vnitřní stránky.
- Podpora pro neomezené hnízdění úrovně a podhladiny.
- Podpora pro každou objednávku nebo stránky, příspěvky (přes uživatelem definované URI), kategorie, uživatelé, vlastní kód bloků a externích odkazů v menu.
- Podpora text-stejně jako image-založené menu prvky. (Mám ještě zkusit tyto ačkoli).
- Menu struktura a obsah je vizuálně nastavitelná přes oblast admin NAVT.
- Kompaktní: jQuery vychází flyouts pro vnořené úrovně.
- Rychlé: JQuery pro menu je načten ze serverů Google (já bych rád práce sama o sobě, aby učinily totéž místo tahem lokálně). To by urychlilo to bit.
- Škálovatelnost - Tento typ menu je upravitelný a konfigurovatelný kdykoliv přes plugin nastavení NAVT bez nutnosti kódování kdekoliv.
Použil jsem tento vynikající menu z Dynamic Drive portálu jako základ. Musel jsem se přizpůsobit javascript kód bit, stejně jako patří kus PHP do custom_functions.php, aby to fungovalo s DP. Také počet pre-existujících stránek, kategorií a příspěvky z mého webu byly použity k sestavení strukturu menu. Vaše stránky specifika se budou lišit - ale koncepce bude stejný.
Tak ať pokračovat, ne?
Krok za krokem instrukce pro nastavení NAVT -založené vnořené, nastavitelné, víceúrovňové, SEO přátelská
a prostě a jednoduše vychladnout hledají navigační menu pro Wordpress a práce s námětem
- Přejít na panel admin Wordpress. Pluginy-> Přidat nový Hledat "navt". Plugin se zobrazí. Klikněte na [Install], [Instalovat nyní], "Aktivovat Plugin".
- Nástroje-> NAVT seznamy, Inside "Navigace Group" oblast hledání "jméno skupiny" a zadejte: "Menu1" v oblasti, stiskněte tlačítko [Vytvořit] tlačítko. "Menu1" obdélník prostor dostal vytvořil.
Tento "Menu1" oblast bude hlavním hřištěm pro menu výstavbu. Budete přetažením zde vaše menu prvky. - V "majetek" na plochu najít "ostatní" listbox a klikněte na "Home" volba. "Home" thingie objeví uvnitř "nepřiřazeno" oblasti. Divný, co? Bez obav, jak dlouho jak to funguje - a to bude pro nás.
- Přetáhněte tento "Home" thingie z "aktiv", oblast, do "Menu1" obdélník oblasti. To se stane "Home", položka v menu.
- Opakujte kroky 3-4 pro některé stránky z "Články" oblast, stejně jako pro kategorie v "kategorie" oblasti. Drag jakékoliv jiné položky, které chcete být na menu uvnitř "Menu1" obdélník. Můžete kliknout na stránky, kategorie uživatelů a některé vlastní prvky, jako je "Seznam děliče" a "blok kódu". Blok kódu je super způsob, jak přidat vlastní úryvky v menu.
- Můžete drag položky v menu uvnitř "Menu1" oblasti, na uspořádání jejich pořadí.
- Můžete upravit hierarchické postavení jednotlivých menu se "<" a ">" šípy.
- Kliknutím na text Název každé položky menu - otevře přímo úděsná extra přizpůsobení dialogu pro tuto položku. I většinou používá výchozí nastavení, ale technicky se můžete zbláznit a začít dělat image-založené menu volby a přidejte kousky kódu HTML do něj. Postupujte opatrně ačkoli.
- Pro linkless unclikable podnabídek, které budou sloužit jako "rodiče" pro jiné "děti sub-" jsem použil "blok kódu" typ. Například při přizpůsobování, jako blok kódu položky jsem vstoupil do "alias menu" = "MemberWing" a pro "Enter blok kódu:" = "<a href='#'> MemberWing </ a>". S href = "#", bude to nelze kliknout, ale jako platný "mateřské" menu volba.
- Zde je návod, jak moje NAVT 'Menu1' budovat strukturu vypadala téměř dokončena:
- Dokončit první budovu a pak klikněte na "zařízení", ikonu si můžete přizpůsobit strukturu menu:
- To otevře dialogové okno se 4 záložkami: Volby, Display, CSS, téma.
- Jdi na "Možnosti", záložka a ujistěte se, že všechno je nekontrolovatelnou a "jméno skupiny", říká: "Menu1"
- Jdi na "Display" kartu a ujistěte se, že všechno na "skupině navigace Zobrazit ..." oblast je kontrolována [x]. Ostatní nechte na výchozí hodnoty.
- Jdi na "CSS" kartu a vyberte přepínač (x) "se nevztahují CSS třídy".
- Jdi na "Theme" kartu a vyplňte ji takhle:
Vložit do "Přidat značky do ...", oblast tento kód:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Vložit do "Přidat značky po ..." oblast tento kód:
<br style='clear: left' /></div> - Stiskněte tlačítko [Save / zavřít] tlačítko
- V tomto bodě menu budova zevnitř NAVT plugin možností je kompletní.
Nyní je čas, abychom se trochu naladit na téma práce , aby si to připravený. U že potřebujeme přidat několik vlastních souborů - CSS a JavaScript, který patří do menu a update práce 'custom_functions.php - Stáhněte si kompletní sadu souborů zde .
- Rozbalte archiv. Pokud jste aktualizovali custom_functions.php s vaší vlastní nastavení - musíte spojit je s moje věci. Nechám to na vás.
Pokud jste se dotkl - nebojte se přepsat to s mým. Vezměte prosím na vědomí: raději jsem na pozici menu pod stránkách hlavičku (výchozí je nahoře) - takže moje úprava součástí této preference stejně. - Upload archiv včetně všech podadresářů a souborů v rámci vašeho tématu práce 'vlastní' adresáře, jako je tato:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Jsem se ani nedotkl custom.css - raději držet menu-specifické CSS pod svou vlastní umístění, aby nedocházelo k vytváření nepořádek uvnitř custom.css - Na tomto místě můžete reload vaše webové stránky a vidět nové krásné nové víceúrovňového, vnořené, SEO optimalizované menu.
- Můžete vždy vrátit do NAVT nastavení a přizpůsobit své menu s větším výběru nebo přemístit nic. To se projeví na živé webu automaticky.
Cestu před sebou ...
Tento tutoriál součástí tvůrčí příklad jednoho druhu menu. Hrál jsem si s další - jen aby zjistili, jak tmavé barvy menu vypadat:
Téma diplomové práce - multilevel nested CSS menu - tmavé palety
Myslím, že je docela pěkné. Existuje mnoho dalších navigační vzorků k dispozici na adrese Dynamic Drive - všechny z nich je možné upravit pro práci a jiné Wordpress témata se určité úsilí:
Dynamic Drive Horizontální menu
Doufám, že najdete tento návod, prospěšné a užitečné. Jak jsem řekl, je možné upravit některé z těchto nabídek na práci - to je dané době a touha, aby se to stalo.
Mohl bych to udělat práci za vás na základě smlouvy. Stačí vybrat menu se vám líbí, kontaktujte mě a budu pracovat na kód a instrukce pro vaše webové stránky.
20 dolarů
A samozřejmě, pokud jste až po stavební super SEO optimalizované Premium Wordpress členství portál - nejlepší řešení pro tento:
Téma diplomové práce + MemberWing členství plugin + vlastní hostované Wordpress samozřejmě.
