Advertisement
  1. Code
  2. Theme Development

Cara Membuat Sistem Peringkat Posting Sederhana dengan WordPress dan jQuery

Scroll to top
Read Time: 6 min

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Sudah ada banyak plugin sistem peringkat posting di luar sana. Anehnya, tidak ada yang sesuai dengan kebutuhan saya, mereka terlalu rumit atau terlalu banyak pilihan bawaan. Jadi, dalam tutorial ini, Anda akan belajar bagaimana membangun fungsionalitas peringkat posting sederhana Anda sendiri, langsung di dalam file tema Anda. Tidak perlu plugin!


Langkah 1 Pendahuluan

Peringkat posting adalah cara yang baik untuk mendapatkan umpan balik tentang apa yang benar-benar difokuskan oleh pembaca Anda. Ketika saya sedang mencari plugin yang sederhana namun efisien, saya menyadari mereka semua datang dengan terlalu banyak pilihan dan tidak cukup dapat disesuaikan. Itu masalah pertama saya. Masalah saya yang kedua adalah menggunakan terlalu banyak plugin akan memperlambat WordPress.

Jadi saya memutuskan untuk berbagi dengan Anda cara membangun sistem peringkat posting kustom Anda. Kita akan menggunakan:

  • markup HTML sederhana dan CSS3 sehingga mudah untuk menyesuaikan
  • jQuery untuk menangani panggilan Ajax
  • PHP dan hook untuk menangani data

Langkah 2 Markup HTML

Kita akan menampilkan tombol berbentuk hati di bagian footer artikel. Untuk melakukannya, kita akan menambahkan markup di file content-single.php (dalam tema Twenty Eleven).

Perhatikan bahwa kita menggunakan atribut meta kustom HTML5 untuk menyimpan data kita sehingga sangat mudah ditangani dengan jQuery. Kemudian, ini akan dihasilkan oleh PHP, seperti yang akan kita lihat pada langkah selanjutnya.


Langkah 3 CSS3

Kita akan menggunakan animasi CSS3 untuk menambahkan beberapa interaktivitas visual dan sprite CSS untuk mengurangi jumlah gambar eksternal.

Pada titik ini, seharusnya terlihat seperti ini

Post RatingPost RatingPost Rating

Langkah 4 jQuery

Kita akan menggunakan jQuery bawaan untuk menangani permintaan ajax. Saat diklik, jQuery akan meneruskan beberapa parameter ke handler php kita dan menangani respons untuk menampilkan informasi yang sesuai.

Jadi mari kita buat file baru yang disebut post-like.js dan tambahkan ke folder js. Kemudian buka dan tambahkan kode ini:

Penjelasan

Pertama, mari kita mengambil ID posting dengan metode data jQuery dan kemudian mengirimkannya ke handler PHP kita. Variabel ajax_var dibuat secara dinamis dengan PHP (kita akan membahas ini di bagian selanjutnya).

Cara terbaik untuk menggunakan ajax dalam WordPress adalah dengan membuat panggilan ke admin-ajax.php. Ini terletak di folder wp-admin dan Anda dapat mengikat fungsi callback Anda dengan hook. Mari kita lihat cara kerjanya.


Langkah 5 PHP dan Hook

Bagaimana kita akan melanjutkan? Kita akan mengikat beberapa fungsi ke hook WordPress dan kemudian memasukkan skrip kita dan menambahkan beberapa variabel JavaScript buatan PHP yang akan digunakan oleh jQuery.

Hook

Mari buka file functions.php dan mulailah menambahkan fungsi-fungsi kita.

Pertama-tama, kita perlu mengikat fungsi ke hook WordPress. Jadi tambahkan dua baris ini di file Anda:

Hook pertama dijalankan ketika pengguna login dan yang lainnya ketika mereka tidak. Lihat informasi lebih lanjut tentang cara menerapkan ajax dengan cara yang benar di sini: 5 tips untuk menggunakan ajax di WordPress.

Anda dapat melihat bagian "post-like" hook, yang merupakan parameter tindakan yang kita gunakan pada langkah sebelumnya dengan jQuery.

Sekarang kita akan memasukkan skrip kita dan mendeklarasikan variabel kita:

Di sini, kita mendefinisikan dua parameter penting:

  • url: URI lengkap ke lokasi admin-ajax.php
  • nonce: hash keamanan untuk mencegah serangan dan kesalahan

Anda dapat menggunakan parameter tersebut dengan jQuery dengan cara ini: ajax_var.url dan ajax_var.nonce.

"Menggunakan hook WordPress dan admin-ajax.php adalah cara yang lebih aman untuk menangani Ajax."

Fungsi

Mari tambahkan fungsi post_like. Itu akan:

  • Memeriksa nonce
  • Ambil ID posting, IP pengguna, dan meta posting kustom
  • Periksa apakah pengguna sudah melakukan voting atau belum
  • Simpan data (jumlah suara + IP) untuk posting saat ini
  • Mengembalikan nilai hitungan ke jQuery

Kita menyimpan IP pengguna dan waktu saat ini menjadi satu post_meta dan suara dihitung menjadi satu lagi. Waktu akan membantu kita untuk memeriksa apakah pengguna dapat melakukan voting ulang lagi setelah waktu tertentu yang telah berlalu.

Anda bisa bertanya apa yang terjadi ketika belum ada suara yang tercatat untuk posting saat ini? Nah, WordPress membantu kita sekali lagi di sini, karena update_post_meta memeriksa apakah meta ada dan membuatnya jika tidak (lihat informasi lebih lanjut tentang fungsi ini di codex WordPress).

Kita akan menentukan berapa lama pengguna harus menunggu sebelum memilih kembali (dalam menit).

Variabel ini dapat disimpan di panel admin tema sebagai instance, sehingga mudah diedit.

Sekarang tambahkan kode ini untuk memeriksa apakah pengguna telah memilih:

"Anda harus selalu bertanya pada diri sendiri apakah layak menggunakan plugin dan memperlambat WordPress daripada menambahkan beberapa kode sederhana dalam tema Anda." Jika memungkinkan, fungsionalitas harus dimasukkan melalui plugin, bukan dalam fungsi tema.php secara langsung.

Tidak ada yang terlalu rumit di sini, kita hanya memeriksa jika pengguna sudah melakukan voting (mis. alamat IP-nya berada di antara daftar IP yang sudah melakukan voting) dan jika dia diperbolehkan untuk memilih lagi (mis. waktu yang berlalu sejak dia melakukan voting lebih besar dari $timebeforerevote).


Langkah 6 Membuat Fungsi untuk Menghasilkan Markup HTML

Untuk mendapatkan kontrol lebih terhadap bagaimana suara ditampilkan dan memudahkan untuk memperbarui jika digunakan dalam file yang berbeda, kita akan membuat fungsi yang menghasilkan markup. Jika pengguna telah memilih, kita tidak menampilkan hati sebagai tautan untuk menghindari panggilan ajax yang tidak berguna.

Anda dapat mengganti kode yang dimasukkan pada Langkah 2 dengan fungsi ini:


Langkah 7 Lebih Lanjut

Sekarang pengguna dapat memberi suara pada posting, Anda mungkin ingin mendapatkan umpan balik. Misalnya, Anda dapat menampilkan 10 entri teratas dari posting terbaik.

Untuk melakukannya, Anda dapat menggunakan query_post dengan opsi ini:


Langkah 7 Kesimpulan

Itu saja! Anda sekarang harus dapat melacak posting Anda sesuai dengan voting pengguna dan menyesuaikan markup dan CSS untuk kenyamanan Anda. Ini hanyalah salah satu cara untuk membuat sistem peringkat posting, diantara lainnya, jadi jangan ragu untuk mengomentari tutorial ini dan memberikan tanggapan Anda. Terima kasih telah membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.