Quest täiuslik menüü ...

See on 1 osa juhendaja
2. osa käesoleva tutorial õpetab, kuidas luua vertikaalne menüü + tumedat värvi palett horisontaalne

Ma otsustasin, et saada Thesis teema , sest üks minu kliendid teatas mulle umbes ühilduvuse probleeme vahel Thesis ja mu wordpress liikmeks saidi plugin MemberWing. Ma leppisin ja siis otsustas võtta lähemal Thesis ja tegelikult viitsi vaadata videoid esilehel peamine Thesis site - Diythemes.com .
Mis muljet mulle kõige rohkem tähelepanu detailidele, kasutajasõbralikkuse ja mis kõige tähtsam - SEO funktsioone, mis on nii hästi mõelnud.
MemberWing liikmeks plugin oli kavandatud maapinnast kuni liikmeks saite, mis oleks vaja välja tõmmata nii palju SEO mahla kui võimalik. Nii et ma maksta palju tähelepanu paljude SEO lisaseadmeid ja perfections sisse MemberWing. Paljud minu kliendid on küsides erinevaid teemasid kasutada ja millel on teema, mis oli nii hästi SEO optimeeritud sügavalt sees oleks suurepärane sobi liikmeks portaal ettevõtjad.

Ühendades SEO volitused MemberWing SEO volitused Lõputöö teema annaks parima järjekohal võimalusi minu kliendid. Nii et ma sain magistritöö ja mängitakse see päev.

See on suurepärane teema igal viisil. Navigatsiooni osa, kuigi on natuke piiratud funktsioon. Alates Thesis 1.5 + see on üks taseme menüüs ainult. Minu tavaline soov on, et oleks võimalik kohandada navigatsiooni nii palju kui vaja. Mõned saidid on ainult paar lehekülge, paljud teised tonni staatilisi lehekülgi + zillions articles / postitustest + palju kategooriaid.
Nii Ideaalses maailmas võttes võimaluse luua kena välimusega hierarhiliselt organiseeritud kasutajasõbralik navigatsioonimenüü on must. Lõputöö õigus ära nahkhiir on stiilne navigation, kuid märkasin, et kõik Thesis põhinevad veebilehed on otsin nagu kaksikud. Customizing Thesis navigatsioonimenüü ei ole tõesti lihtne mistõttu enamik inimesi lihtsalt jäta see nagu on. Ei ole nii muuta, et kategooriatesse menüüs või seisukohta neid lehekülgede vahel. Ja jälle, võime luua nested menüü struktuurid on puudu. Nii et ma otsustasin vaadata, mida võiks teha midagi.
Pärast üritavad umbes pool tosinat menüü / navigatsiooniga seotud plugins Ja ma pöörasin oma valiku Wordpress Navigation List Plugin NAVT .
NAVT plugin on sisuliselt Tavalise nimekirja generaator super fancy ja veidi raskesti näitaja ebatraditsioonilisi admin liides. Mida eksitav on see, et see ei ole tegelikult luua väljamõeldud otsin menüüd iseenesest. See kõige raskem osa töö küll - annab sulle võime visuaalselt koondada ja luua Tavalise nimekirja - skelett oma menüü-to-be. Ja te võite luua palju menüüsid ka. Võite tõmmata igasugu Wordpress kraami navigatsioonimenüü: lehed, postitusi, artiklid, kategooriad, kasutajate kood plokid, väliseid linke, sirkel, separaatorid ja segada ja sobitada ja pesa ja korraldada ja kohandada neid ühegi puu-like struktuur te tahad.
NAVT tekitab teile kaasa HTML Tavalise nimekirja. Teine ilu NAVT, et see aitab teil sisestada oma uue menüü oma teema kaudu tuntud jQuery põhinev loogika, kuid ilma vaja muuta mingi koodi! NAVT võimaldab teil täpsustada: "Asenda see # element mu uue NAVT menu". # Element võiks olla id või klassi tee olemasolevate menüü või div element tag et on loodud oma praeguse teema. Nii NAVT see asendaja teid ilma sunnib teid minema teema koodi ja muuta see räpane kui see juba on. Kui see kõik kõlab nagu plära - ärge muretsege - ma juhendab teid samm-sammult kiiresti. Keerulisem osa NAVT igaühe jaoks on see, et sa pead tulla tegelik 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 omavahel ühendatud.
Lugupidamisega, teadmata, jQuery + mõned PHP + CSS + võttes korralik kogemus Wordpress - see asi on raske tõmmata.
Rõõmuga ma tean seda kraami natuke nii ma otsustasin hammustavad kuuli ja juhend inimkonna vabaduse hoone parimatest parim navigation menüüd jaoks Wordpress. Ma lihtsalt vaja teada, allikad mõned kena välimusega horisontaalne CSS menüüsid. Ma valisin dünaamilist sõidumugavust veebilehel oma parima valikud, demod ja allikatest.

Ma pühendatud päev uuring Thesis ja mängida NAVT plugin. Lõpus ma uhkelt loonud kohandatud, paindlik, SEO optimeeritud, mitmetasandiline, nested nagivation struktuur minu Wordpress + magistritöö põhineb kohas.

Omaduste loetelu mitmetasandiline, nested Wordpress navigatsiooni menüü Thesis Theme
(Sa pead armastama seda kraami):

• Professional, puhas välimus ja meeleolu.
• Toetus kõik tänapäevased brauserid, sealhulgas MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome nii javascripti ja mitte-javascripti olekutes.
• Nõtkelt downgradable mittekuuluvate javascript brauseritega. Sa menüü kasutatav, visuaalselt sarnased ja töötavad isegi JavaScripti funktsioonide (kuigi vaid tipptasemel navigatsiooni nähtav ja ei flyouts juhtub muidugi kui need on tehtud JavaScript).
• SEO friendly omadused - Tavalise nimekirja menüü kood tekib jooksul HTML. Google ja teised otsingumootor Spiders saab index oma navigation struktuuri ja lingid sisemistel lehekülgedel.
• Toetus piiramatu pesitsevate taset ja sublevels.
• Toetus suvalises järjekorras või leheküljed, postid (via kasutaja määratud URI), kategooriad, kasutajad, kohandatud koodi plokid ja väliste linkide menüüst.
• Toetus teksti kui ka pildi-põhine menüü elemente. (Ma pole veel proovida neid küll).
• Menüü struktuur ja sisu on visuaalselt reguleeritav kaudu NAVT admin piirkonnas.
• Compact: jQuery põhineb flyouts jaoks nested tasanditel.
• Kiire: jQuery jaoks on menüü laadida Google serverid (ma armastan Thesis ise sama tegema asemel tõmmates seda kohapeal). See kiirendab asju natuke.
• Skaalautuvuus - Seda tüüpi menüü on muudetav ning seadistatavad igal ajal läbi NAVT plugin seadeid ilma vajaduseta kodeerimine kuhugi.

Ma kasutasin selle suurepärase menüü dünaamilist sõidumugavust portaali baasi. Mul oli kohandada javascript koodi natuke ning hõlmab patakas PHP arvesse custom_functions.php teha seda tööd koos doktoritöö. Ka mitmeid olemasolevaid lehekülgi, kategooriad ja teated minu saidi kasutati koguda menüü struktuuris. Teie saidi spetsiifika on erinev - kuid mõisted on sama.
Nii et andke minna, peab oleme?

Samm-sammult juhiseid setup NAVT põhinev nested, kohandatav, mitmetasandilise, SEO friendly
ja lihtsalt lahe vaadata navigatsioonimenüü jaoks Wordpress ja Thesis Theme

1. Mine Wordpress admin paneeli. Plugins-> Lisa uus otsing "navt". Plugin ei kuvata. Klõpsake [Install] [Install now], "Activate Plugin".
2. Tööriistad-> NAVT loendid Inside "Navigation Group" ala leida "grupi nimi" ja sisesta: "menu1" valdkonnas, vajutage [Loo] nupule. "Menu1" ristküliku pindala sai loodud.
   See "menu1" ala on peamine mänguplats menüü ehitus. Sul pukseerige siia oma menüü elemente.
3. In "vara" ala leida "teiste" nimekirjast ja vajuta "Home" valik. "Home" thingie ilmub sees "määramata" piirkonnas. Imelik, eh? Ära muretse, nii kaua kui see toimib - ja see meile.
4. Vedage see "Home" thingie andmebaasist "varad" piirkond, "menu1" ristküliku pindala. Sellest saab "Home" element menüü.
   • Korrake samme 3-4 mõned leheküljed "Lehed" ala, samuti kategooriat "kategooriasse" piirkonnas. Drag muid objekte, sa tahad olla oma menüü sees "menu1" ristkülik. Te võite klikkida lehekülgi, kategooriad, kasutajate ja mõned kohandatud elemente nagu "nimekirja jagaja" ja "koodiestossa". Koodiestossa on lahe võimalus lisada custom pikad sees menüü.
   • Te võite lohistada menüü sees "menu1" ala korrastada oma järjekorras.
   • Te võite kohandada hierarhiline positsioon iga menüü koos "<" ja ">" nooli.
   • Klõpsates teksti nimi iga menüü - avab meeles Arusaamatu extra kohandamise dialoog selle kirje alla. Ma enamasti kasutatakse vaikimisi, kuid tehniliselt saab hulluks minna ja hakata pilti põhinev menüü valikuid ja lisada tükkideks HTML koodi ta. Tegutsema ettevaatlikult küll.
   • For linkless unclikable alammenüüd, et toimib "vanematest" teiste "sub-lapsed" Ma kasutasin "Code blokeerida" tüüp. Näiteks, kui customizing nagu koodiestossa I punkti sisestatud "menüüst alias" = "MemberWing" ning "Enter koodiestossa:" = "<a href='#'> MemberWing </ a>". Võttes href = "#" teeb ta ei klikitav, kuid tegutseb kehtiv "emaettevõte" menüüvalik.
5. Siin on, kuidas mu NAVT "menu1" ehitada struktuur tundus peaaegu lõpule viidud:
   
6. Valmis esialgne hoone ja seejärel nupul "käik" ikoon kohandada oma menüü struktuur:
   
7. See avab dialoogi 4 kaarti: Valikud, Display, CSS, teema.
   1. Go to "Options" sakk ja veenduge, et kõik on märkimata ja "grupi nimi" ütleb: "menu1"
   2. Go to "Display" sakk ja veenduge, et kõik "Näita navigatsiooni rühm ..." ala kontrollitakse [x]. Jäta ülejäänud ajal ei täida.
   3. Go to "CSS" sakk ja valige nupp (x) "Ärge kandke CSS klassid."
   4. Go to "Theme" sakk ja täitke see meeldib, et:
      
      Lisada "Add sildid enne ..." ala selle koodi:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Lisada "Add sildid pärast ..." ala selle koodi:
      <br style='clear: left' /></div>
   5. Vajutage [Save / close] nuppu
8. Sel hetkel menu hoone seest NAVT plugin võimalusi on lõpetatud.
   Nüüd on aeg teha vähe tune üles Thesis teema , et saan seda valmis. Selleks vajame lisada paar custom faile - CSS ja JavaScript, mis kuulub menüü ja värskendada Thesis "custom_functions.php
9. Lae komplekt failid siin .
10. Unzip arhiivi. Kui teil on uuendanud oma custom_functions.php oma kohandamised - teil on vaja ühendada need oma asjad. Ma jätan ta sinust.
    Kui sa ei ole puudutanud seda - julgelt asendada selle minu. Pange tähele: ma eelistasin asendisse menüüst kodulehel header (vaikimisi on eespool) - nii et mu reguleerimine lisada see eelistus samuti.
11. Üleslaadimine arhiiv sealhulgas kõik alamkataloogid ja failid alla oma magistritöö teema "custom" kataloog, nagu see:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Ma ei ole puudutanud custom.css - ma eelistan hoida menüü spetsiifiliste CSS omal kohtades vältida jama sees custom.css
12. Sel hetkel võite reload 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üü, kus on rohkem valikut või asetada midagi. See kajastub saidil automaatselt.

Tee ees ...

See õpetus ka loominguline näiteks üht tüüpi menüü. Ma mängitakse veel üks - just näha, kuidas tumedat värvi menüü näeb välja selline:

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

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

Dynamic Drive Horizontal menüüd

Loodan, et leiad selle juhendaja kasulik ja kasulik. Nagu ma ütlesin, on võimalik kohandada mis tahes nende menüüsid Thesis - see on konkreetses ajas ja soov muuta see juhtub.

Ma võiksin seda tööd teile lepingu alusel. Lihtsalt vali menüüst soovite, võtke minuga ühendust ja ma tööd kood ja juhiseid oma veebilehel.

$ 20

Ja muidugi, kui oled valmis hoone super SEO optimeeritud Premium Wordpress liikmeks portaal - parim lahendus selline:
Thesis Theme + MemberWing liikmeks plugin + ise hostitud Wordpress muidugi.

comments } { 15 kommentaari }