Pátrání po dokonalé vertikální nabídky ...

Část 1 tohoto návodu popsány krok za krokem při budování víceúrovňového horizontální vnořené menu pro téma práce WordPress . Část 2 bude pokračovat na posílení této funkce. Zde budeme přidávat "tmavý" verzi horizontální navigační menu a já vás naučí, jak se přepínat mezi "světlé" a "tmavý" verzi. Část 2 je podmnožinou části 1. To zahrnuje vše od části 1 + přidává další chladné věci.

Hlavní myšlenka, že bych chtěl prezentovat přidává vertikální menu na (a WordPress obecně). Hledal jsem opravdu flexibilní, SEO přátelský a multi-kompatibilní se všemi prohlížeči vertikální menu, které by umožnilo vytvořit neomezené hnízdění úrovně.

Web má spoustu stránek na toto téma, ale když jsem se začal snažit všechny tyto vzorky - buď se porouchala, rozpadla, podporována pouze omezený počet úrovní a zlobil se Gates a více junksplorer Ballmer je 6. Nakonec jsem se vrátil do osvědčené Dynamic Drive menu jako jejich vertikální vzorků ukázal být pěkný případ, který se hodí své přísné požadavky. Musel jsem se výrazně upravovat i když se ujistit, že padne Diplomový model.
Pátrání po dokonalosti pokračuje ...

Jsem strávil asi 16 hodin hledání, montáž, zkoušení, kterým se stanoví, leštění a ladění vertikální jídelníčku CSS a JS kód týden a 3/4 doby trávili což je pro práci v MSIE 6.
Tak jako tak, byl jsem spokojený s konečným výsledkem. Výsledkem vertikální navigační menu má všechny stejné výhody , že horizontální menu má.

S možnost přidat vertikální menu je velmi důležité, aby o 70-80% portálů na internetu. Horizontální menu mají omezené "mezera" ubytovat mnoho možností v menu, ale vertikální nabídce nemá toto omezení a pomohlo by značně. Tak jdeme na to.

Spousta kroky, aby se to stalo již popsány v části 1 tutoriálu tak to bude to pro trochu kratší, ale s mnohem více funkcí bohatých výsledků.

Tak tady to jde:

Stavební SEO přátelský, vertikální, víceúrovňové, hierarchicky vnořené menu pro WordPress a téma práce. Krok za krokem
(... To, co jste nikdy nenapadlo, že to možné ...)

  1. Instalace php exec plugin a aktivovat. Budeme ho potřebovat, protože budu používat PHP uvnitř textového widgetu vydávat vertikální menu 'HTML kód.
  2. Proveďte kroky 1 - 6 z části 1 tutoriálu . V podstatě je třeba nainstalovat a aktivovat pomocí NAVT plugin + vizuálně vytvářet své nabídky. Ujistěte se, že vaše nabídka je název skupiny "menu1". Toto jméno je napevno v custom_functions.php
  3. Klepněte na tlačítko 'převodovky' icon pro vašeho 'menu1 "skupinou jej upravit vlastnosti:
    navt_customize_menu
  4. Vyplývá kroky 7.1 -7.3 části 1 tutoriál k nastavení "Options", "Display" a "CSS" záložek nastavení.
  5. Nyní klikněte na "téma" záložce tohoto dialogu. My přepíše počet nastavení (pokud jste tam byli po kroku 1). To je v pořádku - neztratíte nic - ale tyto změny jsou nezbytné, protože jsem změnil nějaký kód z kroku 1.
    Zde je návod, jak tento dialog musí být vyplněny:
    1. Uvnitř "Theme XPath:" Oblast zadání Tento kód (to přikazuje nahradit jakoukoli značku těchto tříd):
      .jquerycssmenu, .jqueryslidemenu
    2. Nastavte "akce" na "Nahradit"
    3. Uvnitř "Přidat značky, než navigace skupiny" oblasti zadejte tento kód:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Uvnitř "Přidat značek navigaci skupiny" oblasti zadejte tento kód:
      <br style='clear: left' /></div>
    5. Klikněte na [Save / zavřít] tlačítko.
  6. Nyní přejděte do WordPress admin panelu -> Vzhled -> Widgety.
  7. Přetáhněte "TEXT" Widget (z velkého "k dispozici widgety na plochu) do postranního panelu" 1 "prostoru na pravé straně. Budeme přidávat kód do textového prvku, který nám pomůže se zhmotnit vertikální menu.
    Poznámka: Předpokládám, že máte "Sidebar 1" v existenci. Práce volba umožňuje vypnout - ale pro účely tohoto tutoriálu si nechat to být.
  8. Poté, co přetáhnout tuto pomůcku - bude se otevře jako květ (jsem pocit, že se romantická MSIE boj je u konce).
  9. V oblasti "Název" zadejte "nejlepší světové vertikální menu," ... No, neváhejte využít svou kreativitu - že text půjde především nově narozeného vertikální menu.
  10. Ve velkém prostoru pro text - zadejte tento kód PHP:
    <?php
    if (function_exists('navt_getlist'))
    $menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
    else
    $menu_html = "";
    $menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
    echo $menu_html;
    ?>
  11. Stiskněte tlačítko [Uložit], klikněte na tlačítko na "Zavřít" odkaz.
  12. Stáhněte si aktualizovanou sadu souborů zde .
    Tento archiv obsahuje:


    • Aktualizovaná verze "jasný" horizontální nabídky kód
    • "Dark" verze horizontální nabídce
    • Vertikální nabídky kódy
    • Aktualizovaná verze custom_functions.php
  13. Nyní je potřeba tento archiv rozbalit a nahrát jej do 'Vlastní' adresáře Téma disertační práce.
    Poznámka: pokud jste udělali nějaké úpravy uvnitř custom_functions.php - byste třeba sloučit. Pokud tomu tak není - klidně ho přepsat s mou verzi.
  14. Voila! Nyní můžete načíst své webové stránky a podívat se na stejné "jasný" horizontální menu + neato svislé menu v levém panelu.
  15. BONUS úkol: Nechte měnit "jasný" horizontální menu na "tmavý" barevného schématu.
    1. Uvnitř custom_functions.php souboru:
      nahradit tento kód:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      s tímto kódem:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu

      V podstatě jsme se komentuje jeden řádek a odkomentováním tu druhou.
    2. Nyní přejděte do WordPress admin-> Nástroje-> NAVT seznamy a klikněte na výše uvedený "rychlost" ikonu upravovat vlastnosti vaší 'menu1 "skupinou.
    3. Klikněte na "téma" kartu.
    4. Uvnitř "Přidat značky, než navigace skupiny" oblasti zadejte tento kód:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Nyní - dobíjení stránku - a váš hlavní horizontální navigační menu "magicky" se stal tmavý, něco takového:
      Thesis theme - multilevel nested CSS menu - dark palette

      Téma disertační práce - víceúrovňové vnořené CSS menu - tmavá Paleta

      Tmavá barva paleta může být vhodnější pro určité stránky, než světlé barvy jeden. Takže teď máte svobodu volby ve svém životě!

    6. Dostat se zpátky do "jasný" barevného schématu - stačí vrátit zpět výše uvedené kroky "bonus".
  16. Závěr:
    Miluji Téma disertační práce, miluji WordPress a mám rád, že máme slušné způsoby, jak přidat navigační menu na našich portálech.

20 dolarů


Užijte si to!

Gleb Esman

{Komentáře k tomuto vstupu jsou zavřené}

Pátrání po dokonalé nabídky ...

Toto je 1. část návodu
Část 2 tohoto kurzu učí, jak stavět vertikální menu + tmavě barevná paleta pro horizontální jeden

Rozhodl jsem se dostat Téma disertační práce , protože jeden z mých klientů informoval mě je to s kompatibilitou mezi mé práce a členství wordpress plugin webu MemberWing. Opravil jsem to a pak se rozhodl, aby se blíže podívat na práce a skutečně se neobtěžoval sledovat videa na titulní straně hlavní stránky práce - Diythemes.com .
Jaký dojem mě nejvíc, je důraz na detail, uživatelské přívětivosti a většina ze všech - SEO funkce, které jsou tak dobře mysleli.
MemberWing členství plugin byl navržen od základu pro členské stránky, které by potřebovala k tahu tolik SEO šťávu jak je to možné. Tak jsem zaplatil spoustu pozornosti mnoha SEO vylepšení a dokonalosti ve MemberWing. Mnoho z mých klientů se ptá o různých tématech, která používají a mají téma, které bylo tak dobře SEO optimalizován z hluboko uvnitř by bylo vynikající vhodné pro podnikatele členství portálu.

Kombinace SEO pravomoci MemberWing s pravomocemi SEO by to nejlepší z žebříčku příležitostí svým klientům. Tak jsem si práci a hrál si s ním na jeden den.

Je to vynikající téma ve všech směrech. Součástí navigační to i když je trochu omezené funkce. Počínaje práce 1.5 + je o jednu úroveň menu za pouhých. Můj obvyklý touhou je být schopen přizpůsobit navigaci, stejně jako potřeby. Některé stránky mají pouze pár stránek, mnoho jiní mají tuny statické stránky více zillions článků / sloupky a více spoustu kategorií.
Takže v ideálním světě má šanci vytvořit pěkně vypadající hierarchicky organizované uživatelsky přívětivý navigační menu je nutností. Práce hned bat má dobrou hledáte navigaci, ale všiml jsem si, že všechny práce na bázi webové stránky hledají jako dvojčata. Přizpůsobení Diplomový navigační menu není rychlé, takže většina lidí jen tak nechat jak je. Neexistuje žádný způsob, jak změnit pořadí kategorií v menu a umístit je mezi stránkami. A opět, schopnost vytvářet vnořené nabídky struktury chybí. Tak jsem se rozhodl zjistit, co by se dalo dělat.
Po vyzkoušení asi půl tuctu menu / navigace související pluginy mohu nastavit výběr na WordPress Plugin Seznam Navigace NAVT .
NAVT plugin je v podstatě výčtu generátor se super fantazii a trochu těžko vymyslet netradiční admin rozhraní. Jaký omyl o tom, že to není vlastně vytvořit efektní vypadající menu samo o sobě. To dělá nejtěžší část práce i když - dává vám možnost vizuálně táhnout za jeden provaz, a vytvářet Nečíslovaný seznam - kostra vaší nabídky-k-být. A můžete vytvořit mnoho nabídek také. Můžete vytáhnout všechny druhy věcí WordPress do menu navigace: stránky, příspěvky, články, kategorie, uživatelé, bloky kódu, externí odkazy, rozdělovače, odlučovače a kombinovat a hnízdo a zařídit a upravit je v každém stromové struktuře si chcete.
NAVT vytváří pro vás vedlo HTML neuspořádané seznam. Druhá krása NAVT je, že vám pomůže vložit novou nabídku do tématu prostřednictvím známého jQuery založené na logice, ale bez nutnosti měnit žádný kód! NAVT umožňuje zadat: "nahradit Element # s mým novým NAVT menu". # Prvek může být id nebo třída cesty existující nabídky nebo element div tag, který je vytvořený aktuální téma. Takže NAVT dělá tuto výměnu za vás bez vás nutí jít do zábavního kódu a dělat to více nepříjemné, než už je. Pokud to vše se jeví jako blábol - nebojte se - budu vést vás krok za krokem brzy. Náročná část NAVT pro každého je to, že budete muset přijít s vlastní CSS + obrázky + Javascript kód pro vaše nabídky sami. A je jen na vás, zjistit, kde a jak integrovat tyto soubory a dělat ty věci pořádně propojeny.
S pozdravem, aniž by věděl jQuery + nějaký PHP + CSS + má slušné zkušenosti s WordPress - tahle věc je těžké vytáhnout.
Vím, že rád tyhle věci trochu, takže jsem se rozhodl zatnout zuby a průvodce lidstvo ke svobodě v budově nejlepší z nejlepších navigačních menu pro WordPress. Jen jsem potřeboval zjistit zdroje pro některé pěkně vypadající horizontální menu CSS. Vzal jsem Dynamic Drive webové stránky pro jejich nejlepší demo volby a zdrojů.

Jsem věnoval jeden den studovat práci a hrát si s pluginu NAVT. Na konci jsem hrdě vytvořil vlastní, flexibilní, SEO optimalizace, víceúrovňové a vnořené nagivation strukturu pro mé WordPress a více práce založené na webu.

Seznam funkcí a vnořených víceúrovňových nabídce Téma disertační práce
(Musíš milovat ty věci):

  • Profesionální, čistý vzhled.
  • Podpora pro všechny moderní prohlížeče včetně MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome jak v javascriptu a non-javascript dopravy.
  • Elegantně downgradable pro non-javascript prohlížeče. Ty nabídky budou použitelné, vizuálně podobné a práce i pro prohlížeče javascript zakázány (i když jen nejvyšší úrovně navigace budou viditelné a žádné flyouts se stane, samozřejmě, protože jsou vyrobeny JavaScript).
  • SEO přátelské funkce - neuspořádané Seznam nabídka kód je generován ve formátu HTML. Google a další vyhledávačů budou moci index navigační strukturu a odkazy na vnitřních stranách.
  • Podpora pro neomezený počet hnízdících úrovně a podhladiny.
  • Podpora takového příkazu nebo stránky, pošt odst. přes definované uživatelem URI), kategorie uživatelů, vlastní kód bloky a externími odkazy v menu.
  • Podpora textu, stejně jako obraz na bázi nabídky prvky. (Ještě jsem se pokusit tyto ačkoli).
  • Struktura menu a obsah je vizuálně nastavitelné oblasti admin NAVT.
  • Kompaktní: jQuery založené flyouts pro vnořené úrovni.
  • Rychle: jQuery pro menu je načten z Google servery (rád bych Thesis sám udělat totéž místo tahem na místě). To by urychlit věci trochu.
  • Škálovatelnost - Tento typ nabídky je upravitelný a konfigurovatelný kdykoli prostřednictvím pluginu nastavení NAVT bez nutnosti kódování kdekoliv.

Použil jsem tuto vynikající nabídku z dynamické jízdy portálu jako základ. Musel jsem se přizpůsobit kód JavaScript trochu zahrnout i kus PHP do custom_functions.php, aby to fungovalo s práce. Také počet již existujících stránek, kategorií a příspěvků z mých stránkách 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 k nastavení NAVT založené vnořené, přizpůsobitelný, víceúrovňové, SEO přátelská
a prostě a jednoduše pohodě hledá a práce Téma

  1. Přejít na WordPress admin panelu. Plugins-> Přidat nový hledání "navt". Plugin budou zobrazeny. Klepněte na tlačítko [Install], [Nainstalovat], "Aktivovat Plugin".
  2. Nástroje-> NAVT Seznamy, Inside "navigace" Skupina oblasti najít "Název skupiny" a zadejte: "menu1" v poli, stiskněte tlačítko [Vytvořit] tlačítko. "Menu1" obdélník prostor dostal vytvořen.
    Tento "menu1" oblast bude hlavní hřiště pro menu výstavbě. Budete přetažením zde své nabídky prvky.
  3. "Aktiva" v oblasti najít "jiný", listboxu a klikněte na "domácí" výběr. "Domů" thingie objeví uvnitř "nepřiřazené" oblasti. Divně, co? Žádné starosti, tak dlouho, jak to funguje - a bude pro nás.
  4. Přetáhněte tento "domovem" thingie z "Aktiva" v oblasti "menu1" obdélník oblasti. Stane se "domů" položka v menu.
    • Opakujte kroky 3-4 pro některé stránky z "stránky" oblasti, stejně jako pro kategorie "v kategoriích" oblasti. Přetáhněte další položky, které chcete mít na své nabídce zevnitř "menu1" obdélníku. Můžete kliknout na stránky, kategorie uživatelů a některé vlastní prvky, jako je "seznam děliče" a "CODE bloku. Blok kódu je v pohodě způsob, jak přidat vlastní fragmenty uvnitř menu.
    • Můžete přetáhnout položky uvnitř "menu1" oblasti, na uspořádání jejich pořadí.
    • Můžete nastavit hierarchické pozici každou položku s "<" a ">" šipkami.
    • Kliknutím na textu názvu každé položky nabídky - otevře přímo úděsná další úpravy na 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 na bázi volby v menu a přidat kousky kódu HTML do něj. Postupovat opatrně ačkoli.
    • Pro linkless unclikable podnabídkách, které budou sloužit jako "rodiče" pro ostatní "sub-děti" jsem použil, kód bloku "typ. Například při přizpůsobování takový blok kódu položky jsem vstoupil na položku menu alias "=" MemberWing "a" Enter blok kódu: "=" <a href='#'> MemberWing </ a> ". S href = "#" bude to nelze kliknout, ale jako platný "mateřská" volbu nabídky.
  5. Zde je návod, jak mé NAVT To menu1 "Build struktura vypadala téměř dokončena:
    navt_building_icon
  6. Dokončit první budovu a poté klikněte na "rychlost" ikonu si můžete přizpůsobit strukturu menu:
    navt_customize_menu
  7. To se otevře dialogové okno se 4 záložkami: Možnosti displeje, CSS, téma.
    1. Jdi na "Možnosti" kartu a ujistěte se, že vše je zaškrtnuto a "jméno skupiny", říká: "menu1"
    2. Jdi na "Zobrazit" kartu a ujistěte se, že vše, co na "Zobrazit skupině navigace na ..." oblast je kontrolována [x]. Nechte zbytek na výchozí hodnoty.
    3. Jdi na "CSS" kartu a vyberte přepínač (x) "se nevztahují CSS třídy".
    4. Přejděte na záložku "téma" a vyplňte jej, jako že:
      navt_configuration_theme_tab_icon
      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>
    5. Stiskněte tlačítko [uložit / zavřít] Tlačítko
  8. V této budově bodu z nabídky v rámci možností plugin NAVT je kompletní.
    Nyní je čas, abychom se trochu naladit na téma práce, aby si to připraveni. K tomu musíme přidat několik vlastních souborů - CSS a JavaScript, který patří do menu a aktualizační teorií custom_functions.php
  9. Stáhněte si kompletní sadu souborů zde .
  10. Rozbalte archiv. Pokud jste aktualizovali custom_functions.php se svými úprav - je třeba sloučit s mojí věcí. Nechám to na vás.
    Pokud jste se dotkl - klidně ho přepsat s mým. Vezměte prosím na vědomí: Já se raději umístit nabídku v rámci webových stránek záhlaví (výchozí je výše) - takže moje úprava tuto možnost preference také.
  11. Nahrát archiv včetně všech podadresářů a souborů v rámci vašeho Téma disertační práce 'Vlastní' adresáři, jako je toto:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    Jsem se dotkl custom.css - já raději držet menu konkrétní CSS podle svých vlastních míst, aby se zabránilo vytváření nepořádek uvnitř custom.css
  12. Na tomto místě můžete načíst své webové stránky a uvidíte, nový krásný nový víceúrovňový a vnořené, SEO optimalizované menu.
  13. Můžete se vždy vrátit do NAVT nastavení a přizpůsobit svou nabídku s větší výběr nebo přemístění nic. To se projeví na živé webu automaticky.

Cesta vpřed ...

Tento výukový program zahrnoval kreativní příklad jednoho druhu nabídky. Hrál jsem si s jiným - jen abyste viděli, jak tmavé barvy nabídka bude vypadat takto:

Thesis theme - multilevel nested CSS menu - dark palette

Téma disertační práce - víceúrovňové vnořené CSS menu - tmavá Paleta

Myslím, že je docela pěkné. Existuje mnoho dalších navigační vzorky jsou k dispozici na Dynamic Drive - všichni z nich je možné upravit pro práce a dalších tématech s nějakým WordPress úsilí:

Dynamic Drive Horizontal Menus

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 pro práce -, který je uveden čas a touhu, aby se to stalo.

Já jsem mohl dělat tuto práci za vás na základě smluvního vztahu. Stačí si vybrat menu se vám líbí, kontaktujte mě a já budu pracovat na kódu a instrukce pro vaše webové stránky.

20 dolarů

A samozřejmě, pokud jste se na budování výborný SEO optimalizovaný Premium Wordpress členství portálu - nejlepší řešení pro takto:
Téma disertační práce + MemberWing členství plugin + vlastní hostované WordPress samozřejmě.

comments } { 15 komentářů }

Premium Post 3

05.07.2009

Toto je volné místo pro prémiové teaser 3. Tento článek obsahuje kombinaci obsah: První část je viditelná Gold členů, celý článek je viditelný pouze pro členy Platinum. Zkuste se přihlásit jako člen zlatého nejprve (username / password = zlatá / zlatá) - uvidíte více obsahu. ... A pak odhlášení a znovu přihlásit jako platina [...]

Přečtěte si celý článek →

Premium příspěvek 2

05.07.2009

Toto je volné místo pro teaser Premium 2. Zbytek je vidět na zlato a členů. Tip - zlatý člen login / password = zlato / zlato ......

{{{Zlato | platiny}}}
Zbytek tohoto článku je k dispozici pouze členům prémiové.

Přečtěte si celý článek →

Premium příspěvek 1

05.07.2009

To je článek pro MemberWing demo-X. S MemberWing-X Tento článek je určen pro nákup na jednom cenu 2,95 dolarů, nebo se přihlásíte k odběru "Gold Membership" programu. Tak, to je bez teaser na příspěvek prémiové 1. Zbytek tohoto článku je viditelný pouze pro členy, kteří si zakoupili jej 2,95 dolarů, nebo připojila k "Zlaté [...]

Přečtěte si celý článek →

Téma disertační práce a členství stránky MemberWing plugin pro nejlepší členství stránkách SEO

05.07.2009

MemberWing je členství WordPress plugin web navržen speciálně pro portály SEO optimalizovaných členství. Díky, že je to pružné vyměnitelné hádanky, podpora pro Google Nejprve klikněte zdarma standard digitálního obsahu a stahování Ochrana oprávněn s PromoFusion - zaručuje svou členskou stránku rychlé indexování a vyšší žebříčku. Zatímco jiné členství site software ráda úplně zakázat přístup [...]

Přečtěte si celý článek →