Custom Kolom Komentar di WordPress - Functions dan Tampilan

Di WordPress ada berbagai jenis konten seperti postingan, halaman dan komentar dll. Bentuk ini sangat mendasar di WordPress. WordPress menjadi platform yang sangat mudah disesuaikan memungkinkan Anda menyesuaikan jenis yang sangat mendasar untuk sebagian besar sesuai dengan situs Anda.Seseorang dapat mengubah tampilan serta fungsionalitas jenis dasar untuk membuat mereka berperilaku dan terlihat sesuai penampilan dan fungsionalitas situs Anda. Pada artikel ini kita akan melihat bagaimana kita bisa mengubah perilaku dan tampilan komentar di situs WordPress kita.


Langkah 1 Memahami comment_formFungsi dan Argumennya


Mari kita lihat fungsi WordPress comment_form. Ini bertanggung jawab untuk menampilkan form komentar yang sebagian besar ditampilkan pada satu halaman atau postingan di WordPress. Panggilan ke fungsi ini sebagian besar akan terlihat di file komentar.php dari folder tema Anda. Kemudian file ini akan disertakan di berbagai tempat seperti single.php , page.php , dll secara langsung atau dengan memanggil fungsinya.comments_template

Anda dapat menemukan rincian lebih lanjut tentang comments_templatedi WordPress Codex .

Jika kita menggunakan comment_formfungsi untuk menampilkan form, form akan ditampilkan dengan menggunakan parameter default yang akan berupa field seperti nama, email (keduanya wajib), website dan konten komentar. Pada tema bawaan Twenty Eleven bentuknya akan terlihat seperti berikut.




Beberapa argumen penting untuk comment_formfungsinya adalah:

  • fields - Dengan mana Anda benar-benar dapat mengontrol bidang mana yang ditampilkan dalam formulir komentar.
  • comment_notes_beforeDan comment_notes_after- Ini digunakan untuk menampilkan beberapa catatan sebelum atau sesudah formulir komentar.
  • title_reply - Dengan menggunakan ini anda bisa mengganti judul balasan yang secara default adalah 'Leave a Reply'.
  • label_submit - Ini bisa digunakan untuk mengganti teks di atas tombol kirim komentar.

Langkah 2 Mengubah Formulir Komentar Anda Menggunakan Fungsicomment_form


Sekarang mari kita menyesuaikan bentuk komentar kita dengan menyampaikan argumen yang berbeda comment_form.
Jika kita ingin menyesuaikan field dari form komentar kita bisa melewati field ke comment_formfungsi. Bidang default dalam comment_formfungsinya 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 kolom website maka kita perlu membuat field tanpa kolom website sebagai berikut dan menyebarkannya 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 form komentar maka akan muncul sebagai berikut:

Selain itu mari kita ganti judul balas 'tolong beri kami komentar berharga anda' dan juga ganti judul posting komentar dengan judul 'Kirim Komentar Saya'.
Berikut adalah argumen yang akan kita hadapi comment_formuntuk mencapai hal 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);
Nah jika kita melihat bentuk komentar itu akan terlihat seperti berikut:

Langkah 3 Melepaskan Bidang Dari Komentar untuk Menggunakan Kait

Bentuk komentar WordPress bisa disesuaikan juga dengan menggunakan kait dan filter. Menyesuaikan menggunakan kait / filter sangat berguna terutama saat Anda menyesuaikan melalui plugin dan tidak dapat mengubah file tema.Filter untuk menambahkan atau menghapus bidang dari formulir komentar adalah ' comment_form_default_fields'
Sekarang, mari hapus bidang URL menggunakan filter ini. Kode untuk melakukan ini Anda bisa memasukkannya ke dalam file plugin Anda jika Anda menyesuaikannya melalui plugin atau 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_fieldspada 'comment_form_default_fields' filter dan kemudian unset urlfield untuk menghapus field website.

Langkah 4 Menambahkan Data Lebih Banyak ke Komentar Anda Menggunakan Kait

Kita bahkan bisa menambahkan field ke komentar untuk menggunakancomment_form_default_fieldsfilter ' '. Sekarang mari tambahkan bidang usia penulis penulis dengan menggunakan filter ini dan kemudian simpan bidang ini sebagai meta komentar dan tampilkan pada komentarnya.
Kita bisa menambahkan field 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');
Begitu kita menambahkan field tergantung tema yang mungkin ingin kita tonjolkan. Karena saya menggunakan tema Twenty Eleven, saya menata dengan menambahkan #respond .comment-form-age labeldengan gaya label lain seperti #respond .comment-form-url labeldll 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;}
Nah jika kita lihat komentar form kolom umur akan terlihat sebagai berikut:

Sekarang umurnya disimpan sebagai komentar meta yang perlu kita kaitkan ke ' comment_post' dan hemat umur sebagai komentar meta 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 maka bisa ditampilkan pada komentar sebagai berikut:
<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>

Langkah 5 Menyesuaikan Komentar untuk Beberapa Jenis Post Tertentu

Terkadang ada gunanya memiliki beberapa bidang 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, buku.
Kode untuk memiliki usia hanya untuk jenis buku jenis posting 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 itu adalah tipe 'Buku'.

Langkah 6 Membuat Panggilan Balik untuk Menampilkan Komentar

Fungsi wp_list_commentsini digunakan untuk menampilkan komentar pada sebuah pos. Anda bisa membaca wp_list_commentsdi WordPress Codex .
wp_list_commentsMemiliki argumen ' callback' di mana Anda dapat menentukan fungsi yang akan dipanggil kembali untuk menampilkan komentar.
Dalam tema Twenty Eleven di comments.php Anda akan melihat sebuah garis:

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );
Ini akan kita ubah menjadi:

wp_list_comments( array( 'callback' => 'my_comments_callback' ) );
Jadi fungsinya my_comments_callbackakan dipanggil untuk setiap postingan.



Langkah 7 Styling Komentar Anda

Sekarang kita akan membuat tulisan kita sedikit berbeda. Kami hanya ingin menampilkan isi postingan dan bidang umur yang telah kami tambahkan secara khusus. Kami mengubah warna latar belakang 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>↓</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>            </div>        </article>    </li>    <?php}
Kami juga memodifikasi warna background 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;}
Nah kalau kita lihat komentarnya mereka akan terlihat seperti berikut:

Kesimpulan

Komentar memainkan peran penting karena seseorang sedang membangun situs komunitas. Bergantung pada situs fungsionalitas komentar juga bisa disesuaikan dengan tepat. WordPress menyediakan sistem komentar yang fleksibel dan memberikan dukungan yang baik melalui fungsi untuk mengubah perilaku dan tampilan komentar situs Anda. Jadi bersenang-senang menyesuaikan situs WordPress anda!
Beri tahu kami di komentar di bawah ini jika Anda memiliki saran lain tentang cara menyesuaikan komentar di situs WordPress Anda.
GOOD LUCK
Previous Post Next Post

Tulis komentar anda

Silahkan Komentar Boss!!

Post a Comment

Silahkan Komentar Boss!!