Pencarian untuk menu vertikal yang sempurna ...
Bagian 1 dari tutorial ini dijelaskan langkah demi langkah proses membangun bersarang menu horisontal bertingkat untuk tema Tesis Wordpress . Bagian 2 akan melanjutkan untuk meningkatkan fungsionalitas ini. Di sini kita akan menambahkan "gelap" versi menu navigasi horizontal dan saya akan mengajarkan anda bagaimana untuk beralih antara "terang" dan "gelap" versi. Bagian 2 adalah superset dari Bagian 1. Ini mencakup semua dari Bagian 1 + menambahkan keren lainnya.
Ide utama yang saya ingin ini adalah menambahkan menu vertikal untuk tema Tesis (dan ke Wordpress pada umumnya). Aku sedang mencari benar-benar fleksibel menu, ramah dan multi-browser yang kompatibel SEO vertikal yang akan memungkinkan untuk menciptakan tingkat bersarang terbatas.
WEB memiliki banyak halaman tentang topik ini tetapi ketika saya mulai mencoba semua contoh - mereka baik rusak, hancur berantakan, hanya didukung jumlah terbatas level atau bertingkah di Gates + junksplorer Ballmer 6. Akhirnya saya kembali ke mencoba dan terpercaya menu Dynamic Drive sebagai sampel vertikal mereka terbukti menjadi kasus yang bagus yang sesuai persyaratan ketat saya. Saya harus memodifikasi secara signifikan mereka meskipun untuk memastikan itu cocok model Tesis.
Pencarian untuk kesempurnaan terus ...
Aku menghabiskan waktu sekitar 16 jam pencarian, perakitan, pengujian, memperbaiki, polishing dan tuning menu vertikal CSS dan. Js kode dan 3 / 4 dari waktu yang dihabiskan untuk bekerja sehingga di MSIE 6.
Anyways, saya senang dengan hasil akhir. Menu navigasi mengakibatkan vertikal memiliki semua manfaat yang sama bahwa menu horizontal.
Memiliki kemampuan untuk menambahkan menu vertikal sangat penting untuk sekitar 70-80% dari portal di web. Horizontal menu telah membatasi "ruang" untuk menampung banyak pilihan menu 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 satu sedikit lebih pendek, tapi dengan hasil yang jauh lebih kaya fitur.
Jadi, di sini ia pergi:
Bangunan SEO friendly, vertikal, bertingkat, menu hirarki bersarang untuk Wordpress dan tema Tesis . Langkah demi Langkah
(... Apa yang Anda pernah berpikir mungkin ...)
- Instal Plugin exec php dan mengaktifkannya. Kami akan membutuhkannya karena saya akan menggunakan PHP dalam widget teks untuk memancarkan kode HTML menu vertikal '.
- 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 dalam custom_functions.php
- Klik pada ikon 'gigi' untuk grup Anda 'menu1' untuk mengedit properti itu:
- Mengikuti Langkah 7.1 -7,3 dari Bagian 1 tutorial untuk mengatur "Opsi", "Tampilan" dan "CSS" tab pengaturan.
- Sekarang klik pada tab "Tema" dari dialog ini. Kami akan menimpa sejumlah pengaturan di sana (jika Anda telah mengikuti langkah 1). Ini ok - Anda tidak akan kehilangan apa-apa - tetapi perubahan ini diperlukan karena saya telah mengubah beberapa kode dari langkah 1.
Berikut adalah cara dialog ini perlu diisi:- Di dalam "XPath Tema:" daerah masukkan kode ini (itu perintah untuk mengganti tag dengan kelas-kelas):
.jquerycssmenu, .jqueryslidemenu - Set "Aksi" untuk "Ganti dengan"
- Di dalam "Tambahkan tag sebelum navigasi grup" daerah masukkan kode ini:
<div class='jquerycssmenu' style='margin-top:5px;'> - Di dalam "Tambahkan tag setelah navigasi grup" daerah masukkan kode ini:
<br style='clear: left' /></div> - Klik pada [menyimpan / close] tombol.
- Di dalam "XPath Tema:" daerah masukkan kode ini (itu perintah untuk mengganti tag dengan kelas-kelas):
- Sekarang pergi ke panel admin Wordpress -> Appearance -> Widgets.
- Drag "Teks" widget (dari area yang besar "Tersedia widget") 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" dalam eksistensi. Tesis pilihan memungkinkan Anda untuk menonaktifkan - tetapi untuk kepentingan tutorial ini biarkan membuatnya menjadi. - Setelah Anda menyeret dan menjatuhkan widget ini - itu akan terbuka seperti bunga (saya perasaan romantis sekarang bahwa perjuangan MSIE berakhir).
- Di daerah "Judul" masukkan "menu terbaik vertikal Dunia" ... Nah, merasa bebas untuk menggunakan kreativitas Anda - teks yang akan pergi di atas baru lahir menu vertikal Anda.
- Di daerah yang 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;
?> - Tekan [Save] tombol, klik pada link "Close".
- Ambil diperbarui set file di sini .
Arsip ini meliputi:- Diperbarui versi kode "terang" menu horizontal
- "Gelap" versi menu horizontal
- Vertikal Menu kode
- Diperbarui versi custom_functions.php
- Sekarang Anda perlu meng-unzip arsip ini dan upload ke direktori 'kebiasaan' dari Anda tema Tesis .
Catatan: jika Anda telah melakukan apapun kustomisasi dalam custom_functions.php - Anda akan perlu untuk menggabungkan mereka. Jika tidak - merasa bebas untuk menimpanya dengan versi saya. - Voila! Sekarang Anda dapat memuat situs web Anda dan melihat hal yang sama "terang" menu horizontal + Neato menu vertikal di sidebar kiri.
- Tugas BONUS: Mari perubahan "terang" menu horizontal ke skema "gelap" warna.
- Di dalam file custom_functions.php:
mengganti 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 kami adalah komentar dari satu baris dan uncommenting yang lain. - Sekarang pergi ke Wordpress admin-> Tools-> Daftar NAVT dan klik pada ikon tersebut di atas "gigi" untuk mengedit properti dari kelompok Anda 'menu1'.
- Klik "Theme" tab.
- Di dalam "Tambahkan tag sebelum navigasi grup" daerah masukkan kode ini:
<div class='jqueryslidemenu' style='margin-top:5px;'> - 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 pilihan dalam hidup Anda!
- Untuk kembali ke skema "terang" warna - hanya membatalkan langkah di atas "Bonus".
- Di dalam file custom_functions.php:
- Kesimpulan:
Saya suka Tesis Theme , aku mencintai Wordpress dan aku menyukai kenyataan bahwa kita memiliki cara untuk menambahkan menu navigasi yang layak untuk portal kami.
$ 20
Nikmatilah!
Gleb Esman
comments } { 5 komentar }
