سلام خدمت کاربرای عزیز کدآموز
داشتم توی اینترنت میگشتم که به چندتا پست رسیدم که بعضی از دوستان در ایجاد کامنت های تو در تو (thread comments) مشکل داشتند،و تصمیمم بر این شد که یه مطلب آموزشی در این مورد در آموزشگاه قرار بدم.
کامنت های تو در تو چی هست؟
وقتی وردپرس نسخه ۲٫۷ منتشر شد، امکانات زیادی رو ارائه داد که یکی از اونا امکان کامنت های تو در تو بود.کامنت های تو در تو این امکان رو فراهم میکرد که افراد زیر مطالب خبری ، آموزشی یا … به بحث و گفتوگو بپردازن و به صورت تو در تو قرار میگرفت.
خب حالا برای ایجاد امکان کامنت های تو در تو چند مرحله کوتاه زیر رو با هم انجام میدیدم.
مرحله اول
وارد فایل قالبتون بشید از فایل comments.php یک پشتیبان تهیه کنید، بعد کد زیر رو جایگذین کد های فایل کامنت کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<?php // دست به این قسمت نزنید :D if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p class="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <!-- اینجا میتونید تغییرات مورد نظر رو ایجاد کنید. --> <?php if ( have_comments() ) : ?> <h3 id="comments"><?php comments_number('بدون دیدگاه', 'یک دیدگاه', '% دیدگاه' );?> در “<?php the_title(); ?>”</h3> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <ol class="commentlist"> <?php wp_list_comments('avatar_size=48'); ?> </ol> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <?php else : ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Comments are closed.</p> <?php endif; ?> <?php endif; ?> <?php if ('open' == $post->comment_status) : ?> <div id="respond"> <h3><?php comment_form_title( 'یک بازتاب بزارید...', 'یک بازتاب بزارید در %s' ); ?></h3> <?php if ( get_option('comment_registration') && !$user_ID ) : ?> <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" class="commentforms" id="commentform"> <?php if ( $user_ID ) : ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">خارج شدن »</a></p> <?php else : ?> <p><input type="text" name="author" id="author" placeholder="نام <?php if ($req) echo "(الزامی)"; ?>" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> </p> <p><input type="text" name="email" id="email" placeholder="ایمیل (نمایش داده نمیشود) <?php if ($req) echo "(الزامی)"; ?>" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> /> </p> <p><input type="text" name="url" id="url" placeholder="وبسایت" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> </p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="5" tabindex="4"></textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="ارسال دیدگاه" /> <?php comment_id_fields(); ?> <div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div> </p> <?php do_action('comment_form', $post->ID); ?> </form> <?php endif; // If registration required and not logged in ?> </div> <?php endif; // اگه این قسمت رو پاک کردین آسمون رو سرتون خراب میشه :D ?> |
و باید از قسمت تنظیمات -> گفتوگوها ، تیک فعال کردن کامنت های تو در تو رو بزنید و تعداد رو روی مقدار دلخواهی تنظیم کنید.
مرحله دوم
فایل functions.php رو باز کنید و کد زیر رو در آخر این فایل قرار بدید
|
1 2 3 4 5 6 7 8 |
function enable_threaded_comments(){ if (!is_admin()) { if (is_singular() && comments_open() && (get_option('thread_comments') == 1)) wp_enqueue_script('comment-reply'); } } add_action('get_header', 'enable_threaded_comments'); |
حالا اگر یک مطلب رو باز کنید میبینید که گذینه پاسخ دادن به قسمت کامنت اضافه شده.حالا میتونید با کلیک رو پاسخ دادن به دیدگاه مورد نظر پاسخ بدید.
خب فقط قسمت اخر مونده که مربوط به قالب دهی هستش ، این استایل ها رو من خودم نوشتم برای سایت خودم ، شما میتونید تغییرات دلخواهتون رو توی اون ایجاد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
/*قسمت استایل های خام. میتونید ادیت کنید*/ ol.commentlist {} ol.commentlist li {} ol.commentlist li.alt {} ol.commentlist li.bypostauthor {} ol.commentlist li.byuser {} ol.commentlist li.comment-author-admin {} ol.commentlist li.comment {} ol.commentlist li.comment div.comment-author {} ol.commentlist li.comment div.vcard {} ol.commentlist li.comment div.vcard cite.fn {} ol.commentlist li.comment div.vcard cite.fn a.url {} ol.commentlist li.comment div.vcard img.avatar {} ol.commentlist li.comment div.vcard img.avatar-32 {} ol.commentlist li.comment div.vcard img.photo {} ol.commentlist li.comment div.vcard span.says {} ol.commentlist li.comment div.commentmetadata {} ol.commentlist li.comment div.comment-meta {} ol.commentlist li.comment div.comment-meta a {} ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.) ol.commentlist li.comment div.reply {} ol.commentlist li.comment div.reply a {} ol.commentlist li.comment ul.children {} ol.commentlist li.comment ul.children li {} ol.commentlist li.comment ul.children li.alt {} ol.commentlist li.comment ul.children li.bypostauthor {} ol.commentlist li.comment ul.children li.byuser {} ol.commentlist li.comment ul.children li.comment {} ol.commentlist li.comment ul.children li.comment-author-admin {} ol.commentlist li.comment ul.children li.depth-2 {} ol.commentlist li.comment ul.children li.depth-3 {} ol.commentlist li.comment ul.children li.depth-4 {} ol.commentlist li.comment ul.children li.depth-5 {} ol.commentlist li.comment ul.children li.odd {} ol.commentlist li.even {} ol.commentlist li.odd {} ol.commentlist li.parent {} ol.commentlist li.pingback {} ol.commentlist li.pingback div.comment-author {} ol.commentlist li.pingback div.vcard {} ol.commentlist li.pingback div.vcard cite.fn {} ol.commentlist li.pingback div.vcard cite.fn a.url {} ol.commentlist li.pingback div.vcard span.says {} ol.commentlist li.pingback div.commentmetadata {} ol.commentlist li.pingback div.comment-meta {} ol.commentlist li.pingback div.comment-meta a {} ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.) ol.commentlist li.pingback div.reply {} ol.commentlist li.pingback div.reply a {} ol.commentlist li.pingback ul.children {} ol.commentlist li.pingback ul.children li {} ol.commentlist li.pingback ul.children li.alt {} ol.commentlist li.pingback ul.children li.bypostauthor {} ol.commentlist li.pingback ul.children li.byuser {} ol.commentlist li.pingback ul.children li.comment {} ol.commentlist li.pingback ul.children li.comment-author-admin {} ol.commentlist li.pingback ul.children li.depth-2 {} ol.commentlist li.pingback ul.children li.depth-3 {} ol.commentlist li.pingback ul.children li.depth-4 {} ol.commentlist li.pingback ul.children li.depth-5 {} ol.commentlist li.pingback ul.children li.odd {} ol.commentlist li.thread-alt {} ol.commentlist li.thread-even {} ol.commentlist li.thread-odd {} /*استایل های من*/ .commentforms input , .commentforms textarea {padding: 0.5% 2% !important; width: 50%; font: 14px BYekan; padding: 5px ; border-radius: 3px; transition: all 0.3s; margin: 3px 2%;background: url(images/op.png);border: 1px white solid;} .commentforms textarea { width:60% ;padding: .5% !important; height:150px ; outline:none ; } .search-widget-btn,.commentforms input[type=submit] { background:#e74c3c ; color:#fff ; font:14px BYekan; padding:5px ; text-align:center ;width: 20%; margin:10px ;border: none; border-radius:3px ; cursor:pointer ; transition:all 0.3s} .commentforms input[placeholder] { color: white; } .commentforms input[type=submit]:hover { background-color: #D13B2E; } a.reply-link { text-decoration:none ; color:#000 ; background:#ecf0f1 ; border-radius:3px ; padding:0 10px } a.reply-link:hover { background:#525252 ; color:#fff} .commentdiv{float: right; background: url(images/op.png); margin: 2% %; width: 73%; padding: 2%;} ol.commentlist { list-style:none; margin:; padding:; } ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0 0 10px; padding:5px 7px 5px 64px; position:relative; } ol.commentlist li.pingback comment-author { padding: 170px ; } ol.commentlist li div.vcard { font-weight:bold; font-size: 14px; line-height: 16px; font-family: helvetica,arial,sans-serif; } ol.commentlist li div.vcard cite.fn { font-style:normal; font-size: 11px; } ol.commentlist li div.vcard cite.fn a.url { text-decoration:none; } ol.commentlist li div.vcard cite.fn a.url:hover { color:#FFF; } ol.commentlist li div.vcard img.avatar { background: #fff; border:1px solid #aaa; left:7px; position:absolute; top:7px; } ol.commentlist li div.comment-meta { font-weight:bold; font-size: 10px; line-height: 16px; font-family: helvetica,arial,sans-serif; right:10px; text-align:right; top:5px; } ol.commentlist li div.comment-meta a { color:#2FA5FC;; text-decoration:none; font-size: 11px;} ol.commentlist li p { font-weight: normal; font-size: 13px; line-height: 16px; margin: 5px 12px;} ol.commentlist li ul { font-weight:normal; font-size: 12px; line-height: 16px; font-family: helvetica,arial,sans-serif; list-style:square; margin: 12px; padding:; } ol.commentlist li div.reply { width: 100%; } ol.commentlist li div.reply:hover { } ol.commentlist li div.reply a {background-color: firebrick; padding: 0.5% 1%; margin: 1%; border-radius: 2px; transition: none; font-size: 13px;float: left; } ol.commentlist li div.reply a:hover { background-color: #861717;transition: none; } ol.commentlist li ul.children { list-style:none; margin:12px ; text-indent:; } ol.commentlist li ul.children li.depth-2 { margin: 3px;background: url(images/op.png); } ol.commentlist li ul.children li.depth-3 { margin: 3px;background: url(images/op.png); } ol.commentlist li ul.children li.depth-4 { margin: 3px;background: url(images/op.png); } ol.commentlist li ul.children li.depth-5 { margin: 3px;background: url(images/op.png); } ol.commentlist ul.children li.odd { background:#fff; } ol.commentlist ul.children li.even { background: url(images/op.png); } ol.commentlist li.pingback div.vcard { padding: 170px ; } #cancel_reply{float: right; padding: 3%;} |
اگر تعداد کامنت های تو در تو رو روی ۲ قرار داده باشید قسمت کامنت مشابه زیر میباشد :
کامنت های تو در تو برای وردپرس
به همین سادگی قسمت کامنت های تو در تو برای شما فعال شد.
برای تغییر سایز آواتار کد زیر رو در خط ۲۵ تغییر بدید :
|
1 |
<?php wp_list_comments('avatar_size=48'); ?> |
موفق باشید ??❤❤✌
-
1 صفحه بندی بدون افزونه در وردپرس
-
2 دانلود افزونه iThemes Security Pro v3.6.0 برای وردپرس
-
3 نمایش تاریخ آپدیت پست در وردپرس
-
4 تغییر آواتار قسمت نظرات و مطالب در وردپرس
-
5 دانلود رایگان افزونه Yoast Premium SEO v4.2.1 + افزونه ها
-
6 نسخه پولی WP Smush pro برای وردپرس
-
7 افزایش حجم آپلود در وردپرس
-
8 بهترین سرویس وبلاگ دهی در سال ۲۰۱۶
برای شروع برنامه نویسی اول باید چکار
کرد.