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).
<p class="post-like"> <a data-post_id="POST_ID" href="#"> <span class="qtip like" title="I like this article"></span> </a> <span class="count">POST_LIKES_COUNT</span> </p>
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.
article footer .post-like{
margin-top:1em
}
article footer .like{
background:url(images/icons.png) no-repeat;
width: 15px;
height: 16px;
display: block;
float:left;
margin-right: 4px;
-moz-transition: all 0.2s ease-out 0.1s;
-webkit-transition: all 0.2s ease-out 0.1s;
-o-transition: all 0.2s ease-out 0.1s
}
article footer .post-like a:hover .like{
background-position:-16px 0;
}
article footer .voted .like, article footer .post-like.alreadyvoted{
background-position:-32px 0;
} Pada titik ini, seharusnya terlihat seperti ini
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:
jQuery(document).ready(function() {
jQuery(".post-like a").click(function(){
heart = jQuery(this);
// Retrieve post ID from data attribute
post_id = heart.data("post_id");
// Ajax call
jQuery.ajax({
type: "post",
url: ajax_var.url,
data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
success: function(count){
// If vote successful
if(count != "already")
{
heart.addClass("voted");
heart.siblings(".count").text(count);
}
}
});
return false;
})
}) 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:
add_action('wp_ajax_nopriv_post-like', 'post_like');
add_action('wp_ajax_post-like', 'post_like'); 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:
wp_enqueue_script('like_post', get_template_directory_uri().'/js/post-like.js', array('jquery'), '1.0', true );
wp_localize_script('like_post', 'ajax_var', array(
'url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('ajax-nonce')
)); 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
function post_like()
{
// Check for nonce security
$nonce = $_POST['nonce'];
if ( ! wp_verify_nonce( $nonce, 'ajax-nonce' ) )
die ( 'Busted!');
if(isset($_POST['post_like']))
{
// Retrieve user IP address
$ip = $_SERVER['REMOTE_ADDR'];
$post_id = $_POST['post_id'];
// Get voters'IPs for the current post
$meta_IP = get_post_meta($post_id, "voted_IP");
$voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
$voted_IP = array();
// Get votes count for the current post
$meta_count = get_post_meta($post_id, "votes_count", true);
// Use has already voted ?
if(!hasAlreadyVoted($post_id))
{
$voted_IP[$ip] = time();
// Save IP and increase votes count
update_post_meta($post_id, "voted_IP", $voted_IP);
update_post_meta($post_id, "votes_count", ++$meta_count);
// Display count (ie jQuery return value)
echo $meta_count;
}
else
echo "already";
}
exit;
} 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).
$timebeforerevote = 120; // = 2 hours
Variabel ini dapat disimpan di panel admin tema sebagai instance, sehingga mudah diedit.
Sekarang tambahkan kode ini untuk memeriksa apakah pengguna telah memilih:
function hasAlreadyVoted($post_id)
{
global $timebeforerevote;
// Retrieve post votes IPs
$meta_IP = get_post_meta($post_id, "voted_IP");
$voted_IP = $meta_IP[0];
if(!is_array($voted_IP))
$voted_IP = array();
// Retrieve current user IP
$ip = $_SERVER['REMOTE_ADDR'];
// If user has already voted
if(in_array($ip, array_keys($voted_IP)))
{
$time = $voted_IP[$ip];
$now = time();
// Compare between current time and vote time
if(round(($now - $time) / 60) > $timebeforerevote)
return false;
return true;
}
return false;
}
"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.
function getPostLikeLink($post_id)
{
$themename = "twentyeleven";
$vote_count = get_post_meta($post_id, "votes_count", true);
$output = '<p class="post-like">';
if(hasAlreadyVoted($post_id))
$output .= ' <span title="'.__('I like this article', $themename).'" class="like alreadyvoted"></span>';
else
$output .= '<a href="#" data-post_id="'.$post_id.'">
<span title="'.__('I like this article', $themename).'"class="qtip like"></span>
</a>';
$output .= '<span class="count">'.$vote_count.'</span></p>';
return $output;
} Anda dapat mengganti kode yang dimasukkan pada Langkah 2 dengan fungsi ini:
<?php echo getPostLikeLink(get_the_ID());?>
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:
query_posts('meta_key=votes_count&orderby=meta_value_num&order=DESC&posts_per_page=10'); 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!
