استایل اختصاصی برای دیدگاه وردپرس

به طور حتم شما هم به دنبال راهی برای اختصاصی کردن قسمت دیدگاه وردپرس هستید! من امروز تصمیم گرفتم به شما یاد بدم که چگونه دیدگاه وردپرس رو اختصاصی کنید و به آن استایل دلخواه بدهید. این مطلب اختصاصیست.

خوب، اول باید بریم سراغ فایل functions پوسته. ( اگر در پوشه پوسته شما این فایل وجود نداشت باید آن را بسازید. ) فایل functions رو باز میکنیم و کد های

function wpsaz_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?>>
<div>
<div><?php echo get_avatar($comment,$size='74'); ?></div>
<div>
<?php printf(__('<span>نویسنده دیدگاه:</span> <cite>%s</cite>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?><em><?php _e('Your comment is awaiting moderation.') ?></em><br /><?php endif; ?>
<div><?php printf(__('%1s'), get_comment_date(),  get_comment_time()) ?></div>
<?php comment_text() ?>
<div><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></div>
</div>
<?php
}

رو قبل از بسته شدن php یعنی

?>

قرار میدیم. ما با این کد ها به وردپرس میگیم که باید از این کد ها برای نمایش دیدگاه ها استفاده کنه. دیدگاه های ما استایل CSS نداره پس باید بریم سراغ استایل دادن و زیبا کردن دیدگاه ها.

فایل style.css مان را باز میکنیم و کد های زیر را کپی میکنیم

/* Comments Styles */
ol.commentlist{clear:both;overflow:hidden;list-style:none;margin:0;width:594px;}
ol.commentlist li{line-height:18px;padding:6px 0;}
.comment-body{float:right;width:592px;height:auto;border-radius:6px;border:1px dashed #666;margin:4px 0;}
.comments-avatar{float:right;width:86px;height:84px;}
.comments-avatar .avatar{background:#E4E4E4;padding:3px;margin:6px 5px;border-radius:4px;border:1px solid #bbb;}
.vcard{float:right;margin:3px 8px 8px 0;width:320px;}
.vcard span{color:#0f6fb2;}
.commentdata{float:left;margin:3px 0 0 6px;color:#0f6fb2;}
.comment-body p{float:left;width:481px;height:auto;border-radius:5px;border:1px solid #CCC;padding:5px 5px 9px 5px;font:12px Tahoma;margin:2px 0 21px 6px;}
.reply{float:right;margin:10px 15px 0 0;width:54px;height:20px;background-image:-webkit-linear-gradient(top, #fff, #ebebee);background-image:-moz-linear-gradient(top, #fff, #ebebee);background-image:-ms-linear-gradient(top, #fff, #ebebee);background-image:-o-linear-gradient(top, #fff, #ebebee);background-image:linear-gradient(top, #fff, #ebebee);border:1px solid #CCC;font:12px Tahoma;padding:0 3px 0 3px;border-radius:3px;margin-bottom:6px;}
.comment-author-admin p{float:left;background-color:#def1ff !important;width:481px;}
.respond{width:592px;padding:0 0 0 1px;margin:0 5px 30px 0;}
.commentform{padding:18px 0;}
.commentform a{color:#f0f0f0;}
.commentform span{margin-right:3px;}
.commentform input{width:270px;}
.commentform input[type="submit"]{border-bottom:2px solid #666;color:#333;text-shadow:0 1px 0 white;float:left;cursor:Pointer;margin:12px 0 0 4px;width:82px;padding:0;font:17px 'BYekan';text-align:center;border-radius:5px;transition:all .1s linear;-o-transition:all .1s linear;-moz-transition:all .1s linear;-webkit-transition:all .1s linear;}
.commentform input:hover[type="submit"]{border-bottom:2px solid #0f6fb2;color:#0f6fb2;}
.respond textarea{background:#fff;border:1px solid #bbb;border-radius:3px;width:577px;height:100px;color:#02070F;margin:10px 0 0 0;padding:5px;}

حالا باید به وردپرس بگیم که قسمت دیدگاه ها رو با کد اختصاصی که ما در فایل function قرار دادیم استفاده کنه برای این کار فایل comments.php رو باز کنید و کد زیر رو به صورت کامل جایگزین کنید:

<?php
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('لطفا مستقیما وارد این صفحه نشوید. متشکریم!');

if ( post_password_required() ) { ?>
<p>این مطلب با کلمه عبور محافظت شده است. برای دیدن دیدگاه ها، کلمه عبور را وارد کنید.</p>
<?php
return;
}
?>

<!-- You can start editing here. -->

<?php if ( have_comments() ) : ?>

<div><h3>دیدگاه هایی که برای این مطلب ارسال شده</h3>
<ol><?php wp_list_comments("callback=wpsaz_comment"); ?></ol>
</div>
<?php else : // this is displayed if there are no comments so far ?>

<?php if ( comments_open() ) : ?>
<!-- If comments are open, but there are no comments. -->

<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p>امکان ارسال دیدگاه برای این مطلب وجود ندارد.</p>

<?php endif; ?>
<?php endif; ?>

<?php if ( comments_open() ) : ?>
<div><h3>شما هم دیدگاهی برای این مطلب ارسال کنید</h3>
<div>
<?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
<p>برای ارسال دیدگاه باید <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">وارد شوید</a>.</p>
<?php else : ?>

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post">

<?php if ( is_user_logged_in() ) : ?>

<?php else : ?>

<span>نام شما</span><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /><br><br>
<span>ایمیل شما</span><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /><br><br>
<span>وب سایت شما</span><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />

<?php endif; ?>

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

<input name="submit" type="submit" id="commentSubmit" tabindex="5" value="ارسال" />
<?php comment_id_fields(); ?>
<?php do_action('comment_form', $post->ID); ?>

</form>

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

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

توجه: تو خط های 16 و 33 شما باید استایلی که برای مطالب استفاده کردید رو قرار بدید.

اگر با CSS آشنایی دارید میتونید استایل ها رو به سلیقه خود تغییر بدید. کد های بالا دقیقا کد های پوسته وردپرس ساز هست.

پیشنهاد: در کد های CSS بالا من به دیدگاه مدیر استایل متفاوت دادم. اگر نام کاربری مدیر وب سایت admin نیست، باید با توجه به نام کاربری کد آن را تغییر بدید.

یک لطف: من برای تست و نحوه ی اختصاصی کردن دیدگاه ها تقریبا یک روز وقت گذاشتم. پس دوستانی که قصد دارن این پست رو در وب سایت خودشون قرار بدن لطفا منبع رو نیز درج کنن.

موفق باشید. بروزرسانی: پنج شنبه – ۱۳ تیر ۱۳۹۲