Bergaya Dengan WordPress 2.7

John Coltrane in 1960

Ini adalah tutorial sederhana dan semoga bermanfaat bagi yang sedang dan akan bermigrasi ke WordPress 2.7. Tutorial kali ini berhubungan komentar. Seperti kita tau dan anda juga sepertinya tahu. Kalau WordPress 2.7 ini system komentar loopnya di bikin seperti loop di posting. Dengan adanya feature ini banyak senjata terpendam yang siap kita tembakkan untuk membuat WordPress 2.7 kita lebih personal.

Lanjut, hal pertama adalah bagaimana kita bisa enable threaded comment yang digembor gemborkan itu. Hal utama adalah masuk ke Menu Setting > Disccussion dan enable fungsi ini. Kemudian ikuti  langkah-langkah ini yang sedikit butuh ketenangan batin dan juga tau kode HTML dan tentunya JUS CSS. Jika sudah siap? siapkan senjata (editor favorit, saya menggunakan Coda) kalau anda terserah.

Ingat tutorial kali ini bertujuan untuk memanfaatkan featured threaded comment dan juga memisahkan antara comment dan trackback secara otomatis.

Langkah pertama

Buka file single.php dan ubah kode ini

< ?php comments_template(); ?>

Menjadi ini

< ?php comments_template('', true); ?>

Kemudian Buka file comments.php dan hapus semua code disitu. Kemudian timpali dengan kode saya ini

< ?php
// Do not delete these lines
if (!empty($_SERVER['SCRIPT_FILENAME']) &amp;amp;amp;&amp;amp;amp; 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
< ?php
return;
}
?>
<!-- You can start editing here. -->
< ?php if ( have_comments() ) : ?>
<h3 id="comments">
< ?php comments_number('No Responses', 'One Response', '% Responses' );?>
</h3>
<div class="navigation">
<div class="alignleft">
< ?php previous_comments_link() ?>
</div>
<div class="alignright">
< ?php next_comments_link() ?>
</div>
</div>
<ol class="commentlist">
< ?php wp_list_comments('type=comment'); ?>
</ol>
<div class="navigation">
<div class="alignleft">
< ?php previous_comments_link() ?>
</div>
<div class="alignright">
< ?php next_comments_link() ?>
</div>
</div>
<br class="clear" />
<h3 id="pings">Trackbacks/Pingbacks</h3>
<ol class="trackbacklist">
< ?php wp_list_comments('type=pings&amp;amp;amp;callback=mytheme_ping'); ?>
</ol>
< ?php else : // this is displayed if there are no comments so far ?>
< ?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
< ?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
< ?php endif; ?>
< ?php endif; ?>
< ?php if ('open' == $post->comment_status) : ?>
<div id="respond" class="comform">
<h3>
< ?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?>
</h3>
<div class="cancel-comment-reply"> <small>
< ?php cancel_comment_reply_link(); ?>
</small> </div>
< ?php if ( get_option('comment_registration') &amp;amp;amp;&amp;amp;amp; !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=< ?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>
< ?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
< ?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">< ?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &amp;amp;amp;raquo;</a></p>
< ?php else : ?>
<p>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?/>" size="22" tabindex="1" < ?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small>Name
< ?php if ($req) echo "(required)"; ?>
</small></label>
</p>
<p>
<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?/>" size="22" tabindex="2" < ?php if ($req) echo "aria-required='true'"; ?> />
<label for="email"><small>Mail (will not be published)
< ?php if ($req) echo "(required)"; ?>
</small></label>
</p>
<p>
<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?/>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label>
</p>
< ?php endif; ?>
< ?php if ( function_exists('smilies_clickable')) { ?>
<p><strong>Smileys</strong>:<br />
< ?php smilies_clickable() ?>
</p>
< ?php } ?>
<p>
<textarea name="comment" id="comment" rows="10" tabindex="4"></textarea>
</p>
<p class="avaliable"><small><strong>XHTML:</strong> You can use these tags: <code>< ?php echo allowed_tags(); ?></code></small></p>
<p>
<input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
< ?php comment_id_fields(); ?>
</p>
< ?php do_action('comment_form', $post->ID); ?>
</form>
< ?php endif; // If registration required and not logged in ?>
</div>

< ?php endif; // if you delete this the sky will fall on your head ?>

Tenang, jangan gugub dengan kode diatas, kita bisa sharingkan nantinya.

Langkah Kedua

Ini langkah juga sakral, karena jika langkah ini dilewati anda akan menemui error yang tidak nyaman Buka functions.php dan tambahkan pada akhir kode (jika functions.php belum ada, anda perlu bikin file ini)

< ?php
add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
if(!function_exists('wp_list_comments'))     $file = TEMPLATEPATH . '/old.comments.php';
return $file;
}

add_filter('get_comments_number', 'comment_count', 0);
function comment_count( $count ) {
global $id;
$comments_by_type = &amp;amp;amp;separate_comments(get_comments('post_id=' . $id));
return count($comments_by_type['comment']);
}

function list_pings($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
?>
<li id="comment-<?php comment_ID(); ?>">
< ?php comment_author_link(); ?>
<span>
< ?php comment_date('d m y'); ?>
</span>
< ?php }

function list_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
</li><li <?php comment_class(); ?> id="comment-< ?php comment_ID() ?>">
<div id="div-comment-<?php comment_ID() ?>" class="thechild">
<div class="cleft"> < ?php echo get_avatar($comment, 52); ?> </div>
<div class="cright">
<div class="comment-author vcard by"> < ?php printf(__('<cite class="fn">%s <span class="says">says:</span>'), get_comment_author_link()) ?> </div>
< ?php if ($comment->comment_approved == '0') : ?>
<em>
< ?php _e('Your comment is awaiting moderation.') ?>
</em> <br />
< ?php endif; ?>
<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>">< ?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
< ?php edit_comment_link(__('(Edit)'),'  ','') ?>
</div>
< ?php comment_text() ?>
<div class="reply">
< ?php comment_reply_link(array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
</div>
</li>
< ?php
}
?>

Langkah Ketiga

Ini juga langkah lumayan kunci, karena kita akan men CSSkan si desain dari komentar dan lacak balik kita tadi. Buka style.css dan tambahkan kode ini.

.comment {
background: #fff url(images/shadow_top.gif) repeat-x top;
border-bottom: #ddd 1px solid;
list-style: none;
margin: 0;
padding: 1em 0.5em;
}
.alt {
background: #FFF2C3;
}
.MyAvatars {
border: 1px solid #ccc;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
float: right;
margin-left: 5px;
margin-right: 10px;
padding: 3px;
}
.children {
margin-left: 30px;
}
.trackbacklist {
margin-left: 20px;
}
.trackbacklist span {
}
h3#respond, h3#comments {
font: bold 1.2em Georgia, "Times New Roman", Times, serif;
color: #333;
}
#comment {
width: 98%;
}

Intinya kode css ini adalah memberikan tampilan yang kita inginkan agar si treaded comment berjalan dengan lancar. Ingat mungkin treaded comment ini masih berpenampilan standar.

Dan Berikut adalah langkah super kunci. Tambahkan kode  di atas wp_head di header.php sehingga kode menjadi seperti ini

< ?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
< ?php wp_head(); ?>

Semoga tips sederhana ini bermanfaat dan selamat ber WordPress 2.7