Tesis Theme - bertingkat, bersarang, SEO friendly menu - Tutorial

Tesis Theme Tutorial - menambahkan bertingkat, bersarang, menu navigasi SEO friendly ke Wordpress

oleh gesman pada 8 Juli 2009

The Quest untuk menu yang sempurna ...

Ini adalah Bagian 1 dari tutorial
Bagian 2 dari tutorial ini mengajarkan bagaimana membangun + menu vertikal palet warna gelap untuk satu horisontal

Aku memutuskan untuk mendapatkan tema Tesis , karena salah satu klien saya informasi tentang masalah kompatibilitas antara Tesis dan saya keanggotaan situs wordpress plugin MemberWing. Aku tetap dan kemudian memutuskan untuk melihat lebih dekat Skripsi dan benar-benar peduli untuk menonton video di halaman depan situs Tesis utama - Diythemes.com .
Apa yang paling mengesankan saya adalah perhatian terhadap detail, kemudahan, dan fitur SEO hampir semua - yang sangat baik pemikiran.
plugin keanggotaan MemberWing dirancang dari bawah ke atas untuk situs keanggotaan yang akan perlu menarik sebagai jus SEO sebanyak mungkin. Jadi saya membayar banyak perhatian kepada orang banyak perangkat tambahan SEO dan kesempurnaan dalam MemberWing. Banyak dari klien saya sendiri yang bertanya tentang tema yang berbeda untuk menggunakan dan memiliki tema yang sangat baik SEO dioptimalkan dari perasaan yang terdalam akan menjadi pasangan yang sangat baik untuk keanggotaan pengusaha portal.

Menggabungkan kekuatan SEO MemberWing dengan kekuatan SEO dari akan memberikan yang terbaik dari peluang peringkat kepada klien saya. Jadi aku punya Tesis dan bermain dengan itu selama sehari.

Ini merupakan tema yang sangat baik dalam segala hal. Bagian navigasi itu meskipun adalah sedikit terbatas dalam fungsi. Mulai dari Skripsi 1.5 + menu ini adalah salah satu tingkat saja. keinginan biasa saya adalah dapat menyesuaikan navigasi sebanyak yang dibutuhkan. Beberapa situs hanya beberapa halaman, banyak orang lain telah ton halaman statis + zillions artikel / posting + banyak kategori.
Jadi di dunia yang ideal memiliki kesempatan untuk membuat menu navigasi user nice looking terorganisir secara hirarkis ramah adalah suatu keharusan. Tesis kanan dari kelelawar telah tampan navigasi tapi saya melihat bahwa semua situs web Skripsi berbasis tampak seperti kembar. Menyesuaikan menu navigasi Tesis 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 sekali lagi, kemampuan untuk menciptakan struktur menu nested hilang. Jadi aku memutuskan untuk melihat apa yang bisa dilakukan tentang hal ini.
Setelah mencoba sekitar setengah lusin menu / navigasi plugins terkait saya menetapkan pilihan saya di Wordpress Plugin Navigasi Daftar NAVT .
plugin NAVT pada dasarnya adalah daftar unordered generator dengan super mewah dan agak sulit angka antarmuka admin untraditional. Apa yang menyesatkan tentang hal ini adalah bahwa hal itu tidak benar-benar membuat menu cari mewah dengan sendirinya. Itu bagian terberat dari pekerjaan meskipun - memberi Anda kemampuan untuk secara visual menarik bersama-sama, dan menghasilkan daftar unordered - kerangka Anda menu-to-be. Dan Anda dapat membuat menu terlalu banyak. Anda dapat menarik semua jenis barang Wordpress ke dalam menu navigasi: halaman, posting, artikel, kategori, pengguna, kode blok, link eksternal, pembagi, 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 berdasarkan logika Anda melalui JQuery terkenal tapi tanpa perlu mengubah kode apapun! NAVT memungkinkan Anda untuk menentukan: "menggantikan elemen ini # dengan menu NAVT baru saya". elemen # bisa menjadi id atau kelas jalan menu yang ada atau tag div elemen yang sedang dihasilkan oleh tema Anda saat ini. Jadi NAVT hal ini penggantian bagi Anda tanpa memaksa Anda untuk pergi ke kode tema dan membuatnya lebih berantakan dari yang sudah ada sekarang. 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 CSS aktual + 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-sama.
Hormat kami tanpa mengetahui JQuery + beberapa PHP + CSS + memiliki pengalaman yang layak dengan Wordpress - hal ini sulit untuk menarik.
Senang hati saya tahu hal ini sedikit jadi saya memutuskan untuk menggigit peluru dan kemanusiaan panduan untuk kebebasan dalam membangun yang terbaik dari menu navigasi yang terbaik untuk Wordpress. Aku hanya perlu untuk mengetahui beberapa sumber untuk mencari menu bagus CSS horizontal. Aku memilih drive website dinamis untuk terbaik pilihan mereka, demo dan sumber.

Saya mendedikasikan hari untuk studi Skripsi dan bermain dengan plugin NAVT. Pada akhirnya saya bangga menciptakan kustom, fleksibel, SEO dioptimalkan, bertingkat, struktur nested Nagivation untuk situs saya + Wordpress Skripsi berbasis.

Daftar fitur bertingkat, menu navigasi Wordpress bersarang untuk
(Anda GOT 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 kedua javascript dan mode non-javascript.
  • Anggun diturunkan untuk browser non-javascript. Anda menu akan digunakan, visual serupa dan bahkan bekerja untuk browser dinonaktifkan javascript (meskipun hanya navigasi tingkat atas akan terlihat dan tidak ada flyouts akan terjadi tentu saja seperti yang dibuat oleh javascript).
  • fitur SEO friendly - mencantumkan kode menu unordered dihasilkan dalam HTML. Spider Google dan mesin pencari lainnya akan dapat mengindeks struktur navigasi Anda dan menemukan link ke halaman batin.
  • Dukungan untuk tingkat yang tak terbatas dan sublevels bersarang.
  • Dukungan untuk setiap pesanan atau halaman, posting (melalui URI didefinisikan pengguna), kategori, pengguna, blok kode kustom dan link eksternal dalam menu.
  • Mendukung teks serta elemen menu berbasis gambar. (Saya belum mencoba ini meskipun).
  • Struktur Menu dan konten visual diatur melalui admin area NAVT.
  • Compact: flyouts JQuery berbasis untuk tingkat bersarang.
  • Cepat: JQuery untuk menu di-load dari server Google (aku Tesis cinta itu sendiri untuk melakukan hal yang sama menariknya bukan lokal). Hal ini akan mempercepat hal-hal yang sedikit.
  • Skalabilitas - Jenis menu diedit dan dikonfigurasi pada setiap saat melalui pengaturan plugin NAVT tanpa membutuhkan coding di mana saja.

Saya menggunakan menu ini sangat baik dari drive dinamis portal sebagai dasar. Aku harus menyesuaikan kode javascript sedikit serta mencakup serangkaian PHP ke custom_functions.php untuk membuatnya bekerja dengan Tesis. Juga jumlah halaman yang sudah ada sebelumnya, kategori dan posting dari situs saya digunakan untuk merakit struktur menu. Situs Anda yang spesifik akan berbeda - tetapi konsep akan sama.
Jadi mari kita lanjutkan, akan kami?

Petunjuk langkah demi langkah untuk setup NAVT berbasis nested, bisa kustomisasi dan bertingkat, SEO friendly
dan just plain cool mencari menu navigasi untuk Wordpress dan Tesis Theme

  1. Buka panel admin Wordpress. Plugins-> Tambah baru, mencari "navt". Plugin akan ditampilkan. Klik [Install], [Install now], "Aktifkan Plugin".
  2. Peralatan-> NAVT Daftar, Inside "Navigasi Group" daerah menemukan "nama grup" dan masukkan: "menu1" di lapangan, tekan [Buat] tombol. "Menu1" wilayah persegi panjang harus dibuat.
    Ini "menu1" daerah akan menjadi tempat bermain utama untuk konstruksi menu. Anda akan menyeret dan menjatuhkan sini elemen menu Anda.
  3. Dalam "aset" daerah menemukan "lain" listbox dan klik pada "" pilihan Home. "Home" thingie akan muncul dalam "ditugaskan" daerah. Aneh, eh? Jangan khawatir, selama bekerja - dan ia akan untuk kita.
  4. Tarik ini "Home" thingie dari "aset" daerah menjadi "menu1" wilayah persegi panjang. Ini akan menjadi "Home" item dalam menu.
    • Ulangi langkah 3-4 untuk beberapa halaman dari "" area Halaman, serta untuk kategori di "kategori" daerah. Tarik item lain yang Anda ingin berada di dalam menu "menu1" persegi panjang. Anda bisa mengklik pada halaman, kategori, pengguna dan beberapa elemen adat seperti "pembagi daftar" dan "blok kode". Kode blok adalah keren cara untuk menambahkan potongan kustom di dalam menu.
    • Anda dapat menarik item menu di dalam "menu1" daerah untuk mengatur ulang pesanan mereka.
    • Anda dapat mengatur posisi hirarkis setiap item menu dengan "<" dan ">" panah.
    • Mengklik nama teks setiap item menu - membuka pikiran boggling dialog kustomisasi ekstra untuk item ini. Aku banyak digunakan default namun secara teknis Anda bisa jadi gila dan mulai membuat pilihan menu berbasis gambar dan menambahkan potongan kode HTML ke dalamnya. Lanjutkan dengan hati-hati sekalipun.
    • Untuk submenu unclikable linkless yang akan menjadi "orang tua" untuk yang lain "-anak sub" Aku dulu "blok Kode" jenis. Sebagai contoh bila mengubah kode blok item itu saya masukkan untuk "alias Menu item" = "MemberWing" dan untuk "Masukkan blok kode:" = "<a href='#'> MemberWing </ a>". Memiliki href = "#" akan membuatnya tidak dapat diklik, tetapi bertindak sebagai orang tua "valid" menu pilihan.
  5. Berikut adalah cara menu1 'struktur NAVT saya' membangun tampak seperti hampir selesai:
    navt_building_icon
  6. Selesai bangunan awal dan kemudian klik "gigi" ikon untuk menyesuaikan struktur menu Anda:
    navt_customize_menu
  7. Ini akan membuka dialog dengan 4 tab: Pilihan, Tampilan, CSS, Tema.
    1. Pergi ke "Options" tab dan memastikan semuanya dicentang dan "Nama grup" mengatakan: "menu1"
    2. Pergi ke "Display" tab dan membuat segalanya yakin pada "kelompok navigasi Tunjukkan pada ..." daerah diperiksa [x]. Tinggalkan sisanya di default.
    3. Pergi ke "" tab CSS dan pilih tombol radio (x) "Jangan menerapkan kelas CSS".
    4. Klik "Theme" tab dan isi dalam seperti itu:
      navt_configuration_theme_tab_icon
      Masukkan ke "Tambahkan tag sebelum ..." kode area ini:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Masukkan ke "Tambahkan tag setelah ..." kode area ini:
      <br style='clear: left' /></div>
    5. Tekan [menyimpan / close] tombol
  8. Di gedung ini dari dalam menu titik NAVT pilihan plugin selesai.
    Sekarang saatnya untuk melakukan sedikit tune up untuk siap untuk mendapatkannya. Untuk itu kita perlu menambahkan beberapa file kustom - CSS dan javascript yang milik menu dan update custom_functions.php Tesis '
  9. Download file lengkap di sini .
  10. Unzip arsip. Jika Anda telah memperbarui custom_functions.php Anda dengan kustomisasi Anda - Anda harus menggabungkan mereka dengan barang-barangku. Aku akan menyerahkannya kepada Anda.
    Jika Anda belum menyentuh itu - merasa bebas untuk menimpa dengan saya. Harap dicatat: aku lebih suka ke menu posisi bawah header website (default adalah di atas) - sehingga penyesuaian saya termasuk preferensi ini juga.
  11. Upload arsip termasuk semua subdirektori dan file di bawah Anda 'kustom' 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 khusus di bawah lokasi mereka sendiri untuk menghindari menciptakan kekacauan di dalam custom.css
  12. Pada titik ini Anda mungkin ulang website Anda dan lihat baru yang indah baru bertingkat, bersarang, SEO menu dioptimalkan.
  13. Anda selalu dapat kembali ke pengaturan NAVT dan menyesuaikan menu pilihan yang lebih banyak atau reposisi apa pun. Ini akan tercermin di situs hidup secara otomatis.

Jalanan di depan ...

Tutorial ini termasuk contoh kreatif dari satu jenis menu. Aku bermain dengan yang lain - hanya untuk melihat bagaimana menu berwarna gelap akan terlihat seperti:

Thesis theme - multilevel nested CSS menu - dark palette

- bertingkat CSS nested menu - gelap palet

Saya pikir itu sangat bagus. Ada banyak contoh navigasi yang tersedia di Dynamic Drive - semua itu adalah mungkin untuk menyesuaikan untuk Skripsi dan lainnya Wordpress tema dengan beberapa upaya:

Dynamic Drive Horizontal Menus

Dynamic Drive Menu Horisontal

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 berdasarkan kontrak. Tinggal pilih 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 SEO dioptimalkan keanggotaan premium wordpress portal - solusi terbaik untuk hal ini:
Tesis Theme + plugin keanggotaan MemberWing + Wordpress host diri tentu saja.

Tinggalkan Komentar

Posting sebelumnya:

Next post: