Cara Membuat Themes WordPress Bagian 5

Posted in category: Themes Wordpress at: July 10, 2011 by Zaiful Anwar

Untuk melengkapi tutorial membuat theme wordpress kali ini saya mencoba mengguraikan cara membuat file comment.php dan css untuk kolom komentar pada theme wordpress. Saya rasa bagian inilah yang tersulit dalam pembuatan tema wordpress.

Berikut bagian cara membuat theme wordpress pada bagian berikutnya:

1. Cara membuat Theme WordPress Bagian 1
2. Cara membuat Theme WordPress Bagian 2
3. Cara membuat Theme WordPress Bagian 3
4. Cara membuat Theme WordPress Bagian 4

Disini saya tidak akan menjelaskan secara detail fungsi-fungsi scritp yang ada pada comment.php dan anda bisa pelajari scriptnya seperti di bawah ini;

<?php

// Jangan Dihapus Bagian Ini
	if (!empty($_SERVER['SCRIPT_FILENAME']) && '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;
	}
?>

<!--Yang Ini boleh diedit Gan -->

	<?php if ( have_comments() ) : ?>
	<b><?php comments_number('Tidak Ada Orang yang berkomentar', 'Satu Orang yang berkomentar', '% Orang yang berkomentar' );?> untuk &#8220;<?php the_title(); ?>&#8221;</b>
	<ol class="commentlist">
	<?php wp_list_comments('type=comment&avatar_size=48'); ?>
	</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>

	<?php if ( !empty($comments_by_type['pings']) ) :  ?>
	<h4>Trackbacks</h4>
	<b>Check out what others are saying about this post...</b>
	<ol class="commentlist">
	<?php wp_list_comments('type=pings'); ?>
	</ol><br /><br />
	<?php endif; ?>

 <?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">
<b>Silahkan Berikan komentar anda.</b>

<div class="comment">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>

<?php if ( get_option('comment_registration') && !$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></div>
<?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 &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 ""; ?> />
<label for="author"><small>Nama Anda <?php if ($req) echo "(wajid di isi)"; ?></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 ""; ?> />
<label for="email"><small>eMail Anda <?php if ($req) echo "(wajid di isi)"; ?></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 / Blog / Alamat fesbuk juga boleh</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Kirim Komentarnya" />
<?php comment_id_fields(); ?>
</p>
<?php do_action('comment_form', $post->ID); ?>

</form>
</div>

<?php endif; // If registration required and not logged in ?>

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

Dan Berikut kode CSS yang Peru ditambahkan pada file style.css

/*** koment *****/
.commentlist li ul li { font-size: 12px; }

.commentlist li { font-weight: bold; }

	.commentlist li .avatar {
		background: #ffffff;
		border: 1px solid #000000;
		float: right;
		margin: 0px 5px 0 0;
		padding: 0px; }

.comments {
	font-size: 12px;
	margin: 0;
	padding: 0; }

#respond {
	margin: 0px 5px 0 0;
	padding: 10px 5px 10px 10px;
	width: 578px; }

#author, #email, #url {
	background: #fff !important ;
	color: #000000;
	font-family: Arial, Tahoma, Verdana;
	font-size: 12px;
	margin: 5px 5px 0 0;
	padding: 3px 0 3px 3px;
	width: 250px; }

#comment {
	background: #fff !important ;
	color: #3a87dd;
	font-family: Arial, Tahoma, Verdana;
	font-size: 12px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0 0px 5px;
	width: 545px; }

#submit {

	color: #ffffff;
	font-size: 11px;
	margin: 0;
	padding: 5px 5px 5px 5px;
	text-decoration: none;
	text-transform: uppercase; }

	#submit:hover {
		background: #000000;
		border: 1px solid #bbbbbb; }

.commentlist cite, .commentlist cite a {
	font-size: 12px;
	font-style: normal;
	font-weight: bold; }

.commentlist p {
	font-weight: normal;
	text-transform: none; }

.commentmetadata { font-weight: normal; }

.alt {
	margin: 0;
	padding: 10px; }

.commentlist {
	margin: 0;
	padding: 0; }

	.commentlist ol {
		margin: 0;
		padding: 10px; }

	.commentlist li {
		background: #eeeeee;
		list-style: none;
		margin: 15px 0 10px;
		padding: 10px 5px 10px 10px; }

		.commentlist li ul li {
			margin-left: 10px;
			margin-right: -5px; }

	.commentlist p {
		margin: 10px 5px 10px 0;
		padding: 0; }

.children {
	margin: 0;
	padding: 0; }

.nocomments {
	margin: 0;
	padding: 0;
	text-align: center; }

.commentmetadata {
	display: block;
	font-size: 10px;
	margin: 0; }

.navigation {
	display: block;
	margin-bottom: 40px;
	margin-top: 10px;
	text-align: center; }

.alignright { float: right; }

.alignleft { float: left; }

.thread-alt {
	background: #eeeeee;
	margin: 0;
	padding: 0; }

.thread-even {
	background: #eeeeee;
	margin: 0px;
	padding: 0px 0px 0px 0px; }

.depth-1 {
	margin: 0;
	padding: 0; }

.even, .alt {
	margin: 0px;
	padding: 0px; }

Selanjutnya supaya kolom komentarnya muncul buka file index.php dan tambahkan script seperti dibawah pada diantara script dan seperti dibawah ini;

<?php endwhile; ?>
<?php comments_template(); // tambahkan script ini ke file index untuk fungsi di antara endwhile dan else ?>
<?php else : ?>

Nah untuk tutorial cara membuat theme wordpress saya tutup sampai disini, dan bagi sahabat yang masih kebingungan dengan tutotialnya yang acak kadut silahkan download theme tutorialnya disini.

Nb; Mohon dikoreksi jika ada kesalahan dalam penulisan.