Ang paghahanap para sa mga perpektong menu ...

Ito ay Bahagi 1 ng tutorial
Part 2 ng tutorial na ito ay nagtuturo kung paano bumuo ng vertical menu + dark palette ng kulay para sa mga pahalang

Ko nagpasya upang makakuha ng tesis na tema, dahil ang isa ng aking mga kliyente ay alam sa akin tungkol sa mga isyu ng pagkakatugma sa pagitan ng sanaysay at ang aking pagiging kasapi sa WordPress site MemberWing plugin. Ko naayos ito at pagkatapos ay nagpasyang kumuha ng mas malapit tumingin sa tesis at talagang bothered upang makapanood ng mga video sa front page ng sa pangunahing tesis site - Diythemes.com .
Ano impressed sa akin ang pinaka-pansin sa mga detalye, gumagamit kabaitan at karamihan ng lahat - SEO mga tampok na kaya rin naisip ng.
MemberWing plugin ng pagiging miyembro ay dinisenyo mula sa lupa up para sa mga site ng pagiging miyembro na kailangan sa pull ng mas maraming SEO juice hangga't maaari. So bayad ako ng mga maraming ng pansin sa maraming mga SEO mga pagpapahusay at perfections sa MemberWing. Marami ng aking sariling mga kliyente ay humihingi tungkol sa mga iba't ibang tema upang gamitin at may tema na kaya rin SEO-optimize mula sa malalim sa loob ay isang mahusay na akma para sa mga negosyante ng portal ng membership.

Ipinagsama SEO kapangyarihan ng MemberWing sa SEO kapangyarihan ng sanaysay tema ay magbigay ng pinakamahusay na ranggo pagkakataon sa aking mga kliyente . So nakuha ko sanaysay at nilalaro sa ito para sa isang araw.

Ito ay isang mahusay na tema sa lahat ng mga paraan. Ang nabigasyon bahagi nito bagaman ay isang bit limitado sa pagpapaandar. Simula mula sa tesis 1.5 + ito ay lamang ng isang antas ng menu. Aking karaniwang pagnanais ay magagawang upang ipasadya ang mga navigation hangga't kinakailangan. Ang ilang mga site ay may lamang ang ilang mga pahina, marami pang iba ay may tons ng mga static na pahina + zillions ng mga artikulo / post + maraming ng mga kategorya ng.
Kaya sa ideal na mundo pagkakaroon ng isang pagkakataon upang lumikha ng gandang naghahanap hierarchically nakaayos user friendly navigation menu ay isang dapat. Ang sanaysay kanan off the bat ay magandang naghahanap nabigasyon ngunit Napansin ko na ang lahat ng mga sanaysay-based website ay naghahanap tulad ng twins. Pagpapasadya ng navigation menu sanaysay ay hindi talaga madaling kaya karamihan sa mga tao lamang na iwan ito bilang ay. Walang paraan upang baguhin ang pagkakasunud-sunod ng mga kategorya sa menu o posisyon ang mga ito sa pagitan ng mga pahina. At muli, ang kakayahan upang lumikha ng nested kaayusan ng menu ay nawawala. Kaya ko nagpasya upang makita kung ano ang maaaring gawin tungkol dito.
Pagkatapos sinusubukan tungkol ng kalahating dosena menu / nabigasyon nang mga kaugnay na plugin ko itatakda ang aking pagpipilian sa WordPress Navigation NAVT List Plugin.
NAVT plugin ay mahalagang unordered listahan generator sa sobrang fancy at bit isang hard-to-malaman untraditional admin interface. Ano nakaliligaw tungkol dito ay na ito ay hindi aktwal na lumikha ng magarbong naghahanap ng mga menu mismo. Ito ay ang hardest bahagi ng trabaho bagaman - ay nagbibigay sa iyo ng isang kakayahan sa paningin pull sama-sama, at makabuo ng unordered listahan - balangkas ng iyong menu-to-ay. At maaari kang lumikha ng maraming mga menu masyadong. Maaari mong pull ang lahat ng uri ng WordPress bagay sa menu navigation: mga pahina, mga post, mga artikulo, mga kategorya, mga gumagamit, mga bloke ng code, mga panlabas na mga link, dibaydes, separators at Halo at tugma at pugad at ayusin at ipasadya ang mga ito sa anumang tree-tulad ng istraktura sa iyo gusto.
NAVT bumubuo ng para sa iyo nagresulta HTML unordered listahan. Ikalawang kagandahan ng NAVT na tumutulong sa iyo upang ipasok ang iyong mga bagong menu sa iyong tema sa pamamagitan ng sikat na lohika JQuery batay ngunit walang kailangan upang baguhin ang anumang code! NAVT ay nagpapahintulot sa iyo na tukuyin: "palitan ang # elemento sa aking bagong NAVT menu". # Elemento ay maaaring maging isang id o klase ng path ng umiiral na menu o tag ng div sangkap na binuo sa pamamagitan ng iyong kasalukuyang tema. So NAVT ay ang kapalit na ito para sa iyo nang walang pagpwersa mong pumunta sa tema code at gawin itong mas magulo kaysa na ito ay. Kung ang lahat ng mga tunog tulad ng satsat - huwag mag-alala - kukunin ko na gabay ka hakbang sa pamamagitan ng hakbang na sa lalong madaling panahon. Ang mahirap na bahagi ng NAVT para sa lahat na kayo na dumating sa aktwal na CSS + larawan + javascript code para sa iyong menu sa iyong sarili. At ito ay hanggang sa iyo na malaman kung saan at kung paano na isama ang mga file na ito at gawin ang mga bagay-bagay na maayos makakuha ng konektado magkasama.
Taos-puso walang alam JQuery + ilang PHP + CSS + may disenteng karanasan sa WordPress - ang bagay na ito ay mahirap sa pull.
Masaya Alam ko ang mga bagay-bagay na ito ng isang bit kaya ako ay nagpasya na kagat ng bala at gabay ng sangkatauhan sa kalayaan sa gusali sa pinakamahusay na ang pinakamahusay na mga menu ng nabigasyon para sa WordPress. Kailangan ko lang upang malaman ang mga pinagkukunan para sa mga ilang gandang naghahanap ng pahalang na mga menu na CSS. Pinili ko ang dynamic drive website para sa kanilang mga pinakamahusay na seleksyon, demo at mga mapagkukunan.

Nakatuon ako sa isang araw sa pag-aaral ng sanaysay at maglaro sa NAVT plugin. Sa katapusan ko buong karangalan ng pasadyang, kakayahang umangkop, SEO optimize, multilevel, nested nagivation istraktura para sa aking WordPress + site sanaysay batay.

Listahan ng mga tampok ng multilevel, nested WordPress nabigasyon menu para sa tisis Tema
(Na ba kayong sa pag-ibig ito bagay-bagay) :

• Professional, malinis hitsura at pakiramdam.
• Suporta para sa lahat ng mga modernong browser, kabilang ang MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome sa parehong javascript at di-javascript mode.
• Maganda downgradable para sa mga di-javascript browser. Mong menu ay magiging kapaki-pakinabang, biswal katulad at nagtatrabaho kahit para sa javascript pinagana browser (kahit na lamang ang nangungunang antas nabigasyon ay makikita at walang mga flyouts ay mangyayari siyempre bilang mga ito ay ginawa sa pamamagitan ng javascript).
• SEO friendly na mga tampok - unordered listahan menu ng code ay binuo sa loob ng HTML. Google at iba pang mga search engine spiders ay ma-index ang iyong nabigasyon istraktura at makahanap ng mga link sa mga panloob na mga pahina.
• Suporta para sa mga walang limitasyong nesting na antas at sublevels.
• Suporta para sa anumang order o mga pahina, mga post (sa pamamagitan ng user defined URI), kategorya, ang mga gumagamit, ang mga bloke ng pasadyang code at panlabas na mga link sa loob ng menu.
• Suporta ng text-pati na rin ang imahe-based na menu elemento. (Ko pa na subukan ang mga bagaman).
• Menu istraktura at nilalaman ay biswal madaling iakma sa pamamagitan ng NAVT admin lugar.
• Compact: JQuery batay flyouts para sa mga nested antas.
• Mabilis: JQuery para sa menu ay load mula sa mga server ng Google (Gusto ko pag-ibig sanaysay mismo upang gawin ang parehong sa halip ng batak ito lokal). Ito ay bilis up ng mga bagay ng isang bit.
• Kakayahang sumukat - Ang uri ng menu na ito ay mae-edit at configure sa sa anumang oras sa pamamagitan NAVT setting ng plugin nang walang anumang kailangan ng coding kahit saan.

Ginamit ko ang mahusay na menu na ito mula sa dynamic drive portal bilang isang base. Ako ay upang ipasadya ang code sa javascript isang bit pati na rin isama ang mga tipak ng PHP sa custom_functions.php upang gawin itong trabaho sa tesis. Rin ang bilang ng mga pre-umiiral na na pahina, mga kategorya at mga post mula sa aking site ay ginamit upang magtipon ang istraktura ng menu. Iyong pagtutukoy ng site ay naiiba - ngunit ang konsepto ay ang parehong.
Kaya hayaan magpatuloy, ay dapat namin?

Hakbang sa pamamagitan ng hakbang na mga tagubilin sa setup NAVT -based nested, napapasadyang, multilevel, SEO friendly
at lamang plain cool na naghahanap ng navigation menu para sa WordPress at sanaysay Tema

1. Pumunta sa WordPress admin panel. Plugin-> Magdagdag ng bagong, ang paghahanap para sa "navt". Ang plugin ay ipapakita. I-click ang [I-install], [-install ngayon], "Buhayin Plugin".
2. Tools-> NAVT Listahan, Inside "Navigation Group" na lugar ang "pangalan ng grupo" at ipasok ang: "menu1" sa patlang, pindutin ang [Lumikha] na button. "Menu1" parihaba lugar kayong nilikha.
   Ito "menu1" na lugar ay ang pangunahing palaruan para sa pagbuo ng menu. Ikaw ay pagkaladkad at bumababa dito ang iyong mga elemento menu.
3. Sa "asset" lugar mahanap ang "iba pang" listbox at mag-click sa pagpipilian na "Home". "Home" thingie ay lilitaw sa loob ng "unassigned" na lugar. Kakaiba, eh? Huwag mag-alala, bilang hangga't ito gumagana - at ito ay para sa amin.
4. I-drag ito "Home" na thingie mula sa "asset" na lugar sa "menu1" parihaba lugar. Ito ay maging "Home" na item sa menu.
   • Ulitin ang mga hakbang 3-4 para sa ilang mga pahina mula sa "Pages" na lugar, pati na rin para sa mga kategorya sa "kategorya" na lugar. I-drag anumang iba pang mga item na gusto mong maging sa iyong menu sa loob ng parihaba "menu1". Maaari mong i-click sa pahina, kategorya, gumagamit at ilang mga pasadyang mga elemento tulad ng "listahan ng divider" at "block ng code". Code ng block ay cool na paraan upang magdagdag ng mga pasadyang mga snippet sa loob ng menu.
   • Maaari mong i-drag ang mga item ng menu sa loob ng lugar ng "menu1" upang muling ayusin ang kanilang mga order.
   • Maaari mong ayusin ang hierarchical na posisyon ng bawat item ng menu na may "<" at ">" arrow.
   • Ang pag-click sa text pangalan ng bawat item ng menu - bubukas isip boggling karagdagang pagpapasadya dialog para sa item na ito. Ginamit ko halos default ngunit technically maaari mong mabaliw at simulan ang paggawa ng mga imahe-based na mga pagpipilian sa menu at idagdag ang mga chunks ng HTML na code sa ito. Magpatuloy sa pag-iingat bagaman.
   • Para sa mga linkless unclikable submenus na maglingkod bilang mga "magulang" para sa iba pang mga "sub-anak" ginamit ko ang "Code block" na uri. Halimbawa kapag pagpapasadya tulad code block item na aking pinasok para sa "Menu item alias" "MemberWing" = at para sa "Ipasok ang code block:" = "<a href='#'> MemberWing </ a>". Nagkakaroon href = "#" ay hindi ito naki-click ngunit kumikilos bilang isang wastong menu na "magulang" pagpipilian .
5. Narito kung paano 'menu1' aking bumuo ng istraktura NAVT mukhang halos nakumpleto:
   
6. Tapos na ang unang gusali at pagkatapos ay mag-click sa icon na "lansungan" upang ipasadya ang iyong mga kaayusan ng menu:
   
7. Ito ay buksan ang dialog na may 4 mga tab: Mga Pagpipilian, Display, CSS, Tema.
   1. Pumunta sa "Options" na tab at siguraduhin na ang lahat ay check at ang "pangalan ng grupo" sabi ni: "menu1"
   2. Pumunta sa "Display" na tab at siguraduhin na ang lahat sa "Ipakita ang nabigasyon group sa ..." lugar ay naka-check [x]. Iwanan ang natitira sa default.
   3. Pumunta sa tab na "CSS" at piliin ang radio button (x) "Huwag ilapat ang klase CSS".
   4. Pumunta sa tab na "tema" at punan ito sa nais na:
      
      Ipasok sa "Magdagdag ng mga tag bago ..." ang lugar na ito code:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Ipasok sa "Magdagdag ng mga tag pagkatapos ..." ang lugar na ito code:
      <br style='clear: left' /></div>
   5. Pindutin ang [save / isara] na button
8. Sa gusaling ito point menu mula sa loob ng mga pagpipilian ng plugin sa NAVT ay kumpleto.
   Ngayon ay oras na upang gawin ang isang maliit na tune up para sa tisis tema upang makakuha ng ito handa. Para sa mga na kailangan namin upang magdagdag ng ilang mga pasadyang file - CSS at javascript na nabibilang sa menu at custom_functions.php update ng sanaysay
9. I-download ang kumpletong hanay ng mga file dito.
10. Magsiper archive. Kung mayroon kang update ang iyong custom_functions.php sa iyong mga pagpapasadya - kailangan mong ipagsama ang mga ito sa aking mga bagay-bagay. Kukunin ko iwanan ito sa iyo.
    Kung hindi mo pa baliw nito - huwag mag-atubiling patungan ito sa minahan. Mangyaring tandaan: ko ginustong sa posisyon ang menu sa ilalim ang header ng website (default ay sa itaas) - upang ang aking adjustment kasama ang kagustuhang ito pati na rin.
11. Mag-upload ng archive kasama ang lahat ng mga subdirectory at file sa ilalim ng iyong sanaysay tema direktoryo 'custom', tulad nito:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Hindi ko pa baliw custom.css - Mas gusto ko ang itago ang menu-tiyak na CSS sa ilalim ng kanilang sariling mga lokasyon upang maiwasan ang paggawa ng gulo sa loob custom.css
12. Sa puntong ito maaari mong i-reload ang iyong website at makita ang bagong maganda bagong multilevel, nested, SEO-optimize menu.
13. Maaari mong palaging bumalik sa NAVT ng mga setting at ipasadya ang iyong menu na may mas maraming mga mapagpipilian o muling iposisyon ng anumang. Ito ay makikita sa live site ay awtomatikong.

Ang kalsada sa maaga ...

Ang tutorial na ito kasama ng creative halimbawa ng isang uri ng menu. Nilalaro ko na may isa-lamang upang makita kung paano dark ang kulay menu magiging hitsura:

Tisis tema - multilevel nested CSS menu-dark palette

Tingin ko ito ay medyo maselang. May mga mas maraming mga pag-navigate halimbawa na makukuha sa Dynamic Drive - lahat ng mga ito ay posible na-customize para sa tesis at iba pang mga tema ng WordPress na may ilang mga pagsisikap:

Dynamic Drive Horizontal menu

Umaasa ako makakahanap ka ng tutorial na ito kapaki-pakinabang at kapaki-pakinabang. Tulad ng sinabi ko, ito ay posible upang ipasadya ang anumang ng mga menu para sa tesis na nabigyan ng oras at pagnanais na ito nangyari.

Maaari kong gawin ito gumagana para sa iyo sa isang kontrata na batayan. Lamang piliin ang menu na gusto mo, makipag-ugnay sa akin at kukunin ko na magtrabaho sa ang code at mga tagubilin para sa iyong website .

$ 20

At siyempre kung ikaw ay hanggang sa gusali sobrang SEO optimize premium WordPress membership portal - ang pinakamahusay na solusyon para sa:
Tema ng sanaysay + MemberWing plugin ng membership +-host WordPress sarili siyempre.

-Tag bilang: CSS menu para sa WordPress , sanaysay tema , hierarchical menu ng sanaysay tema, sanaysay tema ng multilevel menu, sanaysay tema nagivation, nested menu ng sanaysay tema , sanaysay tema tutorial , WordPress css menu , WordPress nested menu