Potraga za savršen meni ...

To je dio 1 od tutorial
Dio 2. ovoga udžbenik uči kako izgraditi vertikalne meni + tamne palete boja za horizontalno jedna

Sam odlučio da se rad temu, jer je jedan od mojih klijenata mene informirani o nekompatibilnosti između Thesis i moje članstvo web wordpress čep MemberWing. Ja ga fiksne i onda odlučio je da se bliži pogled na rad i zaista smeta gledati video na naslovnici rad glavne stranice - Diythemes.com.
Ono što me najviše impresionirao je pažnju na detalj, korisnik prijateljstvo i najviše od svega - SEO značajke koje su tako dobro misli.
MemberWing članstvo čep je dizajniran od temelja za članstvo web lokacije koje bi trebale povući SEO soka koliko god je to moguće. Tako sam platio puno pažnju mnoštva SEO poboljšanja i savršenosti u MemberWing. Mnogi od mojih vlastitih klijenata pitaju o raznim temama za korištenje i imaju teme koja je bila tako dobro SEO optimiziran iz duboko će biti odličan fit portal za članstvo poduzetnike.

Kombiniranje SEO ovlasti MemberWing sa SEO ovlasti Thesis teme će dati najbolje mogućnosti za rangiranje mojih klijenata. Tako sam dobio Thesis i igrao s njim za neki dan.

To je odlična tema na sve načine. Orijentacija dio je iako je malo ograničen u funkciji. Polazeći od Thesis 1.5 + to je samo za jednu razinu izbornika. Moja želja je obično biti u mogućnosti to prilagoditi orijentacija onoliko koliko je potrebno. Neke web stranice imaju tek nekoliko stranica, mnogi drugi su tone od statičkih stranica + zillions članaka / postove + puno kategorija.
Tako je u idealan svijet s priliku za stvaranje ljepuškast hijerarhijski organizirani user friendly navigacijskom izborniku je potrebno. Thesis pravo isključiti šišmiš ima lijep orijentacija, ali primijetio sam da su svi Thesis-based web stranice su izgleda kao blizanke. Prilagodba Thesis navigacijskom izborniku stvarno nije lako tako da većina ljudi samo ga ostavite kako jest. Ne postoji način da se promijeni redoslijed kategorije u izborniku ili ih u položaj između stranica. I opet, sposobnost to stvoriti ugniježđenih izbornik strukture nedostaje. Tako sam odlučio vidjeti što se može učiniti o tome.
Nakon što je težak oko pola tuceta menu / plugins navigacija vezanih JA zalazak moj izbor na Wordpress Plugin List Navigacija NAVT.
NAVT čep je u suštini neuređen lista generator sa super fancy i malo teško lik untraditional admin interface. Što zabludu o tome da je ona zapravo ne stvaraju fancy izgleda izbornika samo po sebi. To čini i najteži dio posla iako - daje vam mogućnost da vizualno sarađivati, bez reda i generirati popis - kostur Vašeg menu-to-biti. A vi svibanj stvoriti mnoge izbornike previše. Vi svibanj povući sve vrste Wordpress stvari u navigacijskom izborniku: stranice, postovi, članci, kategorije, korisnike, broj blokova, vanjski linkovi, razdjelnike, separatori i kombiniranje i usklađivanje i gnijezdo i organizirati te ih prilagoditi na bilo koji stablo kao struktura te želeti.
NAVT izrađuje za Vas posljedicu HTML neuređen liste. Drugi ljepote NAVT je da pomaže vam da umetnete svoj novi izbornik na temu putem poznatog jQuery osnovi logike, ali bez potrebe da promijeni bilo koji broj! NAVT omogućava vam da odredite: "# zamijeniti ovaj element s mojim novim NAVT meni". # element mogao biti identifikacija ili klasa put postojećih izbornika ili div element oznaka, koja se generira vaš trenutni temu. Tako se ovaj NAVT zamjena za vas, bez prisiljavajući vas da ući kod teme i čine ga neurednim nego je to već. Ako je to sve zvuči kao frfljanje - ne brinite - Ja ću vas voditi korak po korak uskoro. Izazovan dio NAVT za svakoga je da ćete morati dogoditi se gore sa stvarnim CSS + slike + JavaScript kôd za izbornika sebe. I to je na vama je da shvatite gdje i kako integrirati te datoteke i učinite to stvari ispravno dobiti povezan zajedno.
S poštovanjem bez znajući neke jQuery + CSS + PHP + imaju pristojan iskustvo sa Wordpress - ovo stvar je teško povući.
Rado Znam da ove stvari malo pa sam odlučio gristi metak i voditi čovječanstvo da sloboda u zgradi najbolji od najboljih navigacija izbornicima za Wordpress. Ja samo je potrebno da biste saznali izvora za neke ljepuškast horizontalne CSS izbornika. JA ubran dinamičke web stranice voziti za njihov najbolji izbor, demo i izvora.

Sam posvetio dan za proučavanje rad i igra sa NAVT čep. Na kraju sam ponosno stvoren običaj, fleksibilan, SEO optimiziran, multilevel, nested nagivation struktura za moj Wordpress + rad temelji stranice.

Popis značajki multilevel, nested Wordpress navigacijskom izborniku za Thesis Theme
(imaš u ljubavi ovoj stvari):

• Stručan, čist izgled i dojam.
• Podrška za sve moderne preglednicima, uključujući i 6,7 Firefox, Opera, Safari, Firefox 3.x, Google krom u oba JavaScript and non-javascript skroman.
• Gracefully downgradable for non-javascript preglednicima. Te će se izbornik neće moći koristiti, vizualno sličan i rad čak i za JavaScript onemogućen preglednicima (iako samo top level orijentacija će biti vidljiva i nema flyouts će se dogoditi, naravno, kao što su oni koje je JavaScript).
• SEO prijazan mogućnosti - neuređen popisu izbornika kôd je generirana unutar HTML-a. Google i druge tražilice spiders moći će se indeks vaše navigacijske strukture i pronaći linkove na unutarnjim stranicama.
• Podrška za neograničen gniježdenje razine i sublevels.
• Podrška za bilo koji red ili stranice, postove (kroz korisnički definirane URI), kategorije, korisnike, prilagođenog koda blokova i vanjske poveznice unutar izbornika.
• Podrška teksta, kao i slika na temelju elemenata menu. (Imam još da ti ipak probati).
• Meni struktura i sadržaj je vizualno podesiva putem NAVT admin područje.
• Kompaktan: jQuery osnovi flyouts za nested razine.
• Brzi: jQuery za meni se učitava s Googleovim serverima (volio bih Thesis sebe da učine isto umjesto da ga vuče lokalno). To bi ubrzati stvari malo.
• Skalabilnost - Ovaj tip izbornik je moguće uređivati i podesivu u bilo koje vrijeme putem NAVT čep postavki bez potrebe za kodiranje bilo gdje.

JA iskorišten ovaj odličan meni iz dinamičke voziti portala kao baza. Morao sam prilagoditi JavaScript kod zalogaj, kao i uključuju komad PHP-u custom_functions.php to izraditi Internet funkcionirati sa Thesis. Također broj već postojećih stranica, kategorije i postove sa moje stranice su se koristili za okupljanje izbornik strukture. Vaše web stranice specifičnosti će biti drugačija - ali koncepti će biti isti.
Tako ćemo postupiti, ćemo?

Korak po korak upute za postavljanje NAVT-based nested, prilagodljiv, multilevel, seo friendly
i pravedan ravan svjež obličje navigacijskom izborniku za Wordpress i Thesis Theme

1. Idi na Wordpress admin panel. Plugins-> Dodaj novi, potraga za "navt". Čep htijenje biti predočen. Kliknite [Instalacija], [Instaliraj sada], "ActiveX Plugin".
2. Alati-> NAVT popisima, Inside "Navigacijska skupina" područje pronaći "naziv grupe" i upišite: "menu1" u polje, pritisnite [Create] tipku. "Menu1" pravokutni prostor dobio stvorio.
   Ovaj "menu1" područja bit će glavni izbornik igralište za izgradnju. Bit ćete da povučete i ispustite ovdje Vaš izbornik elemenata.
3. U "imovina" pronaći područje "drugog" rub i kliknite na "Home" izbor. "Home" thingie će se pojaviti unutar "dodijeljeno" područje. Koban, eh? Bez brige, sve dok to radi - i to će za nas.
4. Povucite ovaj "Home" thingie iz "imovine" u prostoru "menu1" površine pravokutnika. Ona će postati "Home" stavku u izborniku.
   • Ponovite korake 3-4 za neke stranice iz "Pages" području, kao i za kategorije u "kategorije" područje. Povucite bilo koje druge stavke koje želite da se na jelovniku iznutra "menu1" pravokutnik. Vi svibanj kliknite na stranicama, kategorije, korisnike i neki običaj elemente kao što su "šestar lista" i "kod blok". Kod blok je super način za dodavanje prilagođene isječke unutar izbornika.
   • Vi svibanj povucite stavke izbornika unutar "menu1" površina prerasporediti njihov red.
   • Vi svibanj prilagoditi hijerarhijski položaj svake stavke s izbornika "<" i ">" strelice.
   • Klikom na tekst naziv svake stavke izbornika - otvara um boggling dodatni dijaloški prilagodbu za ovu stavku. Ja uglavnom koriste zadane postavke, ali tehnički možete šiziti i početak stvaranje image-based izbornik izbor i dodati komade HTML code u nju. Nastavite s oprezom ipak.
   • Za linkless unclikable podizbornika koja će služiti kao "roditelji" za druge "pod-djece" Koristio sam "Code blok" tipa. Na primjer, kada prilagođavanjem takav predmet blok koda sam ušao umjesto "Meni predmet alias" = "MemberWing" i za "Unesite kod blok:" = "<a href='#'> MemberWing </ a>". Vlasništvo href = "#" učinit će ga neće kliknuti, ali djeluje kao valjana "roditelj" meni izbor.
5. Evo kako moja NAVT 'menu1' izgraditi strukture izgledao gotovo završena:
   
6. Završiti početni zgrada i onda kliknite na "gear" ikonu da prilagodite Vaš izbornik strukture:
   
7. To će otvoriti dijalog sa 4 tabulatori: Opcije, Zaslon, CSS, temu.
   1. Idite na "Options" tab i osigurati sve je nesmetan i "Group Name", kaže: "menu1"
   2. Idite na "Display" kartica i osigurati sve na "Prikaži navigacija grupa na ..." područje je označeno [x]. Ostavite ostatak na zadane postavke.
   3. Idite na "CSS" karticu i odaberite radio gumb (x) "Ne primjenjuje CSS klasama".
   4. Idite na "Theme" kartica i ispunite ga u ovakav:
      
      Umetni u "Add tags prije ..." područje ovaj kod:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Umetni u "Add tags nakon ..." područje ovaj kod:
      <br style='clear: left' /></div>
   5. Pritisnite [spremanje / close] gumb
8. U ovoj zgradi točki izbornika unutar NAVT plugin opcijama je kompletan.
   Sada je vrijeme za napraviti malo podesiti za rad temu to get ready. Jer da je potrebno dodati malo mušterija kartoteka - CSS i JavaScript koja pripada meni i modernizirati rad 'custom_functions.php
9. Preuzmite kompletan skup datoteka ovdje.
10. Unzip arhiva. Ako ste ažurirali custom_functions.php s vaše prilagodbe - morate ih spojiti sa moje stvari. Ja ću ostaviti ga do vas.
    Ako niste ga dotaknuo - slobodno ga prepisati sa mina. Napominjemo: I do željene pozicije izbornika ispod zaglavlja web stranice (zadana je gore) - tako da je moj prilagođavanje uključeno ovu postavku kao dobro.
11. Upload arhiva uključujući sve poddirektorije i datoteke pod svoj rad temu 'custom' direktoriju, ovako:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Nisam dodirnuo custom.css - Radije bih držati menu-specifične CSS pod svoje lokacije kako bi se izbjeglo stvaranje nered unutar custom.css
12. U ovom trenutku vam svibanj ponovno učitati vaše web stranice i pogledajte nove prekrasne nove multilevel, uklopljeni, SEO optimiziran izbornika.
13. Vi svibanj uvijek vratiti NAVT postavke i prilagoditi izbornik sa više izbora ili premještanje ništa. To će se odraziti na live stranice automatski.

Put u budućnost ...

Ovaj udžbenik uključuje kreativni primjer jedna vrsta izbornika. Igrao sam s još jedno - samo da vidim kako tamne boje izbornik će izgledati ovako:

Thesis temu - multilevel nested CSS menu - tamna paleta

Mislim da je prilično lijepo. Postoji mnogo više navigacijski uzoraka na Dynamic Drive - sve ih je moguće prilagoditi za rad i druge Wordpress tema s malo truda:

Dynamic Drive Horizontal Jelovnici

Nadam se da ćete naći ovaj udžbenik koristan i korisno. Kao što sam rekao, to je moguće prilagoditi bilo koji od ovih izbornika za rad - to je dao vremena i želje da se to dogodilo.

JA mogao obaviti taj posao za vas na temelju ugovora. Dovoljno je odabrati izbornik želite, kontaktirajte me i ja ću raditi na broj i upute za Vašu web stranicu.

$ 20

I naravno, ako si do zgrade super SEO optimiziran nagrada portal wordpress članstvo - najbolje rješenje za to:
Thesis Theme + MemberWing članstvo plugin + self ugostila Wordpress naravno.

Označene kao: CSS menu za WordPress, tema teza, teza temu hijerarhijski izbornici, teza temu multilevel meni, teza temu nagivation, teza temu ugniježđena izbornici, teza temu udžbenik, css izbornika wordpress, wordpress nested izbornik