Quest par perfektu menu ...
Šī ir pamācību 1 daļa
Šo pamācību 2 daļas māca, kā veidot vertikālu menu + tumši krāsu paleti horizontāla
Es nolēmu saņemt Thesis tēmu, jo viens no maniem klientiem mani informēja par saderības problēmas starp Thesis, un mans WordPress membership site spraudnis MemberWing. Es noteikti un pēc tam nolēma ņemt tuvāk apskatīt darbs un faktiski bothered skatīties video par sākumlapā galveno Thesis site - Diythemes.com.
Kas mani pārsteidza visvairāk uzmanību detaļām, lietotājdraudzīgumu un vairāk par visu - SEO iezīmes, kas ir tik labi atcerējās.
MemberWing membership spraudnis tika izstrādāta no zemes līdz dalībai vietas, kas būtu nepieciešams, lai vilktu cik SEO sula vien iespējams. So I izmaksā daudz uzmanības, lai daudziem SEO papildierīces un perfections in MemberWing. Daudzi no manu klientu lūdzam par dažādām tēmām, lai izmantotu un ir tēma, kas bija tik labi SEO optimizēta no dziļi būtu lielisks derīgas dalībai portāla uzņēmējiem.
Apvienojot SEO pilnvaras MemberWing ar SEO pilnvaras Thesis tēma dotu vislabāko Kategoriju iespējas maniem klientiem. So I got darbs un spēlēja ar to dienu.
Tā ir lieliska tēma visos veidos. Navigācijas daļa no tā tomēr ir nedaudz ierobežota funkcija. Sākot no 1,5 darbs + tas ir viens līmenis izvēlne only. Mana parastā vēlme ir, lai varētu pielāgot navigācijas tik daudz, cik nepieciešams. Dažās vietās ir tikai dažas lapas, daudziem citiem t statiskas lapas + zillions raksti / posts + daudz kategorijām.
Tik ideālā pasaulē, kam iespēja izveidot jauku meklē hierarhiski organizētas lietotājam draudzīgu navigācijas izvēlne ir must. Thesis labi pie sikspārnis ir good looking navigācija bet es pamanīju, ka visi Thesis bāzes mājas meklē kā dvīņi. Pielāgošanu Thesis navigācijas izvēlni patiesībā nav viegli to lielākā daļa cilvēku vienkārši atstāt to kā ir. Nav iespējams mainīt, lai kategoriju izvēlni vai stāvokli tos starp lapā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 lietas labā.
Pēc mēģina apmēram puse ducis izvēlni / navigāciju saistītos plugins es varu noteikt manu izvēli WordPress navigācijas saraksts Plugin NAVT.
NAVT spraudnis ir būtībā Nenumurēts saraksts ģenerators ar super fancy un mazliet grūti ciparu netradicionālas admin interfeisu. Ko maldina par to, ka tas nav reāli izveidot iedomātā meklē izvēlnes, pats par sevi. Tas cieta daļa darba vietu, lai gan - dod jums iespēju vizuāli apkopotu un radītu Nenumurēts saraksts - karkass izvēlnes-to-be. Un jums var radīt daudzas izvēlnes pārāk. Jūs varat pull visa veida WordPress stuff vērā navigācijas izvēlni: lapas, posts, articles, kategorijas, lietotājiem, kodu bloki, ārējās saites, dalītāji, atdalītāji un samaisa un sērkociņu un ligzdošanas un sakārtot un pielāgot tos nevienam kokam līdzīgu struktūru tu gribēt.
NAVT rada Jums radīja HTML Nenumurēts saraksts. Otrais skaistums NAVT ir tas, ka tas palīdz ievietot savu jauno izvēlni jūsu tēma ar slaveno jquery pamatā loģika, bet bez vajadzības nomainīt jebkuru kodu! NAVT ļauj norādīt: "aizstāt šo # elementu ar savu jauno NAVT menu". # elements, varētu būt id vai klasi ceļu esošo izvēlni vai div elements tagu, kas tiek radīti ar savu pašreizējo tēmas. Tātad NAVT tas nomaiņa jums neliekot jums iedziļināties tēmā kodu un padarīt to netīrs, nekā tā jau ir. Ja, ka visi, piemēram, buldurēšana skaņas - neuztraucieties - es jums soli pa solim drīz. Apstrīdēšanai daļā NAVT ikvienam, ir tas, ka jums ir nākt klajā ar reāliem CSS + bildes + javascript kodu izvēlnes sev. Un tas ir atkarīgs no jums, lai saprastu, kur un kā to integrēt šos failus un padarīt šo stuff pareizi Get Connected kopā.
Ar cieņu, nezinot jquery + PHP + CSS + kam ir pienācīga pieredze ar WordPress - šī lieta ir grūti vilkt.
Labprāt es zinu stuff mazliet tāpēc es nolēmu iekost aizzīmes un vadītu cilvēces brīvību celtniecības labāko no labākajiem navigācijas izvēlnēm, lai WordPress. Es tikai lai uzzinātu avotiem daži nice looking horizontālās CSS izvēlnes. Es paņēmu dinamisku vadīt mājas to labāko izvēli, demonstrācijas un avotiem.
Es veltīts dienu pētījuma darbs un spēlēt ar NAVT spraudni. Beigās es lepni izveidota pēc pasūtījuma, elastīgu, SEO optimizēta, daudzlīmeņu, ligzdoti nagivation struktūru mana Wordpress + darbs balstās vietā.
Saraksts iezīmju daudzlīmeņu, ligzdoti WordPress navigācijas izvēlne Thesis Theme
(Jūs GOT to love this stuff):
- Professional, tīru izskatu.
- Atbalsts visiem mūsdienu pārlūkiem, tai skaitā 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome gan javascript un citu javascript veidiem.
- Graciozi downgradable kas nav javascript pārlūkiem. Jūs izvēlne ir izmantojamas, vizuāli līdzīgi un darbojas pat javascript invalīdiem pārlūkprogrammām (kaut arī tikai augšējā līmeņa navigācijas būs redzams un nav flyouts notiks, protams, kā tos ir veidojis javascript).
- SEO draudzīgas īpašības - Nenumurēts saraksts menu kods tiek ģenerēts laikā HTML. Google un citu meklētāju zirnekļi varēs indekss jūsu navigācijas struktūru un atrast saites uz iekšējās lapās.
- Atbalsts neierobežotu ligzdošanas līmeņu un sublevels.
- Atbalstu attiecībā uz rīkojumu vai lapas, stabiem (caur lietotāja definēts URI), kategorijas, lietotājiem, pasūtījuma koda bloki un ārējām saitēm izvēlnē.
- Atbalstu tekstu, kā arī attēla pamatā izvēlnes elementiem. (Man ir vēl izmēģināt šo gan).
- Menu struktūra un saturs ir vizuāli regulējams ar NAVT admin jomā.
- Kompakts: jQuery, pamatojoties flyouts par Nested līmeni.
- Fast: jquery uz izvēlnes ir ielādēts no Google serveriem (I'd love Disertācija pati to darīt pašiem nevis pavelkot to lokāli). Tas varētu paātrināt lietas mazliet.
- Mērogojamība - Šāda veida izvēlne ir rediģējams un konfigurējams jebkurā laikā, izmantojot NAVT spraudņa uzstādījumus bez nepieciešamības kodēšanas jebkur.
Es izmantot šo lielisko izvēlni no dinamisko disku portāls kā bāzi. Man bija pielāgot javascript kods mazliet kā arī aptver rieciens PHP stājas custom_functions.php, lai tā darbotos ar Thesis. Arī vairāki iepriekš eksistējošas lapas, kategorijas un posts from manā vietā tika izmantoti, lai savāktu izvēlnes struktūra. Jūsu vietnes specifika būs atšķirīgs - bet jēdzieni būs tāds pats.
So let procede, ir mums?
Soli pa solim instrukcijas setup NAVT balstīta ligzdojis, pielāgojama, vairāklīmeņu, SEO draudzīgas
un tikai plain cool looking navigācijas izvēlni, lai WordPress un Thesis Theme
- Iet uz WordPress admin panelī. Plugins-> Pievienot jaunu, atrodiet "navt". Spraudnis tiks parādīti. Noklikšķiniet uz [Install], [Install now], "Aktivizēt Plugin".
- Tools-> NAVT saraksti Inside "Navigācijas Group" platība atrast "grupas nosaukums" un ierakstiet "menu1" šajā jomā, nospiediet [Create] pogu. "Menu1" četrstūra zonā got izveidots.
Šī "menu1" platība būs galvenais rotaļlaukums izvēlnes celtniecībai. Jums tiks vilkšanu un nomešanu šeit izvēlnes elementiem. - In "aktīvi" platība atrast "citu" ListBox un noklikšķiniet uz "Home" izvēli. "Mājas" thingie parādīsies iekšpusē "nav piešķirts" platības. Dīvaini, vai nē? Neraizējieties, ja vien tā darbojas - un tas mums.
- Velciet šo "Home" thingie no "aktīvi" zonu "menu1", taisnstūra apgabalā. Tas kļūs par "Home" postenim izvēlnē.
- Atkārtojiet soļus 3-4, lai dažas no "Pages" zonā lapas, kā arī attiecībā uz kategoriju "categories" rajonā. Velciet jebkurus citus posteņus, par kuru vēlaties saņemt savā izvēlnē Inside "menu1" taisnstūrī. Jūs varat klikšķināt uz lapu, produktu kategorijām, lietošanu, un dažas pielāgotus elementus, piemēram, "saraksts dalītājs" un "kods bloku". Kods bloks ir foršs veids, kā pievienot pasūtījuma fragmentus iekšpusē izvēlni.
- Jūs varat vilkt menu items Inside "menu1" rajonā, lai pārkārtotu savu pasūtījumu.
- Jūs varat pielāgot hierarhiskā nostāju attiecībā uz katru menu item ar "<" un ">" bultiņām.
- Uzklikšķinot uz teksta vārdu katru menu item - atver pārbaudījums prātam papildu pielāgošanas dialoglodziņš šim postenim. Es lielākoties izmanto saistību nepildīšanas, bet tehniski jūs varat doties traks un sākt pelnīt attēlu pamatā menu izvēli un pievieno gabalos HTML kodu tā. Proceed piesardzīgi though.
- Par linkless unclikable apakšizvēlnes, kas kalpos kā "vecāki" citu "sub-children" I used "Code bloks" tipa. Piemēram, ja pielāgošana šāds kodekss bloka pozīcijas iegāju ar "menu item alias" = "MemberWing" un "Ievadiet kodu bloks:" = "<a href='#'> MemberWing </ a>". Ņemot href = "#" ļaus ne klikšķināmos bet darbojas kā derīgu "mātes" menu izvēli.
- Šeit ir manas NAVT "menu1" būvēt struktūra izskatās gandrīz pabeigts:
- Apdare sākuma ēku un pēc tam noklikšķiniet uz "apgriezienus" ikonu, lai pielāgotu izvēlnes struktūra:
- Tas būs atvērts dialoglodziņš ar 4 cilnēm: opcijas Display, CSS, Dizains.
- Iet uz "Options" sadaļā un jāpārliecinās, viss ir nekontrolēti un "grupas nosaukums" saka: "menu1"
- Iet uz "Display" sadaļā un jāpārliecinās, viss uz "Show navigācijas grupa par ..." teritorija tiek pārbaudīts [x]. Atstāt atpūta pie noklusējumus.
- Iet uz "CSS" tab un izvēlieties radio pogu (×) "neattiecas CSS klases".
- Iet uz "Theme" tab, un aizpildiet to, piemēram, ka:
Jāiekopē "Pievienot tagus pirms ..." platība šo kodu:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Jāiekopē "Pievienot tagus pēc ..." platība šo kodu:
<br style='clear: left' /></div> - Nospiediet [Saglabāt / close] poga
- Šajā brīdī izvēlni ēkas iekšienē NAVT spraudnis iespējas ir pabeigta.
Tagad ir pienācis laiks to darīt nedaudz melodija izveidota Disertācija tēmai, lai saņemtu to gatavs. Tādēļ mums ir nepieciešams pievienot dažas pasūtījuma faili - CSS un javascript, kas pieder izvēlni un atjaunots darbs "custom_functions.php - Download pilns komplekts failu šeit.
- Atarhivējiet arhīvu. Ja esat atjauninājis savu custom_functions.php ar savu pielāgojumus - jums tos apvienot ar savu piedāvājumu. Es atstātu jums.
Ja jums nav pieskāries to - justies brīvi pārrakstīt ar manējo. Lūdzu, ievērojiet: Es labprātāk stāvokļa izvēlni zem mājas lapas galvene (noklusējums ir iepriekš) - tā mana korekcija jāiekļauj šīs priekšrocības, kā arī. - Upload arhīvs ieskaitot visus subdirectories un failus zem 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 izvēlnē specifisku CSS saskaņā ar to pašu atrašanās vietu, lai neradītu putru iekšā custom.css - Šajā brīdī jums ir iespēja papildināt savu tīmekļa vietni un skatīt jauno skaists jauna daudzlīmeņu, ligzdoti, SEO optimizēta izvēlni.
- Jūs vienmēr varat atgriezties NAVT iestatījumus un pielāgojiet savu ēdienkarti ar lielāku izvēli vai maina neko. Tas būs atspoguļots dzīvot vietā automātiski.
Ceļš uz priekšu ...
Šī apmācība iekļauta radošās piemēram, viena veida izvēlni. Es spēlēju ar citu - tikai, lai redzētu, kā tumšas krāsas menu varētu izskatīties šādi:
Promocijas darba tēma - daudzlīmeņu nested CSS izvēlne - tumši palete
Es domāju, ka tas ir diezgan jauki. Ir daudz citu navigācijas paraugi pieejams Dynamic Drive - tās visas ir iespējams pielāgot, lai darbs un citi WordPress tēmām ar dažiem pūlēm:
Dynamic Drive Horizontal Izvēlnes
Es ceru, ka jūs atradīsiet šo pamācību izdevīga un noderīga. Kā jau teicu, ir iespējams pielāgot jebkuru no šiem Thesis izvēlnēm - tas ir dots laiks un vēlme, lai tā notiktu.
Es varētu darīt šo darbu jūs līguma pamata. Vienkārši izvēlieties izvēlni vēlaties, sazinieties ar mani un es ņemšu darbs kodu un norādījumus par jūsu mājas lapā.
20 $
Un, protams, ja jūs esat līdz ēkas super SEO optimizēta piemaksu WordPress membership portāls - labākais risinājums šo:
Thesis Theme + MemberWing membership spraudnis + self hosted WordPress protams.
