Pencarian untuk menu vertikal sempurna ...

Bagian 1 dari tutorial ini dijelaskan langkah demi langkah proses untuk membangun menu bersarang horisontal bertingkat untuk tema Tesis Wordpress . Bagian 2 akan melanjutkan untuk meningkatkan fungsi ini. Di sini kita akan menambahkan "gelap" versi menu navigasi horizontal dan saya akan mengajarkan cara untuk beralih antara "terang" dan "gelap" versi. Bagian 2 adalah superset dari Bagian 1. Ini mencakup semua dari Bagian 1 + menambahkan lebih banyak barang keren.

Ide utama yang ingin saya menyajikan adalah menambahkan menu vertikal untuk tema Tesis (dan ke Wordpress secara umum). Saya cari benar-benar fleksibel, SEO friendly dan multi-browser menu vertikal kompatibel yang akan memungkinkan untuk menciptakan tingkat bersarang terbatas.

WEB memiliki banyak halaman tentang topik ini tetapi ketika saya mulai mencoba semua sampel ini - mereka juga rusak, hancur berantakan, hanya didukung sejumlah level atau bertingkah di Gates + junksplorer Ballmer 6. Akhirnya aku kembali ke mencoba dan terpercaya menu Dynamic Drive sebagai sampel vertikal mereka terbukti menjadi hal bagus yang sesuai persyaratan ketat saya. Saya harus memodifikasi secara signifikan mereka meskipun untuk memastikan cocok model Tesis.
Pencarian untuk kesempurnaan terus ...

Saya menghabiskan sekitar 16 jam mencari, perakitan, pengujian, memperbaiki, polishing dan tuning menu vertikal itu CSS dan kode js. Dan 3/4 dari waktu dihabiskan sehingga untuk bekerja di MSIE 6.
Anyways, saya senang dengan hasil akhir. Menu navigasi mengakibatkan vertikal memiliki semua manfaat yang sama bahwa menu horizontal memiliki.

Memiliki kemampuan untuk menambahkan menu vertikal ini sangat penting untuk sekitar 70-80% dari portal di web. Menu horizontal telah membatasi "ruang" untuk mengakomodasi pilihan menu banyak tapi menu vertikal tidak memiliki keterbatasan ini dan akan sangat membantu. Jadi di sini kita pergi.

Banyak langkah-langkah untuk mewujudkannya sudah dijelaskan dalam bagian 1 dari tutorial jadi ini akan membuat untuk yang lebih pendek sedikit, tapi dengan hasil yang jauh lebih kaya fitur.

Jadi di sini ia pergi:

Gedung SEO friendly, vertikal, bertingkat, menu hirarkis bersarang untuk Wordpress dan tema Tesis . Langkah demi Langkah
(... Apa yang Anda pernah berpikir mungkin ...)

1. Instal Plugin exec php dan mengaktifkannya. Kami akan membutuhkannya karena saya akan menggunakan PHP dalam widget teks untuk memancarkan kode HTML menu vertikal.
2. Apakah langkah 1 - 6 dari bagian 1 dari tutorial . Pada dasarnya Anda perlu menginstal dan mengaktifkan menggunakan plugin NAVT + visual membangun menu Anda. Pastikan menu nama grup Anda adalah 'menu1'. Nama ini hardcoded di custom_functions.php
3. Klik pada ikon 'gigi' untuk grup Anda 'menu1' untuk mengedit properti itu:
   
4. Berikut Langkah 7.1 -7,3 dari Bagian 1 tutorial untuk menetapkan "Pilihan", "Tampilan" dan "CSS" tab pengaturan.
5. Sekarang klik pada tab "Theme" dari dialog ini. Kami akan menimpa sejumlah pengaturan di sana (jika Anda telah mengikuti langkah 1). Ini ok - Anda tidak akan kehilangan apa-apa - tapi perubahan ini diperlukan karena saya telah mengubah beberapa kode dari langkah 1.
   Berikut adalah cara dialog ini perlu diisi:
   1. Di dalam "Tema xpath:" daerah masukkan kode (itu memerintahkan untuk mengganti tag dengan kelas-kelas ini):
      .jquerycssmenu, .jqueryslidemenu
   2. Set "Action" untuk "Ganti dengan"
   3. Di dalam "Tambahkan tag sebelum navigasi grup" daerah masukkan kode ini:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Di dalam "Tambahkan tag setelah navigasi grup" daerah masukkan kode ini:
      <br style='clear: left' /></div>
   5. Klik [menyimpan / menutup] tombol.
6. Sekarang pergi ke panel admin Wordpress -> Appearance -> Widgets.
7. Drag "Teks" widget (dari daerah besar "widget yang tersedia") ke daerah "Sidebar 1" di sebelah kanan. Kita akan menambahkan kode ke widget Text yang akan membantu kita untuk mewujudkan menu vertikal.
   CATATAN: Saya kira Anda memiliki "Sidebar 1" yang ada. Tesis pilihan memungkinkan Anda untuk mematikannya - tetapi demi tutorial ini biarkan membuatnya menjadi.
8. Setelah Anda menyeret dan menjatuhkan widget ini - itu akan terbuka seperti bunga (saya merasa romantis sekarang bahwa perjuangan MSIE selesai).
9. Di daerah "Judul" masukkan "menu terbaik vertikal Dunia" ... Nah, jangan ragu untuk menggunakan kreativitas Anda - teks yang akan pergi di atas baru lahir menu vertikal Anda.
10. Di daerah besar untuk teks - masukkan kode 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. Tekan [Save] tombol, klik link "Close".
12. Download diperbarui set file di sini .
    Arsip ini meliputi:

    
    

    • Diperbarui versi kode "terang" menu horizontal
    • "Dark" versi menu horizontal
    • Vertikal Menu Kode
    • Diperbarui versi custom_functions.php
13. Sekarang Anda harus unzip arsip ini dan meng-upload ke dalam direktori 'kebiasaan' dari Anda tema Tesis .
    Catatan: jika Anda melakukan setiap penyesuaian dalam custom_functions.php - Anda akan perlu untuk menggabungkan mereka. Jika tidak - merasa bebas untuk menimpanya dengan versi saya.
14. Voila! Sekarang Anda mungkin reload situs web Anda dan melihat yang sama "terang" menu horizontal + Neato menu vertikal di sidebar kiri.
15. Tugas BONUS: Mari berubah "terang" menu horizontal ke skema "gelap" warna.
    1. Di dalam file custom_functions.php:
       menggantikan kode ini:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       dengan kode ini:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>"; // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>"; // "Dark" menu
       Pada dasarnya kita komentar dari satu baris dan uncommenting yang lain.
    2. Sekarang pergi ke Wordpress admin-> Tools-> Daftar NAVT tersebut di atas dan klik pada ikon "gigi" untuk mengedit properti kelompok Anda 'menu1'.
    3. Klik "Theme" tab.
    4. Di dalam "Tambahkan tag sebelum navigasi grup" daerah masukkan kode ini:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Sekarang - kembali halaman Anda - dan menu navigasi utama horisontal Anda "ajaib" menjadi gelap, sesuatu seperti itu:
       

       Tesis tema - bertingkat bersarang CSS menu - palet gelap

       Palet warna gelap mungkin lebih cocok untuk situs tertentu dari satu warna cahaya. Jadi sekarang Anda memiliki kebebasan memilih dalam hidup Anda!

    6. Untuk kembali ke skema "terang" warna - hanya membatalkan langkah di atas "Bonus".
16. Kesimpulan:
    Saya suka Tema Tesis , aku cinta Wordpress dan saya menyukai kenyataan bahwa kita memiliki cara untuk menambahkan menu navigasi yang layak untuk portal kami.

$ 20

Nikmatilah!

Gleb Esman

Tagged as: menu hirarkis untuk wordpress , bagaimana membangun wordpress navigasi , menu bertingkat untuk wordpress , navigasi menu untuk wordpress , tema tesis , tesis menu tema , tutorial tesis tema , wordpress menu , navigasi wordpress , wordpress menu bersarang