Căutarea pentru meniul vertical perfectă ...

Partea 1 a acestui tutorial descris pas cu pas procesul de construire a meniului orizontale pe mai multe niveluri imbricate pentru tema tezei de doctorat Wordpress . Partea 2 vor continua pentru a îmbunătăţi această funcţionalitate. Aici vom adăuga "întunecat" versiune de meniul de navigare pe orizontală şi eu vă va învăţa cum să comutaţi între "luminos" şi "întunecat" versiune. Partea 2 este superset din partea 1. Acesta include toate de la partea 1 + adaugă mai multe lucruri interesante.

Ideea principala pe care am vrut să prezinte, este adăugarea meniu vertical la tema tezei de doctorat (şi la Wordpress, în general). Am fost în căutarea într-adevăr flexibile, SEO prietenos şi multi-browser compatibil meniu vertical, care ar permite de a crea niveluri de imbricare nelimitat.

WEB are tone de pagini pe această temă, dar atunci când am început să încerc toate aceste probe - ei fie stricat, căzut în afară, sprijinit numai număr limitat de nivele sau purtat în Gates + lui Ballmer junksplorer 6. În cele din urmă m-am întors la încercat şi sigura derulează Dinamic ca probele lor verticale sa dovedit a fi un caz interesant care se potriveşte cerinţelor mele stricte. Am avut de a modifica în mod semnificativ, deşi le pentru a vă asigura că se potriveşte modelul tezei de doctorat.
Dorintei de perfectionare continua ...

Mi-am petrecut aproximativ 16 ore de cautare, asamblarea, testarea, de fixare, lustruire si tuning CSS meniu vertical şi. Js cod şi 3 / 4 de timp a fost petrecut acest site este să lucreze în MSIE 6.
Oricum, am fost fericit cu rezultatul final. Meniul de navigare pe verticală a condus toate aceleaşi beneficii pe care are meniu orizontal.

Având posibilitatea de a adauga meniu vertical este foarte important la aproximativ 70-80% din portaluri pe web. Meniuri orizontale au limitat "spatiu" pentru a se adapta mai multe opţiuni de meniu, dar meniu vertical nu are această limitare şi ar ajuta foarte mult. Deci, aici vom merge.

O mulţime de paşi pentru a face acest lucru sunt deja descrise în partea 1 din tutorial , astfel acest lucru va face pentru unul un pic mai scurt, dar cu rezultate mult mai bogat în funcţii.

Deci, aici merge:

Clădire SEO friendly, vertical, meniul de mai multe niveluri, ierarhic imbricate pentru Wordpress si tema tezei de doctorat . Pas cu pas
(... Ceea ce ai crezut niciodată că este posibil ...)

1. Instalaţi exec php plugin-ul şi activaţi-l. Vom avea nevoie de el pentru că voi folosi PHP in interiorul widget de text pentru a emite codul de meniu vertical "HTML.
2. Nu paşii 1 - 6 de la partea 1 din tutorial . Practic trebuie să instalaţi şi să activaţi utilizarea plugin-ul NAVT + vizual construi meniu. Asiguraţi-vă că numele grupului de meniu este "menu1". Acest nume este fizic în custom_functions.php
3. Faceţi clic pe "unelte" pictograma pentru "menu1" grup pentru a edita proprietăţile este:
   
4. Urmează Etapele 7.1 -7.3 din partea 1 tutorial pentru a seta "Opţiuni", "Display" si "CSS" file setările.
5. Acum, faceţi clic pe "Tema" tab-ul din acest dialog. Vom suprascrie număr de setări acolo (dacă aţi fost în urma pasul 1). Acest lucru este ok - nu vei pierde nimic - dar aceste modificări sunt necesare pentru că mi-am schimbat unele cod de la pasul 1.
   Iată modul în care acest dialog trebuie să fie completat în:
   1. In interiorul "Tema XPath:" zonă introduceţi acest cod (ce porunceşte să înlocuiască orice etichetă cu aceste clase):
      .jquerycssmenu, .jqueryslidemenu
   2. Set "de acţiune" la "Înlocuieşte cu"
   3. In interiorul "Adăugaţi etichete înainte de navigaţie grup" zona introduceţi acest cod:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. In interiorul "Adăugaţi etichete de navigare după grup" zona introduceţi acest cod:
      <br style='clear: left' /></div>
   5. Faceţi clic pe [a salva / Închide] buton.
6. Acum du-te la Wordpress panoul de administrare -> Aspect -> Widgets.
7. Drag "Text" widget (de la mare "widget-uri disponibile" zonă) în "Sidebar 1" zonă de pe dreapta. Ne va fi adăugarea de cod în widget-ul de text care ne va ajuta să se concretizeze meniu vertical.
   NOTĂ: Presupun că ai "Sidebar 1" în existenţă. Teza opţiuni vă permite să dezactivaţi - dar de dragul acestui tutorial să fac să fie.
8. Odată ce aţi târât şi a scăzut acest widget - se va deschide ca o floare (ma simt romantic acum că lupta MSIE este de peste).
9. În "titlul" zonă intra "cel mai bun din lume meniu vertical" ... Ei bine, nu ezitaţi să utilizeze creativitatea ta - că textul va merge mai sus de meniu vertical nou-născut.
10. În zona de mare pentru text - introduceţi acest cod PHP:
    <?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;
?>
11. Apăsaţi [Salvare] buton, faceţi clic pe "Close" link-ul.
12. Descarcă actualizat set de fişiere aici .
    Aceasta arhiva include:

    
    

    • Versiune actualizată a "luminos" codul de meniu orizontală
    • "Dark" versiune de meniu orizontal
    • Codurile meniu vertical
    • Versiune actualizată a custom_functions.php
13. Acum aveţi nevoie pentru a dezarhiva această arhivă şi încărcaţi-l în "obiceiul" Culegere de dvs. temă tezei de doctorat .
    Notă: dacă aţi făcut toate personalizările din interiorul custom_functions.php - aveţi nevoie pentru a le îmbina. Dacă nu - nu ezitaţi să-l suprascrieţi cu versiunea mea.
14. Voila! Acum, puteţi reîncărca site-ul dvs. şi de a vedea aceeaşi "luminos" meniu orizontal + neato meniu vertical în bara laterală din stânga.
15. Sarcina BONUS: Să schimbare "luminos" meniu orizontal pe sistem "închis" de culoare.
    1. În interiorul fişier custom_functions.php:
       înlocui acest cod:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       cu acest cod:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Practic suntem comentarea o linie şi uncommenting celălalt.
    2. Acum du-te la Wordpress admin-> Instrumente-> Liste NAVT şi apăsaţi pe sus-menţionată "unelte" pentru a edita proprietăţile dvs. menu1 "grup.
    3. Faceţi clic pe "Tema" tab.
    4. In interiorul "Adăugaţi etichete înainte de navigaţie grup" zona introduceţi acest cod:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Acum - reîncărcaţi pagina dvs. - dvs. şi meniul principal de navigare orizontal "magic" a devenit întunecat, ceva de genul asta:
       

       Tema tezei de doctorat - pe mai multe niveluri imbricate meniu CSS - paletei întuneric

       Paleta de culoare inchisa pot fi mai potrivite pentru anumite site-uri decât cel culoarea luminii. Deci, acum ai o libertate de alegere in viata ta!

    6. Pentru a reveni la schema de "luminos", culoare - doar anulează de mai sus "Bonus" paşi.
16. Concluzie:
    Îmi place Tema tezei de doctorat , îmi place Wordpress si imi place faptul că avem o modalităţi de a adăuga meniuri decente de navigare pentru portalurile noastre.

20 dolari

Bucuraţi-vă!

Gleb Esman

Tagged as: ierarhică a meniului pentru WordPress , cum să construiască wordpress navigare , meniul de mai multe niveluri pentru WordPress , meniul de navigare pentru WordPress , tema tezei , tema tezei de meniu , tutorial tema tezei , meniul de WordPress , WordPress de navigare , WordPress meniul imbricate