Pátrání po dokonalé menu ...
Toto je část 1 učitelský
2. část tohoto návodu učí, jak vytvořit vertikální menu + tmavé barevné palety pro horizontální
Rozhodl jsem se dostat Thesis téma, protože jedna z mých klientů mě informoval o problémech s kompatibilitou mezi DP a mé členství stránky wordpress plugin MemberWing. Opravil jsem to a pak se rozhodl se blíže podívat na práce a skutečně obtěžoval sledovat videa na přední straně hlavní stránky práce - Diythemes.com.
Co mě nejvíce zapůsobilo, je smysl pro detail, ovladatelnost a především - SEO funkce, které jsou tak vymyšlené.
MemberWing členství plugin byl navržen od základu pro členství stránky, které budou muset vytáhnout co nejvíce šťávy SEO 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 klienti žádají o různých tématech, která mají používat, a téma, které bylo tak dobře SEO optimalizován z hloubi by bylo vynikající způsobilosti pro členství v portálu podnikatele.
Kombinací SEO pravomocí MemberWing s SEO pravomocí tématu práce by nejlepší hodnocení příležitostí k mým klientům. Tak jsem si práce a hrál s ním na jeden den.
Je to vynikající tématem ve všech směrech. Navigační části, i když je trochu omezené funkce. Od 1.5 + práce to je jen jedna úroveň menu. Moje obvyklá přání má být schopen přizpůsobit navigační co nejvíce zapotřebí. Některé stránky mají pouze pár stránek, mnoho dalších tun statických stránek + zillions výrobků / míst + spousta kategorií.
Takže v ideálním světě, které mají šanci vytvořit pěkně vypadající hierarchicky organizovaný uživatelsky příjemný navigační menu je nutností. Diplomová práce hned nazačátek má dobré hledá navigaci, ale všiml jsem si, že všechny práce-založené webové stránky jsou vypadaly jako dvojčata. Vlastní projekt navigační menu není opravdu jednoduché, takže většina lidí, nech to být, jak je. Neexistuje žádný způsob, jak změnit pořadí kategorií v menu, nebo je v pozici mezi stránkami. A opět, schopnost vytvářet vnořené menu struktury chybí. Tak jsem se rozhodl zjistit, co by se dalo dělat.
Po vyzkoušení asi půl tuctu menu / navigace související plugins mohu nastavit výběr na Wordpress Plugin List Navigation NAVT.
NAVT plugin je v podstatě neuspořádaný seznam generátor s super chuť a trochu tvrdý-k-postava netradiční administrátorského rozhraní. Co si o zavádějící je, že není vlastně vytvořit luxusní hledá menu sám. Je to nejtěžší část práce však - vám dává možnost vizuálně táhnout za jeden provaz, a způsobí neuspořádaný seznam - kostra menu-k-být. A můžete vytvářet příliš mnoho nabídek. Můžete vytáhnout všechny druhy věcí Wordpress do navigačního menu: stránky, příspěvky, články, kategorií, uživatelů, bloků kódu, externí odkazy, oddělovače, oddělovače a kombinovat a hnízda a zařídit a upravit je v každém stromě-jako struktury, kterou chtít.
NAVT generuje pro vás vedlo HTML neuspořádaný seznam. Druhý krása NAVT je, že vám pomůže vložit novou nabídku do Vašeho tématu přes slavný JQuery na logice, ale bez nutnosti měnit libovolný kód! NAVT umožňuje určit: "# nahradit tento prvek s mou novou NAVT menu". # prvek by mohl být id nebo třídy cestu stávající nabídky nebo div element tag, 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ódu a učinit z ní špinavá, než ve skutečnosti je. V případě, že všechny zvuky jako blábolení - nebojte se - I'll průvodce vás krok za krokem brzy. Náročná část NAVT pro každého je, že budete muset přijít s aktuálním CSS + obrázky + javascript kód pro menu sebe. A je na vás, abyste zjistili, kde a jak integrovat tyto soubory a tohle si správně propojeny.
S úctou, aniž by věděl, JQuery + nějaký PHP + CSS + má slušné zkušenosti s Wordpress - tohle je těžké vytáhnout.
Vím, že to rád věci trochu, takže jsem se rozhodl zatnout zuby a průvodce lidstvo ke svobodě v budování nejlepší z nejlepších navigačních menu pro Wordpress. Jen jsem potřeboval najít se zdrojem některých pěkně vypadající horizontálním menu CSS. Vzal jsem řídit dynamické webové stránky pro své nejlepší výběr, dema a zdrojů.
Jsem věnoval na studium denní práce a hrát si s pluginem NAVT. Na konci jsem 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ých, vnořené menu navigace pro Wordpress Témata DP
(musíš milovat tohle):
- Profesionální, čistý vzhled a dojem.
- Podpora pro všechny moderní prohlížeče, včetně 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome jak v javascriptu a non-JavaScript režimy.
- Ladně downgradable pro non-javascript prohlížeče. Menu vám bude použitelný, vzhledově podobné a pracuje i pro zdravotně postižené javascript prohlížečů (i když jen na nejvyšší úrovni navigace bude viditelná i bez flyouts dojde samozřejmě tak, jak jsou ze strany JavaScript).
- SEO přívětivé funkce - neuspořádaný seznam menu kód je vygenerován v HTML. Google a dalších vyhledávačů bude schopen indexovat navigační struktury a najít odkazy na vnitřní stránky.
- Podpora pro neomezený hnízdění úrovně a sublevels.
- Podpora pro jakýkoli příkaz nebo stránky, příspěvky (přes uživatelsky definovaných URI), kategorií, uživatelů, bloky vlastní kód a externích odkazů v menu.
- Podpora text-i-image na menu prvků. (Mám ještě zkusit tyto ačkoli).
- Struktura menu a obsah je vizuálně nastavitelná oblasti admin NAVT.
- Kompaktní: JQuery na flyouts pro vnořených úrovní.
- Fast: JQuery pro menu je načten ze serverů Google (I'd love práce sama o sobě, aby učinili totéž místo Tahem lokálně). To by urychlilo věci trochu.
- Škálovatelnost - Tento typ menu je upravitelný a konfigurovatelný kdykoliv prostřednictvím pluginu nastavení NAVT bez nutnosti kódování kdekoli.
Použil jsem tento vynikající menu z dynamického disku portálu jako základ. Musel jsem se přizpůsobit javascript kód trochu zahrnout i kus PHP do custom_functions.php, aby byla práce s práce. Také počet pre-existující stránky, kategorie a místa z mé stránky byly použity k sestavení struktury nabídek. Vaše stránky jsou 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é, přizpůsobitelné, víceúrovňové, SEO přátelský
a prostě cool looking navigační menu pro Wordpress a práce Témata
- Přejít na panel admin Wordpress. Pluginy-> Přidat nový hledejte "navt". Plugin budou zobrazeny. Klepněte na tlačítko [Install], [Instalovat nyní], "Aktivovat Plugin".
- Nástroje-> NAVT Seznamy, Inside "Navigace skupiny" oblast najít "název skupiny" a zadejte: "menu1" v této oblasti, stiskněte [Vytvořit] tlačítko. "Menu1" obdélník prostor dostal vytvořil.
Tento "menu1" oblast bude hlavním menu hřiště pro výstavbu. Budete přetahování sem menu prvků. - V "aktiv" prostor najít "ostatní" listbox a klikněte na "Home" volby. "Home" thingie objeví uvnitř "unassigned" oblasti. Divný, co? Bez obav, jak dlouho, jak to funguje - a to bude pro nás.
- Přetáhněte tento "Home" thingie z "majetek" v oblasti "menu1" obdélník oblasti. To se stane "Home" v menu.
- Opakujte kroky 3-4 pro některé stránky z "Stránky" oblasti, stejně jako u kategorie "kategorie" oblasti. Přetáhnout jakékoli další položky, které chcete, aby se na vašem jídelníčku uvnitř "menu1" obdélník. Můžete kliknout na stránky, kategorie, uživatelů a některé vlastní prvky, jako je "seznam dělič" a "blok kódu". Blok kódu je super způsob, jak přidat vlastní úryvky uvnitř menu.
- Můžete přetáhnout položky uvnitř "menu1" prostor pro uspořádání jejich pořadí.
- Můžete upravit hierarchické postavení každé položky nabídky "<" a ">" šípy.
- Kliknutím na název textu každou položku - otevře přímo úděsná dalších úprav dialog pro tuto položku. Já většinou používá výchozí nastavení, ale technicky se můžete zbláznit a začít dělat image-založené volby nabídky a přidat kousky kódu HTML do něj. Postupovat s opatrností ačkoli.
- Pro linkless unclikable submenu, které bude sloužit jako "rodiče" pro další "sub-děti" jsem použil "Code block" typu. Například při přizpůsobování jako blok kódu položka jsem vstoupil na "položku alias Menu" = "MemberWing" a "Enter blok kódu:" = "<a href='#'> MemberWing </ a>". S href = "#" Bude dělat to nelze kliknout, ale působí jako platné "mateřských" menu.
- Zde je návod, jak má NAVT 'menu1' vybudovat strukturu vypadal téměř dokončen:
- Povrchová úprava původní budovy a poté klikněte na "rychlost", ikonu si můžete přizpůsobit strukturu menu:
- To otevře dialogové okno s 4 karty: Možnosti, Zobrazení, CSS, Theme.
- Jdi na "Možnosti" kartu a ujistěte se, všechno je nekontrolovaná a "název skupiny", říká: "menu1"
- Jdi na "Zobrazit" kartu a ujistěte se, vše na "skupině navigace Zobrazit v ..." oblast je kontrolována [x]. Ostatní nechte na výchozí hodnoty.
- Jdi na "CSS" kartu a vyberte přepínač (x) "se neaplikuje CSS třídy".
- Jdi na "Theme" kartu a vyplňte jej takhle:
Vložit do "Add tags před ..." oblast tento kód:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Vložit do "Add tags po ..." oblast tento kód:
<br style='clear: left' /></div> - Stiskněte tlačítko [uložit / zavřít] tlačítko
- V této budově bod z menu plugin do voleb NAVT je kompletní.
Nyní je na čase udělat něco naladit se na téma práce, aby si to připraven. Za tím musíme přidat několik vlastních souborů - CSS a JavaScriptu, která patří do menu a aktualizace DP 'custom_functions.php - Stáhnout kompletní sadu souborů zde.
- Rozbalte archiv. Máte-li aktualizovat své custom_functions.php s vaší vlastní nastavení - musíte je sloučit se moje věci. Nechám to na vás.
Pokud jste se nedotkl je - nebojte se přepsat to s mým. Upozornění: Já se raději místo menu v záhlaví stránky (výchozí hodnota je vyšší) - takže moje úpravy zahrnoval tuto preferenci stejně. - Upload archivu včetně všech podadresářů a souborů v rámci své práce téma 'custom' adresáři, jako tento:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Jsem se nedotkl custom.css - raději držet menu-specifické CSS pod svou vlastní umístění, aby se zabránilo vytváření nepořádek uvnitř custom.css - Na tomto místě můžete načíst své webové stránky a vidět nové krásné nové víceúrovňové, vnořené, SEO optimalizované menu.
- Můžete vždy vrátit do NAVT nastavení a přizpůsobit svou nabídku s větším výběrem, nebo přemístit cokoliv. To se projeví na živých webu automaticky.
Cestě vpřed ...
Tento tutoriál součástí tvůrčí příklad jednoho typu menu. Jsem hrál s ještě jeden - jen aby zjistila, jak tmavou barvu menu bude vypadat takto:
Téma diplomové práce - multilevel vnořené CSS menu - tmavé palety
Myslím, že je docela pěkné. Existuje mnoho dalších navigační vzorků k dispozici na adrese Dynamic Drive - to všechno je možné upravit pro DP a ostatní Wordpress témata s některými úsilí:
Dynamic Drive Horizontální Menu
Doufám, že najdete tento tutoriál prospěšné a užitečné. Jak jsem řekl, že je možné upravit některou z těchto nabídek pro práce - to je daný čas a přání, aby se to stalo.
Mohl bych dělat tuto práci za vás na základě smlouvy. Stačí si vybrat v menu se vám líbí, kontaktujte mě a já 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é pojistné wordpress členství portál - nejlepší řešení pro toto:
Téma diplomové práce + MemberWing členství plugin + vlastní hostované Wordpress samozřejmě.
