سلام دوستان عزیز ، در این مقاله از آموزش وردپرس قصد داریم نحوه ارسال دیدگاه در وردپرس با 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

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

موفق باشید

+6

7 دیدگاه برای “ارسال دیدگاه در وردپرس با Ajax

  • پوریا
    - ۲۵ فروردین , ۱۳۹۷

    با تشکر از مقاله خوب شما
    من میخواستم بدونم وقتی مخاطبی در سایت نظر می گذارد و سپس فردی به او پاسخ می دهد چطور برای مخاطب اولیه ایمیل ارسال شود که پاسخ او داده شده است.

    ۰
    • سیروس
      - ۲۶ فروردین , ۱۳۹۷

      با سلام ،
      برای اینکار باید از افزونه هایی مانند Subscribe to Comments Reloaded یا Comment Reply Email Notification استفاده کنید.
      موفق باشید

      ۰
  • آسمان مجازی پرشین اسکای
    - ۱۰ خرداد , ۱۳۹۷

    بسیار ممنونم از وبسایت خوبتون

    ۰
  • فرشید
    - ۳ دی , ۱۳۹۷

    سلام

    ۰
  • فروشگاه اينترنتی
    - ۳ مرداد , ۱۳۹۸

    وب سایت تون معرکه است و از این رو در ورد پرس یک سری دیدگاه ها وجود دارد که باید به آن توجه داشت

    ۰
  • باتری ماشین
    - ۱ بهمن , ۱۳۹۸

    مطالبتون واقعا مفید بود بوت استرپ هم بزارید ممنون میشم

    ۰
  • hossein
    - ۱۵ فروردین , ۱۴۰۰

    عالی بود

    ۰

دیدگاه خود را بیان کنید

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

-- بارگیری کد امنیتی --