It-tiftixa għall-menu Vertikali perfetta ...

Parti 1 ta 'dan tutorja deskritti pass pass tal-proċess ta 'bini orizzontali menu nested f'diversi livelli għall- tema Thesis Wordpress . Parti 2 se tkompli fuq biex itejbu din il-funzjonalità. Hawnhekk aħna se żid "dlam" verżjoni ta 'menu tan-navigazzjoni orizzontali u I se jgħallmu kif wieħed jaqleb bejn "bright" u "dlam" verżjoni. Parti 2 hija l-superset tal-Parti 1. Dan jinkludi kollha mill-Parti 1 + żżid Jittieħed aktar jibred.

Idea prinċipali li ridt preżenti hija żżid menu vertikali fuq tema Thesis (u għal Wordpress b'mod ġenerali). I kien qed ifittex verament flessibbli, SEO menu vertikali ħbiberija u multi-browser kompatibbli li tippermetti li joħolqu livelli nesting illimitat.

WEB għandha tunnellata ta 'paġni fuq is-suġġett imma meta bdejt nipprova kollha dawn il-kampjuni - huma jew fallew, waqa apparti, appoġġata biss numru limitat ta' livelli jew misbehaved fil Gates + junksplorer Ballmer 6. Finalment jiena sibt lura għall ippruvati u fdati menus Drive dinamiċi bħala kampjuni vertikali tagħhom wera li hemm każ sbieħ li joqgħod rekwiżiti stretti tiegħi. I kellha b'mod sinifikanti modifikati għalkemm biex tiżgura li joqgħod mudell Thesis.
It-tiftixa għall-perfezzjoni tkompli ...

I jintefqu madwar 16 sigħat tiftix, assemblaġġ, ittestjar, twaħħil, illustrar u l-irfinar tas-CSS menu vertikali u l-. Kodiċi JS u 3 / 4 ta 'żmien intefqu jagħmilha li jaħdmu fil MSIE 6.
Anyways, I kien kuntent bil-riżultat finali. Irriżulta menu tan-navigazzjoni vertikali l-istess benefiċċji li menu orizzontali.

Li jkollhom kapaċità li żżid menu vertikali huwa importanti ħafna għal madwar 70-80% ta 'portali fuq il-web. Menus orizzontali limitata "spazju" biex jakkomoda ħafna għażliet menu iżda menu vertikali ma jkollux din il-limitazzjoni u jgħin immens. So here we go.

Lottijiet ta 'passi biex dan iseħħ huma diġà deskritti fil -parti 1 ta 'tutorja għalhekk dan se jagħmilha għal wieħed ftit iqsar, iżda riżultati karatteristika ferm aktar sinjuri.

Allura hawnhekk tmur:

Bini SEO friendly,, f'diversi livelli vertikali, menu ġerarkikament nested għall Wordpress u Thesis tema . Pass Pass
(... Dak li int qatt ħsibt possibbli ...)

1. Installa Exec PHP plugin u jattivaw dan. Ser ikollna bżonn għaliex I se tuża PHP ġewwa l-widget test li jarmi HTML code menu vertikali ".
2. Do passi 1 - 6 minn parti 1 ta 'tutorja . Bażikament għandek bżonn biex jinstallaw u jattiva NAVT użu plugin + viżwalment jibnu menu tiegħek. Kun żgur ismek grupp menu huwa "menu1". Dan l-isem hardcoded fil custom_functions.php
3. Ikklikkja fuq il-irkaptu 'ikona għal "menu1" tiegħek grupp li jeditjaw il-proprjetajiet huwa:
   
4. Ġej Passi 7.1 -7.3 tal-Parti 1 tutorja li jiġu stabbiliti "Options", "Wiri" u "CSS" Korpi għal Valutazzjoni Teknika settings.
5. Issa ikklikkja fuq il-"Tema" tab ta 'dan dialog. Aħna ser jissostitwixxu numru ta 'kuntesti hemm (jekk inti ġew wara pass 1). Dan huwa ok - inti mhux se jitlef xejn - iżda dawn il-bidliet huma meħtieġa għaliex stajt inbidlet xi kodiċi minn pass 1.
   Ara kif dan dialog jeħtieġ li timtela:
   1. Ġewwa ta '"Tema xpath:" żona jidħol dan il-kodiċi (li jikkmanda li tissostitwixxi kull tabella ma' dawn il-klassijiet):
      .jquerycssmenu, .jqueryslidemenu
   2. Sett "Azzjoni" għall-"Issostitwixxi bi"
   3. Ġewwa ta '"Żid tikketti qabel navigazzjoni grupp" żona jidħol dan il-kodiċi:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Ġewwa ta '"Żid tikketti wara navigazzjoni grupp" żona jidħol dan il-kodiċi:
      <br style='clear: left' /></div>
   5. Ikklikkja fuq [tiffranka / qrib] buttuna.
6. Issa mur WordPress admin panel -> Dehra -> Widgets.
7. Drag "Test" widget (mill-kbar "Disponibbli widgets" iż-żona) fis-"Sidebar 1" żona fuq il-lemin. Aħna se jkun li żżid kodiċi fil-widget Test li se tgħinna biex jimmaterjalizzaw menu vertikali.
   NOTA: I jippreżumu ikollok "Sidebar 1" fl-eżistenza. Għażliet teżi tippermetti li inti biex dan off - iżda għall-finijiet ta 'dan tutorja ħalli jagħmilha ikunu.
8. Ladarba inti mkaxkra u niżel dan widget - se jiftaħ bħal fjura (I am tħossok romantic issa li ġlieda MSIE huwa fuq).
9. Fil-"Titolu" żona jidħol "l-aħjar Dinja menu vertikali" ... Well, tħossok liberu li tuża l-kreattività tiegħek - dan it-test se jmorru fuq menu vertikali tiegħek m'ilhomx imwielda.
10. Fil-qasam kbir għal test - jidħol dan il-kodiċi 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. Agħfas [Ħlief] buttuna, ikklikkja fuq "Agħlaq" rabta.
12. Niżżel aġġornat sett ta 'fajls hawn .
    Din il-arkivju jinkludi:

    
    

    • Verżjoni aġġornata ta '"bright" kodiċi menu orizzontali
    • "Dark" verżjoni tal-menu orizzontali
    • Kodiċijiet vertikali menu
    • Verżjoni aġġornata tal custom_functions.php
13. Issa għandek bżonn biex unzip dan l-arkivju u upload fil-"custom" direttorju tal tiegħek Thesis tema .
    Nota: jekk għandek xi jsir customizations ġewwa custom_functions.php - youd bżonn li jingħaqdu magħhom. Jekk le - li tħossok liberu li jissostitwixxu dan mal-verżjoni tiegħi.
14. Voila! Issa inti tista rikarigu-website tiegħek u ara l-istess "bright" menu orizzontali + neato menu vertikali fil-sidebar xellug.
15. Kompitu BONUS: Ħalli bidla "bright" menu orizzontali fuq il-kulur iskema "dlam".
    1. Ġewwa fajl custom_functions.php:
       jissostitwixxi dan il-kodiċi:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       ma 'dan il-kodiċi:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Bażikament aħna ma jikkummentaw out linja waħda u uncommenting l-ieħor.
    2. Issa mur Wordpress admin-> Għodod-> Listi NAVT u kklikkja fuq kriterju ta '"pass" ikona li jeditjaw il-proprjetajiet ta' 'menu1 "tiegħek grupp.
    3. Ikklikkja "Tema" tab.
    4. Ġewwa ta '"Żid tikketti qabel navigazzjoni grupp" żona jidħol dan il-kodiċi:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Issa - rikarigu-paġna tiegħek - u l-menu prinċipali tiegħek navigazzjoni orizzontali "magically" saret skur, xi ħaġa bħal dik:
       

       Tema Thesis - f'diversi livelli menu nested CSS - paletta dlam

       Paletta kulur skur jistgħu jkunu aktar xierqa għal ċerti siti minn dak kulur tad-dawl. Allura issa għandek libertà ta 'għażla fil-ħajja tiegħek!

    6. Biex terġa 'lura għall-iskema ta' kulur "qawwi" - biss teqred hawn fuq "Bonus" passi.
16. Konklużjoni:
    I love Tema Thesis , I love Wordpress u I-imħabba l-fatt li għandna modi li jżid menus navigazzjoni deċenti ta 'portals tagħna.

$ 20

Jgawdu!

Gleb Esman

Tagged bħala: menu ġerarkika għal wordpress , wordpress kif tibni navigazzjoni , menu f'diversi livelli għall wordpress , menu tan-navigazzjoni għall wordpress , tema teżi , menu tema teżi , tutorja tema teżi , wordpress menu , wordpress navigazzjoni , wordpress menu nested