Ö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.

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; ?>