Datalife Engine scriptinden WordPress’e geçtiğim gün WordPress’e tema entegre etmesini öğrenmiştim. Karışık ve kafa yorucu kısım yorum alanı kısmıydı. Bu yüzden o alanı kodlamak yerine Disqus yorum sistemini kullanıyordum. Şimdi kendi blogum için düzenledim o alanı. Profesyonel tema kodlayıcıların bile sıkıcı bulduğu yorum alanının kodlarını detaylı bir şekilde paylaşacağım.

 

Kodlardan ol,ul,li gibi gereksiz tagları temizledim. div taglarının değerlerini kodların biraz da olsa karışıklığını gidermek için Türkçe yaptım. Bilgi değerleri girdim.

Şimdi başlayalım.

 

functions.php dosyamıza aşağıdaki kodları <?php  ?> kodları arasına ekleyelim.

// Yorum Listeleme Özelliği
function sinyor_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?>
<?php $PostAuthor = false; if($comment->comment_author_email == get_the_author_email()) {
$PostAuthor = true;}
elseif($comment->comment_author_email == 'mailadresiniz@mail.com') {
$PostAuthor = true;}
?>
<li <?php if($PostAuthor) {echo "class='authorcomment' ";} ?> id="li-yorum-<?php comment_ID() ?>">
<div class="yorum">
<div class="yorumkullanici">
<!-- Yorum Avatar -->
<div class="yorumavatar">
<?php echo get_avatar($comment,$size='54'); ?>
</div>
<!-- #Yorum Avatar -->
<!-- Kullanıcı Adı ve Tarih -->
<h3><?php printf(__('%s'), get_comment_author_link()) ?></h3>
<div class="yorumtarih">
<i class="yorumtarihikon"></i><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(get_comment_date()); ?></a> <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(get_comment_time()); ?></a>
</div>
<!-- #Kullanıcı Adı ve Tarih -->
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em class="yorumonay">Yorumunuz onaylandıktan sonra görüntülenecektir.</em>
<?php endif; ?>
<div class="yorumyazi"><?php comment_text() ?></div>
<div class="cevapla">
<i class="cevaplaikon"></i><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php }

comments.php dosyasının içine aşağıdaki kodları ekleyin. (Yoksa oluşturun.)

<?php if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Lütfen bu sayfaya doğrudan yükleme yapmayınız, teşekkürler.'); if (post_password_required()) { ?>Bu yazı parola korumalıdır, yorumları görebilmek için parolayı girin.
<?php return; } ?>
<!-- Düzenlemeye buradan başlayabilirsiniz. -->
<?php if ( have_comments() ) : ?>
<h4 class="kacyorum">Yorumlar (<?php comments_number('0 Yorum :/', '1 Yorum', '% Yorum' );?>)</h4>
<!-- Yorumları Listele -->
<ul class="yorumlistele">
<?php wp_list_comments('type=all&callback=sinyor_comment'); ?>
</ul>
<!-- #Yorumları Listele -->
<?php else : ?>
<?php if ( comments_open() ) : ?>
<?php else : ?>
Bu yazı yorumlara kapatılmıştır.

<?php endif; ?>
<?php endif; ?>
<?php ?>
<?php global $trackbacks; ?>
<?php if ($trackbacks) : ?>
<?php $comments = $trackbacks; ?>
<div id="pingback-trackback">
<h3 id="trackbacks">Geri bildirimler: <?php echo sizeof($trackbacks); ?></h3>
<ol class="pings">
<?php foreach ($comments as $comment) : ?>
<!-- Geriizleme başlangıç -->
<li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>">
<cite><?php comment_author_link() ?></cite>
<?php if ($comment->comment_approved == '0') : ?>
<em>Yorumunuz denetim için bekliyor.</em>
<?php endif; ?>
</li>
<!-- Geriizleme bitiş -->
<?php $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<?php ?>
<?php if ( comments_open() ) : ?>
<div id="respond">
<h4>
<?php comment_form_title( 'Yazı hakkında görüşlerinizi belirtmek istermisiniz?', 'Şuanda %s adlı kişinin yorumuna cevap yazıyorsunuz.' ); ?>
<span class="cancel-comment-reply">
<small><?php cancel_comment_reply_link(); ?></small>
</span>
</h4>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
Yorum yapabilmek için <a href="<?php echo wp_login_url( get_permalink() ); ?>">giriş</a> yapmalısınız.
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( is_user_logged_in() ) : ?>Sisteme <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a> olarak giriş yapılmış. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Çıkış yapın">Çıkış yap &raquo;</a>
<?php else : ?>
<!-- Ziyaretçi Bilgisi -->
<script type="text/javascript">
//<![CDATA[
(function() {
document.write('<input type="text" name="author" id="author" value="" placeholder="İsim &amp; Soyisim" size="22" tabindex="1"/>');
document.write('<input type="text" name="email" id="email" value="" placeholder="E-Posta" size="22" tabindex="2" />');
document.write('<input type="text" name="url" id="url" value="" placeholder="Website" size="22" tabindex="3" />');
})();
//]]>
</script>
<!-- #Ziyaretçi Bilgisi -->
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
(function() {
document.write('<textarea name="comment" class="comment" placeholder="Yorumunuzu buraya yazabilirsiniz." tabindex="4"></textarea>');
})();
//]]>
</script>
<input name="submit" type="submit" id="submit" tabindex="5" value="Gönder" /><?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
</div>
<?php endif; ?>

Temanızın style.css dosyasına aşağıdaki stil kodlarını ekleyin.

/* Yorum */h4.kacyorum {font-weight: bold;font-size: 18px; color: #404040;line-height: 28px;margin: 15px 0;}
.yorum {margin-bottom: 25px;}
.yorum a {color: #404040;}
.yorumavatar {float: left; margin-right: 15px;}
.yorumavatar img {width: 60px; height: 60px;}
.yorumavatar img:hover {border-radius: 1px;}
.yorumkullanici h3 {font-size :15px; font-weight: bold;color: #404040; margin-bottom: 5px;}
.yorumtarih {margin-top: 10px;margin-bottom: 14px; font-size: 11px;}
.yorumtarih a {color: #aaaaaa;}
i.yorumtarihikon {float: left; background: url("images/tarih.png") no-repeat; width: 16px; height: 16px; display: block; margin-top: 0px; margin-right: 5px;}
.yorumyazi {font-size: 14px;color: #626262;line-height: 24px;}
.yorumyazi p { margin-left: 75px; text-indent: 0px; }
ul.children{padding:0px 0px 0px 60px ;}
.cevapla {margin-left: 75px; font-size: 12px; margin-top: 5px;}
i.cevaplaikon {float: left; background: url("images/cevapla.png") no-repeat; width: 16px; height: 16px; display: block; margin-top: 0px; margin-right: 5px;}
em.yorumonay {font-size:12px;}

/* Yorum Ekle */#respond {overflow: hidden; background-color: #F5F5F5;border: 2px solid #FFFFFF;border-radius: 0 0 2px 2px; padding: 10px; width: 100%;}
#respond h4 {font-family: 'Open Sans', sans-serif; margin-bottom: 5px; font-size: 13px;}
#respond h4 a {color: #D45255;}
#respond .comment {width: 98%; font-family: 'Open Sans', sans-serif; border: none; padding: 15px 10px 30px 15px; margin-top: 10px; border-radius: 2px;}
#respond input[type='text']{float: left; border: none; border-radius: 2px; padding: 12px 10px 11px 10px; margin-right: 10px;}
#respond input[type='submit'] {float: right; margin-right: -5px; border: none; background-color: #00979d; padding: 12px 10px 11px 10px; color: #fff;font-weight: bold; border-radius: 2px}
p#yorumgiris {font-size: 13px;}
p.comment-subscription-form {display: none;}

Cevaplama ve tarih kısımlarının yanında ikon ekledim. 16x16px boyutlarında ikon bulup, images klasörünün içine atabilirsiniz.

Not: Stil kodlarını kendi temama göre tasarladığım için temanız da doğru görünüm vermeyebilir. Stil kodlarınızı kendi temanıza göre kodlayınız.

Not2: Beni yeni yazılarda e-posta ile bilgilendir. kısmını gizledim. Açmak için stil kodlarındaki

p.comment-subscription-form {display: none;} kodunu silin.