کدنویسی افزونه رتبه دهی در سیستم نظرات وردپرس

کدنویسی افزونه رتبه دهی در سیستم نظرات وردپرس

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

فایل اصلی افزونه رتبه دهی در نظرات وردپرس

بیایید فایل اصلی را که حاوی بیشتر کد افزونه ما است ایجاد کنیم. با استفاده از یک سرویس گیرنده FTP یا از طریق کنترل پنل سایت خود به/wp-content/plugins/در محل نصب وردپرس خود بروید و یک پوشه به نام uw-comment-rating (یا هر چیز دیگری که ترجیح می دهید) ایجاد کنید. سپس وارد پوشه شده و فایلی به نام uw-comment-rating.php ایجاد کنید (باز هم نامگذاری به عهده خود شماست).

فایل را ویرایش کرده و در سرصفحه ای مشابه زیر قرار دهید:

<?php
/*
Plugin Name: UW Comment Rating
Description: Adds a star rating system to WordPress comments
Version: 1.0.0
Author: The Ultimate WordPress Team
Author URI: https://ultimatewp.ir/
*/

ایجاد رابط رتبه بندی

ابتدا باید رابط کاربری ایجاد کنیم که بازدیدکنندگان از آن برای رتبه بندی پست ما استفاده می کنند. برای انجام این کار کد زیر را در فایل افزونه قرار دهید.

//Create the rating interface.
add_action( 'comment_form_logged_in_after', 'ci_comment_rating_rating_field' );
add_action( 'comment_form_after_fields', 'ci_comment_rating_rating_field' );
function ci_comment_rating_rating_field () {
	?>
	<label for="rating">Rating<span class="required">*</span></label>
	<fieldset class="comments-rating">
		<span class="rating-container">
			<?php for ( $i = 5; $i >= 1; $i-- ) : ?>
				<input type="radio" id="rating-<?php echo esc_attr( $i ); ?>" name="rating" value="<?php echo esc_attr( $i ); ?>" /><label for="rating-<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $i ); ?></label>
			<?php endfor; ?>
			<input type="radio" id="rating-0" class="star-cb-clear" name="rating" value="0" /><label for="rating-0">0</label>
		</span>
	</fieldset>
	<?php
}

کد بالا از قرار دادن سیستم رتبه بندی در فرم نظر ، برای کاربران وارد شده و خارج شده ، مراقبت می کند. بعد از افزودن کد به این شکل خواهید بود:

رابط کاربری اولیه سیستم رتبه دهی
رابط کاربری اولیه سیستم رتبه دهی

چندان زیبا نیست ، درست است؟ آن را برطرف کنیم

اضافه کردن مقداری استایل

ما به برخی از ستاره ها احتیاج داریم ، پس از همه اینها یک سیستم رتبه بندی ستاره است ، بنابراین ما باید دش آیکون ها را در نمای جلو نیز جمع کنیم. در کنار آن ، ما نیاز به ایجاد یک پوشه assets در پوشه اصلی افزونه داریم و در داخل آن یک فایل style.css ایجاد می کنیم. فایل style.css را ویرایش کرده و کد زیر را وارد کنید.

.comments-rating {
	border: none;
	padding: 0;
	margin-left: 0;
}

.comments-rating label {
	display: inline-block;
}

.rating-container {
	/* remove inline-block whitespace */
	font-size: 0;
	/* flip the order so we can use the + and ~ combinators */
	unicode-bidi: bidi-override;
	direction: rtl;
}

.rating-container * {
	font-size: 1.4rem;
}

.rating-container > input {
	display: none;
}

.rating-container > input + label {
	/* only enough room for the star */
	font-family: 'dashicons';
	display: inline-block;
	overflow: hidden;
	text-indent: 9999px;
	width: 1em;
	white-space: nowrap;
	cursor: pointer;
	margin: 0;
}

.rating-container > input + label:before {
	display: inline-block;
	text-indent: -9999px;
	content: "\f154";
	color: #888;
}

.rating-container > input:checked ~ label:before,
.rating-container > input + label:hover ~ label:before,
.rating-container > input + label:hover:before {
	content: "\f155";
	color: #e52;
	text-shadow: 0 0 1px #333;
}

.rating-container > .star-cb-clear + label {
	text-indent: -9999px;
	width: .5em;
	margin-left: -.5em;
}

.rating-container > .star-cb-clear + label:before {
	width: .5em;
}

.rating-container:hover > input + label:before {
	content: "\f154";
	color: #888;
	text-shadow: none;
}

.rating-container:hover > input + label:hover ~ label:before,
.rating-container:hover > input + label:hover:before {
	content: "\f155";
	color: #e52;
	text-shadow: 0 0 1px #333;
}

.comment-respond .rating-container > .star-cb-clear + label, .comment-respond .rating-container > input + label:before {
	text-indent: 9999px;
}

.comment-respond .rating-container > input + label {
	text-indent: -9999px;
}

سپس به فایل uw-comment-rating.php برگردید و این مورد را در آن جایگذاری کنید:

//Enqueue the plugin's styles.
add_action( 'wp_enqueue_scripts', 'ci_comment_rating_styles' );
function ci_comment_rating_styles() {

	wp_register_style( 'ci-comment-rating-styles', plugins_url( '/', __FILE__ ) . 'assets/style.css' );

	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'ci-comment-rating-styles' );
}

ما با ثبت فایل style.css که قبلاً ایجاد کرده بودیم شروع می کنیم ، سپس دش آیکون ها و استایل را به لیست اضافه می کنیم. حالا بیایید صفحه را ذخیره و تازه کنیم.

استایل دهی رابط کاربری رتبه دهی
استایل دهی رابط کاربری رتبه دهی

اوه ، خیلی بهتر شد!

ذخیره ورودی کاربر

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

//Save the rating submitted by the user.
add_action( 'comment_post', 'ci_comment_rating_save_comment_rating' );
function ci_comment_rating_save_comment_rating( $comment_id ) {
	if ( ( isset( $_POST['rating'] ) ) && ( '' !== $_POST['rating'] ) )
	$rating = intval( $_POST['rating'] );
	add_comment_meta( $comment_id, 'rating', $rating );
}

در کد بالا ما را به comment_post متصل می کند که دقیقاً پس از ارسال نظر فعال می شود. ما بررسی می کنیم که آیا کاربر رتبه ای را اضافه کرده است ، آن را ضد عفونی کرده و در پایگاه داده ذخیره می کند.

رتبه بندی مورد نیاز (اختیاری)

اگر می خواهید کاربران همیشه رتبه بندی را به همراه نظرات خود ارسال کنند( یعنی فیلد رتبه دهی اجباری باشد) ، می توانید قطعه کد زیر را در فایل اصلی افزونه بچسبانید.

//Make the rating required.
add_filter( 'preprocess_comment', 'ci_comment_rating_require_rating' );
function ci_comment_rating_require_rating( $commentdata ) {
	if ( ! is_admin() && ( ! isset( $_POST['rating'] ) || 0 === intval( $_POST['rating'] ) ) )
	wp_die( __( 'Error: You did not add a rating. Hit the Back button on your Web browser and resubmit your comment with a rating.' ) );
	return $commentdata;
}

در اینجا بررسی می کنیم که آیا در داده های نظر ارسالی رتبه ای وجود دارد یا خیر ، و در غیر اینصورت خطایی را ایجاد می کنیم که باعث می شود کاربر به عقب برگردد و مجدداً همراه با رتبه بندی ارسال کند. این البته اختیاری است.

نکته: اگر نمی خواهید رتبه بندی مورد نیاز را انجام دهید ، حذف این را در نظر بگیرید.

<span class="required">*</span>

کمی از رابط رتبه بندی بالا با این کار نشانه بصری که رتبه بندی مورد نیاز است حذف می شود.

نمایش رتبه در نظر ارسال شده

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

//Display the rating on a submitted comment.
add_filter( 'comment_text', 'ci_comment_rating_display_rating');
function ci_comment_rating_display_rating( $comment_text ){

	if ( $rating = get_comment_meta( get_comment_ID(), 'rating', true ) ) {
		$stars = '<p class="stars">';
		for ( $i = 1; $i <= $rating; $i++ ) {
			$stars .= '<span class="dashicons dashicons-star-filled"></span>';
		}
		$stars .= '</p>';
		$comment_text = $comment_text . $stars;
		return $comment_text;
	} else {
		return $comment_text;
	}
}

کاری که ما در اینجا انجام می دهیم این است که به comment_text متصل شویم ، بررسی کنیم که آیا رتبه واقعی در پست وجود دارد یا خیر ، آیا نشانه گذاری ایجاد می کنیم که آن را نمایش می دهد و آن را در کنار متن نظر برمی گردانیم. اگر رتبه ای وجود نداشته باشد ، فقط متن نظر را برمی گردانیم.

کار تمام شد!
تقریباً همینطور است ، ما یک افزونه ساده ایجاد کرده ایم که یک سیستم رتبه بندی ستاره ای در نظرات وردپرس اضافه می کند.

تمدید افزونه

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

در فایل اصلی افزونه این را وارد کنید.

//Get the average rating of a post.
function ci_comment_rating_get_average_ratings( $id ) {
	$comments = get_approved_comments( $id );

	if ( $comments ) {
		$i = 0;
		$total = 0;
		foreach( $comments as $comment ){
			$rate = get_comment_meta( $comment->comment_ID, 'rating', true );
			if( isset( $rate ) && '' !== $rate ) {
				$i++;
				$total += $rate;
			}
		}

		if ( 0 === $i ) {
			return false;
		} else {
			return round( $total / $i, 1 );
		}
	} else {
		return false;
	}
}

این تابع شناسه یک پست را دریافت می کند ، همه نظرات تأیید شده را اجرا می کند ، رتبه بندی های موجود را جمع بندی می کند و میانگین را تا دهدهی اول گرد می کند. اگر هیچ رتبه ای در پست مورد آزمایش وجود نداشته باشد ، اشتباه می شود.

برای نمایش میانگین رتبه بندی نظر در بالای محتوای پست ، می توانیم از این کد استفاده کنیم:

//Display the average rating above the content.
add_filter( 'the_content', 'ci_comment_rating_display_average_rating' );
function ci_comment_rating_display_average_rating( $content ) {

	global $post;

	if ( false === ci_comment_rating_get_average_ratings( $post->ID ) ) {
		return $content;
	}
	
	$stars   = '';
	$average = ci_comment_rating_get_average_ratings( $post->ID );

	for ( $i = 1; $i <= $average + 1; $i++ ) {
		
		$width = intval( $i - $average > 0 ? 20 - ( ( $i - $average ) * 20 ) : 20 );

		if ( 0 === $width ) {
			continue;
		}

		$stars .= '<span style="overflow:hidden; width:' . $width . 'px" class="dashicons dashicons-star-filled"></span>';

		if ( $i - $average > 0 ) {
			$stars .= '<span style="overflow:hidden; position:relative; left:-' . $width .'px;" class="dashicons dashicons-star-empty"></span>';
		}
	}
	
	$custom_content  = '<p class="average-rating">This post\'s average rating is: ' . $average .' ' . $stars .'</p>';
	$custom_content .= $content;
	return $custom_content;
}

کد بالا سعی می کند با استفاده از عملکردی که در مرحله قبل ایجاد کرده ایم ، رتبه متوسط را بدست آورد ، اگر چیزی دریافت نکرد ، فقط محتوا را باز می گرداند ، در غیر این صورت یک پاراگراف ، درست بالای محتوای پست قرار می دهد و میانگین را نشان می دهد رتبه بندی پست…

میانگین رتبه ها در بالای محتوای پست
میانگین رتبه ها در بالای محتوای پست

در حال اتمام

این همه برای این آموزش است ، امیدواریم مفید واقع شده باشد و اگر ایده های جالبی در مورد گسترش افزونه و استفاده از داده های جمع آوری شده دارید ، لطفاً در نظرات زیر به ما اطلاع دهید!

فایل کامل افزونه

در زیر کل فایل uw-comment-rating.php را مشاهده می کنید که می توانید در پوشه افزونه خود کپی/جایگذاری کنید.

توجه: ایجاد فایل استایل و قرار دادن کدهای css را فراموش نکنید😉

<?php
/*
Plugin Name: CI Comment Rating
Description: Adds a star rating system to WordPress comments
Version: 1.0.0
Author: The CSSIgniter Team
Author URI: https://cssigniter.com/
*/

//Enqueue the plugin's styles.
add_action( 'wp_enqueue_scripts', 'ci_comment_rating_styles' );
function ci_comment_rating_styles() {

	wp_register_style( 'ci-comment-rating-styles', plugins_url( '/', __FILE__ ) . 'assets/style.css' );

	wp_enqueue_style( 'dashicons' );
	wp_enqueue_style( 'ci-comment-rating-styles' );
}

//Create the rating interface.
add_action( 'comment_form_logged_in_after', 'ci_comment_rating_rating_field' );
add_action( 'comment_form_after_fields', 'ci_comment_rating_rating_field' );
function ci_comment_rating_rating_field () {
	?>
	<label for="rating">Rating<span class="required">*</span></label>
	<fieldset class="comments-rating">
		<span class="rating-container">
			<?php for ( $i = 5; $i >= 1; $i-- ) : ?>
				<input type="radio" id="rating-<?php echo esc_attr( $i ); ?>" name="rating" value="<?php echo esc_attr( $i ); ?>" /><label for="rating-<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $i ); ?></label>
			<?php endfor; ?>
			<input type="radio" id="rating-0" class="star-cb-clear" name="rating" value="0" /><label for="rating-0">0</label>
		</span>
	</fieldset>
	<?php
}

//Save the rating submitted by the user.
add_action( 'comment_post', 'ci_comment_rating_save_comment_rating' );
function ci_comment_rating_save_comment_rating( $comment_id ) {
	if ( ( isset( $_POST['rating'] ) ) && ( '' !== $_POST['rating'] ) )
	$rating = intval( $_POST['rating'] );
	add_comment_meta( $comment_id, 'rating', $rating );
}

//Make the rating required.
add_filter( 'preprocess_comment', 'ci_comment_rating_require_rating' );
function ci_comment_rating_require_rating( $commentdata ) {
	if ( ! is_admin() && ( ! isset( $_POST['rating'] ) || 0 === intval( $_POST['rating'] ) ) )
	wp_die( __( 'Error: You did not add a rating. Hit the Back button on your Web browser and resubmit your comment with a rating.' ) );
	return $commentdata;
}

//Display the rating on a submitted comment.
add_filter( 'comment_text', 'ci_comment_rating_display_rating');
function ci_comment_rating_display_rating( $comment_text ){

	if ( $rating = get_comment_meta( get_comment_ID(), 'rating', true ) ) {
		$stars = '<p class="stars">';
		for ( $i = 1; $i <= $rating; $i++ ) {
			$stars .= '<span class="dashicons dashicons-star-filled"></span>';
		}
		$stars .= '</p>';
		$comment_text = $comment_text . $stars;
		return $comment_text;
	} else {
		return $comment_text;
	}
}

//Get the average rating of a post.
function ci_comment_rating_get_average_ratings( $id ) {
	$comments = get_approved_comments( $id );

	if ( $comments ) {
		$i = 0;
		$total = 0;
		foreach( $comments as $comment ){
			$rate = get_comment_meta( $comment->comment_ID, 'rating', true );
			if( isset( $rate ) && '' !== $rate ) {
				$i++;
				$total += $rate;
			}
		}

		if ( 0 === $i ) {
			return false;
		} else {
			return round( $total / $i, 1 );
		}
	} else {
		return false;
	}
}

//Display the average rating above the content.
add_filter( 'the_content', 'ci_comment_rating_display_average_rating' );
function ci_comment_rating_display_average_rating( $content ) {

	global $post;

	if ( false === ci_comment_rating_get_average_ratings( $post->ID ) ) {
		return $content;
	}
	
	$stars   = '';
	$average = ci_comment_rating_get_average_ratings( $post->ID );

	for ( $i = 1; $i <= $average + 1; $i++ ) {
		
		$width = intval( $i - $average > 0 ? 20 - ( ( $i - $average ) * 20 ) : 20 );

		if ( 0 === $width ) {
			continue;
		}

		$stars .= '<span style="overflow:hidden; width:' . $width . 'px" class="dashicons dashicons-star-filled"></span>';

		if ( $i - $average > 0 ) {
			$stars .= '<span style="overflow:hidden; position:relative; left:-' . $width .'px;" class="dashicons dashicons-star-empty"></span>';
		}
	}
	
	$custom_content  = '<p class="average-rating">This post\'s average rating is: ' . $average .' ' . $stars .'</p>';
	$custom_content .= $content;
	return $custom_content;
}

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

منابع
_ CSS Igniter
یوسف حسینی _ متخصص وردپرس
هر بار پروژه ای که در حال انجامش هستم به خطا یا باگ منتهی میشه, خوشحال میشم. چون قراره با رفع اون خطا یک چیز جدید یاد بگیرم. این مشکلات هستند که به ما آموزش میدن پس از مشکلات خود نترسیم.

دیدگاهتان را بنویسید