The Quest for The sempurna menu ...
Ini adalah Bagian 1 dari tutorial
Bagian 2 dari tutorial ini mengajarkan bagaimana membangun menu vertikal + gelap palet warna untuk horizontal satu
Aku memutuskan untuk mendapatkan tema Tesis, karena salah satu klien saya memberitahu saya tentang masalah kompatibilitas antara Tesis dan situs keanggotaan wordpress plugin MemberWing. Aku tetap dan kemudian memutuskan untuk melihat lebih dekat pada Tesis dan benar-benar peduli untuk menonton video di halaman depan situs Tesis utama - Diythemes.com.
Apa yang paling membuat saya terkesan adalah perhatian pada detail, pengguna keramahan dan kebanyakan dari semua - SEO fitur yang sangat baik memikirkan.
Keanggotaan MemberWing plugin ini dirancang dari bawah ke atas untuk keanggotaan situs yang akan perlu untuk menarik sebanyak mungkin jus SEO. Jadi aku membayar banyak perhatian banyak SEO tambahan dan kesempurnaan dalam MemberWing. Banyak dari klien saya sendiri yang bertanya tentang tema yang berbeda untuk menggunakan dan memiliki tema yang begitu baik SEO dioptimalkan dari dalam akan menjadi sangat baik cocok untuk portal keanggotaan pengusaha.
Menggabungkan kekuatan SEO dengan SEO MemberWing kekuasaan Tesis tema akan memberikan yang terbaik dari peringkat kesempatan kepada klien saya. Jadi aku Tesis dan bermain-main dengan itu selama satu hari.
Ini merupakan tema yang sangat baik dalam segala hal. Navigasi bagian dari itu walaupun agak terbatas dalam fungsi. Mulai dari Tesis 1.5 + ini adalah salah satu menu level. Keinginan biasa adalah untuk dapat menyesuaikan navigasi sebanyak yang diperlukan. Beberapa situs hanya memiliki beberapa halaman, banyak orang lain telah ton halaman statis + zillions artikel / posting + banyak kategori.
Jadi, dalam dunia yang ideal memiliki kesempatan untuk menciptakan hirarki terorganisir nice looking menu navigasi user friendly adalah suatu keharusan. Tesis langsung dari kelelawar memiliki navigasi tampan tapi aku melihat bahwa semua Tesis berbasis website tampak seperti kembar. Menyesuaikan Tesis menu navigasi tidak benar-benar mudah sehingga kebanyakan orang hanya biarkan apa adanya. Tidak ada cara untuk mengubah urutan kategori di menu atau posisi mereka di antara halaman. Dan sekali lagi, kemampuan untuk menciptakan struktur menu bersarang hilang. Jadi saya memutuskan untuk melihat apa yang bisa dilakukan tentang hal ini.
Setelah mencoba sekitar setengah lusin menu / navigasi terkait plugin saya menetapkan pilihan saya pada Plugin Wordpress Navigasi NAVT Daftar.
NAVT plugin pada dasarnya adalah unordered list generator dengan super mewah dan sedikit keras-untuk-angka untraditional admin interface. Apa yang menyesatkan tentang hal ini adalah bahwa hal itu tidak benar-benar menciptakan menu tampak mewah dengan sendirinya. Memang bagian tersulit pekerjaan meskipun - memberi Anda kemampuan untuk secara visual menarik bersama-sama, dan menghasilkan daftar unordered - kerangka menu-to-be. Dan Anda dapat membuat banyak menu juga. Anda dapat menarik semua jenis barang Wordpress ke dalam menu navigasi: halaman, posting, artikel, kategori, pengguna, kode blok, link eksternal, pemisah, pemisah dan mencampur dan mencocokkan dan sarang dan mengatur dan menyesuaikan mereka dalam struktur seperti pohon Anda ingin.
NAVT menghasilkan untuk Anda menghasilkan HTML unordered list. Kedua keindahan NAVT adalah membantu Anda untuk memasukkan menu baru ke dalam tema Anda melalui JQuery terkenal berdasarkan logika tetapi tanpa perlu mengubah kode! NAVT memungkinkan Anda untuk menentukan: "ganti ini # unsur dengan menu NAVT baru". # unsur bisa menjadi id atau kelas jalan atau menu yang ada unsur div tag yang sedang dihasilkan oleh tema Anda saat ini. Jadi NAVT melakukan penggantian ini untuk Anda tanpa memaksa Anda untuk masuk ke kode tema dan membuatnya lebih kacau daripada yang sudah ada. Jika itu semua terdengar seperti omong kosong - jangan khawatir - saya akan memandu Anda langkah demi langkah segera. Bagian menantang NAVT untuk setiap orang adalah bahwa Anda harus datang dengan sebenarnya CSS + gambar + kode javascript untuk menu Anda sendiri. Dan terserah kepada Anda untuk mencari tahu di mana dan bagaimana mengintegrasikan file-file ini dan membuat hal ini benar bisa terhubung bersama.
Tulus tanpa mengetahui JQuery + beberapa PHP + CSS + memiliki pengalaman baik dengan Wordpress - hal ini sulit untuk menarik.
Dengan senang hati aku tahu hal ini agak jadi aku memutuskan untuk menggigit peluru dan membimbing manusia untuk kebebasan dalam membangun yang terbaik dari yang terbaik untuk Wordpress menu navigasi. Aku hanya diperlukan untuk mengetahui sumber-sumber untuk beberapa nice looking CSS menu horisontal. Aku memilih berkendara dinamis situs web untuk pilihan terbaik mereka, demo dan sumber.
Aku mempersembahkan sebuah hari untuk belajar Tesis dan bermain dengan NAVT plugin. Pada akhirnya saya bangga menciptakan kustom, fleksibel, SEO dioptimalkan, bertingkat, nagivation bersarang struktur untuk Tesis saya yang berbasis Wordpress + situs.
Daftar fitur bertingkat, bersarang Wordpress menu navigasi untuk Tesis Theme
(Anda GOT untuk mencintai barang-barang ini):
- Profesional, bersih tampilan dan nuansa.
- Dukungan untuk semua browser modern, termasuk 6,7 MSIE, Opera, Safari, Firefox 3.x, Google Chrome di kedua javascript dan non-javascript mode.
- Anggun downgradable untuk non-javascript browser. Anda menu akan digunakan, visual dan bekerja sama bahkan untuk cacat javascript browser (walaupun hanya tingkat atas navigasi akan terlihat dan tidak akan terjadi flyouts tentu saja seperti yang dibuat oleh javascript).
- SEO friendly fitur - unordered list kode menu dibuat dalam HTML. Google dan mesin pencari lainnya akan laba-laba dapat mengindeks struktur navigasi Anda dan menemukan link ke halaman batin.
- Dukungan untuk tingkat nesting tak terbatas dan sublevels.
- Dukungan untuk urutan apapun atau halaman, posting (melalui URI didefinisikan pengguna), kategori, pengguna, blok kode kustom dan link eksternal dalam menu.
- Mendukung teks-serta menu berbasis gambar elemen. (Saya belum mencoba meskipun ini).
- Struktur menu dan konten visual NAVT diatur melalui admin area.
- Kompak: JQuery berdasarkan tingkat flyouts untuk bersarang.
- Cepat: JQuery untuk menu-load dari server Google (Aku akan senang Tesis sendiri untuk melakukan hal yang sama menariknya bukan lokal). Hal ini akan mempercepat hal-hal sedikit.
- Skalabilitas - Jenis Menu ini dapat diedit dan dikonfigurasi pada setiap saat melalui pengaturan NAVT plugin tanpa membutuhkan pengkodean di mana pun.
Saya menggunakan menu luar biasa ini dari drive dinamis portal sebagai basis. Aku harus menyesuaikan kode javascript sedikit serta termasuk potongan PHP ke custom_functions.php untuk membuatnya bekerja dengan Thesis. Juga jumlah halaman yang sudah ada sebelumnya, kategori dan posting dari situs saya yang digunakan untuk merakit struktur menu. Situs spesifik akan berbeda - namun konsep akan sama.
Jadi, mari kita lanjutkan, akan kami?
Langkah demi langkah untuk setup NAVT berbasis bersarang, bisa kustomisasi dan bertingkat, SEO friendly
dan hanya biasa mencari menu navigasi keren untuk Wordpress dan Thesis Theme
- Pergi ke admin panel Wordpress. Plugins-> Tambah baru, cari "navt". Plugin akan ditampilkan. Klik [Install], [Install now], "Aktifkan Plugin".
- Peralatan-> NAVT Daftar, Inside "Navigasi Group" area menemukan "nama grup" dan masukkan: "menu1" di lapangan, tekan [Buat] tombol. "Menu1" wilayah persegi panjang harus dibuat.
Ini "menu1" area akan menjadi menu utama untuk pembangunan taman bermain. Anda akan menyeret dan menjatuhkan sini menu elemen. - Dalam "aset" daerah menemukan "lain" listbox dan klik "Home" pilihan. "Home" thingie akan muncul dalam "unassigned" area. Aneh, eh? Jangan khawatir, selama bekerja - dan itu akan bagi kita.
- Tarik ini "Home" thingie dari "aset" daerah menjadi "menu1" luas persegi panjang. Ini akan menjadi "Home" item dalam menu.
- Ulangi langkah 3-4 untuk beberapa halaman dari "Halaman" daerah, serta untuk kategori di "kategori" area. Tarik item lain yang ingin Anda berada di menu Anda dalam "menu1" persegi panjang. Anda bisa mengklik pada halaman, kategori, pengguna dan beberapa elemen adat seperti "pembagi daftar" dan "blok kode". Kode blok adalah cara untuk menambahkan keren potongan kustom dalam menu.
- Anda dapat menarik item menu di dalam "menu1" area untuk mengatur ulang pesanan mereka.
- Anda dapat mengatur posisi hierarkis dari masing-masing menu item dengan "<" dan ">" panah.
- Mengklik nama teks masing-masing item menu - membingungkan pikiran membuka dialog kustomisasi tambahan untuk item ini. Aku banyak digunakan default tapi secara teknis Anda bisa jadi gila dan mulai membuat menu berbasis gambar pilihan dan menambahkan potongan kode HTML ke dalamnya. Lanjutkan dengan hati-hati sekalipun.
- Untuk linkless unclikable submenu yang akan berfungsi sebagai "orang tua" lain "sub-anak-anak" Aku dulu "Kode blok" type. Sebagai contoh ketika menyesuaikan item blok kode tersebut saya masuk untuk "Menu item alias" = "MemberWing" dan untuk "Masukkan blok kode:" = "<a href='#'> MemberWing </ a>". Memiliki href = "#" akan membuatnya tidak dapat diklik, tetapi bertindak sebagai yang valid "orangtua" menu pilihan.
- Berikut adalah cara saya NAVT 'menu1' membangun struktur tampak seperti hampir selesai:
- Selesai bangunan awal dan kemudian klik pada "gear" ikon untuk menyesuaikan struktur menu:
- Ini akan membuka dialog dengan 4 tab: Pilihan, Display, CSS, Theme.
- Go to "Options" tab dan memastikan semuanya sudah dicentang dan "nama grup" mengatakan: "menu1"
- Pergi ke "Display" tab dan pastikan semuanya "Tampilkan grup navigasi pada ..." dicentang daerah [x]. Tinggalkan sisanya di default.
- Pergi ke "CSS" tab dan pilih tombol radio (x) "Jangan berlaku CSS kelas".
- Klik "Theme" tab dan isilah seperti itu:
Insert into "Tambahkan tag sebelum ..." area kode ini:
<div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
Masukkan ke "Tambahkan tag setelah ..." area kode ini:
<br style='clear: left' /></div> - Tekan [menyimpan / tutup] tombol
- Pada titik ini menu NAVT bangunan dari dalam pilihan plugin lengkap.
Sekarang saatnya untuk melakukan sedikit tune up untuk Tesis tema untuk mendapatkannya siap. Untuk itu kita perlu menambahkan beberapa file kustom - CSS dan javascript yang dimiliki dan memperbarui menu Tesis 'custom_functions.php - Download file lengkap di sini.
- Unzip archive. Jika anda telah memperbarui custom_functions.php Anda dengan kustomisasi anda - anda harus menggabungkan mereka dengan barang-barangku. Aku akan meninggalkan itu terserah Anda.
Jika Anda belum menyentuh itu - merasa bebas untuk menimpa dengan saya. Harap dicatat: aku lebih suka posisi menu di bawah header website (default adalah di atas) - jadi saya termasuk penyesuaian preferensi ini juga. - Upload arsip termasuk semua subdirektori dan file di bawah Tesis tema 'adat' direktori, seperti ini:
.../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
Aku belum menyentuh custom.css - Saya lebih memilih untuk tetap CSS menu-spesifik di bawah lokasi mereka sendiri untuk menghindari kekacauan dalam menciptakan custom.css - Pada titik ini Anda mungkin reload situs web Anda dan melihat indah baru bertingkat baru, bersarang, SEO menu dioptimalkan.
- Anda dapat selalu kembali ke pengaturan dan NAVT menyesuaikan menu dengan lebih banyak pilihan atau reposisi apa pun. Akan tercermin pada situs hidup secara otomatis.
Jalan di depan ...
Tutorial ini termasuk 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
I think it is pretty nice. Ada banyak lagi contoh-contoh navigasi yang tersedia di Dynamic Drive - semua itu adalah mungkin untuk menyesuaikan untuk Tesis dan Wordpress themes lain dengan beberapa upaya:
Dynamic Drive Horizontal Menu
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 suka, hubungi saya dan saya akan bekerja pada kode dan instruksi untuk website Anda.
$ 20
Dan tentu saja jika Anda sampai dengan bangunan super premium wordpress SEO dioptimalkan keanggotaan portal - solusi terbaik untuk hal ini:
Tesis Theme + MemberWing keanggotaan plugin + host Wordpress diri tentu saja.
