Mitmetasandiline vertikaalne hierarhiline nested menüü Wordpress

Lisades mitmetasandiline, nested, SEO sõbralik navigatsioonimenüü WordPress - 2. osa

poolt gesman kohta 10. juuli 2009

Püüdlustes täiuslik vertikaalne menüü ...

1. osa see Juhendaja kirjeldatakse samm-sammult protsessi hoone horisontaalne mitmetasandilise Pesastatud menüü WordPress doktoritöö teema . 2. osa jätkab suurendada selle funktsionaalsust. Siin lisame "tume" versiooni horisontaalne navigatsioonimenüü ja ma õpetan teile, kuidas lülituda "helge" ja "tume" versioon. 2. osa on superset 1. osa. See sisaldab kõiki alates 1. osa + lisab veel lahedaid asju.

Peamine idee, mida tahtsin esitada lisab vertikaalne menüü (ja WordPress üldiselt). Ma otsisin tõesti paindlik, SEO sõbralik ja multi-brauser ühilduv vertikaalne menüü, mis võimaldab luua piiramatu pesitsevate tasanditel.

WEB on tonni lehti sellel teemal, kuid kui hakkasin proovima kõik need proovid - need on kas katki, lagunenud, toetatakse ainult piiratud hulk tasemel või halvasti ülal Gates + Ballmer junksplorer 6. Lõpuks ma sain tagasi läbiproovitud Dynamic Drive menüüd nende vertikaalne proovid osutusid kena puhul, mis sobib minu rangetele nõuetele. Pidin oluliselt muuta neid küll veendumaks, et see sobib doktoritöö mudel.
Täiuslikkusetaotlusest jätkub ...

Veetsin umbes 16 tundi otsimine, koostamine, testimine, millega, poleerimine ja tuuning vertikaalne menüü CSS ja. Js kood ja 3/4 ajast kulus tehes töötada MSIE 6.
Niikuinii, ma olin rahul lõpptulemuseks. Tulemuseks vertikaalne navigatsiooni menüü on kõik samad soodustused , mis horisontaalne menüü on.

Võttes võime lisada vertikaalne menüü on väga oluline, et umbes 70-80% portaale netis. Horisontaalsed menüüd on piiratud "ruumi", et mahutada palju menüü valikuid, kuid vertikaalne menüü ei ole see piirang ning aitaks tohutult. Nii et siin me läheme.

Palju samme, et see juhtub juba kirjeldatud 1. osa tutorial nii see teeb seda veidi lühem, kuid palju rohkem funktsioon rikas tulemusi.

Nii et siin see läheb:

Ehitus SEO sõbralikud, vertikaalne, mitmetasandiline, hierarhiliselt sisestatud menüü WordPress ja doktoritöö teema. Järk-järgult
(... Mida sa kunagi mõelnud võimalik ...)

  1. Installi exec php plugin ja aktiveerida. Me vajame seda, sest ma kasutan PHP sees teksti vidina paisata vertikaalne menüü 'HTML koodi.
  2. Kas samme 1-6 alates 1. osa õpetamisel . Põhimõtteliselt tuleb installida ja aktiveerida kasutada NAVT plugin + visuaalselt ehitada oma menüü. Veenduge, et teie menüü rühma nimi on "menu1". See nimi on kõva kodeeritud in custom_functions.php
  3. Kliki "käik" ikoonil "menu1 rühma muuta omaduste:
    navt_customize_menu
  4. Järgneb Steps 7,1 -7,3 1. osa juhendaja seada "Options", "Display" ja "CSS" sakke seaded.
  5. Nüüd vajuta "Theme" tab selle dialoogi. Me kirjutada mitmeid seadeid seal (kui teil on pärast 1. etapp). See on ok - sa ei kaota midagi - kuid need on vaja muuta, sest ma olen muutunud natuke koodi sammu 1.
    Siin on, kuidas see dialoog peab olema täidetud:
    1. Toas "Theme XPath:" ala sisestada see kood (see käsib vahetada silt nende klasside):
      .jquerycssmenu, .jqueryslidemenu
    2. Määra "Action", et "Asenda"
    3. Toas "Lisa sildid enne navigatsiooni grupp" ala sisestada see kood:
      <div class='jquerycssmenu' style='margin-top:5px;'>
    4. Toas "Lisa sildid pärast navigation grupp" ala sisestada see kood:
      <br style='clear: left' /></div>
    5. Vajuta [salvestada / sulgeda] nuppu.
  6. Nüüd mine WordPress admin panel -> Välimus -> Vidinad.
  7. Lohista "Tekst" vidina (alates suur "Saadaval vidinad" ala) sisse "Sidebar 1" ala paremal. Meil on plaanis lisada koodi tekst vidina, mis aitab meil realiseerida vertikaalne menüü.
    NOTE: Ma eeldan, teil on "Sidebar 1" olemasolu. Doktoritöö võimalusi saate selle välja lülitada - kuid pärast selle juhendaja lase teha seda olema.
  8. Kui teil lohistada see vidin - see avaneb nagu lill (ma olen vist romantik nüüd et MSIE võitlus on üle).
  9. In "Nimetus" ala sisestada "maailma parim vertikaalne menüü" ... Noh, võid vabalt kasutada oma loovust - et tekst läheb üle oma äsja sündinud vertikaalne menüü.
  10. Suurtes ala tekst - sisestage see PHP kood:
    <?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. Vajuta [OK] nuppu, kliki "Close" link.
  12. Lae uuendatud kogum faile siia .
    See arhiiv sisaldab:


    • Uuendatud versioon "helge" horisontaalne menüü kood
    • "Dark" versiooni horisontaalne menüü
    • Vertikaalne menüü koodid
    • Uuendatud versioon custom_functions.php
  13. Nüüd sa pead unzip arhiiv ja laadige see "custom" kataloogi oma doktoritöö teema.
    Märkus: kui te olete teinud kõik kohandused sees custom_functions.php - sa pead need ühendada. Kui ei - julgelt kirjutada see minu versioon.
  14. Voila! Nüüd võite laadida oma kodulehel ja vaadake sama "helge" horisontaalne menüü + neato vertikaalne menüü vasakul külgriba.
  15. BONUS ülesanne: Let muuta "helge" horisontaalne menüü peale "tume" värvilahendused.
    1. Toas custom_functions.php faili:
      asendada see kood:
      echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      //echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      Selle koodi:
      //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
      echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
      Põhimõtteliselt oleme kommenteerides välja üks joon ja või eemaldada teine.
    2. Nüüd mine WordPress admin-> Tööriistad-> NAVT nimekirjad ja kliki eespool nimetatud "käik" ikoon, et muuta omadusi oma "menu1 rühma.
    3. Vajuta "Theme" tab.
    4. Toas "Lisa sildid enne navigatsiooni grupp" ala sisestada see kood:
      <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Nüüd - Asendusostu lehe - ja teie peamine horisontaalne navigatsioonimenüü "võluväel" sai tume, midagi sellist:
      Thesis theme - multilevel nested CSS menu - dark palette

      Lõputöö teema - mitmetasandiline nested CSS menüü - pimedas palett

      Dark värvipalett võib olla sobivam teatud alade kui heledad üks. Nüüd olete valikuvabadust oma elu!

    6. Et saada tagasi "helge" värvilahendused - lihtsalt olematuks üle "boonus" samme.
  16. Järeldus:
    Ma armastan doktoritöö teema, ma armastan WordPress ja ma armastan seda, et meil on võimalusi lisada korralik navigation menüüd meie portaali.

$ 20


Enjoy!

Gleb esman

{Kommentaarid selle kirje on suletud}

Doktoritöö teema - mitmetasandiline, nested, SEO sõbralik menüü - juhendaja

Doktoritöö teema Juhendaja - lisades mitmetasandiline, nested, SEO sõbralik navigatsioonimenüü WordPress

poolt gesman kohta 8. juuli 2009

Otsingul täiuslik menüü ...

See on 1. osa tutorial
2. osa see Juhendaja õpetab, kuidas ehitada vertikaalne menüü + tumedat värvi palett horisontaalne

Ma otsustasin, et saada doktoritöö teema , sest üks minu kliendid teavitas mind ühilduvuse probleeme vahel doktoritöö ja minu WordPress liikmeks kohas plugin MemberWing. Ma tegin seda ja siis otsustas võtta lähemalt doktoritöö ja tegelikult viitsi vaadata videoid esilehel põhitees site - Diythemes.com .
Mis muljet mulle kõige rohkem see, tähelepanu detailidele, kasutajasõbralikkuse ja mis kõige tähtsam - SEO funktsioone, mis on nii hästi mõelnud.
MemberWing liikmeks plugin oli projekteeritud maapinnast kuni liikmeks saite, mis oleks vaja tõmmata nii palju SEO mahla kui võimalik. Nii et ma makstud palju tähelepanu paljude SEO lisaseadmete ja täiuslikkuse in MemberWing. Paljud minu kliendid küsivad umbes erinevaid teemasid kasutada ja millel on teema, mis oli nii hästi SEO optimeeritud sügavale oleks suurepärane sobivus liikmeks portaal ettevõtjatele.

Ühendades SEO volitused MemberWing SEO volitused annaks parima reitingu võimalusi oma klientidele. Nii et ma sain doktoritöö ja mängitakse seda päeva.

See on suurepärane teema igal viisil. Navigatsiooni osa, kuigi on natuke piiratud funktsioon. Alates Thesis 1,5 + see on ühe taseme menüüs ainult. Minu tavaline soov on, et oleks võimalik kohandada navigation nii palju kui vaja. Mõned saidid on vaid paar lehekülge, paljud teised on tonni staatilisi lehekülgi + zillions artikleid / postitusi + palju kategooriaid.
Nii ideaalne maailm, millel on võimalus luua kena välimusega hierarhiliselt korraldatud kasutajasõbralik navigatsioonimenüü on must. Thesis õigus ära nahkhiir on stiilne navigation kuid ma märkasin, et kõik Lõputöö põhinevad veebilehed otsivad nagu kaksikud. Kohandamine doktoritöö navigatsioonimenüü ei ole tõesti lihtne nii enamik inimesi lihtsalt jätke see nagu on. Ei ole nii, et muuta järjekorras kategooria menüüst või paigutada neid lehekülgede vahel. Ja jälle on võime luua nested menüü struktuurid on puudu. Nii et ma otsustasin vaadata, mida saab teha midagi.
Pärast üritavad umbes pool tosinat menüü / navigeerimise seotud pluginad seadsin minu valik WordPress Navigation Nimekiri Plugin NAVT .
NAVT plugin sisuliselt Tavalise nimekirja generaator super fancy ja veidi raskesti aru ebatraditsiooniline admin liides. Mida eksitav on see, et see ei ole tegelikult luua väljamõeldud otsin menüüd ise. See kõige raskem osa töö küll - annab teile võime visuaalselt koondada ja tekitada Tavalise nimekirja - skelett oma menüü-to-be. Ja võite luua mitu menüüd liiga. Võite tõmmake igasugu WordPress kraami navigatsioonitee: lehti postitusi, artiklid, kategooriad, kasutajate, kood plokid, väliseid linke, sirkel, separaatorid ja segada ja sobitada ja pesa ja korraldada ja kohandada neid iga puu-like struktuur teil tahad.
NAVT genereerib teile tulemuseks HTML Tavalise nimekirja. Teiseks ilu NAVT on, et see aitab teil lisada oma uus menüü oma teema kaudu tuntud jQuery loogika, kuid ei ole vaja muuta ühtegi koodi! NAVT võimaldab määrata: "asendada see # element minu uus NAVT menu". # Element võiks olla id või klassi tee olemasoleva menüü või div element tag mis on loodud oma praeguse teema. Nii NAVT teeb seda sulle vahetust ilma sunnib teid minna teema kood ja teha see räpane kui ta juba on. Kui see kõik kõlab nagu plära - ärge muretsege - ma juhendab teid samm-sammult varsti. Raske osa NAVT kõigile on see, et sa pead tulla tegelike CSS + pildid + javascript kood oma menüü ise. Ja see on sinust aru saada, kus ja kuidas integreerida neid faile ja teha seda kraami korralikult saada ühendatud.
Lugupidamisega tundmata jQuery + mõned PHP + CSS + võttes korralik kogemus WordPress - see asi on raske tõmmata.
Rõõmuga ma tean seda kraami natuke nii et ma otsustasin hammustavad kuuli ja juhend inimkonna vabaduse hoone parimatest parimad navigation menüüd WordPress. Ma lihtsalt vaja teada, allikad mõned kena välimusega horisontaalne CSS menüüsid. Ma valisin dünaamiline sõita veebilehel oma parimad valikud, demod ja allikatest.

Ma pühendatud päev õppida Thesis ja mängida NAVT plugin. Lõpus ma uhkelt loodud kohandatud, paindlik, SEO optimeeritud, mitmetasandiline, nested nagivation struktuur minu WordPress + doktoritöö põhineb sait.

Nimekiri funktsioone mitmetasandilise, nested menüü doktoritöö teema
(Sa pead armastama seda kraami):

  • Professional, puhas välimus ja meeleolu.
  • Toetus kõik kaasaegsed brauserid, sealhulgas MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome nii javascript ja mitte-javascript režiimides.
  • Nõtkelt downgradable mitte-javascript brauseritega. Sa menüü on kasutatav, visuaalselt sarnased ja töötab isegi JavaScript keelatud brauseritega (kuigi ainult tipptasemel navigatsioon on nähtav ja ei flyouts juhtub muidugi, kui need on tehtud javascript).
  • SEO friendly funktsioonid - Tavalise nimekirja menüü kood genereeritakse jooksul HTML. Google'i ja teiste otsingumootori Spiders suudab indeks navigation struktuuri ja leida linke sisemine lehekülgedel.
  • Toetus piiramatu pesitsevate tase ja alatasemed.
  • Toetus suvalises järjekorras või lehti postitust (via kasutaja määratletud URI), kategooriad, kasutajate, kohandatud koodi plokid ja väliseid linke jooksul menüü.
  • Toetus teksti-kui ka pildi-põhine menüü elemente. (Ma ei ole veel proovida neid küll).
  • Menüü struktuur ja sisu on visuaalselt akende kaudu NAVT admin piirkonnas.
  • Kompaktne: jQuery põhinevate flyouts Pesastatud tasanditel.
  • Fast: jQuery menüü laaditud Google serverid (ma armastan Lõputöö ise sama teha asemel tõmmates seda kohapeal). See kiirendab asju natuke.
  • Mastaapsuse - Seda tüüpi menüü on muudetav ja kohandatav igal ajal läbi NAVT plugin seadeid ilma vajaduseta kodeerimist kuhugi.

Ma kasutasin seda suurepärast menüü dünaamiline sõita portaal baasina. Pidin kohandada javascript koodi natuke samuti sisaldama patakas PHP arvesse custom_functions.php teha seda tööd koos väitekirja. Ka mitmeid olemasolevaid lehti, kategooriad ja postitusi sivustoni kasutati kokku menüü struktuuri. Saidi eripära on erinevad - kuid mõisted on sama.
Nii et edasi, eks?

Samm-sammult juhiseid, et setup NAVT põhinev nested, kohandatav, mitmetasandiline, SEO friendly
ja lihtsalt lahe vaadata ja doktoritöö teema

  1. Mine WordPress admin panel. Plugins-> Lisa uus otsing "navt". Plugin näidatakse. Klõpsake [Install] [Install now] "Aktiveeri plugin".
  2. Tööriistad-> NAVT loendid Inside "Navigation Group" ala leida "grupi nimi" ja sisesta "menu1" valdkonnas, press [Loo] nuppu. "Menu1" ristküliku pindala sai loodud.
    See "menu1" ala on peamine mänguväljak menüü ehitus. Sul pukseerige siin teie menüü elemente.
  3. In "vara" ala leida "muu" nimekirjakast ja vajuta "Home" valik. "Home" thingie ilmub sees "määramata" piirkonnas. Weird, eh? Ära muretse, kui see toimib - ja see tahe meie jaoks.
  4. Lohista see "Home" thingie alates "vara" piirkond, "menu1" ristküliku pindala. Sellest saab "Home" menüüst elemendi.
    • Korrake samme 3-4 mõned lehed "Pages" piirkonnas, samuti kategooriasse "kategooriatesse" piirkonnas. Lohista muid objekte, et sa tahad olla oma menüü sees "menu1" ristkülik. Te võite klõpsata lehekülgedel, kategooriad, kasutajate ja mõned kohandatud elemendid, nagu "nimekirja jagaja" ja "koodiestossa". Kood plokk on lahe võimalus lisada custom klippe sees menüüs.
    • Sa võid lohistada menüü sees "menu1" ala ümber nende järjekord.
    • Te võite kohandada hierarhiline positsioon iga menüü koos "<" ja ">" nooli.
    • Klõpsates tekst nimi iga menüü - avab meeles Arusaamatu pildi kohandamine dialoog selle objekt. Ma enamasti kasutada vaikimisi, kuid tehniliselt saab hulluks minna ja hakata pilt põhinev menüü valikuid ja lisada tükkideks HTML kood ta. Sõita ettevaatlikult küll.
    • Sest linkless unclikable alammenüüd, mis toimib "vanemad" teiste "all-lapsed" Ma "Code block"-tüüpi. Näiteks kui customizing selline koodiestossa kirje astusin jaoks "menüü alias" = "MemberWing" ja "Enter koodiestossa:" = "<a href='#'> MemberWing </ a>." Võttes href = "#" teeb mitte klikitav kuid keda kehtiv "vanem" menüü valik.
  5. Siin on, kuidas mu NAVT "menu1" build struktuur tundus peaaegu valmis:
    navt_building_icon
  6. Valmis esialgne hoone ja seejärel nupul "käik" ikoon, et kohandada oma menüü ülesehitus:
    navt_customize_menu
  7. See avab dialoogi, kus 4 kaarti: Valikud, Display, CSS teema.
    1. Vajuta "Options" sakk ja veenduge, et kõik on märkimata ja "grupi nimi" ütleb: "menu1"
    2. Mine "Ekraan" tab ja veendumaks, et kõik on "Näita sisukorda rühma ..." ala on kontrollitud [x]. Jäta ülejäänud on vaikimisi.
    3. Mine "CSS" tab ja valige nupp (x) "Ärge CSS klasse".
    4. Mine "Theme" tab ja täitke see niimoodi:
      navt_configuration_theme_tab_icon
      Lisada "Lisa sildid enne ..." ala see kood:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Lisada "Lisa sildid peale ..." ala see kood:
      <br style='clear: left' /></div>
    5. Vajutage [salvestada / sulgeda] nuppu
  8. Siinkohal menüü hoone seest NAVT plugin valikud on valmis.
    Nüüd on aeg teha vähe tune up doktoritöö teema, et saada see valmis. Selleks on meil vaja lisada mõned custom faili - CSS ja JavaScript, mis kuulub menüü ja ajakohastatud doktoritöö "custom_functions.php
  9. Lae alla täielik kogum faile siia .
  10. Unzip arhiivi. Kui olete oma custom_functions.php koos muokkauksesi - teil on vaja liita need minu kraam. Ma jätan selle sulle.
    Kui te pole seda puudutanud - julgelt asendada selle minu. Pange tähele: ma eelistasin positsioneerida menüü all veebisaidi päisesse (vaikimisi eespool) - nii minu korrigeerimine ka seda eelistust samuti.
  11. Täiendava arhiiv sealhulgas kõik alamkataloogid ja failid alla oma doktoritöö teema "custom" kataloog, näeb välja selline:
    .../themes/THESIS-DIR/custom/custom_functions.php
    .../themes/THESIS-DIR/custom/jquerycssmenu/...
    Ma ei ole puudutanud custom.css - Ma eelistan hoida menüü konkreetse CSS omal kohtades, et ei tekiks jama sees custom.css
  12. Sel hetkel võite laadida oma kodulehel ja vaadake uus ilus uus mitmetasandiline, nested, SEO optimeeritud menüü.
  13. Te võite alati minna tagasi NAVT seaded ja kohandada oma menüü rohkem valikuid või asetada midagi. See kajastub otsesaidil automaatselt.

Tee ees ...

See õpetus ka loominguline näiteks üht tüüpi menüü. Ma mängisin teisega - lihtsalt näha, kuidas tume menüü näeks:

Thesis theme - multilevel nested CSS menu - dark palette

Lõputöö teema - mitmetasandiline nested CSS menüü - pimedas palett

Ma arvan, et see on päris kena. Seal on palju rohkem navigatsiooni proovide saadaval Dynamic Drive - need kõik on võimalik kohandada jaoks doktoritöö ja muude WordPress teemad mõned jõupingutusi:

Dynamic Drive Horizontal Menus

Dynamic Drive Horisontaalne menüüd

Loodan, et sa leiad selle juhendaja kasulik ja kasulik. Nagu ma ütlesin, see on võimalik kohandada mis tahes nende menüüsid Lõputöö - mis on antud aega ja soovi, et see juhtuks.

Ma võiks seda teha tööd teile lepingu alusel. Lihtsalt vali menüüst sulle meeldib, võtke mind ja ma tööd koodi ja juhiseid oma veebilehel.

$ 20

Ja muidugi, kui sa oled kuni hoone super SEO optimeeritud Premium Wordpress liikmeks portaal - parim lahendus see:
Doktoritöö teema + MemberWing liikmeks plugin + ise hostitud WordPress muidugi.

comments } { 15 comments }

Premium Post 3

5. juuli 2009

See on tasuta teaser lisatasu post 3. See artikkel sisaldab kombineeritud sisu: esimene osa on nähtav Gold liikmed, kogu artikkel on nähtavad ainult Platinum liikmed. Proovige sisse logida kuld liikmelt (kasutajanimi / parool = kuld / kuld) - näete, rohkem sisu. ... Ja siis skriptid ja re-login nagu plaatina [...]

Loe kogu artikli →

Premium Post 2

5. juuli 2009

See on tasuta teaser lisatasu postitus 2. Ülejäänu on nähtav Gold ja ainult liikmetele. Hint - kuld liige login / password = kuld / kuld ......

{{{Kuld | plaatina}}}
Ülejäänud see artikkel on saadaval lisatasu vaid liikmetele.

Loe kogu artikli →

Premium Post 1

5. juuli 2009

See on demo artikkel MemberWing-X. Mis MemberWing-X see artikkel on tehtud ostu ühes hinnaga $ 2,95 või tellides "kuldliikmesus" programmi. Niisiis, see on tasuta teaser lisatasu postitus 1. Ülejäänud see artikkel on nähtavad ainult liikmed, kes ostis selle eest $ 2,95 või tellinud "Gold [...]

Loe kogu artikli →

Lõputöö teema ja Liikmelisus Site plugin MemberWing parima SEO liikmeks sites

5. juuli 2009

MemberWing on Wordpress liikmeks kohas plugin spetsiaalselt SEO optimeeritud liikmeks portaale. Mis see on paindlik indexable õrritused, toetus Google esimene klõps Free standard, digitaalse infosisu ja allalaadimise kaitse õigus koos PromoFusion - see tagab oma liikmeks kohas kiire indekseerimine ja suurem pingeread. Samal ajal kui teised liikmeks saidi tarkvara meeldib täielikult keelata juurdepääsu [...]

Loe kogu artikli →