Téma disertační práce - víceúrovňový, vnořené, SEO přívětivé menu - výuka

Téma disertační práce Tutoriál - přidáním víceúrovňové a vnořené, SEO přátelský navigační menu na Wordpress

od gesman dne 8. července 2009

Pátrání po dokonalé menu ...

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é struktury menu 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 menu 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 - to, co 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 menu navigace pro Wordpress
(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 menu 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 menu 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ě cool hledají navigační menu pro Wordpress 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ím menu hřiště pro výstavbu. 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ém menu uvnitř "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 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á" menu volby.
  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 tomto bodě menu budovy zevnitř plugin možností NAVT je kompletní.
    Nyní je čas, abychom se trochu naladit na , aby si to připraveni. K tomu musíme přidat několik vlastních souborů - CSS a JavaScript, který patří do menu a update 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 menu pod záhlaví stránky (výchozí je výše) - takže moje úprava tuto možnost preference také.
  11. Upload archiv včetně všech podadresářů a souborů v rámci vašeho '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

- 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émat Wordpress s nějakou snahou:

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í super 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ě.

Přidat komentář

Předchozí příspěvek:

Následující příspěvek: