Meklējumi perfektu vertikālās izvēlnes ...
Šī apmācība 1 daļa apraksta soli pa solim procesā ēkas horizontālā daudzpakāpju ligzdotu izvēlni WordPress Thesis tēmu . Daļa 2 turpināsies, lai uzlabotu šo funkcionalitāti. Šeit mēs pievienot "tumšo" versija horizontālā navigācijas izvēlni, un es būs iemācīt jums to, kā pārslēgties starp "spilgti" un "tumšās" versija. Daļa 2 ir superset 1.daļu. Tā ietver visu no 1 daļas + piebilst vairāk cool stuff.
Galvenā doma, ka es gribēju iepazīstināt tiek pievienojot vertikālu izvēlni Thesis tēmu (un WordPress kopumā). Es meklēju tiešām elastīgi, SEO draudzīgas un vairāku pārlūkprogrammu saderīgu vertikālā izvēlne, kas ļauj izveidot neierobežotu ligzdošanas līmeni.
WEB ir t lapām par tēmu, bet kad es sāku izmēģināt visus šos paraugus - tie nu sabojājusies, izirusi, atbalstīja tikai nedaudzus līmeņiem vai misbehaved arī Geitsu ± Ballmer 6 junksplorer. Beidzot es saņēmu atpakaļ izmēģināja un uzticējās Dynamic Drive izvēlnēm kā to vertikālas paraugi izrādījās jauka lieta, ka der manas stingras prasības. Man bija būtiski modificēt, lai 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ējot, montāža, testēšana, nosakot, pulēšanas un tuning vertikālās izvēlnes s 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 aptuveni 70-80% no portāliem tīmeklī. Horizontālie izvēlnēs ir ierobežotas "Kosmoss", lai pielāgotos daudzas izvēlnes izvēli, bet vertikālā izvēlne nav šo ierobežojumu, un palīdzētu ļoti. Tātad šeit mēs iet.
Daudz soļiem, lai tā notiktu jau aprakstīti ar pamācību 1.daļā tāpēc tas padara to mazliet īsāku vienu, bet ar daudz vairāk iezīme bagāts rezultātiem.
Tātad šeit tas ir:
Ēka SEO draudzīgas, vertikālās, daudzlīmeņu, hierarhiski ligzdot ēdienkarte WordPress un Thesis tēmu. Soli pa solim
(... Ko jūs nekad domāja, iespējams ...)
- Instalēt exec php spraudnis un aktivizēt to. Mums būs vajadzīgs, jo es izmantošu PHP iekšpusē teksta widget raidīšanai vertikālā menu 'HTML kodu.
- Darīt soļus 1 - 6 no gada pamācību 1.daļā . Pamatā jums ir nepieciešams instalēt un aktivizēt izmantot NAVT spraudnis + vizuāli veidot savu ēdienkarti. Pārliecinieties, ka jūsu ēdienkarte grupas nosaukums ir "menu1". Šis vārds ir hardcoded ar custom_functions.php
- Noklikšķiniet uz 'gear "ikonu sava' menu1 devēju grupa, lai labotu to rekvizītus:
- Šādi soļi 7.1 -7.3 daļas 1 instrukciju, lai uzstādītu "Iespējas", "Displejs" un "css" cilnes iestatījumus.
- Tagad noklikšķiniet uz "tēmā" cilnē šā dialoglodziņa. Mēs pārrakstīs uzstādījumu skaitu, kas tur (ja jūs sekoju soli 1). Tas ir ok - jums nebūs zaudēt neko - bet šīs izmaiņas ir nepieciešamas, jo es esmu mainījies dažas kodu no 1 soli.
Lūk, kā tas dialogs ir jāaizpilda:- Iekšpusē "Theme XPath:" platība ievadiet šo kodu (IT pavēl, lai aizstātu jebkuru tagu ar šīm klasēm):
.jquerycssmenu, .jqueryslidemenu - Set "darbība" uz "Aizvietot ar"
- Iekšpusē "Pievienot tagus pirms navigācijas grupa" zonā ievadiet šo kodu:
<div class='jquerycssmenu' style='margin-top:5px;'> - Iekšpusē "Pievienot tagu pēc navigācijas grupa" zonā ievadiet šo kodu:
<br style='clear: left' /></div> - Noklikšķiniet uz [Saglabāt / CLOSE] pogu.
- Iekšpusē "Theme XPath:" platība ievadiet šo kodu (IT pavēl, lai aizstātu jebkuru tagu ar šīm klasēm):
- Tagad dodieties uz WordPress admin panelis -> Izskats -> logrīki.
- Velciet "teksts" logrīku (no lielo "Pieejamie logrīki" zonā) uz "Sidebar 1" zonā pa labi. Mēs pievienosim kodu teksta widget, kas palīdzēs mums materializēties vertikālo izvēlni.
PIEZĪME: Es pieņemu jums ir "Sidebar 1" eksistenci. Tēzes opcijas ļauj jums, lai to izslēgtu - bet, lai nodrošinātu šo pamācību ļaujiet dara to. - Tiklīdz jūs dragged un samazinājās šo widget - tas būs atvērts kā zieds panta jūtu romantisks tagad ka MSIE cīņa ir beigusies).
- Jo "sadaļā" zonā ievadiet "pasaulē labāko vertikālo izvēlni" ... Nu, justies brīvi izmantot savu radošumu - ka teksts būs iet virs jūsu tikko dzimis vertikālās izvēlnes.
- Lielās platības 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" saiti.
- Lejupielādēt atjaunināts komplekts failus šeit .
Šis arhīvs ietver:- Atjaunināta versija "Bright" horizontālās izvēlnes kodu
- "Dark" versija horizontālās izvēlnes
- Vertikālās izvēlnes kodi
- Atjaunināta versija custom_functions.php
- Tagad jums ir nepieciešams unzip šo arhīvu un augšupielādēt to uz "pēc pasūtījuma 'Direktorija jūsu Thesis tēmu.
Piezīme: ja jums ir darījuši kādas pielāgojumus iekšā custom_functions.php - jūs nepieciešams apvienot tos. Ja ne - justies brīvi pārrakstīt to ar manu versiju. - Voila! Tagad jūs varat papildināt jūsu mājas lapā un redzēt pats "Bright" horizontālo izvēlnē + neato vertikāli izvēlni kreisajā sānjoslas.
- BONUS uzdevums: Ļaujiet mainīt "Bright" horizontālās izvēlnes izeja uz "tumšās" krāsu shēmu.
- Iekšpusē 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 komentējot veic vienu līniju, un uncommenting otrs. - Tagad dodieties uz WordPress admin-> Tools-> NAVT Saraksti un noklikšķiniet uz iepriekšminēto "rīki" ikonu rediģēt īpašības sava 'menu1 grupā.
- Noklikšķiniet uz Tēmu tab.
- Iekšpusē "Pievienot tagus pirms navigācijas grupa" zonā ievadiet šo kodu:
<div class='jqueryslidemenu' style='margin-top:5px;'> - Tagad - pārlādētu lapu - un jūsu galveno horizontālo navigācijas izvēlni "maģiski" kļuva tumšs, kaut kas līdzīgs, ka:
Darbā tēma - daudzlīmeņu Nested CSS izvēlne - tumšs palete
Tumšas krāsas palete varētu būt vairāk piemērota noteiktiem vietnēs, nekā gaismas krāsas vienu. Tātad tagad jums ir izvēles brīvība, savā dzīvē!
- Lai saņemtu atpakaļ uz "Bright" krāsu shēmu - vienkārši atvelciet virs "BONUS" soļiem.
- Iekšpusē custom_functions.php failu:
- Secinājums:
Es mīlu Thesis Theme, es mīlu WordPress, un es mīlu to, ka mums ir veidi, kā pievienot pienācīgus navigācijas izvēlnēm mūsu portāliem.
$ 20
Baudīt!
Gļebs Esman
{Komentāri par šo ierakstu ir slēgts}
