Meklējumi perfektu Vertical izvēlnē ...
Šī apmācība 1.daļa aprakstīts soli pa solim process, ēkas horizontālo daudzlīmeņu ligzdotu izvēlni WordPress Thesis tēmu . 2.daļa turpināsies, lai uzlabotu šo funkcionalitāti. Šeit mēs pievienot "tumšo" versija horizontālu navigācijas izvēlni, un es gribu jūs mācīt, kā pārslēgties starp "spilgti" un "tumšās" versija. Daļa 2 ir superset 1 daļā. Tas ietver visu no 1 daļas + piebilst vairāk cool stuff.
Galvenā doma, ka es gribēju sniegt, ir pievienojot vertikālu izvēlni, lai Thesis tēmu (un WordPress kopumā). Es meklēju ļoti elastīgs, SEO draudzīgas un multi-pārlūkprogrammu saderīgu vertikālā izvēlne, kas ļauj izveidot neierobežotu ligzdošanas līmeni.
WEB ir tonnas lappušu par šo tēmu, bet, kad es sāku izmēģināt visus šos paraugus - tie vai nu sabojājusies, izirusi, ko atbalsta tikai ierobežots skaits līmeņu vai misbehaved arī Gates + Ballmer 6 junksplorer. Beidzot es saņēmu atpakaļ mēģinājis un uzticamu Dynamic Drive izvēlnēm , kā to vertikālas paraugi izrādījās jauka lieta, kas atbilst manas stingras prasības. Man bija būtiski mainīt tos gan, lai pārliecinātos, ka tas der Thesis modeli.
Pēc pilnības meklējumi turpinās ...
Es pavadīju aptuveni 16 stundas meklēšanu, montāžu, testēšanu, nosakot, pulēšana un tuning Vertikālā izvēlne ir CSS un. Js kodu un 3/4 no laika tika pavadīts padarot to strādāt 6 MSIE.
Anyways, es biju apmierināts ar gala rezultātu. Rezultātā vertikālās navigācijas izvēlni, ir visas tās pašas priekšrocības , kas horizontālā izvēlne ir.
Ņemot spēja pievienot vertikālo izvēlni, ir ļoti svarīgi, lai apmēram 70-80% no portāliem tīmeklī. Horizontālās izvēlnes ir ierobežota "telpu", lai pielāgotos daudzas izvēlnes izvēles, bet vertikālā izvēlne nav šo ierobežojumu, un tas palīdzēs ārkārtīgi. Tāpēc šeit mēs iet.
Daudz soļiem, lai padarītu tā notiktu, ir jau aprakstīti no apmācība 1 daļa , tāpēc šī būs darīt to mazliet īsāku vienu, bet ar daudz vairāk iezīme bagāts rezultātiem.
Tātad šeit tas ir:
Building SEO draudzīgas, vertikālās, daudzlīmeņu, hierarhiski ligzdotu izvēlnes WordPress un Thesis tēmu. Soli pa solim
(... Ko jūs nekad domāja, iespējams ...)
- Instalējiet exec php spraudnis un aktivizēt to. Mums būs nepieciešams, jo es izmantot PHP iekšpusē teksta widget emitēt Vertical Menu 'HTML kodu.
- Vai pasākumus, 1 - 6 no gada pamācību 1 daļa . Pamatā jums ir nepieciešams instalēt un aktivizēt izmantot NAVT spraudnis + vizuāli veidot savu ēdienkarti. Pārliecinieties, ka jūsu izvēlnes grupas nosaukums ir "menu1". Šis nosaukums tiek hardcoded ar custom_functions.php
- Uzklikšķiniet uz "rīkiem" ikonas, lai jūsu "menu1" grupas, lai labotu to rekvizītus:
- Šādi soļi 7.1 -7.3 daļas 1 pamācību, lai uzstādītu "Iespējas", "Display" un "CSS" tabs iestatījumus.
- Tagad noklikšķiniet uz "Theme" tab šajā dialogā. Mēs pārrakstīt uzstādījumu skaitu, tur (ja jums ir pēc 1.posms). Tas ir ok - jums nebūs zaudēt neko - bet šīs izmaiņas ir nepieciešamas, jo es esmu mainījis kādu kodu no 1 soli.
Lūk, kā šis dialogs ir jāaizpilda:- Inside "Tēma XPath:" platība ievadiet šo kodu (tas komandas nomainīt jebkuru tagu ar šīm klasēm):
.jquerycssmenu, .jqueryslidemenu - Set "darbība" uz "Aizvietot ar"
- Inside "Pievienot tagus, pirms navigācijas grupa" jomā ievadi šo kodu:
<div class='jquerycssmenu' style='margin-top:5px;'> - Inside "Add tags pēc navigācijas grupa" jomā ievadi šo kodu:
<br style='clear: left' /></div> - Noklikšķiniet uz [Save / aizvērt] pogu.
- Inside "Tēma XPath:" platība ievadiet šo kodu (tas komandas nomainīt jebkuru tagu ar šīm klasēm):
- Tagad dodieties uz WordPress admin panelis -> Izskats -> logrīki.
- Velciet "Teksts" logrīku (no lielo "Pieejamie logrīki" teritorijā) uz "Sidebar 1" zonā pa labi. Mums būs pievienojot kodu teksta widget, kas palīdzēs mums materializēties vertikālo izvēlni.
PIEZĪME: Es pieņemu, jums ir "Sidebar 1", kas pastāv. Thesis iespējas ļauj izslēgt to - bet lai panāktu šo pamācību lai dara to. - Kad jūs vilkt un nomest šo widget - tas atveras kā puķe (es jūtos romantisks tagad, ka MSIE cīņa ir beigusies).
- In "Nosaukums" zonā ieiet "Pasaules labākais vertikālo izvēlni" ... Nu, justies brīvi izmantot savu radošumu - tas teksts iet virs jūsu tikko dzimis vertikālo izvēlnē.
- Jo lielu platību tekstu - ievadīt šo PHP kodu:
<?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?> - Nospiediet [Saglabāt] pogu, noklikšķiniet uz "Close" saite.
- Lejupielādēt atjaunināts iestatīt failu šeit .
Šis arhīvs ietver:- Atjaunināts versija "spilgti" horizontālā izvēlnes kodu
- "Dark" versija horizontālā izvēlnes
- Vertikālās izvēlnes kodi
- Atjaunināts versija custom_functions.php
- Tagad jums ir nepieciešams, lai unzip šo arhīvu un augšupielādēt to uz "pasūtījuma" direktoriju jūsu Thesis tēmu.
Piezīme: ja jums ir darījuši visus pielāgojumus iekšpusē custom_functions.php - jūs nepieciešams tos apvienot. Ja ne - justies brīvi pārrakstīt to ar manu versiju. - Voila! Tagad jūs varat pārlādēt jūsu mājas lapā un redzēt to pašu "spilgti" horizontālu menu + neato vertikālo izvēlni kreisajā sānjoslas.
- BONUS uzdevums: Let mainīt "spilgti" horizontālu menu uz "tumšo" krāsu shēmu.
- Inside custom_functions.php failu:
aizstāt šo kodu:
echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
ar šo kodu:
//echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
Būtībā mēs esam komentējot vienu rindiņu un uncommenting otrs. - Tagad dodieties uz WordPress admin-> Tools-> NAVT sarakstā un noklikšķiniet uz iepriekšminēto "rīku", ikonas, lai rediģētu īpašības jūsu "menu1" grupas.
- Noklikšķiniet uz "Tēma" tab.
- Inside "Pievienot tagus, pirms navigācijas grupa" jomā ievadi šo kodu:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Tagad - pārlādēt savu lapu - un jūsu galvenais horizontālu navigācijas izvēlni "maģiski" kļuva tumšs, kaut kas līdzīgs, ka:
Thesis tēma - daudzlīmeņu ligzdotu CSS menu - tumši palete
Tumšs krāsu palete varētu būt vairāk piemērota dažās vietās, nekā gaismas krāsu vienu. Tātad, tagad jums ir izvēles brīvība savā dzīvē!
- Lai saņemtu atpakaļ uz "gaišo" krāsu shēmu - vienkārši atvelciet virs "Bonus" soļiem.
- Inside custom_functions.php failu:
- Secinājums:
Es mīlu Thesis tēmu, es mīlu WordPress, un man patīk tas, ka mums ir veidi, kā pievienot pienācīgas navigācijas izvēlnēm mūsu portāliem.
$ 20
Enjoy!
Gleb Esman
{Komentāri par šo ierakstu ir slēgts}
