Quest par perfektu izvēlnes ...
Tas ir no uz pamācību 1 daļa
Šo pamācību 2 daļa māca, kā veidot vertikālo izvēlni + tumšas krāsas paleti uz horizontāla
Es nolēmu, lai saņemtu Thesis tēmu , jo viens no maniem klientiem man paziņoja par saderības problēmas starp Thesis un manu WordPress dalības vietnes spraudnis MemberWing. Es noteikti to un pēc tam nolēma, lai tuvāk apskatīt Thesis un faktiski bothered, lai noskatītos video uz priekšējā lapā galvenās Thesis vietā - Diythemes.com .
Kas pārsteidza mani visvairāk ir uzmanību detaļām, lietotājdraudzīgumu un lielākā daļa no visiem - 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 sulu, cik vien iespējams. Tāpēc es maksā daudz uzmanību daudziem SEO uzlabojumus un pilnības, kas MemberWing. Daudzi no maniem saviem klientiem ir jautā par dažādām tēmām, lai izmantotu, un kam ir tēma, kas bija tik labi SEO optimizēta no dziļi iekšā, būtu lielisks fit dalības portāla uzņēmējiem.
Apvienojot SEO pilnvaras MemberWing ar SEO pilnvaras Thesis tēma dotu vislabāko ranga iespējas maniem klientiem. Tāpēc es saņēmu Thesis un spēlēja ar to uz vienu dienu.
Tā ir lieliska tēma visos veidos. Navigācijas daļa no tā gan ir nedaudz ierobežots funkciju. Sākot no 1.5 Promocijas + tā ir viena līmeņa izvēlnē tikai. Mans parasti vēlme ir, lai varētu pielāgot navigāciju tik daudz, cik nepieciešams. Dažas vietnes ir tikai dažas lapas, daudzi citi ir tonnas statiskas lapas + zillions pantiem / stabiem + daudz kategoriju.
Tātad ideālā pasaulē, kam ir iespēja izveidot jauku meklējat hierarhiski organizētu lietotājam draudzīgu navigācijas izvēlni, ir obligāta. Thesis tiesības pie nūja ir labs meklē navigāciju, bet es pamanīju, ka visi Tēze balstīta mājas lapas ir meklējat, piemēram, dvīņi. Pielāgošana Thesis 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 kategoriju izvēlnes, vai novietot tos starp lapām. Un atkal, spēja radīt ligzdotu izvēlnes struktūras ir pazudis. Tāpēc es nolēmu, lai redzētu to, ko varētu darīt par to.
Pēc mēģina apmēram puse duci menu / navigācijas saistītos plugins es noteikt manu izvēli par WordPress navigācijas Saraksts Plugin NAVT .
NAVT spraudnis būtībā Nekārtots sarakstu ģenerators ar super iedomātā un mazliet grūti saprast netradicionālu admin interfeisu. Kas maldināšana par to, ka tas nav reāli izveidot iedomātā meklējat izvēlnes ar sevi. Tas cieta daļa no darba, lai gan - dod jums iespēju vizuāli vilktu kopā, un radīt Nekārtots saraksts - skelets no izvēlnes-to-be. Un jūs varat izveidot daudz izvēlnes too. Jūs varat pull visa veida WordPress sīkumi uz navigācijas izvēlni: lapas, raksti, raksti, kategorijas, lietotājiem, koda bloki, ārējās saites, sadalītāji, atdalītāji un samaisa un saskaņot un ligzdo un sakārtot un pielāgot tos jebkurā koku līdzīgu struktūru jūs gribu.
NAVT rada jums rezultātā HTML Nekārtots sarakstu. Otrkārt skaistums NAVT ir, ka tas palīdz jums ievietot savu jauno ēdienkarti jūsu tēmu ar slaveno jQuery balstītu loģiku, bet bez nepieciešamības mainīt jebkuru kodu! NAVT ļauj norādīt: "aizstāt šo # elementu ar savu jauno NAVT izvēlnē". # Elements varētu būt id vai klasi ceļa esošo izvēlni vai div elementu birku, kas tiek radīts ar savu pašreizējo tēmu. Tātad NAVT tas par šo aizstāšanu, lai jūs bez piespiežot jums doties uz atrakciju kodu un padarīt to netīrs, nekā tā jau ir. Ja visi, piemēram, buldurēšana izklausās - neuztraucieties - es jums soli pa solim drīz. Izaicinājums daļa NAVT ikvienam ir tas, ka jums ir jānāk klajā ar reālu CSS + bildes + javascript kodu, lai jūsu izvēlnē 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 + daži PHP + CSS + kam ir pienācīgas pieredze ar WordPress - šī lieta ir grūti pull.
Labprāt es zinu šo stuff mazliet tāpēc es nolēmu BITE aizzīmju un gaidu cilvēci uz brīvību veidot labāko no labākajiem navigācijas izvēlnēm, lai WordPress. Man vajadzēja tikai, lai uzzinātu avotus kādu jauku meklē horizontālās CSS izvēlnēm. Es paņēmu Dynamic Drive mājas lapā par viņu labāko izvēli, demos un avotiem.
Es veltīta diena, lai izpētītu Thesis un spēlēt ar NAVT spraudni. Beigās es lepni izveidojis pasūtījuma, elastīgu, SEO optimizēta, daudzlīmeņu, ligzdotu nagivation struktūru manu WordPress + Thesis pamatā vietā.
Saraksts iezīmes daudzlīmeņu, ligzdotu WordPress navigācijas izvēlni par Thesis Theme
(Tev mīlēt šo stuff):
- Profesionālā, tīru izskatu un justies.
- Atbalstu visām mūsdienu pārlūkprogrammām, ieskaitot MSIE 6,7, Opera, Safari, Firefox 3.x, Google gan javascript Chrome un nav javascript veidiem.
- Graciozi downgradable kas nav javascript pārlūkprogrammām. Jūs izvēlne būs lietojams, vizuāli līdzīgi un strādā pat javascript invalīdiem pārlūkprogrammām (kaut arī tikai augstākā līmeņa navigācijā būs redzami un ne flyouts notiks, protams, kā tie ir izgatavoti ar javascript).
- SEO draudzīgas funkcijas - Nekārtots saraksts izvēlne kods tiek ģenerēts ietvaros HTML. Google un citu meklētājprogrammu zirnekļi varēs indeksēt jūsu navigācijas struktūru un atrast saites uz iekšējām lapām.
- Atbalsts neierobežotu ligzdošanas līmeni un apakšlīmeņos.
- Atbalsts pasūtījumiem vai lapas, amatu (via lietotāja noteiktā URI), kategorijām, lietotājiem, pasūtījuma koda bloki un ārējās saites ietvaros izvēlnē.
- Atbalsts tekstu, kā arī attēlu bāzes izvēlnes elementiem. (Man ir vēl izmēģināt šo, lai gan).
- Izvēlnes struktūra un saturs ir vizuāli regulējams ar NAVT admin jomā.
- Kompakts: JQuery bāzes flyouts uz ligzdotu līmeni.
- Fast: JQuery par izvēlnes tiek ielādēta no Google serveriem (man patiktu Thesis sevi darīt to pašu, nevis velkot to uz vietas). Tas varētu paātrināt lietas mazliet.
- Mērogojamību - Šī izvēlne tips ir rediģējams un konfigurējamas jebkurā laikā, izmantojot NAVT spraudnis iestatījumiem bez vajadzības kodēšanas jebkur.
Es šo lielisko ēdienkarti no Dynamic Drive portāla kā bāzi. Man bija, lai pielāgotu javascript kods, mazliet, kā arī iekļaut rieciens PHP uz custom_functions.php, lai tā darbotos ar darbā. Arī no iepriekš esošās lapas, kategorijas un amatu no manā vietā vairāki tika izmantoti, lai savāktu izvēlnes struktūru. Jūsu vietne specifika būs atšķirīga - bet jēdzieni būs tāds pats.
Tātad, pieņemsim sākt, ir mums?
Soli pa solim instrukcijas, lai uzstādīšanas NAVT bāzes ligzdotu, pielāgojama, daudzlīmeņu, SEO draudzīgas
un vienkārši atdzist meklē navigācijas izvēlni WordPress un Thesis tēmas
- Iet uz WordPress admin panelī. Plugins-> Pievienot jaunu meklēt "navt". Spraudnis tiks parādīta. Noklikšķiniet uz [Install], [Install now], "Aktivizēt Plugin".
- Tools-> NAVT saraksti, Inside "Navigācijas Grupa" jomā atrast "grupas nosaukumu" un ievadiet: "menu1" laukā, nospiediet [izveidot] pogu. "Menu1" taisnstūra laukums got izveidots.
Šī "menu1" platība būs galvenais rotaļu izvēlnes būvniecībai. Jūs būsiet velkot un nometot šeit savu izvēlnes elementus. - In "aktīvi" jomā atrast "citu" ListBox un noklikšķiniet uz "Home" izvēli. "Mājas" thingie parādīsies iekšpusē ", kuram nav piešķires" teritorijā. Dīvaini, vai nē? Neraizējieties, ja vien tas strādā - un tas būs mums.
- Velciet šo "Home" thingie no "aktīvi" telpai, "menu1" taisnstūris jomā. Tas kļūs par "Home" postenis izvēlnē.
- Atkārtojiet soļus 3-4, lai kādu no "Pages" jomā, kā arī attiecībā uz kategoriju "kategorijās" zonā lapām. Velciet citus priekšmetus, kurus vēlaties būt savu ēdienkarti iekšā "menu1" taisnstūrī. Jūs varat klikšķināt uz lapām, kategorijas, lietotājiem un dažiem pasūtījuma elementi, piemēram, "saraksta dalītāju" un "koda bloku". Kods bloks ir foršs veids, kā pievienot pasūtījuma fragmentus iekšpusē izvēlnē.
- Jūs varat vilkt izvēlnes iekšā "menu1" platība, lai pārkārtotu savu rīkojumu.
- Jūs varat pielāgot hierarhiskās nostāju attiecībā uz katru izvēlnes punktu ar "<" un ">" bultiņām.
- Uzklikšķinot uz teksta nosaukuma katram izvēlnes posteni - atver prātam papildu pielāgošanas dialogu par šo jautājumu. Es galvenokārt izmanto noklusējumus, bet tehniski Jūs varat iet crazy, un sākt pelnīt attēlu bāzes izvēlnes izvēli un pievieno gabalos HTML kodu tajā. Braukt uzmanīgi, lai gan.
- Par linkless unclikable apakšizvēlnes, kas kalpos kā "vecāki" citiem "apakšgrupas bērniem" Es mēdzu "koda bloku" tipa. Piemēram, kad pielāgot šādu kodu bloku posteni iegāju par "izvēlnes elementu alias" = "MemberWing" un "Enter kodu bloks:" = "<a href='#'> MemberWing </ a>". Ņemot href = "#" padarīs to nav iespējams noklikšķināt, bet darbojas kā derīgu "mātes" izvēlnes izvēli.
- Lūk, kā mana NAVT "menu1" build struktūra izskatījās gandrīz pabeigts:
- Pabeigt sākotnējo ēku un pēc tam noklikšķiniet uz "rīku" ikonu, lai pielāgotu savu izvēlnes struktūru:
- Tas atvērs dialogu ar 4 cilnēm: Iespējas, Displejs, CSS, tēma.
- Iet uz "Options" tab, un pārliecinieties, ka viss ir nekontrolēti un "grupas nosaukums" saka: "menu1"
- Iet uz "Display" tab, un pārliecinieties, ka viss par "Rādīt navigācijas grupa par ..." platība ir pārbaudīta [x]. Atstājiet atpūtu noklusējumus.
- Iet uz "CSS" tab un izvēlieties pogu (x) "Vai nav piemērojams CSS nodarbības".
- Iet uz "Theme" tab, un aizpildiet to, piemēram, ka:
Ievietot "Add tags pirms ..." teritorija šo kodu:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Ievietot "Pievienot tagus pēc ..." teritorija šo kodu:
<br style='clear: left' /></div> - Nospiediet [saglabāt / aizvērt] taustiņš
- Šajā brīdī izvēlnes ēkā atrodas NAVT spraudnis variantiem ir pabeigta.
Tagad ir pienācis laiks to darīt nedaudz melodija up Thesis tēma, lai saņemtu to gatavs. Tādēļ mums ir nepieciešams pievienot dažas pasūtījuma failus - CSS un javascript, kas pieder izvēlni un atjaunināt Thesis "custom_functions.php - Lejupielādēt pilnu komplektu failus šeit .
- Unzip arhīvu. Ja esat atjauninājis savu custom_functions.php ar pielāgojumu - jums ir nepieciešams apvienot tos ar manu stuff. Es atstāt to līdz jums.
Ja jums nav pieskāries tā - justies brīvi to pārrakstīt ar manējo. Lūdzu, ņemiet vērā: Es labprātāk pozicionēt menu zem mājas lapas galvenē (noklusējums ir augstāk) - tā mana korekcija iekļauta šo izvēli, kā arī. - Pievienot arhīvā, tostarp visas apakšdirektorijas un failus saskaņā ar savu disertāciju tēma "pēc pasūtījuma", direktoriju, piemēram, šo:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Es neesmu pieskāries custom.css - Es gribētu, lai saglabātu izvēlne specifisku CSS saskaņā ar to pašu vietu, lai izvairītos no haoss iekšā custom.css - Šajā brīdī jūs varat pārlādēt jūsu mājas lapā un redzēt jaunu skaistu jaunu vairāklīmeņu, ligzdotu, SEO optimizēta izvēlni.
- Jūs vienmēr varat doties atpakaļ uz NAVT iestatījumus un pielāgot savu ēdienkarti ar plašāku izvēli un pārvietot kaut ko. Tas tiks atspoguļots uz dzīvi vietā automātiski.
Ceļš uz priekšu ...
Šī apmācība ieskaitot radošo piemērs viena veida izvēlnes. Es spēlēju ar vienu citu - tikai, lai redzētu, kā tumšas krāsas ēdienkarte varētu izskatīties šādi:
Thesis tēma - daudzlīmeņu ligzdotu CSS menu - tumši palete
Es domāju, ka tas ir diezgan jauki. Ir daudz vairāk navigācijas paraugi pieejami Dynamic Drive - visi no tiem ir iespējams pielāgot par Thesis un citiem WordPress tēmām ar kādu piepūli:
Dynamic Drive Horizontālās ēdienkartes
Es ceru, ka jūs atradīsiet šī apmācība izdevīga un noderīga. Kā jau teicu, tas ir iespējams pielāgot kādu no šiem izvēlnes, lai darbā - 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ēlni jums patīk, sazinieties ar mani un man būs darbs uz kodu un norādījumus, lai jūsu mājas lapā.
$ 20
Un, protams, ja jūs esat līdz ēkas super SEO optimizēta piemaksa WordPress dalības portāls - labākais risinājums, lai šo:
Thesis Theme + MemberWing dalība spraudnis + sevis hosted WordPress protams.
Komentāri par šo ierakstu ir slēgts.