Ang paghahanap para sa mga perpektong Vertical menu ...

Part 1 ng tutorial na ito ay inilarawan hakbang sa pamamagitan ng hakbang na proseso ng gusali ng pahalang multilevel nested menu para sa WordPress sanaysay tema. Part 2 ay magpapatuloy sa upang mapahusay ito functionality. Narito kami ay magdagdag ng "dark" na bersyon ng pahalang navigation menu at ako ay magturo sa iyo kung paano upang lumipat sa pagitan ng "maliwanag" at "madilim" na bersyon. Part 2 ay ang superset ng Bahagi 1. Kabilang dito ang lahat mula sa Bahagi 1 + nagdadagdag ng mas cool na bagay.

Main ideya na Nais kong sa kasalukuyan ay ang pagdaragdag ng vertical menu sa tema ng tesis (at sa WordPress sa pangkalahatan). Ako ay naghahanap para sa talagang nababaluktot, SEO friendly at multi-browser tugmang vertical menu na ay magpapahintulot upang lumikha ng walang limitasyong mga nesting antas.

WEB ay tons ng mga pahina sa paksa ngunit kapag sinimulan ko upang subukan ang lahat ng mga mga halimbawa - sila alinman sinira down, bagsak magkahiwalay, suportado lamang sa limitadong bilang ng mga antas ng o misbehaved sa Gates + Ballmer ay junksplorer 6. Panghuli Nakatanggap ako pabalik sa sinubukan at pinagkakatiwalaang Dynamic Drive menu ng kani-kanilang mga vertical halimbawa pinatunayan sa gandang kaso na magkasya ang aking mahigpit na kinakailangan. Ako ay sa makabuluhang baguhin ang mga ito kahit na upang tiyakin na ito ay umaangkop sanaysay modelo.
Ang paghahanap para maging perpekto patuloy ...

Ko ginugol ang halos 16 oras ng paghahanap, assembling, pagsubok, pag-aayos, buli at tuning ang CSS vertical menu ng at. Js code at 3 / 4 ng oras ay ginugol paggawa ng ito sa trabaho sa MSIE 6.
Anyways, ako ay masaya sa ang huling resulta. Nagresulta vertical navigation menu ay ang lahat ng mga parehong mga benepisyo na ang pahalang na menu ay .

Pagkakaroon ng kakayahang magdagdag ng vertical menu ay napakahalaga sa tungkol sa 70-80% ng mga portal sa web. Pahalang na menu limitado ang "space" upang mapaunlakan ang maraming mga pagpipilian sa menu ngunit vertical menu ay hindi ang limitasyon na ito at gusto makatulong sa napakalaki. Kaya dito namin pumunta.

Maraming mga hakbang upang gawin ito nangyari ay inilarawan sa bahagi 1 ng tutorial upang ito ay gawin ito para sa isang bit mas maikli isa, ngunit may mas tampok rich resulta .

Kaya dito ito napupunta:

Building SEO friendly, vertical, multilevel, hierarchically nested menu para sa WordPress at tema ng sanaysay. Hakbang-hakbang
(... Kung ano ang hindi mo naisip posibleng ...)

1. I-install ang exec php plugin at buhayin ito . Namin ito kailangan dahil ko bang gamitin ang PHP sa loob ng text widget upang humalimuyak ang HTML code ng vertical menu.
2. Huwag ang mga hakbang 1 - 6 mula sa bahagi 1 ng tutorial. Talaga kailangan mong i-install at buhayin ang paggamit NAVT plugin + paningin bumuo ng iyong menu. Siguraduhin na ang iyong pangalan menu group ay 'menu1'. Ang pangalan na ito ay hardcoded sa custom_functions.php
3. Mag-click sa icon na 'lansungan' para sa iyong grupo sa 'menu1' upang i-edit ang mga ito ay mga katangian:
   
4. Sumusunod Hakbang 7.1 -7.3 ng Bahagi 1 tutorial upang itakda ang "Options", "Display" at "CSS" tab setting.
5. Ngayon i-click sa tab na "tema" ang dialog na ito. Kami ay patungan ang bilang ng mga setting doon (kung ikaw ay sumusunod na hakbang 1). Ito ay ok - hindi mo ay mawawala ang anumang - ngunit ang mga pagbabagong ito ay kinakailangan dahil binago ko ang ilang mga code mula sa hakbang 1.
   Narito ang kung paano ang dialog na ito ay kailangang napuno sa:
   1. Sa loob ng "Ang Tema xpath:" lugar ipasok ang code na ito (ito command upang palitan ang anumang mga tag na may mga klase):
      .jquerycssmenu, .jqueryslidemenu
   2. Itakda ang "Action" sa "Palitan ng"
   3. Inside ng "Magdagdag ng mga tag bago nabigasyon group" na lugar na ipasok ang code na ito:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Inside ng "Magdagdag ng mga tag pagkatapos nabigasyon group" na lugar na ipasok ang code na ito:
      <br style='clear: left' /></div>
   5. Mag-click sa [save / isara] na button.
6. Ngayon pumunta sa WordPress admin panel -> Hitsura -> Widgets.
7. I-drag widget na "Text" (mula sa ang malaking lugar ng "Magagamit na mga widgets") sa lugar ng "Sidebar 1" sa kanan. Kami ay pagdaragdag ng code sa widget Text na makakatulong sa amin upang matupad ang vertical menu.
   TANDAAN: maglakas-loob ko mayroon kang "Sidebar 1" sa pagkakaroon. Sanaysay pagpipilian ay nagbibigay-daan sa iyo upang i-off ito - ngunit para sa kapakanan ng tutorial na ito, ipaalam sa ito.
8. Kapag kayo dragged at bumaba ito widget - ito ay bubukas tulad ng isang bulaklak (ako pakiramdam romantikong ngayon na MSIE pakikibaka ay higit sa).
9. Sa lugar na "Pamagat" na ipasok ang "World ang pinakamahusay na vertical menu" ... Well, huwag mag-atubiling gamitin ang iyong pagkamalikhain - teksto na ay pumunta sa itaas ng iyong bagong ipinanganak na vertical menu.
10. Sa malaking lugar para sa teksto - ipasok ang code na 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. Pindutin ang [I-save ang] na button, i-click sa "Isara" na link.
12. I-download ang update hanay ng mga file dito .
    Archive Kabilang dito ang:

    
    

    • Nai-update na bersyon ng "maliwanag" pahalang na menu ng code
    • "Madilim" na bersyon ng pahalang na menu
    • Vertical menu code
    • Nai-update ang bersyon ng custom_functions.php
13. Ngayon ay kailangan mong magsiper ang archive na ito at i-upload ito sa 'custom 'na direktoryo ng iyong sanaysay tema.
    Tandaan: kung nagawa mo na ang anumang mga pagpapasadya sa loob custom_functions.php - gusto mo kailangan upang sumanib sa kanila. Kung hindi - huwag mag-atubiling itong patungan ng aking bersyon.
14. Voila! Ngayon ay maaari mong i-reload ang iyong website at makita ang parehong "maliwanag" pahalang na menu + neato vertical menu sa kaliwang sidebar.
15. Gawain ng bonus: Hayaan baguhin ang "maliwanag" pahalang na menu papunta sa "dark" scheme ng kulay.
    1. Sa loob ng custom_functions.php file:
       palitan ang code na ito:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       sa ang code na ito:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Namin ay talaga pagkomento ng isang linya at uncommenting sa iba pang mga.
    2. Ngayon pumunta sa WordPress admin-> Tools-> Listahan NAVT at mag-click sa abovementioned icon na "lansungan" i-edit ang mga katangian ng iyong grupo sa 'menu1'.
    3. Mag-click sa "tema" na tab.
    4. Inside ng "Magdagdag ng mga tag bago nabigasyon group" na lugar na ipasok ang code na ito:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Ngayon muling i-load ang iyong pahina - at ang iyong pangunahing pahalang navigation menu na "magically" naging madilim, isang bagay tulad ng:
       

       Tisis tema - multilevel nested CSS menu-dark palette

       Ang madilim na kulay palette ay maaaring maging mas angkop para sa ilang mga site kaysa sa mapusyaw na kulay ng isang. Kaya ngayon ikaw ay may kalayaan sa pagpili sa iyong buhay!

    6. Upang bumalik sa "maliwanag" kulay-undo lamang sa itaas "Bonus" na mga hakbang.
16. Konklusyon:
    Pag-ibig ko ang sanaysay Tema, pag-ibig ko ng WordPress at pag-ibig ko ang katotohanan na mayroon kaming mga paraan upang magdagdag ng disenteng menu ng nabigasyon sa aming portal.

$ 20

Enjoy!

Gleb Esman

-Tag bilang: hierarchical menu para sa WordPress , kung paano upang bumuo WordPress nabigasyon , multilevel menu para sa WordPress, ang navigation menu para sa WordPress , sanaysay tema , sanaysay tema menu , sanaysay tema tutorial , WordPress menu , WordPress nabigasyon , WordPress nested menu