Potraga za savršenim izbornik ...

To je dio 1 od tutorial
Dio 2 ovog tutorial uči kako izgraditi vertikalni izbornik + tamna paleta boja za horizontalne jednom

Odlučio sam da se rad temu , jer je jedan od mojih klijenata me obavijestio o kompatibilnost ispostavljati između rad i moje WordPress čep članstvo stranica MemberWing. Sam ga fiksni, a potom je odlučio da se bliži pogled na rad i zapravo smeta gledati video na naslovnici Glavna teza stranica - Diythemes.com .
Ono što me najviše dojmilo je pozornost na detalje, 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 stranice koje bi trebao povući koliko SEO sok što je više moguće. Tako sam platio puno pozornost na mnoštvo SEO poboljšanja i savršenosti u MemberWing. Mnogi od mojih vlastitih klijenata su pitali o različitim temama za korištenje i ima temu koja je tako dobro SEO optimizirane iz duboke unutrašnjosti će biti izvrsna odgovara za članstvo portal poduzetnike.

Kombinirajući SEO ovlasti MemberWing sa SEO ovlasti rad temu bi najbolje rang mogućnosti za moje klijente. Tako sam dobio rad i igrao s njim jedan dan.

To je izvrsna tema na sve načine. Navigacija dio iako je malo ograničen u funkciji. Polazeći od 1,5 Teza + to je za jednu razinu izborniku. Moja uobičajena je želja biti u mogućnosti prilagoditi navigaciju koliko je potrebno. Neke web stranice imaju samo nekoliko stranica, mnogi drugi su tona statičkih stranica + zillions članaka / postova + puno kategorija.
Tako je u idealnom svijetu imaju priliku za stvaranje lijepo izgleda hijerarhijski organizirana user friendly navigacijskom izborniku je potrebno. Teza pravo isključiti šišmiš je lijep navigaciju, ali sam primijetio da su svi Teza se temelji web stranice izgledaju kao blizanke. Prilagodba izbornika rad navigacija zapravo i nije lako tako da većina ljudi jednostavno ostavite kao što je. Ne postoji način da promijeni redoslijed kategorija u izborniku ili ih poziciju između stranica. I opet, mogućnost stvaranja ugniježđena izbornik strukture nedostaje. Tako sam odlučio vidjeti što se može učiniti o tome.
Nakon što je težak oko pola tuceta izbornik / navigacija u svezi dodataka mogu postaviti moj izbor na Wordpress Plugin Nalazite Popis NAVT .
NAVT čep bitno je neuređen popis generator sa super fancy i malo teško za shvatiti untraditional admin sučelje. Što zabludu o tome je da se zapravo ne stvaraju ukrasni potrazi izbornika sama po sebi. To ne najteži dio posla, iako - daje vam mogućnost da vizualno povući zajedno, i stvoriti neuređen popis - kostur izbornika-to-biti. A možete stvoriti mnoge izbornike previše. Možete povući sve vrste WordPress stvari u navigacijski izbornik: stranice, postove, članke, kategorije, korisnike, kod blokova, vanjski linkovi, razdjelnika, separatori i miješati i sparivati ​​te gnijezdo i organizirati te ih prilagoditi na bilo stabla kao strukture vas želite.
NAVT stvara za vas rezultirali HTML neuređen popis. Drugi ljepotu NAVT je da pomaže vam da umetnuti novi izbornik u temu putem poznatog jQuery temelju logike, ali bez potrebe da promijeni bilo koji broj! NAVT vam omogućuje da odredite: "zamijeniti # element s mojim novim NAVT izbornik". # Elementa mogu biti osobne iskaznice ili klasa put postojećih izbornika ili div elementa oznaku koja se generira trenutni temu. Dakle, NAVT to zamjena za vas bez prisiljavajući vas da ide u temu kod i čine ga više neuredan nego što već je. Ako se to sve zvuči kao nerazumljive - ne brinite - Ja ću vas voditi korak po korak uskoro. Izazovan dio NAVT za sve je da ćete morati da se sa stvarnim CSS + slike + JavaScript kôd za izbornika sebe. I to je do vas shvatiti gdje i kako integrirati te datoteke i napraviti ove stvari pravilno se povezati zajedno.
S poštovanjem, bez znajući jQuery + neki PHP + CSS + imaju pristojne iskustva sa WordPress - to što je teško povući.
Rado znam ove stvari malo pa sam odlučio zagristi metak i vodič čovječanstvo na slobodu u izgradnji najbolji od najboljih navigaciju izbornike za Wordpress. Ja samo potreban da bi saznali za neke izvore lijepo izgleda horizontalna CSS izbornika. Ubrao sam dinamičke vožnje web stranica za svoje najbolje odabire, demonstracije i izvora.

Sam posvetio dan za proučavanje rada i igrati s NAVT čep. Na kraju sam ponosno stvorio običaj, fleksibilna, SEO optimiziran, višerazinski, smješteno nagivation strukturu za moj Wordpress + rad temelji mjestu.

Popis značajke višerazinski, smješteno Wordpress navigacija izbornik za rad temu
(Moraš voljeti ove stvari):

• Stručan, čist izgled i dojam.
• Podrška za sve moderne preglednike, uključujući MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome u oba JavaScript i ne-JavaScript načina.
• Gracefully downgradable za ne-JavaScript preglednika. Vi izbornik će biti korisna i vizualno slični i rad čak i za osobe s invaliditetom JavaScript preglednika (iako samo vrhunski navigacija bit će vidljivi i nema flyouts će se dogoditi, naravno, kao što su oni napravili za JavaScript).
• SEO friendly značajke - neuređen popis izbornika kod se generira unutar HTML-a. Google i druge tražilice spiders će moći indeksirati vaše navigacijske strukture i pronaći linkove na unutarnje stranice.
• Podrška za neograničen gniježdenje razine i podrazine.
• Podrška za bilo kojim redoslijedom ili stranice, postove (putem korisnički definirani URI), kategorije, korisnike, prilagođeni kod blokova i vanjske linkove u izborniku.
• Podrška teksta, kao i slika Izbornik temeljen elemenata. (Imam još probati ovim ipak).
• Izbornik strukturi i sadržaju je vizualno podešavati preko NAVT admin područje.
• Kompaktni: jQuery temelji flyouts za ugniježđena razinama.
• Brzi: jQuery za izbornika je učitan s Googleovim poslužiteljima (volio bih rad se da učine isto, umjesto da ga vuče na licu mjesta). To bi ubrzati stvari malo.
• Skalabilnost - Ova vrsta je izbornik uređivati ​​i podesiv u bilo koje vrijeme putem NAVT plugina postavke bez potrebe kodiranja bilo gdje.

Koristio sam ovaj izvrstan iz izbornika dinamički disk portal kao bazu. Morao sam prilagoditi JavaScript koda malo, kao i uključuju komad PHP u custom_functions.php kako bi se rad s rad. Također broj već postojećih stranica, kategorije i postove od moje stranice korišteni su za sastavljanje strukture izbornika. Vaša specifičnosti site će biti drugačiji - ali pojmovi će biti isti.
Pa neka nastavi, će mi?

Korak po korak upute za postavljanje NAVT -based ugniježđeni, prilagodljiv, višerazinski, SEO prijateljskih
i samo plain svjež obličje navigacijski izbornik za Wordpress i rad Teme

1. Idi na WordPress Admin panel. Dodaci-> Dodaj novi, potraga za "navt". Plugin će biti prikazan. Kliknite [Instalacija], [Instaliraj sada], "Aktiviraj dodatka".
2. Alati-> NAVT popisi, Inside "Navigacija grupe" područje pronaći "naziv grupe" i upišite: "menu1" u polje, pritisnite [Create] tipku. "Menu1" pravokutnik površine dobio stvorio.
   Ovaj "menu1" područje će biti glavni igralište za izgradnju izbornik. Vi ćete biti povučete i ispustite ovdje izbornika elemenata.
3. U "imovina" područje naći "druge" listbox i kliknite na "Home" izbor. "Home" thingie će se pojaviti unutar "nerazvrstane" područje. Weird, eh? Bez brige, sve dok to radi - i to će za nas.
4. Povucite ovaj "Home" thingie iz "imovine" područje u "menu1" pravokutnik površine. Ona će postati "Home" stavku u izborniku.
   • Ponovite korake 3-4 za neke stranice iz "stranice" području, kao i za kategorije u "kategorije" području. Povucite bilo koje druge stavke koje želite da se na jelovniku u "menu1" pravokutnik. Možete kliknuti na stranicama, kategorije, korisnike i neki prilagođeni elementi kao što su "popis šestar" i "kod blok". Kod blok je cool način za dodavanje prilagođene isječke unutar izbornika.
   • Možete povucite stavke izbornika unutar "menu1" području preurediti njihov redoslijed.
   • Možete podesiti hijerarhijski položaj svaku stavku na izborniku s "<" i ">" strelice.
   • Klikom na tekst naziva svaku stavku na izborniku - otvara um boggling dodatne prilagodbe dijalog za tu stavku. Ja se uglavnom koristi zadane postavke, ali tehnički možete šiziti i početi zarađivati ​​slika Izbornik temeljen izbora i dodati komade HTML code u njega. Nastavite s oprezom ipak.
   • Za linkless unclikable podizbornika koji će poslužiti kao "roditelja" za druge "sub-djeci" sam "Kod blok" tipa. Na primjer, kada prilagođavanje kao stavku kod blok sam ušao za "stavku izbornika alias" = "MemberWing" i za "Unesite kod blok:" = "<a href='#'> MemberWing </ a>". Nakon href = "#" učinit će ga nije moguće kliknuti, ali djeluje kao valjana "roditelj" izbornika izboru.
5. Evo kako moj NAVT 'menu1' izgraditi strukturu izgledao gotovo završena:
   
6. Završi početne zgrade i potom kliknite na "opremu" ikonu da biste prilagodili strukturi izbornika:
   
7. To će otvoriti dijalog s 4 kartice: Mogućnosti, Prikaz, CSS, Teme.
   1. Idite na "Options" tab i pobrinite se da je sve označeno i "naziv grupe", kaže: "menu1"
   2. Idite na "Display" tab i provjerite sve na "Prikaži navigacija skupine 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 "temu" i ispunite ga kao da:
      
      Umetnite u "Dodajte oznake prije ..." područje ovaj kod:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Umetnite u "Dodavanje oznaka, nakon ..." područje ovaj kod:
      <br style='clear: left' /></div>
   5. Pritisnite [Save / zatvaranje] tipku
8. U ovom trenutku izgradnje izbornika iz NAVT dodatak opcija je kompletan.
   Sada je vrijeme da se malo podesiti za rad temu da ga spremni. Za to nam je potrebno dodati nekoliko prilagođenih datoteka - CSS i JavaScript koji pripada meni i ažuriranje rad 'custom_functions.php
9. Preuzmite kompletan set datoteka ovdje .
10. Raspakirajte arhivu. Ako ste ažurirali custom_functions.php sa vaše prilagodbe - morate ih spojiti s mojom stvari. Ja ću ga ostaviti do vas.
    Ako niste dotaknuo - slobodno ga prepisati sa moje. Imajte na umu: Ja sam radije za poziciju izbornika ispod zaglavlja web stranice (zadano je gore) - tako da je moj prilagodbe uključili ovu sklonost, kao dobro.
11. Učitaj arhiva, uključujući sve poddirektorije i datoteke pod Teza temu 'custom' direktoriju, kao što je ovaj:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Nisam dotaknuo custom.css - ja radije držati izbornik specifičnih CSS pod vlastitim mjestima 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 lijepe nove višerazinski, ugniježđena, SEO optimizirane izbornika.
13. Uvijek može se vratiti na NAVT postavke i prilagoditi izbornik s više izbora i položaj ništa. To će se odraziti na live stranicama automatski.

Put naprijed ...

Ovaj tutorial uključuje kreativni primjer jedne vrste izbornika. Igrao sam s još jednom - samo da vidite kako tamne boje izbornik će izgledati ovako:

Teza temu - multilevel ugniježđena CSS izbornika - tamna paleta

Mislim da je prilično lijepo. Postoji mnogo više navigacijskih uzoraka na dinamički disk - svi od njih su moguće prilagoditi za rad i druge WordPress Themes uz malo truda:

Dinamički Drive Horizontalna izbornici

Nadam se da ćete naći ovaj tutorial koristan i korisne. Kao što sam rekao, to je moguće prilagoditi bilo koji od ovih izbornika za rad - to je dano vrijeme i želju da se to dogodilo.

Ja mogu to učiniti posao za vas na temelju ugovora. Samo odaberite izbornik vam se sviđa, kontaktirajte me i ja ću raditi na kod i upute za vaše web stranice.

20 $

I naravno, ako ste do zgrade super SEO optimiziran premija WordPress članstvo portal - najbolje rješenje za to:
Teza Tematski + MemberWing članstvo plugin + sebe domaćin Wordpress naravno.

comments } { 15 komentara }