Kustomisasi Komentar di WordPress - Fungsionalitas dan Penampilan

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

Di WordPress ada berbagai jenis konten seperti posting, halaman dan komentar dll. Ini membentuk dasar-dasar WordPress. WordPress menjadi platform yang sangat dapat disesuaikan memungkinkan Anda menyesuaikan jenis yang sangat dasar sampai sebagian besar yang sesuai dengan situs Anda. Satu dapat mengubah tampilan serta fungsionalitas dari jenis dasar untuk membuat mereka berperilaku dan terlihat sesuai tampilan dan fungsi situs Anda. Dalam artikel ini kita akan melihat bagaimana kita dapat mengubah perilaku dan tampilan komentar di situs WordPress kita.

Langkah 1 Memahami Fungsi `comment_form` dan Argumennya

Mari kita lihat fungsi WordPress comment_form. Ini bertanggung jawab untuk menampilkan formulir komentar yang sebagian besar ditampilkan pada halaman tunggal atau posting di WordPress. Panggilan ke fungsi ini sebagian besar akan terlihat di file comments.php dari folder tema Anda. Maka file ini akan dimasukkan di berbagai tempat seperti single.php, page.php, dll secara langsung atau dengan memanggil fungsi comments_template.

Anda dapat menemukan rincian lebih lanjut tentang comments_template di Codex WordPress.

Jika kita menggunakan fungsi comment_form untuk menampilkan formulir, formulirnya akan ditampilkan menggunakan parameter default yang akan berupa bidang seperti nama, email (keduanya wajib), situs web dan konten komentar. Pada tema standar Twenty Eleven, formulir akan terlihat sebagai berikut.

Beberapa argumen penting untuk fungsi comment_form adalah:

fields - Dengan mana Anda benar-benar dapat mengontrol bidang mana yang ditampilkan di formulir komentar.
comment_notes_before dan comment_notes_after - Ini digunakan untuk menampilkan beberapa catatan sebelum atau sesudah formulir komentar.
title_reply - Menggunakan ini Anda dapat mengubah judul balasan yang secara default adalah 'Leave a Reply'.
label_submit - Ini dapat digunakan untuk mengubah teks di atas tombol kirim komentar.

Langkah 2 Mengkustomisasi Formulir Komentar Anda Menggunakan Fungsi `comment_form`

Sekarang mari kita ubah formulir komentar kita dengan mengirimkan argumen yang berbeda ke comment_form.

Dalam hal kita ingin menyesuaikan bidang formulir komentar, kita dapat meneruskan bidang-bidangnya ke fungsi comment_form. Bidang-bidang default dalam fungsi comment_form adalah sebagai berikut:

$fields =  array(
  'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
	'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
		'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);

Jadi jika kita ingin menghapus bidang situs web maka kita perlu membuat bidang tanpa bidang situs web sebagai berikut dan mengirimkannya ke comment_form.

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);

$comments_args = array(
	'fields' =>	$fields
);

comment_form($comments_args);

Sekarang jika kita pergi dan melihat bentuk komentarnya akan muncul sebagai berikut:

Selain ini, mari sekarang mengubah judul balasan menjadi 'Please give us your valuable comment' dan juga ubah judul tombol posting komentar menjadi 'Send My Comment'.

Berikut ini adalah argumen yang akan kita berikan kepada comment_form untuk mencapai ini:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);

$comments_args = array(
	'fields' =>	$fields,
	'title_reply'=>'Please give us your valuable comment',
	'label_submit' => 'Send My Comment'
);

comment_form($comments_args);

Sekarang jika kita melihat formulir komentar itu akan terlihat sebagai berikut:

Langkah 3 Menghapus Bidang dari Komentar untuk Menggunakan Hooks

Formulir komentar WordPress dapat dikustomisasi juga menggunakan kaitan dan filter. Menyesuaikan menggunakan kaitan/filter sangat berguna terutama ketika Anda menyesuaikan melalui plugin dan tidak dapat memodifikasi file tema. Filter untuk menambah atau menghapus bidang dari formulir komentar adalah 'comment_form_default_fields'

Sekarang mari kita hapus bidang URL menggunakan filter ini. Kode untuk melakukan ini Anda dapat memasukkannya ke dalam file plugin Anda jika Anda menyesuaikan melalui plugin atau di file functions.php dari tema Anda.

Kodenya adalah sebagai berikut:

function remove_comment_fields($fields) {
	unset($fields['url']);
	return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

Dalam hal ini kita menambahkan fungsi remove_comment_fields pada filter 'comment_form_default_fields' dan kemudian unset bidang url untuk menghapus bidang situs web.

Langkah 4 Menambahkan Lebih Banyak Data ke Komentar Anda Menggunakan Hooks

Kita bahkan dapat menambahkan kolom ke komentar untuk menggunakan filter 'comment_form_default_fields'. Sekarang mari tambahkan bidang usia penulis komentar menggunakan filter ini dan kemudian simpan bidang ini sebagai meta komentar dan menampilkannya di komentar.

Kita dapat menambahkan bidang sebagai berikut:

function add_comment_fields($fields) {

	$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
		'<input id="age" name="age" type="text" size="30" /></p>';
	return $fields;

}
add_filter('comment_form_default_fields','add_comment_fields');

Setelah kita menambahkan bidang tergantung pada tema, kita mungkin ingin memberinya gaya. Karena saya menggunakan tema Twenty Eleven, saya menata dengan menambahkan label #respond .comment-form-age dengan gaya label lain seperti label #respond .comment-form-url, dll. sebagai berikut:

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-age label,
#respond .comment-form-comment label {
	background: #eee;
	-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	color: #555;
	display: inline-block;
	font-size: 13px;
	left: 4px;
	min-width: 60px;
	padding: 4px 10px;
	position: relative;
	top: 40px;
	z-index: 1;
}

Sekarang jika kita melihat formulir komentar, bidang usia akan terlihat sebagai berikut:

Sekarang usia disimpan sebagai meta komentar yang perlu kita kaitkan ke 'comment_post' dan menyimpan usia sebagai meta komentar sebagai berikut:

function add_comment_meta_values($comment_id) {

	if(isset($_POST['age'])) {
		$age = wp_filter_nohtml_kses($_POST['age']);
		add_comment_meta($comment_id, 'age', $age, false);
	}

}
add_action ('comment_post', 'add_comment_meta_values', 1);

Setelah meta disimpan, itu dapat ditampilkan pada komentar sebagai berikut:

1	<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>

Langkah 5 Kustomisasi Komentar untuk Beberapa Jenis Posting Tertentu

Terkadang berguna untuk memiliki beberapa kolom komentar hanya untuk jenis posting tertentu. Sekarang mari kita membuat perubahan kode untuk menampilkan bidang komentar usia hanya jika itu adalah jenis posting kustom, seperti misalnya, book.

Kode untuk memiliki usia hanya untuk jenis posting buku kustom adalah:

function add_comment_fields($fields) {

	if( is_singular( 'books' ) ) {

		$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
			'<input id="age" name="age" type="text" size="30" /></p>';
	}
	return $fields;

}
add_filter('comment_form_default_fields','add_comment_fields');

Jadi di sini Anda menambahkan bidang hanya jika bertipe 'Books'.

Langkah 6 Membuat Callback untuk Menampilkan Komentar

Fungsi wp_list_comments digunakan untuk menampilkan komentar pada sebuah posting. Anda dapat membaca tentang wp_list_comments di Codex WordPress.

wp_list_comments memiliki argumen 'callback' di mana Anda dapat menentukan fungsi yang dipanggil kembali untuk menampilkan komentar.

Dalam tema Twenty Eleven di comments.php Anda akan melihat sebuah baris:

1	wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

Ini akan kita ubah menjadi:

1	wp_list_comments( array( 'callback' => 'my_comments_callback' ) );

Jadi fungsi my_comments_callback akan dipanggil untuk setiap posting.

Langkah 7 Menata Komentar Anda

Sekarang kita akan mengubah gaya posting kita sedikit berbeda. Kita hanya ingin menampilkan konten posting dan bidang usia yang telah kita tambahkan secara khusus. Kita mengubah warna latar belakang dari komentar juga.

Kode untuk fungsi 'my_comments_callback' adalah sebagai berikut:

function my_comments_callback( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;

	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<article id="comment-<?php comment_ID(); ?>" class="comment">

			<div class="comment-content"><?php comment_text(); ?></div>

			<p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>

			<div class="reply">
				<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
			</div>
		</article>
	</li>
	<?php
}

Kita juga mengubah warna latar belakang sebagai berikut:

.commentlist > li.comment {

	background: #99ccff;
	border: 3px solid #ddd;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}

Sekarang jika kita melihat komentar mereka akan terlihat sebagai berikut:

Kesimpulan

Komentar memainkan peran penting saat membangun situs komunitas. Bergantung pada situs, fungsi komentar juga dapat disesuaikan dengan tepat. WordPress menyediakan sistem komentar yang fleksibel dan memberikan dukungan yang baik melalui fungsi-fungsi untuk mengubah perilaku dan tampilan komentar situs Anda. Jadi bersenang-senanglah menyesuaikan situs WordPress Anda!

Beri tahu kami di komentar di bawah jika Anda memiliki saran lain tentang cara menyesuaikan komentar di situs WordPress Anda.