WordPress comments.php Yapımı – WordPress Yorum Alanı Yapımı [Detaylı Rehber]

Son güncelleme:
WordPress comments.php Yapımı – WordPress Yorum Alanı Yapımı [Detaylı Rehber]

Özel bir tema yapıyorsanız, kullandığınız temada yorum sistemi yoksa veya beğenmiyorsanız yorum sistemini baştan oluşturmak isteyebilirsiniz.

Ben de temayı yaparken zorlandığım bir konu olan yorum bölümünün hazır kodlarını sizinle paylaşmak istedim. Bu yazıda yorum şablonunun hazır kodlarını size vereceğim.

logo

Uygun fiyatlı ve kaliteli hosting satın al.

WordPress comments.php Yapımı

Öncelikle bir comments.php adlı dosya oluşturun. Temanızın içine. Eğer varsa içindekileri komple silebilirsiniz. İçindekileri sildikten sonra bu kodu comments.php dosyasına ekleyin.

            <?php if ( post_password_required() ) { return; } ?>
            <div id="comments" class="comments-area">
            	<?php if ( have_comments() ) { ?>
            	<h4 class="comments-title">
            		<?php comments_number(__('Yorum Yok', 'wpd'), __('1 Yorum', 'wpd'), '% ' . __('Yorum', 'wpd') ); ?>
            	</h4>
            	<ol class="comment-list">
            		<?php wp_list_comments( array( 'avatar_size' => 70, 'style' => 'ul', 'callback' => 'wpd_comments', 'type' => 'all' ) ); ?>
            	</ol>
            	<?php the_comments_pagination( array( 'prev_text' => '<i class="fa fa-angle-left" aria-hidden="true"></i> <span class="screen-reader-text">' . __( 'Önceki', 'wpd') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Sonraki', 'wpd') . '</span> <i class="fa fa-angle-right" aria-hidden="true"></i>', ) ); ?>
            	<?php } ?>
            	<?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) { ?>
            	<p class="no-comments"><?php _e( '? Yorum yapmak, editör tarafından kısıtlanmıştır.', 'wpd'); ?></p>
            	<?php } ?>
            	<div class="comment-input-group">
            		<?php comment_form(); ?>
            	</div>
            </div>

Daha sonra bu dosyayı kaydedin ve functions.php dosyanızı açın, eğer o dosya şifreli ise ek fonksiyon dosyasına da ekleyebilirsiniz. Aşağıdaki kodları fonksiyon dosyanıza ekleyin.

Eğer fonksiyon dosyanıza eklemek istemiyorsanız comments-walker-wpdoz.php olarak bir dosya oluşturun ve onun içine bu kodları ekleyin. Daha sonra aşağıdaki kod ile bu dosyayı çekmelisiniz.

require_once get_theme_file_path() .'comments-walker-wpdoz.php';
/** -----------------------------------------------
Yorum
----------------------------------------------- **/
            
function wpd_comments($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
	<br>
	    
		<div class="comment-wrap">
			<div class="comment-img">
				<?php echo get_avatar($comment,$args['avatar_size'],null,null,array('class' => array('img-responsive', 'img-circle') )); ?>
			</div>
			<div class="comment-body">
				<h4 class="comment-author"><?php echo get_comment_author_link(); ?></h4>
				<span class="comment-date"><?php printf(__('%1$s - %2$s', 'wpd'), get_comment_date(),  get_comment_time()) ?></span>
				<?php if ($comment->comment_approved == '0') { ?><em><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> <?php _e('Yorum onay bekliyor', 'wpd'); ?></em><br /><?php } ?>
				<?php comment_text(); ?>
				<span class="comment-reply"> <?php comment_reply_link(array_merge( $args, array('reply_text' => __('Cevapla', 'wpd'), 'depth' => $depth, 'max_depth' => $args['max_depth'])), $comment->comment_ID); ?></span>
			</div>
		</div>
<?php }

// yorum cevapla

add_action('wp_enqueue_scripts', 'wpd_public_scripts');

function wpd_public_scripts() {
    if (!is_admin()) {
        if (is_singular() && get_option('thread_comments')) { wp_enqueue_script('comment-reply'); }
    }
}

Bunu da ekledikten sonra geriye tek bir şey kalıyor; CSS.

Aşağıdaki kodları CSS dosyanıza ekleyin.

/* yorum css'leri wpdoz.com */

textarea, input {border-radius: .50rem;transition:1s; border:1px solid #e4e4e4;}
textarea {width:100%;}
.comment-list, .children{list-style:none;}
ul.children {list-style:none;padding-left:50px; border-top-left-radius: 8px; border-top-right-radius: 8px; margin-left:0px; border-top: 1px solid #BBBBBB;}
.comment-wrap { padding-bottom: 40px; margin-bottom: 10px; position:relative; }
.comment-wrap .comments-title{padding-top:60px;}
.comment-wrap .comment-img { float: left; margin-right: 20px; padding-bottom:25px;}
.comment-author {text-align:left;}
.comment-reply {position:absolute;top:0px;right:0px;}
.comment-author,.comment-author a{ border-bottom: none !important; font-size: 14px;text-transform: uppercase; letter-spacing: 2px;margin-bottom:2px;}
.comment-date{font-size: 10px;text-transform: uppercase; letter-spacing: 2px;;display:block;padding-bottom:7px;}
.depth-2 .comment-wrap {padding-left:30px;}
.depth-3 .comment-wrap {padding-left:60px;}
.depth-4 .comment-wrap {padding-left:90px;}
.depth-5 .comment-wrap {padding-left:120px;}
.depth-6 .comment-wrap {padding-left:150px;}
.depth-7 .comment-wrap {padding-left:180px;}
.depth-8 .comment-wrap {padding-left:210px;}
.depth-9 .comment-wrap {padding-left:240px;}
.depth-10 .comment-wrap {padding-left:270px;}
#commentform #author,#commentform #email,#commentform #url{
  padding: 15px;
  font-size: 14px;
  height: auto;
  display: block;
    width: 100%;
    padding: 15px;
    z-index: 2;
    font-size: 1rem;
    line-height: 1.55;
    color: #495057;
    background-color: #fff;
    margin-bottom: 1em;
    background-clip: padding-box;
    border: 1px solid #d2d6dc;
    border-radius: .50rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
#commentform #author,#commentform #email,#commentform #url, #commentform #comment{
  padding:12px;
}
textarea:focus, #commentform #author:focus,#commentform #email:focus,#commentform #url:focus, #commentform #comment:focus{
  outline: 0;
}
#commentform{
  border-radius: .50rem !important;

}
#commentform #comment,{
  display: block;
  height: 145px;
  color: #fff;
  padding: 15px;
    font-size: 14px;
    display: block;
    width: 100%;
    z-index: 2;
    line-height: 1.55;
    background-color: #fff;
    margin-bottom: 1em;
    background-clip: padding-box;
    border: 1px solid #d2d6dc;
    border-radius: .50rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.comment-input-group{
  padding: 2em;
  border-bottom: 1px solid #ececec;
}
#commentform input[type="submit"]{display:inline-block;padding:8px 15px;border:1px solid #e4e4e4;font-size: 10px;text-transform: uppercase;letter-spacing: 3px;background: #fff;margin-top:15px;}
#commentform input[type="submit"]:hover {background: #e2fcff;}
.title-line{border-top: 1px dotted #ccc;display: block;max-width: 30%;margin: 0 auto 25px;}

/* Responsive */

@media (max-width: 767px) {
    .comment-list, .children { padding-left: 0px; }
    .children {  }
    .comment-wrap .comment-img { display: none; }
    .comment-img>img { display: none; }
    .comment-author, .comment-author a, .comment-date { }
    .depth-2 .comment-wrap,.depth-3 .comment-wrap,.depth-4 .comment-wrap,.depth-5 .comment-wrap,.depth-6 .comment-wrap,.depth-7 .comment-wrap,.depth-8 .comment-wrap,.depth-9 .comment-wrap,.depth-10 .comment-wrap {padding-left:0px;}
    .comment-reply { position: relative; display: block; margin-top: 25px;}
}
  

Bunları yaptıktan sonra yorum bölümü otomatik olarak gelmeyecektir. Gelmesi için görünmesi istediğiniz yere aşağıdaki kodları ekleyin. (single.php ve page.php’ye ekleyebilirsiniz.)

<?php if ( comments_open() || get_comments_number() ) : comments_template(); endif; ?>

Bültene Abone Ol

Gelen kutunuza teslim edilen en son haberlerimizi, öğreticilerimizi, kılavuzlarımızı, ipuçlarımızı ve fırsatlarımızı alın.

10 Yorum

  • Avatar of efe efe

    kullandığım temada yorum dosyası yoktu. sayenizde yaptım

    • Avatar of Enes Cantürk Enes Cantürk

      İşinize yaramasına sevindim.

  • Avatar of haydar haydar

    Çok işime yaradı teşekkürler. wordpress comments.php yi en kolay sizde yaptım

    • Avatar of Enes Cantürk Enes Cantürk

      İşinize yaramasına sevindim :)

  • Avatar of ersin ersin

    teşekkür ederim

    • Avatar of Enes Cantürk Enes Cantürk

      Rica ederim.

  • Avatar of osman osman

    teşekkür ederim.

    • Avatar of Enes Cantürk Enes Cantürk

      Rica ederim.

  • Avatar of Okan Okan

    500 lira fiyat çekmişlerdi. Sayenizde ücretsiz yaptım hocam sağolun :D

    • Avatar of Enes Cantürk Enes Cantürk

      Sonuçta bir emek olduğu için fiyatı o civarlarda vermesi normal :) Ben de aynı şekilde hizmet veriyorum ama böyle basit şeyler için ücretsiz içerikler de yayınlıyorum

    Bu yazıya yorum yapmak sınırlandırılmıştır.

    Yorum yaparken yazım kurallarına ve genel ahlak kurallarına dikkat edelim.