Quest par perfektu menu ...

Tas ir apmācība 1 daļa
Šo pamācību 2 daļas māca, kā veidot vertikālu menu + tumšā krāsu paleti horizontāla

Es nolēmu, lai saņemtu Thesis tēmu , jo viens no maniem klientiem informēja mani par saderības problēmas starp Thesis un mana wordpress biedru vietā spraudnis MemberWing. Es noteikti to un pēc tam nolēma pieņemt tuvāk apskatīt Thesis un faktiski bothered skatīties video uz priekšējā lapā galveno Thesis site - Diythemes.com .
Kas pārsteidza mani visvairāk ir pievēršot uzmanību detaļām, lietotājdraudzīgumu un pats galvenais - SEO iezīmes, kas ir tik labi atcerējās.
MemberWing dalība spraudnis tika izstrādāta no zemes līdz dalības vietnes, kas būtu nepieciešams, lai vilktu tik daudz SEO sula, kā iespējams. Tātad, I izmaksā daudz uzmanību uz SEO uzlabojumus daudzās un perfections in MemberWing. Daudzi no manu klienti jautā par dažādām tēmām, lietot un kuru temats bija tik labi SEO optimizēta no dziļi iekšā būtu lieliska fit par dalību portāla uzņēmējiem.

Apvienojot SEO pilnvaras MemberWing ar SEO pilnvarām Promocijas darba tēma dotu vislabākos ranking iespējas maniem klientiem. Tāpēc es got Thesis un spēlēja ar to dienu.

Tā ir lieliska tēma visos veidos. Navigācijas daļu, tas gan ir nedaudz ierobežota funkcija. Sākot ar 1,5 darbs + tas ir viens līmeņa izvēlnē tikai. Mani parasti vēlme ir, lai varētu pielāgot navigācijas tik daudz, cik nepieciešams. Dažas vietas ir tikai dažas lapas, daudzi citi ir t statiskas lapas + zillions raksti / amatu + daudz kategorijām.
Tātad ideālā pasaulē, kam iespēja izveidot nice looking hierarhiski organizētas lietotājam draudzīgu navigācijas izvēlne ir obligāta. Promocijas darba tiesības pie nūja ir labs meklē, navigācija, bet es pamanīju, ka visi Thesis bāzes tīmekļa vietnes ir skatoties, piemēram dvīņi. Pielāgošana darbs navigācijas izvēlni, nav īsti viegli, lai lielākā daļa cilvēku vienkārši atstāt to kā ir. Nav veids, kā mainīt secību kategorijām izvēlnē vai pozīciju tos starp lappusēm. Un atkal, spēja radīt Nested izvēlnes struktūru ir pazudis. Tāpēc es nolēmu, lai redzētu, ko varētu darīt par to.
Pēc mēģina apmēram puse duci izvēlni / navigāciju saistītās plugins es noteikt manu izvēli par WordPress Navigation saraksts Plugin NAVT .
NAVT spraudnis būtībā Nekārtots saraksts ģenerators ar super fancy un mazliet grūti ciparu netradicionālu admin interfeisu. Kas maldinoša par to, ka tas nav reāli radīt iedomātā meklējat izvēlnes ar sevi. Tas cieta daļa no darba, lai gan - dod Jums iespēju vizuāli pull kopā un radīt Nekārtots saraksts - skelets savu ēdienkarti-to-be. Un jūs varat izveidot daudz izvēlnēs too. Jūs varat pull visa veida WordPress stuff navigācijas izvēlni: lapas, ziņojumi, raksti, kategorijas, lietotāji, kodu bloki, ārējās saites, dalītāji, atdalītāji un samaisa un sērkociņu un ligzdu un organizēt un pielāgot tos jebkurā koka līdzīgu struktūru, jūs vēlas.
NAVT rada jums izraisīja HTML Nekārtots saraksts. Otrā skaistums NAVT ir, ka tas palīdz jums, lai ievietotu savu jauno izvēlni savā tēmu pa slaveno JQuery pamatā loģika, bet nav vajadzības mainīt jebkuru kodu! NAVT ļauj norādīt: "aizstāt šo # elements ar savu jauno NAVT izvēlni". # Elementa summa varēja būt id vai klases ceļa esošās izvēlnes vai div elementu tagu, kas tiek radīts ar savu pašreizējo tēmu. Tātad NAVT tas aizstātu jums, neliekot jums doties uz tēmu kodu un padarīt to netīrs, nekā tā jau ir. Ja tas viss izklausās līdzīgi buldurēšana - neuztraucieties - es tev palīdzēs jums soli pa solim drīz. Izaicinājums ir NAVT visiem ir, ka jums ir jānāk klajā ar faktisko CSS + images + javascript kodu jūsu menu pats. Un tas ir atkarīgs no jums, lai noskaidrotu, kur un kā integrēt šos failus un veikt šo stuff pareizi get savienots kopā.
Ar cieņu, nezinot JQuery + PHP + CSS + ņemot cienīgu pieredzi ar WordPress - šī lieta ir grūti pull.
Labprāt Es zinu, šis stuff mazliet tāpēc es nolēmu BITE aizzīmju un vadītu cilvēces brīvību, veidojot labāko no labākajiem navigācijas izvēlnēm, lai WordPress. Es tikai nepieciešama, lai uzzinātu avotiem daži nice meklē horizontālu CSS izvēlnēm. I noplūktiem Dynamic Drive mājas lapā par viņu labāko izvēli, demonstrācijas un avotiem.

Es veltīta diena, lai izpētītu Thesis un spēlēties ar NAVT spraudni. Beigās es lepni izveidojis pielāgotas, elastīgu, SEO optimizēta, daudzlīmeņu, ligzdotas nagivation struktūru manu WordPress + darbs pamatā vietā.

Sarakstu iezīmes daudzlīmeņu, ligzdotu WordPress navigācijas izvēlni Thesis Theme
(Tev mīlēt šo stuff):

• Profesionāla, tīru izskatu un noskaņu.
• Atbalstu visām mūsdienu pārlūkprogrammām, ieskaitot MSIE 6,7, Opera, Safari, Firefox 3.x, Google gan javascript Chrome un bez javascript režīmos.
• Graciozi downgradable kas nav javascript pārlūkiem. Jums izvēlne būs lietojams, vizuāli līdzīgi un strādā pat javascript invalīdiem pārlūkus (lai gan tikai augšējā līmeņa navigācijas būs redzams un nav flyouts notiks, protams, kā tie tiek veikti ar javascript).
• SEO draudzīgas funkcijas - Nekārtots saraksts menu kods ir radīti HTML. Google un citas meklētājprogrammas zirnekļi varēs indeksēt jūsu navigācijas struktūru un atrast saites uz iekšējo lapas.
• Atbalsts neierobežotu ligzdošanas līmeņiem un sublevels.
• Atbalsts jebkuru rīkojumu vai lapas, stabi (via lietotāja definēts URI), kategorijas, lietotājiem, pielāgotu kodu blokiem un ārējām saitēm izvēlnē.
• Atbalsts teksta, kā arī attēlu Izvēlne, kuras pamatā elementiem. (Man ir vēl mēģināt šīs gan).
• Izvēlne struktūra un saturs ir vizuāli regulējams ar NAVT admin jomā.
• Compact: JQuery, pamatojoties flyouts par Nested līmeņiem.
• Fast: JQuery par menu tiek ielādēta no Google serveriem, (man patiktu darbs sevi darīt to pašu, nevis velkot to uz vietas). Tas varētu paātrināt lietas mazliet.
• Mērogojamība - Šī izvēlne veids ir rediģējamu un konfigurējamas jebkurā laikā, izmantojot NAVT spraudnis iestatījumus, bez nepieciešamības kodēšanas jebkur.

Es mēdzu šo lielisko izvēlni no Dynamic Drive portālā, kā bāzi. Man bija pielāgot javascript kodu, mazliet kā arī aptver gabalu no PHP uz custom_functions.php, lai tā darbotos ar Thesis. Arī iepriekš esošās lapas, kategorijas un amatu no manu portālu numurs tika izmantoti, lai savāktu izvēlnes struktūra. Jūsu vietne specifiku būs atšķirīgi - bet jēdzieni būs tāds pats.
So let turpināt, ir mums?

Soli pa solim instrukcijas, lai setup NAVT bāzes ligzdots, customizable, daudzlīmeņu, SEO draudzīgas
un tikai plain cool meklē navigācijas izvēlni, lai WordPress un Thesis Theme

1. Iet uz WordPress admin panelī. Plugins-> Pievienot jaunu meklējiet "navt". Spraudnis tiks parādīta. Noklikšķiniet uz [Install], [Install now], "Aktivizēt Plugin".
2. Tools-> NAVT Lists, Inside "Navigācija Group" zona atrast "grupas nosaukumu" un ierakstiet: "menu1" laukā, spiediet [Izveidot] pogu. "Menu1" taisnstūra laukums got izveidots.
   Šī "menu1" platība būs galvenās rotaļu izvēlnes būvniecībai. Jums tiks velkot un nometot šeit izvēlnes elementus.
3. In "aktīvi" zona atrast "citu" ListBox un noklikšķiniet uz "Home" izvēli. "Mājas" thingie parādīsies iekšpuses "nav piešķirts" platību. Dīvaini, vai nē? Neraizējieties, ja vien tas darbojas - un tas mums.
4. Velciet šo "Mājas" thingie no "aktīvi" apgabalu "menu1" taisnstūra apgabalā. Tā kļūs par "Home", posteņa izvēlnē.
   • Atkārtojiet 3-4 kādu no "Pages" zona lapas, kā arī kategoriju "kategorijās" teritorijā. Velciet jebkurus citus posteņus, ko vēlaties būt jūsu menu iekšā "menu1" taisnstūris. Jūs varat klikšķināt uz lapas, kategorijas, lietotāji un daži pasūtījuma elementiem, piemēram, "sarakstu dalītājs" un "koda bloku". Koda bloku ir foršs veids, kā pievienot pasūtījuma fragmentus iekšā izvēlnē.
   • Jūs varat vilkt izvēlnes iekšpusē "menu1" platība, lai pārkārtotu savu rīkojumu.
   • Jūs varat izmainīt hierarhisko nostāju attiecībā uz katru izvēlnes punktu ar "<" un ">" bultiņām.
   • Uzklikšķinot uz teksta nosaukumu no katras izvēlnes - atver prātam papildu pielāgošanu dialog par šo priekšmetu. Es galvenokārt izmanto saistību nepildīšanas, bet tehniski jūs varat iet crazy, un sākt pelnīt image bāzes menu izvēli un pievieno gabalos HTML kodu tā. Turpināt piesardzīgi though.
   • Par linkless unclikable apakšizvēlnes, kas kalpos kā "vecāki" cita "sub-bērni" es "Code bloku" tipa. Piemēram, ja pielāgošanai šādu koda bloku postenis I ierakstīts "izvēlnes alias" = "MemberWing" un "Enter kodu bloku:" = "<a href='#'> MemberWing </ a>". Ņemot href = "#", padarīs to nav iespējams noklikšķināt, bet darbojas kā derīgu "mātes" menu izvēli.
5. Lūk, kā mana NAVT "menu1" veidot struktūras izskatījās gandrīz pabeigta:
   
6. Finish sākotnējās ēkas un tad noklikšķiniet uz "rīkiem" ikonas, lai pielāgotu savu menu struktūra:
   
7. Tā būs atvērta dialoga ar 4 cilnēm: Iespējas, Displejs, CSS, tēma.
   1. Iet uz "Options" tab, un pārliecinieties, ka viss ir nekontrolēti un "grupas nosaukums" saka: "menu1"
   2. Iet uz "Display" tab, un pārliecinieties, ka viss uz "Show navigācijas grupa ..." platība ir pārbaudīta [x]. Atstājiet atpūta noklusējumus.
   3. Iet uz "CSS" tab un izvēlieties radio pogu (x) "Nelietot CSS klases".
   4. Iet uz "Theme" tab, un aizpildiet to, piemēram, ka:
      
      Ievietot "Pievienot tagus līdz ...", platība šo kodu:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Ievietot "Pievienot tagus pēc ..." teritorija šo kodu:
      <br style='clear: left' /></div>
   5. Nospiediet [saglabājiet / CLOSE] pogu
8. Šajā brīdī izvēlnē ēka no iekšpuses NAVT spraudnis iespējas ir pabeigta.
   Tagad ir pienācis laiks to darīt nedaudz melodija up Thesis tēmu , lai saņemtu to gatavu. Tādēļ mums ir nepieciešams, lai pievienotu dažas pasūtījuma faili - CSS un javascript, kas pieder uz izvēlni un atjaunināt Thesis "custom_functions.php
9. Lejupielādēt pilns komplekts failus šeit .
10. Unzip arhīvā. Ja esat atjauninājis savu custom_functions.php ar pielāgojumi - jums ir nepieciešams apvienot tos kopā ar savu stuff. Es ņemšu atvaļinājumu it up jums.
    Ja jums nav pieskāries - jūtieties brīvi pārrakstīt ar raktuvē. Lūdzu, ņemiet vērā: Es labprātāk stāvoklī izvēlnē zem mājas header (noklusējums ir augstāk) - tik mans korekcija jāiekļauj šo preferenci, kā arī.
11. Augšupielādēt arhīvs ieskaitot visas apakšdirektorijas un failus, kas ir jūsu Thesis tēma "pēc pasūtījuma" direktorijā, piemēram:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    Es neesmu pieskāries custom.css - es gribētu, lai saglabātu menu specifisku CSS saskaņā ar viņu pašu atrašanās vietu, lai izvairītos no putru iekšā custom.css
12. Šajā brīdī jūs varat pārlādēt jūsu mājas lapā un redzēt jaunas skaistu jaunu vairāklīmeņu, ligzdotas, SEO optimizēta izvēlnē.
13. Jūs vienmēr varat doties atpakaļ uz NAVT iestatījumus un pielāgot savu izvēlni ar vairākām izvēles vai pārvietot neko. Tas tiks atspoguļotas dzīvot vietā automātiski.

Ceļš uz priekšu ...

Šī apmācība, radošais piemērs no viena veida izvēlnē. Es spēlēju viens ar otru - tikai, lai redzētu, kā tumšas krāsas izvēlne izskatās:

Promocijas darba tēma - daudzlīmeņu Nested CSS menu - tumšs palete

Es domāju, ka tas ir diezgan jauki. Ir daudz vairāk, navigācijas paraugiem pieejams Dynamic Drive - visas no tām ir iespējams pielāgot par Thesis un citu WordPress tēmām ar kādu piepūli:

Dynamic Drive Horizontālā Izvēlnes

Es ceru, ka jūs atradīsiet šo pamācību izdevīgi un lietderīgi. Kā jau teicu, tas ir iespējams pielāgot jebkura no šīm izvēlnēm Thesis - tas ir dots laiks un vēlme, lai tā notiktu.

Es varētu darīt šo darbu, lai jūs par līguma pamata. Just pick izvēlnes, piemēram, sazināties ar mani un es ņemšu darbu kodu un instrukcijas par jūsu mājas lapā.

$ 20

Un, protams, ja jūs esat līdz ēku super SEO optimizēta piemaksa WordPress dalību portāls - labākais risinājums šo:
Thesis Theme + MemberWing dalība spraudnis + sevi hosted WordPress , protams.

comments } { 15 komentāri }