WordPress Yorum Alanı Yapımı (Detaylı)

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 !important;}
.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.

 

Şuanda Türker T. adlı kişinin yorumuna cevap yazıyorsunuz. Cevabı iptal etmek için tıklayın.

Hocam çok iyisiniz ya. Sonunda yaptım yorum alanını.

Özgün bir paylaşım olmuş. WordPress kategorisinde görmek istediğimiz yazılar bunlar.

@Ahmet, @Can Dirgen yorumlarınız teşekkürler arkadaşlar 🙂

Hocam bu arada anasayfa görüntülenirken konularda x yorum var diyor. Ama yorum kısmına değil, anasayfaya yönlendiriyor. Düzeltin isterseniz.

Teşekkürler hocam. Çok iyi oturdu temaya

Hocam maşallah bayağı kod yazmışsınız. Ben bu kadar koda sıfır’dan blog scripti yazdım 😀

Teşekür ederim.

Hocam yorum alanının ekran görüntüsünü de yazı sonuna eklerseniz aslında daha makbul geçer 🙂 Yararlı Makale teşekkürler 🙂

Büyük zahmetten kurtandın hocam. Sağolasın

19 Ocak 2015 22:38

Hocam,
Kodlar çalışıyor fakat çok yorum olduğunda sayfalama kısmı gelmiyor. Sayfalama kısmını nasıl ekleriz.

güzel anlatımınız sayesinde bende yapabildim.

eyv.

kardeşim eyvallah lakin denemek için kendim konuya yorum yazdım admin panelinden konuya yaptığım yorum görünmekte lakin konu içerisinde yorum görünmemektedir

bunu yaptım ama yaptıgımız yorumlar gozukmuyor neden olabilir

    2 Ekim 2015 08:18

    Tekrar bir gözden geçirin derim. Çünkü sitemde de bende bu kodları kullanıyorum.

Hocam merhabalar.
Çok faydalı bilgiler vermişsiniz.
Bende sizin bilgilerinizden yararlanarak sitemi yapmayı planlıyorum.
Tekrardan bu güzel paylaşımınız için teşekkür ederim.

Hocam disqus kullandım dediniz. Ben de şuan disqus kullanıyorum kendi yorum sistemimi kurmak istiyorum da şimdiye kadar hep disqus tan geldi yorumlar. o yorumları disqustan alıp bu dediğiniz konudaki yorum sistemini kurup ona aktarabilirmiyim?

    6 Ekim 2015 08:05

    Tabi panelde disqus ayarları kısmında yorumları aktar diye bir seçenek mevcut.

      Hocam bu alan nerede bi türlü bulamadım. yardımınız gerekli? Hocam ekran görüntülerini gönderdim bakabilirsen sevinirim.
      Admin Edit: Fotoğrafları bakılıp, yorumdan kaldırıldı.

        6 Ekim 2015 20:40

        Şimdi tekrardan bir baktım da. Yorumları disqus’a aktarabiliyorduk. Siz zaten disqus kullanıyormuşsunuz o zaman zaten disqustan yorum yapınca otomatik olarak wordpress’in sistemine de ekliyordu. Yorumlar kısmında yorumlarınız duruyordur zaten. Disqus’u etkisiz hale getirin. (Yanlış hatırlamıyorumdur umarım.)

          hocam benim yorumlar kısmımda admin panelimde yani disqus taki yorumlar gözükmüyo ki

Güzel bir yazı olmus hocam tesekkurler

Eyvallah hocam.

biraz uzun bir yorum alanı olmuş dar bi alanda hemen yorum yapsın istiyorum

Çok detaylı yazmışsınız cidden, PHP Developersları bile zorlayacak cinsten 🙂 1.5Saat uğraştım anca yapabildim.

Ben yorum kutusu diğer yorumların üst kısmında bulunsun istiyorum nasıl yapabiliriz (soru işareti)

    comments.php dosyasındaki yorumları listele açıklama alanını formun altında koyarak yorum ekleme kutusunu üst kısma alabilirsin.

Az kalsın Jetpack yükleyecektim, Hueman’da bu kodlar ile gayet güzel bir sonuç aldım. Teşekkürler.

yaw kardeş şu temaya bir türlü yorumlar kısmı ekleyemedim bi yardım edermisin

16 Ekim 2016 18:33

Merhaba sevgili hocam sizin yazılarınızı okudum ve çok yararlı bilgi sizi çok yakından herzaman takip ediyorum Teşekkürler…

6 Ocak 2017 00:26

adamın dibisiniz, çok teşekkürler. 🙂

faydalı bir makale teşekkürler.

Hocam merhaba .Temamda yorum sayfası falan var fakat çıkmıyordu sizin verdiğiniz kodları ekledim comments e sizin verdiğiniz kodları ekledim ama yine olmadı sorun neden olabilir yardımcı olabilir misiniz ?

Sadece teşekkür etmek istedim. 🙂

Merhaba. İlk kod satırını functions.php dosyasına atarken bir yanlışlık yaptım. Site çöktü. Site yedeği almamıştım. Dosyayı nasıl değiştireceğimi bilmediğim için düzeltme çalışırken ftp üzerinden iyice site çöktü. Şu an siteye girmeye çalışırken domain sitesi açılıyor. Ne yapılabilir.Teşekkürler.

Paylaşım için çok teşekkürler bende böyle bir şey arıyordum 🙂

Teşekkür ederim çok işime yaradı 🙂

functions.php de bir hata var. O kodları yapıştırıp siteyi kontrol ettiğimde şu hatayı veriyor:

Warning: array_merge(): Argument #1 is not an array in C:\inetpub\wwwroot\deneme\wp-content\themes\deneme\functions.php on line 52

Sanıyorum kodların şu kısmında sorun var:

$depth, ‘max_depth’ => $args[‘max_depth’]))) ?>
29

30

31
<?php }

Hocam yukarda functions.php deki bazı kodlarda hata var haberiniz olsun. Uğraşlarım sonucu düzelttim ve çalışıyor şimdi.

hocam kolay gelsin verdiyiz kodları girdim ama yorum attıktan sonra cevap bekliyor kısmı gelmiyor yardımcı olabilirmisiniz.

Tarih ve Cevapla kısımlarını aşağı kaydırmış tarih ismin altına cevapla yorumun altına nasıl düzeltebiliriz, birde yorumlar arasındaki gri çizgili şerit çıkmıyor..

Teşekkürler, Güzel Anlatım

26 Ocak 2018 19:23

hocam merhaba burayı aynen uyguladım localhostta sorunsuz çalışıyor ancak hosta yükleyinde wp-comment page.php de takılıyor kalıyor.
daha sonra yenile dediğinizde yorum yapılmış diyor ve kontrol panelinden yorum onaylanınca çıkıyor.
yardım!

Yaz� hakk�nda g�r��lerinizi belirtmek istermisiniz?
Merhabalar hocam öncelikle kolay gelsin benim sorunum yukarıda belirttiğim gibidir türkçe karakterlerde problem var nasıl çözebilirim?

cevapla kısmına tıklayınca çalışmıyor

Söylediklerin hepsini yaptim ana olmadı bende