Darbo tema - daugiapakopė, įdėtos, seo friendly menu - Tutorial

Disertacija tema Tutorial - įtraukti lygių, įdėtos, seo friendly navigaciją meniu WordPress

pagal gesman dėl 8 liepa 2009

Už geriausią meniu Quest ...

Tai yra 1 dalis vadovėlis
pamoka šios dalies 2 ir moko, kaip sukurti vertikaliai meniu + tamsios spalvos paletę horizontalusis

Aš nutarė gauti disertacija tema , nes vienas iš mano klientų informavo mane apie suderinamumo problemas tarp Darbo ir mano WordPress Narystė Svetainės Plugin MemberWing. I fixed it ir tada nusprendė priimti arčiau pažvelgti Darbo ir faktiškai nesiteikė žiūrėti vaizdo įrašus pirmame puslapyje tezės puslapis - Diythemes.com .
Kas nustebino mane labiausiai, nes dėmesį į detales, patogumą naudotis ir svarbiausia - SEO bruožai, taip pat maniau.
MemberWing narystės įskiepiai buvo sukurta iš žemės narystės svetaines, kurios turėtų patraukti tiek SEO sultys, kaip įmanoma. Aš už daug dėmesio daugybė SEO priedus ir Perfections į MemberWing. Daugelis mano klientų klausia apie įvairių temų naudoti ir atsižvelgdamas tema buvo taip pat SEO Optimizuojamas iš giliai viduje būtų puikus tinka narystės portalas verslininkams.

Suderinus SEO įgaliojimai MemberWing su SEO įgaliojimai suteiktų galimybes geriausiai reitingą savo klientams. Ir aš nusipirkau Darbo ir atliko su ja dieną.

Tai puiki tema visais būdais. Navigacijos dalis, nors yra šiek tiek ribota funkcija. Nuo darbas 1.5 + jis yra vienas lygis meniu tik. Mano įprasta noras, kad būtų galima pritaikyti navigaciją kiek reikia. Kai kurie tinklapiai yra tik keletas puslapių, daugelis kitų tonų statinius puslapius + zillions straipsnių / pranešimų + daug kategorijų.
Taigi idealus pasaulyje turinti galimybę sukurti gražų hierarchiškai organizuotas patogi naršymo meniu yra būtina. Darbo Iškart buvo Ieškau navigaciją, bet aš pastebėjau, kad visi Darbo pagrįstų interneto svetainėse ieško kaip dvyniai. Pritaikyti Darbo naršymo meniu nėra labai lengva, todėl daugelis žmonių tiesiog palikite jį kaip. Nėra jokių galimybių keisti tvarką kategorijų meniu ar deda juos į puslapius. Ir dar sugeba sukurti lizdinė meniu struktūrų nėra. Taigi, aš nusprendžiau pamatyti, ką galima padaryti apie tai.
Po bando apie pusę dešimtukas meniu / navigacijos susiję plugins galiu nustatyti savo pasirinkimą WordPress Navigacija Sąrašas Plugin NAVT .
NAVT įjungti iš esmės netvarkingai sąrašą generatorius su super fancy ir šiek tiek sunkiai skaičius Netradicinė admin interface. Kas klaidinančios apie tai, kad ji iš tikrųjų nėra sukurti išgalvotas ieškote meniu savaime. Ji sunkiausia dalis darbo, nors - suteikia jums galimybę vizualiai apjungti ir sukurti netvarkingai sąrašą - skeletas savo meniu-į-bus. Ir jūs galite sukurti daug meniu taip pat. Galite traukti visą WordPress stuff natūra į navigacijos meniu: puslapius, pranešimų, straipsnių, kategorijas, vartotojai, kodo blokus, išorinės nuorodos, dalytuvai, separatorių ir sumaišoma ir suderinti "ir NEST ir pasirūpinti ir juos pritaikyti bet kurioje medį panašią struktūrą jums nori.
NAVT specialiai jums sukėlė HTML netvarkingai sąrašą. Antra grožio NAVT yra tai, kad jis padeda jums įterpti naują meniu Jūsų tema per garsus JQuery remiantis logika, bet be būtinybės keisti bet kuriuo kodu! NAVT galite nurodyti: "Pakeisti šiuo # elementas su mano naujomis NAVT meniu". # Elementas gali būti identifikacinis numeris arba klasė kelią esamų meniu div elemento žyma, kad yra sukurtas jūsų esamos temos. Taigi NAVT tai atlieka už jus pakeisti be verčia jus eiti į temą kodas ir padaryti jį labiau nepatogus nei ji jau yra. Jei visi kaip svaičiojimas garsai - nesijaudinkite - aš padėsime jums žingsnis po žingsnio greičiau. Ginčija dalį NAVT visiems, kad jūs turite sugalvoti faktinis CSS + nuotraukos + JavaScript jūsų meniu sau. Ir tai tik jūsų reikalas išsiaiškinti, kur ir kaip integruoti šiuos failus ir padaryti šią medžiagą tinkamai gauti sujungti.
Pagarbiai, nežinant JQuery + PHP + CSS + turintys tinkamą patirtį su WordPress - tai, ką sunku ištraukti.
Mielai aš žinau, ši medžiaga šiek tiek, aš nusprendžiau, kad BITE kulka ir vadovas žmoniją į laisvę kuriant geriausio navigacijos meniu WordPress geriausia. Aš tiesiog reikia išsiaiškinti šaltinius kai gražų horizontalus CSS meniu. Aš pakėliau Dynamic Drive svetainėje savo geriausius pasirinkimus, demos ir šaltiniai.

Aš skirtą dieną mokytis Darbo ir žaisti su NAVT plugin. Pabaigoje aš išdidžiai Rangovas užsakymą, lankstus, SEO optimizuotas, daugiapakopė, įdėtos Nagivation struktūros mano WordPress + darbas pagrįstas svetainėje.

Sąrašas savybių lygių, įdėtos WordPress navigaciją meniu
(You got to love this stuff):

  • Profesionalus, švarus išvaizdą.
  • Parama visų šiuolaikinių naršyklių, įskaitant MSIE 6,7 "," Opera, Safari, Firefox 3.x, Google Chrome "tiek" JavaScript "ir ne" JavaScript "režimais.
  • Subtilu downgradable ne JavaScript naršyklės. Jūs meniu bus naudingas, panašūs vizualiai ir darbo net funkcija išjungta JavaScript naršyklės (nors tik aukščiausio lygio navigaciją bus matomas ir ne flyouts įvyks žinoma, kiek jie pagaminti, naudojant JavaScript).
  • SEO patogių funkcijų - netvarkingai sąrašas meniu generuojamą kodą į HTML. Google ir kitose paieškos vorai galės indeksuoti jūsų naršymo struktūra ir rasti nuorodas į vidinių puslapių.
  • Parama neribotas lizdus lygiai ir sublevels.
  • Parama bet kokia tvarka arba puslapius, pranešimų (per apibrėžtos vartotojo URI), kategorijas, vartotojai, savo kodą blokų ir išorinių nuorodų per meniu.
  • Pagalba teksto, taip pat vaizdiniai elementai meniu. (Aš dar pabandyti šiuos nors).
  • Meniu struktūra ir turinys yra vizualiai reguliuojamas per NAVT svetainės administratoriui.
  • Kompaktiškas: JQuery pagrįstas flyouts už lizdinė lygiai.
  • Greitas: JQuery dėl meniu įkelti iš "Google" serverius (Norėčiau Darbo pati padaryti tą patį, o ne traukdami jį lokaliai). Tai pagreitins dalykus truputį.
  • Scalability - Šis meniu tipas yra keisti ir konfigūruoti bet per NAVT įjungti parametrus metu be jokios kodavimo kur reikia.

šį puikų meniu iš Dynamic Drive portalo kaip pagrindas. Man teko pritaikyti javascript kodas bitų taip pat apima riekė PHP į custom_functions.php, kad jis darbo su disertacija. Be jau esančių puslapių skaičių, kategorijų ir etatų iš mano svetainės buvo naudojamos surinkti meniu struktūrą. Jūsų svetainė specifiką bus kitoks - bet koncepcijos bus tas pats.
Taigi leiskite pradėti, ar mes?

Žingsnis po žingsnio instrukcijos sukonfigūruoti NAVT pagrindu lizdinė, su pritaikymais, daugiapakopė, seo friendly
ir tiesiog cool ieškote naršymo meniu WordPress ir Darbo tema

  1. Grįžti į WordPress admin panel. Plugins-> Pridėti naują paiešką "navt". Kištukui bus rodomas. Spauskite [Install] [Diegti dabar] "Aktyvuoti įjungti".
  2. Tools-> NAVT sąrašai Inside "navigacijos grupės" plotas rasti "Grupės pavadinimas" ir įveskite: "menu1" srityje, paspauskite [Sukurti] mygtuką. "Menu1" stačiakampio ploto gavo sukurtas.
    Šis "menu1" plotas bus pagrindinis žaidimų meniu statybos. Būsite vilkite čia savo meniu elementus.
  3. Į "turto" srityje rasite "kiti" listbox ir spustelėkite "Pradžia" pasirinkimas. "Namai" thingie pasirodys viduje "nepaskirstytasis" srityje. Weird, eh? Nesijaudinkite, jeigu ji veikia - ir ji mums.
  4. Vilkite "Namai" thingie iš "turtas" zoną "menu1" stačiakampio ploto. Jis taps "Home" elemento meniu.
    • Pakartokite 3-4 kai iš "Puslapiai" srityje, o taip pat kategorijas "kategorijas" zonos šalių. Vilkite visi kiti nori būti ant jūsų meniu viduje "menu1" stačiakampis. Galite spustelėti puslapių, kategorijas, vartotojai ir kai kurių papročių elementų, tokių kaip "sąrašą daliklis" ir "blokas kodo". Kodas blokas yra kietas būdas įtraukti pasirinktinį fragmentus viduje meniu.
    • Galite pratęstos meniu viduje "menu1 plotą pertvarkyti savo užsakymą.
    • Jūs galite reguliuoti hierarchinę padėtį kiekvienoje menių punktą "<" ir ">" strėles.
    • Paspaudę tekstas vardas kiekvieno meniu - atidaro tai neįtikėtinas papildomų tinkinimo dialogo šią prekę nėra. Aš dažniausiai naudojamas pagal nutylėjimą, tačiau techniškai galite išprotėti ir pradėti priėmimo vaizdiniai meniu pasirinkimus ir įdėti gabalėliais HTML kodą į jį. Elgtis atsargiai, nors.
    • Dėl linkless unclikable submeniu, kuri taps "tėvų" kitiems "sub-vaikams" Aš "Kodas bloko" tipo. Pavyzdžiui, kai pritaikyti pvz blokas kodo punktas įstojau į "Meniu punktas alias" = "MemberWing" ir "Įveskite kodą blokas:" = "<a href='#'> MemberWing </ a>". Atsižvelgdama href = "#" taps ne spausti, bet veikia kaip galiojantį "tėvų" meniu pasirinkimas.
  5. Štai kaip mano NAVT "menu1" kurti struktūrą, kaip atrodė beveik baigtas:
    navt_building_icon
  6. Baigti pradinio pastato ir paspauskite mygtuką "įrankių" piktogramą, norėdami pritaikyti savo meniu struktūra:
    navt_customize_menu
  7. Ji atvers dialogo su 4 skirtukais: Funkcijos, Ekranas, CSS, tema.
    1. Eikite į "Options" kortelę ir įsitikinkite, kad viskas yra pažymėtas ir "Grupės pavadinimas" sako: "menu1"
    2. Eikite į "Ekrano" kortelę ir įsitikinkite, kad viskas dėl "Rodyti navigaciją grupė ..." plotas yra tikrinamas [x]. Palikite poilsio defaults.
    3. Eikite į "CSS" skirtuką ir pasirinkite mygtuką (X) "Nenaudoti CSS klases".
    4. Eikite į "tema" kortelę ir ją užpildykite patinka, kad:
      navt_configuration_theme_tab_icon
      Įtraukti į "Įtraukti žymes iki ..." srityje šį kodą:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Įtraukti į "Įtraukti žymes po ..." srityje šį kodą:
      <br style='clear: left' /></div>
    5. Paspauskite [Save / uždaryti] mygtuką
  8. Šiuo metu meniu pastato viduje NAVT įskiepiai duomenys bus baigtas.
    Dabar atėjo laikas padaryti šiek tiek sureguliuoti už ją gauti paruoštas. Norėdami, kad mums reikia pridėti keletą nestandartinių failai - CSS ir JavaScript, kad priklauso meniu ir atnaujinti Darbo "custom_functions.php
  9. Atsisiųsti pilną bylos čia .
  10. Išpakuokite archyvas. Jei turite atnaujinti savo custom_functions.php su jūsų nustatymų - reikia jas sujungti su mano stuff. I'll palikti ją sau.
    Jei neturite nelieskite jo, - nedvejodami jį perrašyti su mano. Prašome atkreipti dėmesį: aš linkusi pozicija meniu pagal svetainės antraštę (pagal nutylėjimą yra pirmiau) - taip mano koregavimas įtrauktas kaip gerai pageidavimus.
  11. Įkelti archyvas, įskaitant visus jo pakatalogius ir failus pagal savo "pagal užsakymą" katalogą, pavyzdžiui:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...

    Aš ne liesti custom.css - aš norėčiau turėti meniu konkrečių CSS pagal savo vietų, kad būtų išvengta netvarkos viduje custom.css
  12. Tuo metu jūs galite perkrauti savo svetainę ir pamatyti naujas gražus naujų lygių, įdėtos, SEO optimizuotas meniu.
  13. Visada galite grįžti į NAVT parametrus ir nustatyti savo meniu su daugiau galimybių rinktis arba iš naujo viską. Tai turėtų atsispindėti gyventi svetainę automatiškai.

Kelias į priekį ...

Šiuo samouczku įtraukti kūrybinių pavyzdys vienos rūšies meniu. Grojau su kitu - tik pamatyti, kaip tamsios spalvos meniu atrodys:

Thesis theme - multilevel nested CSS menu - dark palette

- daugiapakopė lizdinė CSS meniu - tamsiai paletė

Manau, kad tai yra gana malonus. Yra daug navigacijos pavyzdžių galima rasti Dynamic Drive - visi jie gali būti pritaikyti individualiems už Darbo ir kitos WordPress temos su šiek tiek pastangų:

Dynamic Drive Horizontal Menus

Dynamic Drive Horizontalus meniu

Tikiuosi, rasite šio vadovo naudinga ir naudinga. Kaip sakiau, galima pritaikyti bet šių Darbo meniu - tai konkrečiu laiku ir noras padaryti tai atsitiko.

Aš galėtų padaryti šį darbą už jus pagal sutartį. Tiesiog pasirinkite meniu norite, parašykite man ir aš jums dirbti su kodu ir instrukcijas savo interneto svetainėje.

20 $

Ir, žinoma, jei jūs iki pastato super SEO optimizuotas priemoka Wordpress narystės portale - geriausi šios problemos sprendimo būdų:
Disertacija tema + MemberWing narystės plugin + savarankiškai hosted WordPress žinoma.

Palik komentarą

Ankstesnė žinutė:

Kitas pranešimas: