Quest untuk menu yang sempurna ...
Ini adalah Bagian 1 dari tutorial
Bagian 2 dari tutorial ini mengajarkan bagaimana untuk membangun menu vertikal + palet warna gelap untuk yang horisontal
Saya memutuskan untuk mendapatkan tema Tesis , karena salah satu klien saya memberitahu saya tentang masalah kompatibilitas antara Tesis dan saya wordpress keanggotaan situs plugin yang MemberWing. Aku tetap dan kemudian memutuskan untuk mengambil melihat lebih dekat pada Tesis dan benar-benar peduli untuk menonton video pada halaman depan situs Tesis utama - Diythemes.com .
Yang mengesankan saya yang paling adalah perhatian terhadap detail, pengguna keramahan dan hampir semua - SEO fitur yang sangat baik pemikiran.
Plugin MemberWing keanggotaan dirancang dari bawah ke atas untuk situs keanggotaan yang akan perlu untuk menarik jus sebanyak mungkin SEO. Jadi saya membayar banyak perhatian kepada orang banyak dari SEO tambahan dan kesempurnaan di MemberWing. Banyak dari klien saya sendiri bertanya tentang tema yang berbeda untuk menggunakan dan memiliki tema yang sangat baik SEO dioptimalkan dari dalam akan sangat cocok bagi para pengusaha Portal keanggotaan.
Menggabungkan kekuatan SEO MemberWing dengan kekuatan SEO tema Tesis akan memberikan yang terbaik dari kesempatan peringkat kepada klien saya. Jadi aku punya Tesis dan bermain dengan itu selama sehari.
Ini adalah tema yang sangat baik dalam segala cara. Bagian navigasi itu meskipun agak terbatas dalam fungsi. Mulai dari Tesis 1.5 + itu adalah salah satu menu tingkat saja. Keinginan yang biasa saya adalah untuk dapat menyesuaikan navigasi sebanyak yang dibutuhkan. Beberapa situs memiliki halaman hanya sedikit, banyak orang lain telah ton halaman statis + zillions artikel / posting + banyak kategori.
Jadi dalam dunia yang ideal memiliki kesempatan untuk membuat menu nice looking pengguna hirarki terorganisir navigasi ramah adalah suatu keharusan. Tesis langsung dari kelelawar memiliki navigasi terlihat baik tetapi saya menyadari bahwa semua Tesis berbasis website tampak seperti kembar. Menyesuaikan Tesis menu navigasi tidak benar-benar mudah sehingga kebanyakan orang hanya meninggalkan sebagai adalah. Tidak ada cara untuk mengubah urutan kategori di menu atau posisi mereka di antara halaman. Dan lagi, kemampuan untuk menciptakan struktur menu bersarang hilang. Jadi saya memutuskan untuk melihat apa yang bisa dilakukan tentang hal itu.
Setelah mencoba sekitar setengah lusin menu / navigasi plugin terkait saya menetapkan pilihan saya di Wordpress Plugin Daftar NAVT Navigasi .
NAVT plugin dasarnya Generator unordered daftar dengan mewah super dan sedikit sulit mencari antarmuka admin untraditional. Apa yang menyesatkan tentang hal ini adalah bahwa hal itu tidak benar-benar membuat menu mencari mewah dengan sendirinya. Itu bagian tersulit dari pekerjaan meskipun - memberikan Anda kemampuan untuk secara visual menarik bersama-sama, dan menghasilkan daftar unordered - kerangka Anda menu-to-be. Dan Anda dapat membuat banyak menu juga. Anda mungkin menarik semua jenis barang Wordpress ke menu navigasi: halaman, posting, artikel, kategori, pengguna, blok kode, link eksternal, pemisah, pemisah dan mencampur dan mencocokkan dan sarang dan mengatur dan menyesuaikan mereka dalam struktur seperti pohon Anda inginkan.
NAVT menghasilkan untuk Anda menghasilkan daftar unordered HTML. Keindahan kedua NAVT adalah membantu Anda untuk memasukkan menu baru Anda ke tema Anda melalui logika JQuery terkenal berbasis tapi tanpa perlu mengubah kode apapun! NAVT memungkinkan Anda untuk menentukan: "menggantikan unsur # dengan menu NAVT baru saya". # Elemen bisa menjadi id atau kelas jalan dari menu yang ada atau tag div elemen yang sedang dihasilkan oleh tema Anda saat ini. Jadi NAVT hal ini penggantian untuk Anda tanpa memaksa Anda untuk pergi ke dalam kode tema dan membuatnya lebih berantakan dari yang sudah ada. Jika itu semua terdengar seperti omong kosong - jangan khawatir - saya akan memandu Anda langkah demi langkah segera. Bagian menantang dari NAVT bagi setiap orang adalah bahwa Anda harus datang dengan sebenarnya CSS + gambar + kode javascript untuk menu Anda sendiri. Dan itu terserah Anda untuk mencari tahu di mana dan bagaimana mengintegrasikan file-file ini dan membuat hal-hal dengan benar bisa terhubung bersama-sama.
Hormat kami tanpa mengetahui JQuery + beberapa PHP + CSS + memiliki pengalaman yang layak dengan Wordpress - hal ini sulit untuk menarik.
Dengan senang hati aku tahu hal ini sedikit sehingga saya memutuskan untuk menggigit peluru dan kemanusiaan panduan untuk kebebasan dalam membangun yang terbaik dari yang terbaik menu navigasi untuk Wordpress. Saya hanya perlu untuk mengetahui sumber-sumber untuk beberapa terlihat bagus CSS menu horisontal. Aku mengambil situs berkendara dinamis untuk yang terbaik, pilihan demo dan sumber.
Saya mendedikasikan satu hari untuk studi Tesis dan bermain dengan plugin NAVT. Pada akhirnya saya bangga dibuat kustom, fleksibel, SEO dioptimalkan, bertingkat, struktur bersarang nagivation untuk Tesis + situs saya berbasis Wordpress.
Daftar fitur bertingkat, menu bersarang navigasi Wordpress untuk Tesis Theme
(Anda HARUS untuk mencintai hal ini):
- Profesional, bersih tampilan dan nuansa.
- Dukungan untuk semua browser modern, termasuk MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome di javascript dan non-javascript mode.
- Anggun downgradable untuk non-javascript browser. Anda menu akan digunakan, visual serupa dan bekerja bahkan untuk browser javascript dinonaktifkan (meskipun hanya menu tingkat atas akan terlihat dan tidak flyouts akan terjadi tentu saja seperti yang dibuat oleh javascript).
- SEO friendly fitur - unordered daftar kode menu yang dihasilkan dalam HTML. Spider Google dan mesin pencari lainnya akan mampu indeks struktur navigasi Anda dan menemukan link ke halaman batin.
- Dukungan untuk tingkat bersarang terbatas dan sublevels.
- Dukungan untuk urutan apapun atau halaman, posting (melalui ditentukan pengguna URI), kategori, pengguna, blok kode kustom dan link eksternal dalam menu.
- Dukungan teks serta elemen berbasis gambar menu. (Saya belum mencoba ini meskipun).
- Struktur menu dan konten secara visual diatur melalui admin area NAVT.
- Kompak: flyouts berdasarkan JQuery untuk tingkat bersarang.
- Cepat: JQuery untuk menu-load dari server Google (Aku ingin Tesis sendiri untuk melakukan hal yang sama menariknya bukan lokal). Hal ini akan mempercepat hal-hal sedikit.
- Skalabilitas - Jenis menu diedit dan dikonfigurasi pada setiap saat melalui pengaturan plugin yang NAVT tanpa membutuhkan coding di mana saja.
Saya menggunakan menu ini sangat baik dari drive dinamis Portal sebagai dasar. Saya harus menyesuaikan kode javascript sedikit serta termasuk sepotong PHP ke custom_functions.php untuk membuatnya bekerja dengan Tesis. Juga sejumlah pra-ada halaman, kategori dan posting dari situs saya yang digunakan untuk merakit struktur menu. Spesifik Situs Anda akan berbeda - namun konsep akan sama.
Jadi mari melanjutkan, akan kita?
Petunjuk langkah demi langkah untuk setup NAVT berbasis bersarang, disesuaikan, bertingkat, SEO friendly
dan hanya plain keren mencari navigasi menu untuk Wordpress dan Tesis Tema
- Pergi ke panel admin Wordpress. Plugin-> Tambah baru, cari "navt". Plugin akan ditampilkan. Klik [Install], [Install now], "Aktifkan Plugin".
- Tools-> NAVT Daftar, Di dalam "Navigasi Grup" area menemukan "nama grup" dan masukkan: "menu1" di lapangan, tekan [Buat] tombol. "Menu1" daerah persegi panjang harus dibuat.
Ini "menu1" daerah akan menjadi taman bermain utama untuk konstruksi menu. Anda akan menyeret dan menjatuhkan sini elemen menu Anda. - Dalam "aset" daerah menemukan "lain" Listbox dan klik pada pilihan "Home". "Home" thingie akan muncul dalam wilayah "ditugaskan". Aneh, ya? Jangan khawatir, selama itu bekerja - dan itu akan bagi kita.
- Tarik "Home" thingie dari daerah "aset" ke daerah persegi panjang "menu1". Ini akan menjadi "Home" item dalam menu.
- Ulangi langkah 3-4 untuk beberapa halaman dari daerah "Halaman", serta untuk kategori di daerah "kategori". Tarik item lain yang Anda ingin menjadi pada menu Anda di dalam persegi panjang "menu1". Anda dapat mengklik halaman, kategori, pengguna dan beberapa elemen adat seperti "pembagi daftar" dan "blok kode". Blok kode adalah cara yang keren untuk menambahkan potongan kustom di dalam menu.
- Anda dapat menyeret item menu di dalam area "menu1" untuk mengatur ulang pesanan mereka.
- Anda dapat menyesuaikan posisi hirarkis setiap item menu dengan "<" dan ">" panah.
- Mengklik di teks dari setiap item menu - membuka pikiran boggling dialog kustomisasi tambahan untuk item ini. Aku banyak digunakan default namun secara teknis Anda dapat pergi gila dan mulai membuat berbasis gambar pilihan menu dan menambahkan potongan kode HTML ke dalamnya. Lanjutkan dengan hati-hati sekalipun.
- Untuk submenu unclikable linkless yang akan berfungsi sebagai "orang tua" untuk lainnya "sub-anak" saya menggunakan "Kode blok" jenis. Misalnya ketika menyesuaikan kode barang blok seperti aku masuk untuk "Menu alias item" "MemberWing" = dan untuk "Masukkan blok kode:" = "<a MemberWing href='#'> </ a>". Setelah href = "#" akan membuatnya tidak diklik, tetapi bertindak sebagai pilihan yang valid "orang tua" menu.
- Berikut adalah cara 'menu1' NAVT saya membangun struktur tampak seperti hampir selesai:
- Selesai membangun awal dan kemudian klik pada icon "gigi" untuk menyesuaikan struktur menu Anda:
- Ini akan membuka dialog dengan 4 tab: Pilihan, Tampilan, CSS, Tema.
- Pergi ke tab "Options" dan memastikan semuanya dicentang dan "nama grup" mengatakan: "menu1"
- Pergi ke "Tampilan" tab dan membuat semuanya yakin pada "kelompok navigasi Tampilkan di ..." daerah diperiksa [x]. Tinggalkan sisanya di default.
- Pergi ke tab "CSS" dan pilih tombol radio (x) "Jangan menerapkan kelas CSS".
- Pergi ke tab "Theme" dan isilah seperti itu:
Masukkan ke "Tambahkan tag sebelum ..." kode area ini:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Masukkan ke "tag Tambah setelah ..." kode area ini:
<br style='clear: left' /></div> - Tekan [menyimpan / tutup] tombol
- Pada menu membangun titik dari dalam pilihan plugin yang NAVT selesai.
Sekarang saatnya untuk melakukan sedikit tune up untuk tema Tesis untuk mendapatkannya siap. Untuk itu kita perlu menambahkan beberapa file kustom - CSS dan javascript yang dimiliki menu dan custom_functions.php pembaruan Tesis ' - Download set lengkap file di sini .
- Unzip arsip. Jika anda telah memperbarui custom_functions.php Anda dengan kustomisasi Anda - Anda perlu untuk menggabungkan mereka dengan barang-barang saya. Aku akan meninggalkan itu terserah Anda.
Jika Anda belum menyentuhnya - merasa bebas untuk menimpa itu dengan saya. Harap dicatat: Saya lebih suka posisi menu di bawah header situs (default adalah di atas) - sehingga penyesuaian saya termasuk preferensi ini juga. - Upload arsip termasuk semua subdirektori dan file di bawah Anda Tesis tema direktori 'adat', seperti ini:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Aku belum menyentuh custom.css - Saya lebih memilih untuk tetap menu khusus CSS di bawah lokasi mereka sendiri untuk menghindari menciptakan kekacauan di dalam custom.css - Pada titik ini Anda mungkin ulang website Anda dan lihat baru yang indah baru bertingkat, bersarang, menu SEO dioptimalkan.
- Anda selalu dapat kembali ke pengaturan NAVT dan menyesuaikan menu dengan pilihan lebih atau reposisi apapun. Ini akan tercermin di situs hidup secara otomatis.
Jalan depan ...
Tutorial ini mencakup contoh kreatif satu jenis menu. Aku bermain dengan yang lain - hanya untuk melihat bagaimana menu yang berwarna gelap akan terlihat seperti:
Tesis tema - bertingkat bersarang CSS menu - palet gelap
Saya pikir itu cukup bagus. Ada lebih banyak sampel navigasi yang tersedia di Dynamic Drive - semua dari mereka adalah mungkin untuk menyesuaikan untuk Tesis dan lainnya Wordpress tema dengan beberapa upaya:
Dinamis Hard Menu Horizontal
Saya harap Anda akan menemukan tutorial ini bermanfaat dan berguna. Seperti saya katakan, adalah mungkin untuk menyesuaikan salah satu menu untuk Tesis - yang diberikan waktu dan keinginan untuk mewujudkannya.
Aku bisa melakukan pekerjaan ini untuk Anda atas dasar kontrak. Hanya memilih menu yang Anda sukai, hubungi saya dan saya akan bekerja pada kode dan instruksi untuk website Anda.
$ 20
Dan tentu saja jika Anda sampai ke gedung Super SEO dioptimalkan keanggotaan premium wordpress portal - solusi terbaik untuk ini:
Tesis Tema + MemberWing keanggotaan Plugin + Wordpress host diri tentu saja.
