سلام دوستان عزیز ، در این مقاله از آموزش وردپرس قصد داریم نحوه ارسال دیدگاه در وردپرس با Ajax را به صورت گام به گام شرح دهیم.
مقدمه :
به صورت پیش فرض بخش دیدگاه ها در وردپرس شامل یک فرم جهت دریافت اطلاعات کاربر می باشد که پس از ارسال اطلاعات، دیدگاه کاربر را ثبت کرده و صفحه را بارگذاری مجدد می کند.
دلایل مختلفی برای استفاده از روش ارسال دیدگاه در وردپرس با Ajax وجود دارد ، برخی از مهمترین موارد عبارتند از :
– بالا رفتن سرعت ارسال و ثبت اطلاعات
– کم کردن زمان بارگذاری مجدد
– نمایش پیام خطای مناسب قبل و بعد از ارسال اطلاعات
– استفاده از تکنولوژی های روز
ما در این مقاله آموزش وردپرس قصد داریم به صورت قدم به قدم ارسال دیدگاه در وردپرس با Ajax را همراه با مثال کاربردی به شما کاربران عزیز آموزش دهیم.
قالب دیدگاه ها :
ساختار بخش دیدگاه در قالب های مختلف وردپرس متفاوت می باشد و نمی توان یک فرمول کارآمد برای تمام قالب های موجود ارائه داد.
در این مقاله آموزش وردپرس از پوسته twentyseventeen که از پوسته های پیش فرض وردپرس است استفاده شده و برای اینکه کدها به درستی کار کنند لازم است ساختار HTML بخش دیدگاه ها مانند قالب twentyseventeen باشند.
به صورت کلی ساختار HTML بخش دیدگاه ها به صورت زیر می باشد (لازم نیست این کد ها را جایی کپی کنید) :
<!-- it can be <ul> or <ol> element --> <ol class="comment-list"> <li id="comment-1" class="comment depth-1"> <article> <div class="reply"> <a class="comment-reply-link">Reply</a> </div> </article> <ol class="children"> <!-- comment <li> elements are the same like in depth-1 level --> </ol> </li> </ol> <div id="respond"> <!-- form is here --> </div>
توجه: در این آموزش پیام های خطای با استفاده از تابع Alert جاوا اسکریپت نمایش داده می شوند ، بهتر است در هنگام استفاده روش مناسب تری برای نمایش خطا جایگزین کنید ، برای ایده گرفتن می توانید مقاله جایگزین صفحه لاگین وردپرس یا جایگزین صفحه ثبت نام وردپرس را مشاهده کنید.
فایل js – ارسال دیدگاه در وردپرس با Ajax :
به مسیر پوسته خود در ورپرس رفته و یک فایل جاوا اسکریپت به نام ajax-comment.js ایجاد کنید و سپس کدهای زیر به فایل اضافه کرده و ذخیره کنید:
jQuery.extend(jQuery.fn, { validate: function () { if (jQuery(this).val().length < 3) {jQuery(this).addClass('error');return false} else {jQuery(this).removeClass('error');return true} }, validateEmail: function () { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, emailToValidate = jQuery(this).val(); if (!emailReg.test( emailToValidate ) || emailToValidate == "") { jQuery(this).addClass('error');return false } else { jQuery(this).removeClass('error');return true } }, }); jQuery(function($){ debugger; $( '#commentform' ).submit(function(){ var button = $('#submit'), respond = $('#respond'), commentlist = $('.comment-list'), cancelreplylink = $('#cancel-comment-reply-link'); if( $( '#author' ).length ) $( '#author' ).validate(); if( $( '#email' ).length ) $( '#email' ).validateEmail(); $( '#comment' ).validate(); if ( !button.hasClass( 'loadingform' ) && !$( '#author' ).hasClass( 'error' ) && !$( '#email' ).hasClass( 'error' ) && !$( '#comment' ).hasClass( 'error' ) ){ $.ajax({ type : 'POST', url : wpschool_ajax_comment_params.ajaxurl, data: $(this).serialize() + '&action=ajaxcomments', beforeSend: function(xhr){ button.addClass('loadingform').val('پردازش...'); }, error: function (request, status, error) { if( status == 500 ){ alert( 'Error while adding comment' ); } else if( status == 'timeout' ){ alert('Error: Server doesn\'t respond.'); } else { var wpErrorHtml = request.responseText.split("<p>"), wpErrorStr = wpErrorHtml[1].split("</p>"); alert( wpErrorStr[0] ); } }, success: function ( addedCommentHTML ) { // if this post already has comments if( commentlist.length > 0 ){ // if in reply to another comment if( respond.parent().hasClass( 'comment' ) ){ // if the other replies exist if( respond.parent().children( '.children' ).length ){ respond.parent().children( '.children' ).append( addedCommentHTML ); } else { // if no replies, add <ol class="children"> addedCommentHTML = '<ol class="children">' + addedCommentHTML + '</ol>'; respond.parent().append( addedCommentHTML ); } // close respond form cancelreplylink.trigger("click"); } else { // simple comment commentlist.append( addedCommentHTML ); } }else{ // if no comments yet addedCommentHTML = '<ol class="comment-list">' + addedCommentHTML + '</ol>'; respond.before( $(addedCommentHTML) ); } // clear textarea field $('#comment').val(''); }, complete: function(){ // what to do after a comment has been added button.removeClass( 'loadingform' ).val( 'ارسال دیدگاه' ); } }); } return false; }); });
بخش اول کد تابعی جهت اعتبار سنجی داده های دریافتی تعریف می کند ، و بخش دوم کد داده های دریافتی را پس از اعتبار سنجی ثبت کرده و دیدگاه ثبت شده را به محتوای صفحه اضافه میکند.
حالا فایل functions.php را باز کرده و کدهای زیر را جهت افزودن فایل js به ساختار قالب وردپرس ، به انتهای کدهای موجود اضافه می کنیم:
add_action( 'wp_enqueue_scripts', 'wpschool_ajax_comments_scripts' ); function wpschool_ajax_comments_scripts() { wp_register_script( 'ajax_comment', get_stylesheet_directory_uri() . '/ajax-comment.js', array('jquery') ); wp_localize_script( 'ajax_comment', 'wpschool_ajax_comment_params', array( 'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php' ) ); wp_enqueue_script( 'ajax_comment' ); }
توجه : جهت اطمینان از اضافه شدن فایل js به وب سایت خود ، از وجود تابع wp_head در header و تابع wp_footer در footer قالب خود اطمینان حاصل کنید.
کدهای PHP – ارسال دیدگاه در وردپرس با Ajax :
در مرحله آخر جهت ثبت دیدگاه های ارسال شده و بازگرداندن پاسخ مناسب از سمت سرور ، کدهای PHP زیر را به انتهای فایل functions.php اضافه می کنیم:
add_action( 'wp_ajax_ajaxcomments', 'wpschool_submit_ajax_comment' ); // wp_ajax_{action} for registered user add_action( 'wp_ajax_nopriv_ajaxcomments', 'wpschool_submit_ajax_comment' ); // wp_ajax_nopriv_{action} for not registered users function wpschool_submit_ajax_comment(){ $comment = wp_handle_comment_submission( wp_unslash( $_POST ) ); if ( is_wp_error( $comment ) ) { $error_data = intval( $comment->get_error_data() ); if ( ! empty( $error_data ) ) { wp_die( '<p>' . $comment->get_error_message() . '</p>', __( 'خطا در ارسال دیدگاه' ), array( 'response' => $error_data, 'back_link' => true ) ); } else { wp_die( 'خطای نامعلوم' ); } } $user = wp_get_current_user(); do_action('set_comment_cookies', $comment, $user); $comment_depth = 1; $comment_parent = $comment->comment_parent; while( $comment_parent ){ $comment_depth++; $parent_comment = get_comment( $comment_parent ); $comment_parent = $parent_comment->comment_parent; } $GLOBALS['comment'] = $comment; $GLOBALS['comment_depth'] = $comment_depth; // Here is the comment template, you can configure it for your website $comment_html = '<li ' . comment_class('', null, null, false ) . ' id="comment-' . get_comment_ID() . '"> <article class="comment-body" id="div-comment-' . get_comment_ID() . '"> <footer class="comment-meta"> <div class="comment-author vcard"> ' . get_avatar( $comment, 100 ) . ' <b class="fn">' . get_comment_author_link() . '</b> <span class="says">گفته:</span> </div> <div class="comment-metadata"> <a href="' . esc_url( get_comment_link( $comment->comment_ID ) ) . '">' . sprintf('%1$s at %2$s', get_comment_date(), get_comment_time() ) . '</a>'; if( $edit_link = get_edit_comment_link() ) $comment_html .= '<span class="edit-link"><a class="comment-edit-link" href="' . $edit_link . '">Edit</a></span>'; $comment_html .= '</div>'; if ( $comment->comment_approved == '0' ) $comment_html .= '<p class="comment-awaiting-moderation">دیدگاه شما در انتظار بررسی است.</p>'; $comment_html .= '</footer> <div class="comment-content">' . apply_filters( 'comment_text', get_comment_text( $comment ), $comment ) . '</div> </article> </li>'; echo $comment_html; die(); }
در کدهای بالا ابتدا با استفاده از تابع wp_handle_comment_submission دیدگاه های ارسالی را ثبت می کنیم و سپس در صورت بروز خطا ، پیام خطای مربوطه را جهت نمایش به کاربر ارسال میکنیم و اگر خطایی وجود نداشته باشد دیدگاه ثبت شده را در پاسخ به درخواست Ajax ارسال می کنیم.
جمع بندی :
در صورتیکه مراحل بالا را به صورت کامل انجام داده باشید می توانید دیدگاه های خود را به صورت Ajax و بدون بارگذاری مجدد صفحه در وردپرس ثبت کنید مانند تصویر زیر :
خوب دوستان عزیز ، در این مقاله از آموزش وردپرس تلاش کردیم به صورت قدم به قدم مراحل ارسال دیدگاه در وردپرس با Ajax را به شما آموزش دهیم ، اگر سوالی یا مشکلی در مقاله وجود داشت در قسمت دیدگاه های همین مطلب عنوان کنید.
موفق باشید
با تشکر از مقاله خوب شما
من میخواستم بدونم وقتی مخاطبی در سایت نظر می گذارد و سپس فردی به او پاسخ می دهد چطور برای مخاطب اولیه ایمیل ارسال شود که پاسخ او داده شده است.
با سلام ،
برای اینکار باید از افزونه هایی مانند Subscribe to Comments Reloaded یا Comment Reply Email Notification استفاده کنید.
موفق باشید
بسیار ممنونم از وبسایت خوبتون
سلام
وب سایت تون معرکه است و از این رو در ورد پرس یک سری دیدگاه ها وجود دارد که باید به آن توجه داشت
مطالبتون واقعا مفید بود بوت استرپ هم بزارید ممنون میشم
سلام از سایت شما بازدید کردم. سایت بسیار جالبی دارید. لطف میکنید اگر از سایت های من هم دیدن نمایید و نظرتان را برای بهتر شدن سایتام بگویید
عالی بود
لیدی مد کالا
https://www.ladymodkala.ir
رابوکالا
https://www.rabokala.ir
خانه چین
https://www.khanecheen.ir
گیمینگ تولز
https://www.gamingtools.ir
سلام- هرکی میخواد پولدار شه و بیت کوین رایگان ماین کنه، با فیلتر شکن روی این لینک کلیک کنه، و فقط و فقط باید بزاری کامپیوتر روشن باشه(به نت وصل باشه)بهتون قول میدم بعد از ۶ ماه حدود ۵٠-۶٠ میلیون راحت برداشت کنین، اگه زیر مجموعه هم بگیرین که خیلی سودتون بیشتر میشه
بدون هیچ مصرف اینترنت یا برق
به دوستاتونم بگین هرچه زودتر بیاین بخدا زودتر پولدار میشین، هممون!
اینم لینکش:
https://cryptotabbrowser.com/7674791
مطالبتون واقعا مفید بود ممنون
عالی بود
سلام ممنون برای مقاله خوبتون
یک سوال داشتم .؟چطوری میشه کامنت های جدید رو به صورت آجاکس دریافت کرد و برای دیدن کامنت های دیگران صفحه رو رفرش نکرد ؟
علیرز
عالی بود
کانال تلگرام
عضویت در کانال
سایر مقالات
ورود به مدرسه وردپرس
عضویت در مدرسه وردپرس