Supaya Format Comment Jadi Lebih Woke

Kemarin iseng-iseng mebandingkan beberapa theme WordPress dan menemukan kalau ada perbedakan pada tampilan comment pada tiap-tiap comment. Sebenarnya tampilan comment pada WordPress hampir sama, tapi dalam bebrapa saya menemukan perbedaan yang sangat berguna bila di implementasikan.

1. Mengatasi comment overflow

Comment overflow biasanya terjadi jika ada comment yang berisi URL yang terlalu panjang sehingga comment memanjang dan keluar dari kotak comment. Untuk mengatasi hal ini kita perlu mengedit file comment.php dan css pada theme WordPress yang sedang kita gunakan.

– Edit file comment.php

– Cari code :

<?php comment_text() ?>

– Ubah menjadi

<div class='komenku'>
<?php comment_text() ?>
</div>

– Edit file style.css

– Tambahkan code berikut

.komenku
{
padding:                0px 3px 0px 3px;
width:                     100%;
overflow:                 auto;
}

Before

After

2. Menambahkan nomer urut

Sebenarnya kebanykan theme sudah ada nomer urut untuk setiap commentnya, tapi bagi yang thememnya belum ada bisa menggunakan tips ini.

– Edit style.css

– Tambahkan code ini :

ol.commentlist li {
list-style:inherit;
}

3. Membuat comment menjadi lebih berwarna

Jika pernah mengunjungi blognya mas Yudi, disana commentnnya berwarna selang-seling antar comment yang bernomer urut ganjil dan genap.

– Edit file style.css

Tambahkan atau edit code :

.alt {
background-color: #f8f8f8;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}

– Edit pada bagian background-color.

– Class alt biasanya digunakan di sfile single.php digabungkan dengan class postmetadata, jadi mengubah warna pada class alt kemungkinan juga akan mengubah warna pada tampilan metadata (box keterangan diatas comment: This entry was ….). Untuk mengatasi hal ini edit file single.php cari code :

<p class="postmetadata alt">

– Hapus alt.

– Cari class postmetadata, buat background warna sendiri.

4. Memasang Avatar

Meskipun sejak WordPress 2.5,,Wordpress susah mendukung Gravatar, tetapi untuk theme lama tetap saja Avatar tidak akan tampil meskipun sudah upgrade WordPress. Untuk menampilkan Gravatar ikuti langkah-langkah berikut :

– Edit file comment.php

– Cari code :

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

– Tambahkan dibawahnya :

<?php echo get_avatar( $comment, 40 ); ?>

– 40 adalah ukuran gravatar (40×40).

– Edit file style.css

– Tambahkan class ini jika belum ada

.commentlist li .avatar {
float: right;
border: 1px solid #eee;
padding: 2px;
background: #fff;
}

– Class ini ini akan menampilkan Avatar di sebelah kanan, untuk menampilkan disebelah kiri, ganti float :right dengan float:left;

Bagi yang penegen commentnya ada avatarnya, daftar dulu di gravatar.com