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

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

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

function wpsaz_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
>


%s'), get_comment_author_link()) ?>

comment_approved == '0') : ?>
 $depth, 'max_depth' => $args['max_depth']))) ?>

رو قبل از بسته شدن 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;}
.Idea-avatar{float:right;width:86px;height:84px;}
.Idea-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 قرار دادیم استفاده کنه برای این کار فایل Idea.php رو باز کنید و کد زیر رو به صورت کامل جایگزین کنید:

این مطلب با کلمه عبور محافظت شده است. برای دیدن دیدگاه ها، کلمه عبور را وارد کنید.
دیدگاه هایی که برای این مطلب ارسال شده

امکان ارسال دیدگاه برای این مطلب وجود ندارد.

شما هم دیدگاهی برای این مطلب ارسال کنید

برای ارسال دیدگاه باید وارد شوید.

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

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

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

منبع: وردپرس ساز