Theme teza - shumëplanësh, mbivendosur, menu SEO miqësore - Tutorial

Teza Tutorial Theme - duke shtuar shumë nivele, të mbivendosur, SEO miqësore menu e lundrimit për Wordpress

nga gesman8 korrik, 2009

Quest për menynë e përsosur ...

Kjo është Pjesa 1 e tutorial
Pjesa 2 e këtij tutorial mëson se si të ndërtojnë menunë vertikale + E paleta ngjyra e errët për atë horizontal

I vendosur për të marrë temë teza , sepse një nga klientët e mi më informoi rreth çështjeve të përputhshmërisë midis tezës sime dhe të vend wordpress plugin anëtarësimit MemberWing. I fiksuar atë dhe pastaj vendosi të marrë një vështrim nga afër tezës dhe të vërtetë të shqetësuar për të parë video në faqen e parë të faqes Thesis kryesore - Diythemes.com .
Çfarë përshtypje mua më është vëmendja për të, detaje mirëdashësi përdoruesit dhe mbi të gjitha - SEO karakteristika që janë aq të mirë menduar.
Anëtarësimi MemberWing plugin është projektuar nga toka për faqet e anëtarësimit që do të ketë nevojë për të tërhequr sa më shumë lëng SEO jetë e mundur. Pra kam paguar shumë vëmendje për morinë e SEO përmirësimeve dhe përsosuri në MemberWing. Shumë nga klientët e mi janë pyetur për tema të ndryshme për të përdorur dhe të kesh temë që ishte aq mirë SEO optimizuar nga brenda thellë do të jetë një përshtatje të shkëlqyer për sipërmarrësit portali anëtarësimit.

Kombinuar pushtetin SEO e MemberWing me fuqitë e SEO do të japë më të mirë të mundësive të rangut të lartë për klientët e mi. Kështu që unë kam teza dhe ka luajtur me të për një ditë.

Kjo është një temë e shkëlqyer në të gjitha mënyrat. Pjesa navigacion e saj edhe pse është pak e kufizuar në funksion. Duke filluar nga tezës 1.5 + kjo është një menu nivel të vetëm. Dëshira ime e zakonshme është që të jetë në gjendje të rregulloje navigacion sa duhet. Disa vende kanë faqet vetëm pak, shumë të tjerë kanë ton të faqeve statike + e zillions e artikujve Postime + E shumë e kategorive.
Pra, në botën ideale të paturit e një shans për të krijuar nice looking organizuar hierarkike miqësore përdorues menu navigacion, është një domosdoshmëri. Teza e drejtë off the bat ka navigacion mirë në kërkim, por kam vënë re se të gjitha faqet e internetit Thesis-bazë janë në kërkim si binjakë. Përshtati Thesis menu navigacion, nuk është me të vërtetë e lehtë kështu që shumica e njerëzve largohen vetëm atë si është. Nuk ka asnjë mënyrë për të ndryshuar rendin e kategorive në menynë ose pozicionimin e tyre në mes të faqeve. Dhe përsëri, aftësia për të krijuar struktura të mbivendosur menu mungon. Kështu që unë vendosur për të parë se çfarë mund të bëhet në lidhje me të.
Pas duke u përpjekur për gjysmë duzinë menu / plugins navigacion lidhura kam vendosur zgjedhjen time mbi Wordpress Plugin NAVT List Navigation .
Plugin NAVT është në thelb renditura gjenerator listë me zbukuruar super dhe pak e vështirë për ta kuptoj untraditional interfejsin e admin. Çfarë çorientuese për këtë është se ajo nuk në fakt krijojnë menutë dashuroj kërkim në vetvete. Ai e bën pjesa më e vështirë puna pse - ju jep një aftësi për të visually tërhequr së bashku, dhe të gjenerojë Listë e paorganizuar - Skeleti i juaj menu-të-të. Dhe ju mund të krijojë menutë shumë shumë. Ju mund të tërheqë të gjitha llojet e stuff Wordpress në menynë e navigimit: faqet, postimet, artikuj, kategori, përdoruesit, blloqe kodi, lidhjet e jashtme, kompas, ndarësit dhe kombinojnë dhe përshtasin dhe fole dhe organizojmë dhe të rregulloje ato në çdo strukturë pemë-si ju doni.
NAVT gjeneron për ju rezultuar HTML parenditur lista. Bukuri e dytë e NAVT është se kjo ju ndihmon për të futur menu tuaj të re në temën tuaj nëpërmjet logjikës jQuery famshëm bazuar por pa nevojën për të ndryshuar ndonjë kod! NAVT ju lejon te specifikoni: "zëvendësojë këtë element # me menu tim të ri NAVT". # Element mund të jetë një id ose klasë të rrugës së menysë ekzistuese apo element div tag që është duke u prodhuar nga tema tuaj të tanishme. Pra NAVT bën këtë zëvendësim për ju pa ju detyruar të shkoni në kodin temë dhe të bëjë atë më të çrregullt se ajo tashmë është. Në qoftë se të gjitha tingëllon si dërdëllisje - mos u bëni merak - Unë do të ju udhëzojë hap pas hapi shpejti. Pjesën më të vështirë e NAVT për të gjithë është se ju do të keni për të dalë me të vërtetë CSS + E + E images kodit javascript per menune tuaj vetë. Dhe është deri në ju të kuptoj se ku dhe si të integrohen këto fotografi dhe e bëjnë këtë stuff duhet të merrni të lidhur së bashku.
Sinqerisht pa e ditur jQuery + disa + PHP + CSS që ka përvojë të mirë me Wordpress - kjo gjë është e vështirë për të tërhequr.
Kënaqësi Unë e di këtë stuff pak kështu që vendosa të kafshimit plumb dhe njerëzimin udhëzues e lirisë në ndërtimin e mirë të navigacion menutë të mira për Wordpress. Unë vetëm e nevojshme për të gjetur burime për disa nice looking menu horizontale CSS. I zgjedhur website dinamike drive për të mira e tyre zgjedhje, popull dhe burimeve.

I përkushtuar një ditë për të studiuar tezën dhe të luajë me plugin NAVT. Në fund unë krenari krijuar me porosi, fleksibël, SEO optimizuar, nivele strukturën, rrjetore nagivation për faqen Wordpress time + E Thesis bazuar.

Lista e tiparet e multilevel, menu mbivendosur Wordpress navigacion për
(Ju mori për të love this stuff):

  • Profesionale, look të pastër dhe të ndjehen.
  • Mbështetje për të gjithë shfletuesit modern, duke përfshirë MSIE 6.7, Opera, Safari, Firefox 3.x, Google Chrome në të dy javascript dhe jo-javascript modes.
  • Gracefully downgradable për jo-javascript shfletues. Ju menu do të jetë i përdorshëm, me sy të ngjashme dhe duke punuar edhe për shfletuesit javascript me aftësi të kufizuar (megjithëse kërkimi vetëm të nivelit të lartë do të jetë i dukshëm dhe nuk ka flyouts do të ndodhë natyrisht pasi ato janë bërë nga javascript).
  • Karakteristika SEO miqësore - parenditur lista e menu Kodi HTML është gjeneruar brenda. Google dhe merimangat e tjera motor kërkimi do të jetë në gjendje për index strukturën tuaj navigacion dhe gjeni lidhje me faqet e brendshme.
  • Mbështetje për nivele të pakufizuar fole dhe sublevels.
  • Mbështetje për ndonjë qëllim apo faqet, postimet (via përdorues përcaktuar URI-ve), e kategori, përdoruesit, blloqe me porosi të kodit dhe lidhjeve të jashtme brenda menu.
  • Mbështetja e tekstit, si dhe imazhi i bazuar në elemente menu. (Unë kam ende për të provoni këto pse).
  • Struktura dhe përmbajtja e menu është vizualisht i rregullueshëm nëpërmjet zonës NAVT admin.
  • Compact: flyouts jQuery bazë për nivele të mbivendosur.
  • Fast: jQuery për menynë është i ngarkuar nga serverat e Google Unë do të dua tezën e vetë për të bërë të njëjtën gjë në vend të tërhequr atë në nivel lokal). Kjo do të përshpejtojë gjërat pak.
  • Scalability - Ky lloj i menysë është editable dhe Configurable në çdo kohë nëpërmjet plugin settings NAVT pa ndonjë nevojë për kodim kudo.

I përdorur këtë meny të shkëlqyer nga hard dinamik portal si një bazë. Unë kisha për të rregulloje kodin javascript një grimë, si dhe të përfshijë copë e PHP në custom_functions.php ta bërë atë punë me tezë. Gjithashtu numri i para-ekzistuese faqe, kategori dhe poste nga web faqen time u përdorën për të mbledhur strukturë menu. Specifikat faqen tuaj do të jenë të ndryshme - por konceptet do të jetë e njëjtë.
Pra, le të vazhdojë, do të kemi?

Hap pas hapi instruksionet për të setup NAVT bazuar mbivendosur, i përshtatshëm, shumëplanësh, SEO miqësore
dhe thjesht ftohtë menu navigacion kërkoni për Wordpress dhe Thesis Theme

  1. Shko tek Wordpress admin panel. Shtojca-> Add re, kërko për "NAVT". Plugin do të tregohet. Kliko [Install], [Install tani], "Aktivizo Plugin".
  2. Tools-> Listat NAVT, brenda zonës "Navigation Group" gjeni "emrin e grupit" dhe shkruani: "menu1" në fushë, shtypni [Krijo] button. "Menu1" Zonë drejtkëndësh u krijuar.
    Kjo "menu1" zonë do të jetë shesh kryesor për ndërtimin menu. Ju do të zvarritur dhe duke rënë këtu elementet tuaj menu.
  3. Në "asete" zonë të gjetur "tjetrin" ListBox dhe kliko në zgjedhje "në shtëpi". "Home" thingie do të shfaqet në brendësi të "unassigned" zonë. Pazakontë, eh? Nuk shqetësohet, sa kohë që ajo punon - dhe kjo do të për ne.
  4. Drag këtë thingie "Home" nga "asete" zonë në "menu1" zonë drejtkëndësh. Ajo do të bëhet "Home" artikull në meny.
    • Përsërit hapat 3-4 për disa faqe nga "Pages" fushë, si dhe për kategoritë në "kategori" zonë. Drag ndonjë sende të tjera që ju doni të jetë në menynë tuaj brenda "menu1" drejtkëndësh. Ju mund të klikoni mbi faqe, kategori, përdoruesve dhe disa elemente me porosi të tilla si "përçarjes lista" dhe "bllokojnë kod". Bllok Kodi është mënyra më e ftohtë për të shtuar copra porosi brenda menu.
    • Ju mund drag menu items brenda "menu1" zonë për të korrigjoj rendin e tyre.
    • Ju mund të rregullojë pozitën hierarkike të çdo send menu me "<" ">" dhe shigjeta.
    • Duke klikuar mbi emrin e tekstit të çdo elementi i menusë - hap boggling mendjen ekstra customization dialogun për këtë artikull. Unë më së shumti përdoren standarte por teknikisht ju mund të shkoni çmendur dhe të fillojnë duke e bërë image-bazuar zgjedhje menu dhe shtoni chunks e kodit HTML në të. Vazhdojë me kujdes pse.
    • Për Submenus linkless unclikable që do të shërbejnë si "prindër" të tjera për "sub-fëmijë" Unë "bllokojnë" Kodi lloji. Për shembull, kur customizing tillë bllok pika kodit kam hyrë për "alias elementi i menusë" = "MemberWing" dhe për "Fut kodin bllok:" = "href='#'> <a MemberWing </ a>". Duke href = "#" do ta bëjë atë nuk klikueshme, por duke vepruar si një zgjedhje e vlefshme "Prind" menu.
  5. Ja se si struktura s Gallery menu1 s Gallery NAVT tim ndërtuar dukej si përfunduar pothuajse:
    navt_building_icon
  6. Përfundojë ndërtimin fillestar dhe pastaj klikoni në ikonën "veshje" të rregulloje strukturën tuaj menu:
    navt_customize_menu
  7. Kjo do të hapë dialogun me 4 tabs: Options, Ekrani, CSS, Theme.
    1. Shko tek "Options" tab dhe sigurohuni që çdo gjë është e pakontrolluar dhe "emri i grupit" thotë: "menu1"
    2. Shko tek msgstr "Shfaq" tab dhe të bëjë çdo gjë të sigurt në "grup Show navigacion mbi ..." Zona është e kontrolluar [x]. Lënë pjesën tjetër në standarte.
    3. Shko tek "CSS" tab dhe zgjidhni butonin e radios (x) "Mos aplikoni klasa CSS".
    4. Shko tek tab "Theme" dhe plotëso atë si kjo:
      navt_configuration_theme_tab_icon
      Fut në "Shto tags para ..." zonë këtë kod:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Fut në "Shto tags pas ..." zonë këtë kod:
      <br style='clear: left' /></div>
    5. Press [shpëtojë / mbyll] button
  8. Në këtë ndërtesë menu pikë nga brenda plugin opsione NAVT është e plotë.
    Tani është koha për të bërë një mendje pak për për të marrë atë gati. Për këtë ne kemi nevojë të shtoni një fotografi pak me porosi - CSS dhe javascript që i takon në menynë dhe custom_functions.php Thesis freskimi '
  9. Shkarko komplet e dosjeve këtu .
  10. Unzip arkivin. Nëse keni përditësuar custom_functions.php tuaj me customizations tuaj - ju duhet të bashkojë ata me stuff tim. Unë do të lënë atë deri te ju.
    Nëse ju nuk e kanë prekur atë - të ndjehen të lirë për të prishësh atë me timen. Ju lutemi vini re: I preferuar për pozicionin menu nën header internetit (default është më lart) - kështu që Rregullimi im përfshihet këtë preferencë si.
  11. Upload arkivin përfshirë të gjithë nën dhe dosjet sipas tuaj directory 'Permbajtja së, si kjo:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    Unë nuk kam prekur custom.css - Unë preferoj për të mbajtur menu-specifik CSS nën lokacionet e tyre për të shmangur krijimin e rrëmujë brenda custom.css
  12. Në këtë pikë ju mund të rifreskoni faqen tuaj dhe shikoni të re të bukur të re nivele, të mbivendosur, menu SEO optimizuar.
  13. Ju mund gjithmonë të kthehemi në NAVT parametrat dhe rregulloje menu tuaj me zgjedhjen e më shumë ose reposition asgjë. Ajo do të pasqyrohen në faqen live automatikisht.

Rruga përpara ...

Ky tutorial përfshirë shembullin krijuese e një lloji të menusë. Kam luajtur me një tjetër - vetëm për të parë se si menu me ngjyrë të errët do të duken si:

Thesis theme - multilevel nested CSS menu - dark palette

- shumëplanësh mbivendosur menu CSS - paleta errët

Unë mendoj se është shumë e bukur. Ka shumë mostra më të lundrimit në dispozicion në Drive Dinamik - të gjitha prej tyre janë të mundshme për të rregulloje për tezën dhe tema të tjera WordPress me disa përpjekje:

Dynamic Drive Horizontal Menus

Menus Dinamik Drive horizontale

Unë shpresoj që ju do të gjeni këtë tutorial të dobishme dhe të dobishme. Siç thashë, është e mundur që të rregulloje ndonjë prej këtyre menutë për tezën - që është dhënë kohë dhe dëshirë për ta bërë atë të ndodhë.

Unë mund të bëjë këtë punë për ju në një bazë të kontratës. Vetëm marr menu ju pëlqen, kontaktoni me mua dhe unë do të punojnë në kodin dhe udhëzimet për faqen tuaj te internetit.

20 $

Dhe sigurisht, nëse ju jeni deri në ndërtimin e super SEO optimizuar për anëtarësim premium wordpress Portal - zgjidhja më e mirë për këtë:
Theme teza + anëtarësimi MemberWing plugin + vetë priti Wordpress natyrisht.

Lini një koment

Postimi i fundit:

Next post: