Ang Quest para sa perpektong menu ...
Ito ay Bahagi 1 ng tutorial
Bahagi 2 ng tutorial na ito ay nagtuturo kung paano bumuo ng vertical menu + dark color palette para sa pahalang isa
Ko nagpasya upang makakuha ng thesis tema , dahil ang isa sa aking mga kliyente alam sa akin tungkol sa mga isyu sa pagiging tugma sa pagitan ng thesis at ang aking pagiging kasapi WordPress site plugin MemberWing. Ako naayos na ito at pagkatapos ay nagpasya na magsagawa ng isang masusing pagtingin sa thesis at talagang bothered upang panoorin ang mga video sa front page ng mga pangunahing tesis site - Diythemes.com .
Ano impressed sa akin ang pinaka ay pansin sa detalye, gumagamit kabaitan at higit sa lahat - SEO mga tampok na rin kaya naisip ng.
MemberWing plugin ng pagiging miyembro ay dinisenyo mula sa lupa up para sa mga site ng pagiging miyembro na kailangan upang hilahin ng mas maraming SEO juice hangga't maaari. Kaya Nagbayad ako ng maraming atensyon sa maraming mga SEO mga pagpapahusay at perfections sa MemberWing. Marami sa aking sariling mga kliyente ang pagtatanong tungkol sa iba't ibang mga tema upang gamitin at pagkakaroon ng tema na noon ay kaya mahusay na SEO-optimize mula sa malalim sa loob ay magiging isang mahusay na akma para sa mga negosyante pagiging kasapi portal.
Pinagsasama ang mga kapangyarihan SEO ng MemberWing sa SEO kapangyarihan ng sanaysay tema ay magbigay ng pinakamahusay na ranggo ng mga pagkakataon sa aking mga kliyente. Kaya ang nakuha ko thesis at nilalaro na may 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 function. Simula mula sa thesis 1.5 + ito ay isang antas na menu lamang. Aking karaniwang pagnanais ay upang ma-customize ang nabigasyon ng mas maraming bilang kinakailangan. Ang ilang mga site lamang magkaroon ng ilang mga pahina, maraming iba ay may tonelada ng mga static na pahina + zillions ng mga artikulo / post + maraming ng mga kategorya.
Kaya sa perpektong mundo pagkakaroon ng isang pagkakataon upang lumikha ng gandang naghahanap nakaayos hierarchically user friendly na navigation menu ay isang nararapat. Thesis karapatan off ang bat ay may magandang naghahanap nabigasyon ngunit Napansin ko na ang lahat ng tesis na nakabatay sa mga website hinahanap tulad ng twins. Pagpapasadya ng thesis navigation menu ay hindi talagang madali kaya ang karamihan ng mga tao lamang mag-iwan ito bilang ay. Walang paraan upang baguhin ang pagkakasunud-sunod ng mga kategorya sa menu o iposisyon ang mga ito sa pagitan ng mga pahina. At muli, ang kakayahan upang lumikha ng kaayusan nested menu ay nawawala. Kaya ko nagpasya upang makita kung ano ang maaaring gawin tungkol dito.
Pagkatapos sinusubukan tungkol sa kalahating dosena menu / nabigasyon kaugnay na plugin ko itatakda ang aking pagpipilian sa WordPress Navigation NAVT List Plugin .
NAVT plugin ay mahalagang unordered listahan generator na may super fancy at isang bit hard-to-malaman untraditional admin interface. Ano Mapanlinlang tungkol dito ay na hindi ito aktwal na lumikha ng magarbong naghahanap ng mga menu sa pamamagitan ng mismo. Ginagawa nito ang hardest bahagi ng trabaho bagaman - ay nagbibigay sa iyo ng kakayahan upang biswal pagsamahin, at bumuo ng unordered listahan - balangkas ng iyong menu-to-maging. At maaari kang lumikha ng maraming mga menu masyadong. Maaari mong hilahin ang lahat ng uri ng WordPress bagay-bagay sa navigation menu: mga pahina, mga post, mga artikulo, mga kategorya, mga gumagamit, mga bloke ng code, panlabas na mga link, dibaydes, separators at halo at tugma at pugad at mag-ayos at i-customize ang mga ito sa anumang tree-istraktura tulad mo gusto.
NAVT bumubuo ng para sa iyo nagresulta HTML unordered listahan. Ikalawang kagandahan ng NAVT ay tumutulong ito sa iyo upang ipasok ang iyong 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 upang tukuyin: "palitan ang # elemento sa aking bagong NAVT menu". # Elemento ay maaaring maging isang id o klase ng landas ng umiiral na menu o div elemento ng tag na ay binuo sa pamamagitan ng iyong kasalukuyang tema. Kaya NAVT ang kapalit na ito para sa iyo nang walang pagpilit sa iyo upang pumunta sa tema code at gawin itong mas magulo kaysa na ito ay. Kung na ang lahat ng mga tunog tulad ng satsat - huwag mag-alala - kukunin ko na gagabay sa iyo sa pamamagitan ng hakbang na hakbang sa lalong madaling panahon. Ang mapaghamong bahagi ng NAVT para sa lahat ng tao ay na kailangan mong upang makabuo ng mga aktwal na CSS + larawan + javascript code para sa iyong menu ng iyong sarili. At ito ay nakasalalay sa iyo upang malaman kung saan at kung paano i-integrate ang mga file na ito at gumawa ng mga bagay-bagay na ito nang maayos makapag konektado magkasama.
Taos-puso nang walang pag-alam JQuery ilang + PHP + CSS + pagkakaroon ng disenteng karanasan sa WordPress - bagay na ito ay mahirap upang hilahin.
Masaya Alam ko ang mga bagay-bagay ng kaunti kaya ako nagpasya kumagat ang bala at gabay sa sangkatauhan sa kalayaan sa pagbuo ng pinakamahusay na ng pinakamahusay na mga menu nabigasyon para sa WordPress. Ko lang ang kailangan upang malaman ang pinagmulan para sa ilang mga gandang hinahanap pahalang na menu CSS. Kinuha ko ang mga dynamic na biyahe website para sa kanilang mga pinakamahusay na seleksyon, demo at pinagmulan.
Ako nakatuon sa isang araw na pag-aralan thesis at maglaro na may NAVT plugin. Sa katapusan ko buong karangalan nilikha pasadyang, kakayahang umangkop, SEO-optimize na, multilevel, nested nagivation istraktura para sa aking WordPress site + thesis based.
Listahan ng mga tampok ng multilevel, nested menu WordPress nabigasyon para sa thesis Tema
(Nakakuha ka sa pag-ibig na ito bagay-bagay):
- Professional, malinis na hitsura at pakiramdam.
- Suporta para sa lahat ng mga modernong mga browser, kabilang ang MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome sa parehong javascript at di-javascript modes.
- Maganda downgradable para sa mga di-javascript browser. Ikaw menu ay magiging kapaki-pakinabang, biswal katulad at nagtatrabaho kahit para sa javascript kapansanan browser (kahit na lamang ang nangungunang antas ng nabigasyon ay makikita at walang flyouts ang mangyayari siyempre bilang sila ay ginawa sa pamamagitan ng javascript).
- SEO friendly na mga tampok - unordered listahan menu code ay nabuo sa loob ng HTML. Google at iba pang mga search engine spider ay magagawang i-index ang iyong nabigasyon istraktura at makahanap ng mga link sa panloob na mga pahina.
- Suporta para sa walang limitasyong mga antas ng nesting at sublevels.
- Suporta para sa anumang pagkakasunud-sunod o mga pahina, mga post (sa pamamagitan ng tinukoy ng gumagamit mga URI), kategorya, gumagamit, mga pasadyang code bloke at panlabas na mga link sa loob ng menu.
- Suporta ng text-pati na rin ang imahe na batay sa mga elemento ng menu. (Mayroon akong pa upang subukan ang mga bagaman).
- Menu istraktura at nilalaman ay biswal madaling iakma sa pamamagitan ng NAVT admin lugar.
- Compact: JQuery batay flyouts para sa nested mga antas.
- Mabilis: JQuery para sa menu na-load mula sa mga server ng Google (Gusto ko pag-ibig sanaysay mismo upang gawin ang parehong sa halip ng paghila ito locally). Ito ay magpapabilis sa mga bagay ng kaunti.
- Kakayahang sumukat - Ang uri ng menu ay mae-edit at maisasaayos sa anumang oras sa pamamagitan NAVT mga setting ng plugin na walang anumang mga pangangailangan ng coding kahit saan.
Ginamit ko ito mahusay na menu mula sa mga dynamic na biyahe portal bilang basehan. Mayroon akong upang i-customize ang javascript code ng kaunti pati na rin isama tipak ng PHP sa custom_functions.php upang gawin itong gumagana sa thesis. Gayundin ang bilang ng mga pre-umiiral na mga pahina, mga kategorya at mga post mula sa aking site ay ginamit upang magtipon menu istraktura. Ang iyong mga pagtutukoy site ay naiiba - ngunit konsepto ay magiging pareho.
Kaya hayaan magpatuloy, dapat namin?
Hakbang sa pamamagitan ng hakbang na mga tagubilin upang i-setup NAVT -based nested, nako-customize, multilevel, SEO friendly na
at lamang plain cool na naghahanap ng navigation menu para sa WordPress at sanaysay Tema
- Pumunta sa WordPress admin panel. Plugin-> Magdagdag ng bagong, paghahanap para sa "navt". Ang plugin ay ipapakita. I-click ang [I-install], [I-install ngayon], "Buhayin Plugin".
- Tools-> NAVT Listahan, Inside "Navigation Group" lugar mahanap ang "pangalan ng grupo" at ipasok ang: "menu1" sa patlang, pindutin ang [Lumikha] na button. "Menu1" parihaba lugar Nakakuha nilikha.
Ito "menu1" na lugar ay ang magiging pangunahing palaruan para sa pagbuo menu. Kayo ay makakatanggap ng pag-drag at pag-drop dito ang iyong mga elemento menu. - Sa "asset" lugar mahanap ang "iba" listbox at mag-click sa pagpipilian na "Home". "Home" thingie ay lilitaw sa loob ng "assign" area. Kakaiba, eh? Walang alalahanin, hangga't ito gumagana - at kalooban nito para sa amin.
- I-drag ang "Home" thingie mula sa "asset" sa lugar na "menu1" parihaba lugar. Ito ay maging "Home" na item sa menu.
- Ulitin ang mga hakbang 3-4 para sa ilang mga pahina mula sa "Mga Pahina" area, pati na rin ang para sa mga kategorya sa "kategorya" area. I-drag ang anumang iba pang mga item na gusto mong maging sa iyong menu sa loob ng parihaba "menu1". Maaari kang mag-click sa mga pahina, mga kategorya, mga gumagamit at ang ilang custom na mga elemento tulad ng "listahan ng divider" at "code block". Code bloke ay cool na paraan upang magdagdag ng mga pasadyang mga snippet sa loob ng menu.
- Maaari mong i-drag ang mga item sa menu sa loob ng lugar ng "menu1" upang muling ayusin ang kanilang mga pagkakasunod-sunod.
- Maaari mong ayusin ang hierarchical na posisyon ng bawat item menu na may "<" at ">" arrow.
- Ang pag-click sa teksto ng pangalan ng bawat item menu - ay bubukas isip boggling dagdag pagpapasadya dialog para sa item na ito. Ako halos ginamit mga default ngunit technically maaari mong mabaliw at simulan ang paggawa ng imahe na batay sa mga pagpipilian sa menu at magdagdag ng mga chunks ng HTML code sa ito. Magpatuloy sa pag-iingat bagaman.
- Para sa linkless unclikable submenus na magsisilbi bilang "mga magulang" para sa iba pang mga "sub-anak" ginamit ko "Code bloke" uri. Halimbawa kapag pagpapasadya tulad code block item na naipasok ko para sa "alias Menu item na" = "MemberWing" at para sa "Ipasok ang code block:" = "<a href='#'> MemberWing </ a>". Nagkakaroon href = "#" ay gawin itong hindi naki-click na ngunit kumikilos bilang isang wastong "magulang" menu choice.
- Narito kung paano 'menu1' aking NAVT build istraktura mukhang halos nakumpleto:
- Tapusin paunang gusali at pagkatapos ay mag-click sa icon na "gear" upang i-customize ang iyong menu istraktura:
- Ito ay buksan ang dialog na may 4 na mga tab: Mga Pagpipilian, Display, CSS, Tema.
- Pumunta sa "Options" na tab at siguraduhin na ang lahat ng bagay ay naka-uncheck at "pangalan ng grupo" sabi ni: "menu1"
- Pumunta sa "Display" na tab at siguraduhin na ang lahat sa "Ipakita ang pangkat nabigasyon sa ..." na lugar ay naka-check [x]. Iwanan ang natitira sa mga default.
- Pumunta sa tab na "CSS" at piliin ang radio button (x) "Huwag ilapat ang klase CSS".
- Pumunta sa tab na "Mga Tema" at punan ito sa katulad na:
Ipasok sa "Magdagdag ng mga tag bago ..." area ang code na ito:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Ipasok sa "Magdagdag ng mga tag pagkatapos ..." area ang code na ito:
<br style='clear: left' /></div> - Pindutin ang [save / isara] na button
- Sa gusaling ito punto menu mula sa loob ng NAVT plugin pagpipilian ay kumpleto na.
Ngayon ay oras na upang gawin ang isang maliit na tune up para sa thesis tema upang makakuha ng mga ito handa na. Para sa na kailangan namin upang magdagdag ng ilang custom na mga file - CSS at javascript na nabibilang sa Menu at custom_functions.php update thesis ' - I-download ang kumpletong hanay ng mga file dito .
- Magsiper archive. Kung na-update mo ang iyong custom_functions.php sa iyong mga pagpapasadya - kailangan mo upang pagsamahin ang mga ito sa aking mga bagay-bagay. Kukunin ko iwanan ito sa iyo.
Kung hindi mo pa baliw nito - huwag mag-atubiling itong patungan ng mina. Mangyaring tandaan: ko ginustong upang iposisyon ang menu sa ilalim ng website header (default ay sa itaas) - upang ang aking pagsasaayos kasama ang kagustuhang ito pati na rin. - Mag-upload ng archive kabilang ang lahat ng mga subdirectory at mga file sa ilalim ng direktoryo ng 'custom' ang iyong thesis tema, tulad nito:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Hindi ko pa hinawakan custom.css - Mas gusto ko upang panatilihing menu-tiyak na CSS sa ilalim ng kanilang sariling mga lokasyon upang maiwasan ang paglikha ng gulo sa loob custom.css - Sa puntong ito maaari mong i-reload ang iyong mga website at makita ang mga bagong magagandang bagong multilevel, nested, SEO-optimize na menu.
- Maaari mong palaging bumalik sa NAVT mga setting at i-customize ang iyong menu na may mas maraming mga mapagpipilian o muling iposisyon ng kahit ano. Ito ay masasalamin sa live site awtomatikong.
Ang kalsada maaga ...
Ang tutorial na ito kasama creative halimbawa ng isang uri ng menu. I-play sa isa pang isa - lamang upang makita kung paano madilim na kulay na menu magiging itsura:
Thesis tema - multilevel nested CSS menu - dark palette
Sa tingin ko ay medyo maganda. Mayroong maraming iba pang mga pag-navigate mga sample na makukuha sa Dynamic Drive - lahat ng mga ito ay posible upang i-customize para sa thesis at iba pang mga WordPress tema na may ilang mga pagsisikap:
Dynamic Drive Pahalang Mga Menu
Umaasa ako makakahanap ka ng tutorial na ito kapaki-pakinabang at kapaki-pakinabang. Tulad ng sinabi ko, ito ay posible upang i-customize ang alinman sa mga menu para sa thesis - na ibinigay na oras at pagnanais upang gawin itong mangyari.
Kaya kong gawin ito trabaho para sa iyo sa isang batayang kontrata. Pumili lamang 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 pagbuo ng sobrang SEO-optimize na premium WordPress pagiging kasapi portal - ang pinakamahusay na solusyon para sa mga ito:
Sanaysay Tema + MemberWing plugin ng pagiging miyembro + sarili host WordPress siyempre.
Komento sa ang entry na ito ay sarado.