Quest for popoln meni ...
To je Del 1 Tutorial
Del 2 tega tutorski uči, kako graditi navpičnega menija + temno barvno paleto za horizontalen
Odločil sem se da zaslužiti Thesis temo, ker so ena od mojih strank, me je obvestil o težavah z združljivostjo med Thesis in mojo wordpress stran članstva plugin MemberWing. Popravil sem, nato pa odločil, da bo tesnejše gledati Thesis in dejansko moti paziti televizija na sprednji strani glavnega mesta Thesis - Diythemes.com.
Kaj me je najbolj navdušil, je pozornost do detajlov, prijaznost do uporabnika in predvsem - SEO funkcij, ki so tako dobro pomislil.
MemberWing članstvo plugin je bil zasnovan od tal navzgor za članstvo, spletna mesta, ki bi morali vleči toliko SEO soku, kot je to mogoče. Zato sem plačal veliko pozornost množice SEO dodatno opremo in v popolnosti MemberWing. Veliko moje stranke se sprašuje o različnih temah za uporabo in imajo temo, ki je tako dobro SEO optimizirana iz globoke notranjosti bi se odlično prilegajo za članstvo portal podjetnike.
Združevanje SEO pristojnosti MemberWing SEO s pooblastili teme Thesis bi dal najboljše možnosti za razvrstitev moje stranke. Tako sem dobil Thesis in igral z njim za dan.
To je odlična tema v vseh njenih oblikah. Navigacijski del, čeprav je nekoliko omejena v funkciji. Od Thesis 1,5 + je le ena raven menija. Moja želja je običajno, da se lahko prilagodite navigacija, kolikor je potrebno. Nekatera mesta so le nekaj strani, številni drugi so mandelj od statičnih strani + zillions člankov / + delovnih mest veliko kategorij.
Torej, v idealnem svetu, ki imajo priložnost, da ustvari lepo je videti hierarhično organizirani uporabniku prijazen navigacijski meni ni treba. Thesis pravico off kij je čeden navigacija vendar sem opazil, da so vsi Thesis na osnovi spletnih straneh, so videti kot dvojčki. Prilagajanje Thesis navigacijski meni, ni res, da večina ljudi preprosto pustite, kot je. Ni načina, da spremenite vrstni red kategorij v meniju ali položaja jih med stranmi. In spet, zmožnost ustvarjanja ugnezdena menija manjka. Zato sem se odločil, kaj je mogoče storiti glede tega.
Po približno pol ducata težaven menu / nanašajo na navigacijske plugins I je moja izbira na Wordpress Plugin List Navigation NAVT.
NAVT plugin je v bistvu neurejen seznam kotliček z super modno in malce težko številke untraditional admin interface. Kaj zavajajoče o tem je, da dejansko ne ustvari domišljijsko videti menijev, ki jih sama. To pa najtežji del delovnih mest, čeprav - vam daje možnost, da vizualno potegnite skupaj, in ustvariti neurejen seznam - okostje meniju-v-obstati. In morda boste ustvarili veliko menije preveč. Lahko pull vse vrste stvari v Wordpress navigacijski meni: strani, mest, članki, kategorije, uporabniki, blokov kode, zunanje povezave, delilniki, separatorji in premešamo ter tekmo in gnezda ter urediti in prilagoditi jih v vsakem drevesno strukturo vas hoteti.
NAVT ustvarja za vas povzročilo HTML neurejen seznam. Drugi lepota NAVT je, da vam pomaga, da vstavite svoj novi jedilnik v vašo temo preko slavnega jQuery na logiko, vendar brez potrebe po spreminjanju kode! NAVT omogoča, da določite: "zamenjate # element z mojo novo NAVT menu". # bi element id ali razred pot obstoječih meni ali tag div element, ki se ustvari z vašo trenutno temo. Torej NAVT pa ta zamenjava za vas ne sili, da greš v temo kodo in da bo bolj grdo, kot to že je. Če se da vse zveni kot Trtljanje - naj vas ne skrbi - bom vas vodijo korak za korakom kmalu. Zahtevna dela NAVT za vsakogar je, da boste morali priti gor z dejanskimi CSS + slike + javascript kodo za vašo meni sami. In to je do vas, da razbrati, kje in kako vključiti te datoteke in da te stvari ustrezno zaslužiti med seboj povezane.
S spoštovanjem, ne da bi vedel nekaj jQuery + PHP + CSS +, ki imajo izkušnje s spodobno Wordpress - ta stvar je težko izvleči.
Zelo rad Poznam te stvari malo zato sem se odločil, da ugriz bullet in človeštvu vodnik svobode pri oblikovanju najboljši najboljše meniji navigacija za Wordpress. Sem samo izvedeti, potrebne vire za nekaj lepo je videti horizontalne menije CSS. Pobral sem voziti dinamično spletno stran za najboljši izbor, demo in virov.
I posvečena dan za študij in se igral z Thesis plugin NAVT. Na koncu sem ponosno narejena po meri, prilagodljivi, SEO optimizirano, več ravneh, ugnezdena nagivation strukturo za mojo Wordpress + na stran Thesis.
Seznam značilnosti multilevel, ugnezdenih navigacija Wordpress meni za Thesis Theme
(moraš ljubiti te stvari):
- Professional, čist videz in občutek.
- Podpora za vse sodobne brskalnike, vključno z MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome tako v javascript in non-javascript načine.
- Elegantno downgradable za non-javascript brskalniki. Vi meni bodo uporabni, vizualno podobne in delajo tudi za invalide javascript brskalnikih (čeprav se bo le na najvišji ravni, navigacije biti vidna in ni flyouts se bo zgodilo, seveda, kot so izdelani z javascript).
- SEO prijazne funkcije - neurejen seznam jedilnik koda je ustvarjen v HTML. Google in drugi pajki iskalnika bo lahko vaš indeks strukturo plovbe in našli povezave na notranji strani.
- Podpora za neomejeno gnezda ravni in podravni.
- Podpora za poljubnem vrstnem redu ali strani, delovna mesta (preko uporabniškega opredeljeno URI-jev), kategorije, uporabniki, bloki kodo po meri in zunanjih povezav v meniju.
- Podpora besedila, kot tudi slike, ki temelji elemente menija. (Še nisem poskusil, čeprav teh).
- Meni struktura in vsebina je vizualno nastavljiv preko admin NAVT območju.
- Compact: jQuery temelji flyouts za ugnezdeno ravni.
- Fast: jQuery pri meni je naložena iz Googlovih strežnikih (Zelo rad Thesis sam storiti enako, namesto da ga vleče na lokalni ravni). To bi pospešilo stvari malo.
- Razširljivost - Ta vrsta meni je mogoče urejati in konfigurirati kadar koli prek plugin nastavitve NAVT brez potrebe po kodiranja kjerkoli.
Včasih sem to odlično menija dinamično vožnjo portal kot osnovo. Moral sem se prilagodite javascript kodo, nekoliko pa tudi vključuje kos PHP v custom_functions.php, da bo delo z Thesis. Prav tako so številne že obstoječe strani, kategorije in delovnih mest iz moje strani se uporablja za sestavo strukture menija. Vaše spletno mesto posebnosti bodo različni - pa koncepti bo isti.
Torej, naj nadaljuje, prav?
Korak za korakom navodila za namestitev NAVT temelji ugnezdeno, customizable, ravneh, SEO prijazen
in samo navaden svež ki je videti navigacijski meni za Wordpress in Thesis Theme
- Pojdi na admin panel Wordpress. Plugins-> Dodaj novo, iskanje za "navt". Plugin bodo prikazani. Kliknite [Install], [Namesti zdaj], "Activate Plugin".
- Tools-> NAVT seznami, Inside "Navigation Group" območje našli "Ime skupine" in vpišite: "menu1" v polju, pritisnite [Create] gumb. "Menu1" površino pravokotnika si ustvarili.
Ta "menu1" območje bo glavno igrišče za meni gradnjo. Boste lahko povlečete in spustite tukaj meniju elementov. - V "premoženja" območje našel "drugi" seznamskem polju in kliknite na "Home" izbira. "Home" thingie bo videti notranjost "dodeljen" območje. Čudno, kajne? Brez skrbi, dokler deluje - in to bo za nas.
- Drag to "Home" thingie iz "premoženja" območje v "menu1" pravokotnik območje. To bo postala "Home" element v meniju.
- Ponovite korake 3-4 za nekaj strani iz "Strani" območje, kot tudi za kategorije v "kategorije" območje. Drag vse druge elemente, ki jih želim biti na meniju znotraj "menu1" pravokotnik. Lahko kliknete na straneh, kategorijah, po meri uporabnikov in nekatere elemente, kot so "seznama divider" in "kodo blok". Koda blok je kul način za dodajanje meri snippets znotraj menija.
- Lahko povlečete elemente menija znotraj "menu1" območje za preurediti njihov vrstni red.
- Lahko prilagodite hierarhični položaj vsakega menija s "<" in ">" puščice.
- S klikom na besedilo ime vsakega menija - odpre um boggling dodatno prilagoditev pogovorno za to postavko. Sem večinoma uporabljajo zamud, vendar tehnično Lahko pa nor, in začeti izdelavo slike na meniju izbire in dodajte kose kode HTML v to. Nadaljujte previdno četudi.
- Za linkless unclikable podmenijev, da bo služil kot "starši" za druge "sub-otrok" sem uporabil "Koda blok" tip. Na primer, ko prilagodite takšnega kodeksa blok točko sem vstopil v "item alias Menu" = "MemberWing" in "Enter kodo blok:" = "<a href='#'> MemberWing </ a>". Ob href = "#" bo, ne bi bilo mogoče klikniti, ampak deluje kot veljavno "matični" izbiro menija.
- Takole moja NAVT "menu1" zgraditi strukturo izgledala skoraj zaključen:
- Finish začetno gradnjo in nato kliknite na "orodje" ikono, da prilagodite vaš jedilnik strukturo:
- To bo odprlo pogovorno okno z zavihki 4: Možnosti, Display, CSS, tema.
- Pojdi na "Options" jeziček in preverite, ali je vse nenadzorovano in "Ime skupine" pravi: "menu1"
- Pojdi na "Display" jeziček in preverite, ali je vse na "navigacijske Prikaži skupina za ..." območje se preverja [x]. Pustite ostalo v privzete.
- Pojdi na "CSS" jeziček in izberite gumb (x) "ne uporablja CSS razrede".
- Pojdi na "Theme" zanka in izpolnite v kot, da:
Vstavi v "Add tags pred ..." area to kodo:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Vstavi v "Add tags po ..." area to kodo:
<br style='clear: left' /></div> - Pritisnite [Save / close] gumb
- V tej stavbi meniju točko znotraj plugin možnosti NAVT je končana.
Zdaj je čas, da malo intonirati za teme Thesis zadobiti to pripravljena. Za to moramo dodati nekaj datotek po meri - CSS in javascript, da pripada meni in posodobitev custom_functions.php Thesis " - Prenesite celoten nabor datotek tukaj.
- Odpreti patentno zadrgo svod. Če ste posodobili svoje custom_functions.php z vašim prilagoditve - morate, da se ju združi z moje stvari. Pustite, da bom do tebe.
Če še niste dotaknil it - vas prosimo, da prepiše z moje. Prosimo, upoštevajte: jaz raje položaj meniju pod glavo spletne strani (privzeto je zgoraj) - to moje prilagoditev vključiti tudi to prednost. - Upload arhiv, vključno z vsemi podmape in datoteke, pod vašo temo Thesis "po meri" imenik, kot to:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Nisem dotaknil custom.css - Raje voditi meni specifične CSS v okviru svojih mestih, da bi se izognili ustvarjanju nered znotraj custom.css - Na tej točki lahko ponovno naložite vašo spletno stran in si oglejte nove lepe nove več ravneh, ugnezdena, SEO optimizirana menija.
- Boste lahko vedno iti nazaj na NAVT nastavitve in prilagodite vaš jedilnik z večjo izbiro in preusmeril nič. To se bo odrazilo tudi na spletnem mestu samodejno.
Cesti ...
Ta Tutorial vključena ustvarjalno primer ene vrste menija. Sem se igral z drugo - samo, da vidim, kako temne barve meniju bi izgledati takole:
Thesis tema - multilevel ugnezdena CSS jedilnik - temno paleto
Menim, da je zelo lepo. Obstaja veliko več navigacijski vzorci so na voljo na Dynamic Drive - vsi so mogoče prilagoditi za Thesis Wordpress in druge teme z nekaj napora:
Dynamic Drive Horizontal menije
Upam, da boste našli to tutorski koristno in uporabno. Kot sem rekel, da je mogoče prilagoditi kateri koli od teh menijev za Thesis - ki je glede na čas in željo, da to uresniči.
Lahko bi to delo za vas na podlagi pogodbe. Samo izbrati meniju želite, stik z mano in jaz bom delo na kodo in navodila za vašo spletno stran.
$ 20
In seveda, če ste do objekta super SEO optimizirana premije wordpress članstvo portal - najboljša rešitev za to:
Thesis Theme + MemberWing članstvo plugin + samozaposlene gostila Wordpress seveda.
