Zeo

Seperti biasa, menghabiskan masa lapang hujung minggu bermain main bersama kod WordPress dan css. Hacking kod wordpress memang seronok. WordPress amat menarik disebabkan plugin yang begitu banyak untuk dicuba.

Ramai bertanya bagaimana membuat latarbelakang komen bertukar warna secara berselang.

Kod dibawah mempunyai fungsi latarbelakang alternatif secara berselang dan senarai komen bernombor(kredit untuk Matt).

Dicuba atas WordPress 1.5.x. fail di edit ialah comments.php.

<?php foreach ($comments as $comment_id => $comment) { ?>
<li id="comment-<?php comment_ID() ?>" <strong><?php if($comment_id % 2) echo
"class='alt'"; ?></strong>>
        <?php comment_text() ?>
        <p><cite><?php comment_type(); ?> <?php _e("by"); ?>
        <?php comment_author_link() ?> — <?php comment_date() ?> @
        <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite>
        <span><strong><?php echo $comment_id += 1; ?></strong></span>
        <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
        </li>
<?php } // end for each comment ?>

Tapi beberapa hari lepas Glutnix menerbitkan “official comment plugin” namun yang menarik perhatian saya ialah stail tersendiri bagi trackback/pingback pos yang disertakan sekali. Agak rumit untuk digabungkan bersama fungsi komen looping diatas, dan terpaksa meminjam kod comments.php daripada template kubrick dimana fungsi looping nya dipisahkan dan mudah untuk dihack.

Dan untuk fungsi terbaru gabungan komen looping(latarbelakang alternatif), senarai nombor dan stail pingback/trackback, kod saya yang BARU seperti dibawah.

<?php foreach ($comments as $comment) : ?>
<li class="comment commentType<?php comment_type();?>
<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">
    <?php comment_text() ?>
    <p><cite><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?>
    <?php _e('by'); ?> <?php comment_author_link() ?> —
    <?php comment_date() ?> @
    <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite>
    <?php edit_comment_link(__("Edit This"), ' |'); ?>
<span><?php echo $comment_id += 1; ?></span></p>
    </li>
    <?php /* Changes every other comment to a different class */
            if ('alt' == $oddcomment) $oddcomment = '';
            else $oddcomment = 'alt'; ?>
<?php endforeach; ?>

Anda hanya perlu tambah stail css untuk alt, commentTypePingback, commentTypeTrackback mengikut kehendak masing-masing.

/*komen loop*/
#commentlist .alt {
        background: #EDF3F9;
}
#commentlist span {
        color: #000000;
        font: italic 40px Georgia, serif;
        margin-top: -45px;
        float: right;
}
/*pingback dan trackback stail*/
#commentlist li.commentTypePingback, #commentlist li.commentTypeTrackback {
	background: url(/image.gif) no-repeat 5px bottom;
	padding-left: 15px;
	margin-left: 5px;
	border: none;
}

Muat turun untuk WordPress-1.2.x

Dinasihatkan supaya tidak mencopy paste secara terus. Kesemua kod diatas digabung dan diubah oleh zeo :)