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

آموزش وردپرس / هک و کد های وردپرس

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

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

خوب، اول باید بریم سراغ فایل 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 ?>

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

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

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

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

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

سوالات و مشکلات خود را در دیدگاه ها بیان کنید، حتما پاسخ خواهیم داد.

دیدن این مطالب رو به شما پیشنهاد میکنیم...

۴۰ دیدگاه برای این مطلب ارسال شده است

  1. سلام خسته نباشید… ولی فکر میکنم کد php اشتباه هست یا من اشتباه وارد میکنم..چون وقتی توی functions.php قرارش میدم ارور میده و سایت بالا نمیاد..مرسی

  2. سلام داداش
    ممنون از زحمتت لطفا کامل توضیح بده
    ۱ توی single.php چه کدی را باید به طور کامل قرار بدیم؟
    من هر کاری میکنم با آموزش هم پیش میرم اما درست نمیشه!!!!!
    لطف کن و به ایمیلم پاسخت رو بفرست

  3. خوب عزیز جان من تقریبا هیچی از این کدا سر در نمیارم
    ولی اگه تو فایل single.php هیچی قرار ندیم نظرات رو نمایش داده نمیشه که آخه!
    برای تمپلیت دیفالت خود وردپرس کد php این هست دیگه درسته :
    این کد رو هر جای single.php قرار بدیم قسمت نظرات ظاهر میشه!!!درسته؟
    —–
    حالا این روشی که شما گفتید تو بالا رو من انجام میدم هیچی نمایش داده نمیشه!
    پس اگه اشتباه نکنم یه کدی هم باید بدی تا توی single.php قرار بدیم!
    ————-
    باز هم اگه لطف کنی پاسخت رو به ایمیلم ارسال کن

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

  4. منم نتونستم راه بندازمش.
    اولا کادر باکس نظرات از چپ میزنه بیرون و بزرگتر از محتوام میشه.ثانیا بعد از یه رفرش سیتم ارور میده و فانکشنم خودش یه تغییرات کوچیکی میکنه.
    ضمن اینکه استایلش مطابق این عکسی که قرار دادین نیست!

  5. سلام . من یک مشکلی دارم . وقتی کدهای فایل Comment.php رو جایگزین می کنم کلا دیدگاه ها نمایش داده نمیشه . امکانش هست فایل ommecnt.php رو بدم خودتون زحمتش رو بکشید ؟ واقعا ممنون میشم

  6. سلام اقا …
    ماله من اصلا از کدهای css استفاده نمیکنه !!!! چه کار باید بکنم ؟ بایستی کار خاصی کرد برای استایلش ؟ والا من کپی کردم تمام مراحل شما رو ولی باز نشد که نشد !!!!!

  7. سلام.قالب سایت من دیدگاه نداره.تو چه قسمتی میتونم تنظیمش کنم؟این مطالبی هم که گفتی انجام دادم،ولی دیدگاه نشون داده نمیشه.فایل فانکشن تو همون پوشه های ورد پرس فارسیه یا تویه سایت مثل همون استایل .سی اس اس؟آخه برا من تو قالبم اینو نداره،چه جوری بسازمش؟

  8. سلام
    من اولین کد رو وارد کردم ولی حالا سایتم نمیاد بالا
    وقتی ادرس سایت رو وارد می کنی مینویسه
    Parse error: syntax error, unexpected '}' in /home/u116317345/public_html/wp-content/themes/Toptemp-Nexus/functions.php on line 1171

    لطفا کمکم کنید

  9. متشکرم
    ولی من تغییرات رو روی خود سایتم توی اینترنت اعمال کردم نه توی کامپیوترم
    برای همین هیچ دسترسی به سایت ندارم
    چون سیستم ان وردپرس است وقتی ادرس ادمینم (admin) رو میدم این خطا رو میده
    میشه لطفا کمک کنید ممنون
    ادرس ادمینم amatlab.ugig.ir/wp-admin هست

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

  11. درود

    داداش من کد ها رو جایگذاری کردم، ولی یه مشکلی هست!
    وقتی دیدگاه رو ارسال میکنی چیزی نشون نمیده
    توی تنظیمات دیدگاه رو هم که تایید کنی باز نشون نمیده

  12. داداش اصلا یه کار دیگه میخوام انجام بدم

    من استایل بخش دیدگاه های پوسته ی خودم رو بخوام ویرایش کنم باید چیکار کنم؟
    مثلا یه حاشیه بیاد دور کامنتها و یه رنگ بندی خاص و یه چیزایی تو این مایه ها

    قربونت بگو چ کنیم؟
    ممنون

  13. داداش میدونی چی شد؟؟
    الان که دوباره بخش دیدگاه های خودمو فعال کردم دیدم یه چیز خفن رو از دست دادم!
    اونم اینه که روش شما دیدگاه های ارسالی رو ایمیل میکنه که خیــــلی خوبه

    شما بیا و یه لطفی کن، همون سوال اولمو جواب بده 🙂
    این دوتا دیدگاه آخریم هم پاک کن

    ممنون

  14. سلام
    این قسمت رو میشه توضیح بدید؟
    من کد های فانکشن رو گزاشتم
    comments.php هم ساختم با این کد ها
    استایل ها رو هم ریختم توی style.css
    اما همون قالب پیشرفض وردپرس میاد!
    چه کار دیگه ای باید انجام بدم؟!

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

  15. سلام
    واقعاً مطلبتون عالی بود و خیلی به من کمک کرد
    فقط نکته ای که برای من پیش اومد اعمال نکردن کدهای css بود که مجبور شدم خودم براش بنویسم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *