Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Widgets
Code

Membuat Widget Tab untuk Jenis Posting Kustom

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Jenis posting kustom memberi Anda kemungkinan tak terbatas untuk membuat konten. Triknya adalah mencoba menyajikan semuanya kepada pengguna Anda. Kami membicarakan tingkat bouncing di sini, dan salah satu cara terbaik untuk mengurangi rasio pentalan Anda dan menjaga pengguna di situs Anda adalah menyajikan konten sebanyak mungkin dengan cara yang bersih dan terorganisir. Tutorial ini menawarkan satu solusi dengan menunjukkan kepada Anda cara membuat custom, tab widget yang meraih artikel terbaru Anda dari beberapa jenis posting kustom, dan sebagai bonus, menunjukkan kepada Anda bagaimana untuk menampilkan peringkat bintang di samping setiap posting!


Ikhtisar. Rencana Serangan Kita

Tutorial ini menjelaskan cara memodifikasi tema yang ada (bukan cara membuat plugin) dengan menambahkan jenis posting kustom baru, dan kemudian membuat widget kustom yang tab antara jenis posting kustom baru menggunakan transisi jQuery mewah. Selain itu, Anda akan belajar cara menggunakan bidang meta khusus pada jenis posting kustom baru untuk menetapkan peringkat bintang yang akan muncul di widget kustom yang kami buat.

Akhirnya, widget akan dapat mengurutkan jenis posting kustom berdasarkan tanggal atau peringkat. Berikut ini adalah cetak biru produk akhir kami dan di mana masing-masing elemen berasal dari:

Hanya ada tiga file yang perlu Anda modifikasi untuk menambahkan fungsi ini ke tema Anda, yang semuanya adalah file standar yang datang dengan hampir semua tema WP:

  1. functions.php
  2. header.php
  3. style.css

Saya akan menggunakan tema WP 3.0 default yang disebut TwentyTen dalam tutorial ini, tetapi metodenya akan sama untuk setiap tema yang ingin Anda ubah - Anda masih akan mengedit (atau membuat jika tidak ada) ketiga file ini tidak masalah tema mana yang Anda modifikasi/buat. Jenis posting kustom yang akan saya buat adalah Ulasan Film, Ulasan Musik, dan Ulasan Game:


Langkah 1. Buat Jenis Posting Kustom

Sebelum kami membuat widget yang akan menampilkan ulasan kami, pertama-tama kami harus membuat ulasan sendiri, dan untuk itu kami harus membuat tiga jenis posting kustom baru. Tutorial ini mengasumsikan Anda terbiasa membuat jenis posting kustom, jadi jika Anda perlu memolesnya sebelum Anda melanjutkan, Codex menjelaskan cara mendaftarkan jenis posting baru secara detail. Sekarang kita akan membuat jenis posting Ulasan Movie kami. Buka file functions.php dan tambahkan kode berikut di bagian akhir:

Ini menciptakan jenis posting yang disebut oswc_movie_reviews, memberi tahu WP apa semua label dari jenis posting seharusnya, membuat jenis posting publik, meletakkannya tepat setelah menu Komentar di struktur menu admin WP, menulis ulang siput dari jenis posting (lebih cantik di permalinks), memberi tahu WP untuk mengaktifkan atribut tertentu untuk jenis posting (seperti thumbnail dan kutipan), dan akhirnya memberi tahu WP untuk membiarkan pengguna menetapkan kategori dan tag ke jenis posting seperti posting biasa.

Demi keringkasan kami tidak akan mendefinisikan taksonomi khusus apa pun, karena widget yang akan kami buat tidak berinteraksi dengan taksonomi dengan cara apa pun. Dalam situasi dunia nyata, Anda mungkin akan membuat taksonomi kustom cush sebagai Genre Film, Sutradara Film, Aktor, dll. Untuk melihat cara membuat taksonomi kustom, lihat Codex WordPress yang tertaut ke atas.

"Saat menulis fungsi dan variabel Anda sendiri, selalu ada baiknya untuk menggunakan awalan pada nama hanya untuk memastikan tidak menggunakan nama yang sama dengan fungsi atau variabel plugin WP atau pihak ketiga lainnya. Anda akan melihat tutorial ini baik prefaces, atau termasuk dalam semua fungsi dan nama variabel, string oswc_."

Selanjutnya, mari buat dua jenis posting khusus lainnya yang akan kami gunakan dalam widget ini. Logikanya persis sama dengan jenis Ulasan Film yang baru saja kami tambahkan. Yang kami lakukan adalah mengubah kode untuk mencerminkan Ulasan Musik dan Ulasan Game, masing-masing. Tambahkan kode ini setelah kode yang Anda tambahkan di atas:

Unggah file function.php yang dimodifikasi dan Anda sekarang akan melihat item menu untuk ketiga jenis posting khusus. Panel admin Anda akan terlihat seperti ini:


Langkah 2. Tulis Beberapa Ulasan

Review

Sekarang kita telah mengaktifkan opsi untuk menambahkan ulasan, mari menulis beberapa! Klik Add new review di bawah menu Tinjauan Film dan tulis ulasan seperti Anda akan menulis posting yang normal. Berikan judul, posting konten, kategori, tag, dan gambar unggulan.

Rating

Jadi apa yang harus kita lakukan agar ulasan memiliki peringkat bintang yang muncul di widget? Sederhana: tambahkan Bidang Khusus. Pertama, pastikan Anda memiliki panel Bidang Kustom yang diaktifkan di kotak alat Opsi Layar Anda dengan beralih ke tab Opsi Layar dan memilih Bidang Kustom:

Dengan bidang khusus yang terlihat, tambahkan bidang khusus baru bernama Rating. Beri nilai angka dari 0 hingga 5, ditambah 0,5. Jadi, nilai yang tersedia adalah 0, 0,5, 1, 1,5, 2, 2,5, 3, 3,5, 4, 4,5, 5.

"Satu-satunya bagian yang perlu Anda tambahkan agar widget ini berfungsi adalah judul dan bidang khusus, semua yang lain ada di sana, dan apa yang Anda tambahkan tergantung pada bagaimana Anda ingin mengatur situs spesifik Anda."

Tambahkan ulasan dengan cara yang sama untuk dua jenis ulasan lainnya. Tambahkan setidaknya beberapa ulasan untuk masing-masing dari tiga jenis sehingga widget akan memiliki sesuatu untuk ditampilkan. Dengan konten kami di tempat, sekarang kami siap untuk membangun widget yang akan menampilkan ulasan kami. Kami akan menyerang widget dalam tiga fase: PHP, kemudian jQuery, dan akhirnya CSS.


Langkah 3. Buat Widget Kustom PHP

Ini adalah langkah paling terlibat dalam tutorial. Pada langkah ini, kita akan menulis kode PHP yang membuat dan menambahkan widget kustom kami ke WordPress, dan kemudian menulis fungsi PHP khusus yang mengatur menampilkan peringkat bintang untuk setiap ulasan.

Custom Widget

Ada empat fungsi yang perlu kita tambahkan ketika memperluas kelas WP_Widget untuk menambahkan widget kita. Berikut adalah struktur kode yang akan kita gunakan untuk memperluas kelas:

Seperti yang Anda lihat, kita memerlukan fungsi yang menamai dan membuat widget, fungsi yang mengontrol bagaimana ia ditampilkan di ujung depan, fungsi yang menangani pembaruan opsi widget, dan fungsi yang mengontrol bagaimana ia ditampilkan di panel admin ( halaman WordPress >> Appearance >> Widgets). Setelah kami melakukan semua itu, kami mendaftarkan widget dengan WordPress.

Untuk detail tentang mengembangkan widget, lihat Codex, yang selanjutnya menjelaskan WordPress Widgets API.

Mari kita membangun setiap fungsi dan menjadikan semuanya unik untuk widget kustom kami. Pertama, kita membungkus semuanya di kelas dengan nama widget kami:

Lalu kita tambahkan fungsi pertama di dalam kelas itu. Fungsi ini memiliki nama yang sama dengan kelas, yang merupakan nama dari widget kami. Kami akan menyiapkan nama bagus dari widget kami yang ditampilkan di halaman widget, serta beberapa pengaturan default untuk widget:

Sekarang mari tambahkan fungsi berikutnya. Pertama, kita ambil variabel dari widget kita (yang akan kita setup di fungsi berikutnya), dan kemudian buat variabel untuk melihat cara kita menyortir widget:

Kemudian, kami mulai membuat HTML. Bungkus seluruh widget dalam div dengan id "tabbed-review" (jQuery akan menghubungkannya nanti) dan kemudian mengatur tab untuk setiap jenis ulasan. Akhirnya, div lain membungkus konten di setiap tab:

Di dalam div tabdiv-wrapper kita perlu membuat loop yang meraih judul posting dan peringkat bintang dari jenis posting khusus yang ditentukan. Tab pertama adalah untuk Ulasan Film, jadi kami memeriksa untuk melihat apakah jenis tinjauan ditampilkan di opsi widget, dan jika demikian kami menampilkan tab dengan daftar tidak berurutan di dalamnya. Ini adalah blok kode lengkap untuk konten tab Ulasan Film, yang akan kami pilih di bawah ini:

Inti dari blok kode itu adalah lingkaran khusus yang kita buat untuk mengambil posting dari jenis posting Ulasan Movie. Berikut adalah argumen yang kami gunakan untuk loop:

Pertama kami menggunakan suppress_filters hanya untuk memastikan kami hanya mengambil jenis posting tertentu yang kami inginkan (beberapa tema atau plugin dapat memiliki fungsi yang menyuntikkan semua loop dengan semua jenis posting - argumen ini memastikan widget kami tetap sesuai dengan jenis tulisan yang ditentukan).

Bagian yang paling penting adalah post_type=oswc_movie_reviews, karena itu memberitahu loop ini untuk hanya mencari jenis posting kustom yang kami buat di atas. Akhirnya, kami hanya memasukkan opsi widget kami untuk jumlah posting dan penyortiran.

Untuk mendapatkan bintang kami, kami mengambil nilai bidang khusus yang kami tambahkan ke ulasan:

Lalu kami meneruskan nilai itu ke fungsi yang belum kami buat:

Setelah pengulangan, kami menyertakan tautan Lainnya. Masukkan URL ke halaman jenis posting khusus Anda untuk tautan href (membuat halaman ini di luar lingkup tutorial ini).

Sekarang kita hanya perlu melakukan hal yang sama untuk Ulasan Musik dan Ulasan Game. Berikut adalah blok kode lengkap untuk kedua jenis ulasan:

Jangan lupa untuk menutup tag div yang kami gunakan di awal widget HTML kami dan tutup fungsi PHP!

Fungsi ketiga kami di dalam kelas WP_Widget adalah fungsi pembaruan. Semua fungsi ini tidak menerima opsi lama dan baru dari widget ketika tombol Save diklik, dan memperbarui pengaturan pengaturan widget yang sesuai:

Fungsi keempat dan terakhir kami untuk membuat widget kami mengatur bagaimana widget kami akan muncul di halaman admin. Anda akan melihat kolom formulir dibuat untuk setiap opsi yang perlu kita tangani. Kode ini akan memungkinkan widget untuk menawarkan 7 opsi berikut:

  1. Bagaimana mengurutkan posting
  2. Apakah atau tidak untuk menampilkan tab Ulasan Film
  3. Berapa banyak Ulasan Film untuk ditampilkan
  4. Apakah atau tidak untuk menampilkan tab Ulasan Musik
  5. Berapa banyak Ulasan Musik untuk ditampilkan
  6. Apakah atau tidak untuk menampilkan tab Game Review
  7. Berapa banyak Ulasan Game yang ditampilkan

Berikut adalah kode yang mengatur opsi admin widget kami:

Perhatikan bahwa kami menutup seluruh kelas kami di bagian paling akhir dari fungsi itu. Sekarang setelah kami membuat nyali widget kami, jangan lupa untuk mendaftar dengan WordPress!

Berikut ini adalah blok kode lengkap yang digunakan untuk membuat widget untuk kenyamanan Anda:

Fungsi Peringkat Bintang

Itu saja untuk widget kami. Satu hal yang harus dilakukan dalam file functions.php kami: buat fungsi yang kami sebut di atas yang menghasilkan HTML untuk rating bintang. Inilah fungsi yang harus Anda tambahkan di bawah kode widget yang Anda tambahkan di atas:

"Gambar bintang yang digunakan widget ini terdapat dalam file unduhan untuk tutorial ini."

Fungsi ini menerima nilai peringkat (angka antara tetapi termasuk 0 dan 5) dan menggunakan jika... pernyataan lain untuk memeriksa dan melihat berapa banyak bintang yang menghasilkan warna kuning dan berapa banyak bintang yang dibuat menjadi abu-abu. Ini menampilkan div dengan kelas "bintang" lima kali berturut-turut, dan setiap kali memeriksa rating dan membandingkannya dengan bintang mana yang ditampilkan, dan menambahkan kelas "penuh" jika rating lebih besar dari atau sama dengan bintang saat ini, atau kelas "setengah" jika rating lebih besar dari bintang sebelumnya.

Bingung dengan logika setengah bintang? Ini hanya berarti jika bintang lebih besar dari bintang sebelumnya, tetapi tidak lebih besar dari atau sama dengan bintang ini, ini harus menjadi bintang setengah.

Catatan: semua bintang berada di dalam div dengan "bintang" kelas, yang akan kami targetkan untuk menerapkan gaya kami nanti.


Langkah 4. Pengaturan Widget

Sekarang kami telah melakukan semua pekerjaan coding widget kami, WordPress akan mengenalinya di halaman widget, dan kami dapat mengaturnya agar muncul di sidebar kami. Buka Penampilan >> Widget dan seret widget baru kami, yang disebut Tab Ulasan Terbaru, ke salah satu bilah sisi. Kami akan menggunakan Area Widget Utama dalam tema TwentyTen. Perluas pengaturan widget untuk melihat opsi yang tersedia yang kami siapkan pada langkah sebelumnya:

Pilih bagaimana Anda ingin mengurutkan widget (baik dengan nilai tertinggi atau terbaru), pilih untuk menampilkan masing-masing dari tiga jenis ulasan, dan menunjukkan berapa banyak dari setiap jenis ulasan yang ingin Anda tampilkan. Simpan pilihan Anda dan Anda sekarang akan memiliki widget (yang agak) bekerja di situs Anda. Tentu saja, kami belum menerapkan gaya apa pun, jadi tidak akan terlihat terlalu cantik sampai kami menyelesaikan dua langkah berikut: menerapkan jQuery dan CSS.


Langkah 5. Splash Dalam Beberapa jQuery

Widget ini menggunakan jQuery UI untuk transisi tab. Jadi, kita perlu melakukan tiga hal sederhana untuk menghubungkan UI jQuery dengan widget kami: 1) memuat jQuery library, 2) memuat plugin jQuery UI, dan 3) memanggil fungsi tab jQuery UI di widget kami.

Muat pustaka jQuery

WordPress hadir dengan jQuery sudah disertakan. Sebagian orang lebih suka memuatnya dari CDN atau bahkan mengunggah pustaka dan menggunakannya dalam tema mereka. Untuk mempelajari tentang memuat jQuery dalam WordPress, kunjungi Codex. Untuk memasukkannya ke dalam tema TwentyTen, yang harus kita lakukan adalah semua satu baris kode dalam file header.php. Buka file header.php dan tambahkan panggilan berikut ke jQuery sebelum fungsi wp_head () (jadi itu ada di suatu tempat sebelum baris 51 dalam tema TwentyTen):

Memuat plugin jQuery UI

Ini adalah teknik yang sama dengan memuat pustaka jQuery, kecuali kami ingin memanggil yang ini setelah fungsi wp_head () (jadi itu akan berada di suatu tempat setelah baris 51 dalam tema TwentyTen):

Panggil fungsi tab jQuery UI di widget kami

Tambahkan kode berikut langsung setelah kode UI jQuery yang baru saja kami tambahkan:

Kami hanya memanggil fungsi tab (yang diberikan oleh jQuery UI untuk kami) pada daftar tak berurutan di dalam tag div tab-ulasan, dan kami menerapkan tombol opacity pada transisi antar tab. Anda dapat menurunkan durasi untuk beralih lebih cepat, atau meningkatkannya untuk beralih lebih lambat (pikirkan nomor ini sebagai penundaan, bukan kecepatan).


Langkah 6. Gaya Widget Menggunakan CSS

Jika Anda melihat widget Anda sekarang mungkin Anda tidak akan senang karena kami tidak menata sama sekali. Langkah terakhir adalah menerapkan beberapa aturan CSS yang akan membuat widget kita benar-benar terlihat seperti widget, dan berfungsi dengan benar juga. Buka file style.css Anda dan tambahkan gaya berikut di akhir file:

Bagian pertama dari gaya berlaku untuk tab dan area konten di dalam setiap tab. Seperti yang Anda lihat, padding, border, dan warna latar belakang diberikan kepada elemen-elemen berbeda yang membentuk wadah tab. Bagian kedua dari gaya berlaku untuk wadah bintang. Gambar latar belakang digunakan untuk tiga keadaan bintang yang berbeda dari kosong, setengah, dan penuh, dan bintang-bintang mengambang di samping satu sama lain sehingga mereka muncul dalam garis horizontal.


Kesimpulan

Pengembangan di WordPress adalah tentang memanfaatkan teknologi yang berbeda untuk menyajikan pengalaman pengguna yang kaya bagi pengunjung situs Anda. Dalam tutorial ini kami menggunakan fitur inti WordPress standar termasuk jenis posting kustom dan widget kustom API, dan kami memperluas itu dengan menambahkan di perpustakaan jQuery membantu, diikuti oleh plugin UI jQuery, dan akhirnya kami menggunakan kekuatan CSS untuk membuat semuanya terlihat ramping dan profesional.

Manfaat terbesar dari ide-ide seperti widget ini adalah Anda dapat menyajikan lebih banyak konten ke pengguna Anda tanpa membanjiri mereka, dengan tujuan akhir membuat mereka tetap berada di situs Anda selama mungkin.

Semoga widget khusus ini dapat membantu Anda mengurangi rasio pentalan dan menciptakan pengalaman yang lebih menyenangkan bagi pengguna Anda! Jika Anda belum melakukannya, pastikan untuk melihat demo sebelum mencobanya sendiri.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.