סופרים קליקים על לינקים נבחרים בוורדפרס

סופרים קליקים עם אגקס בוורדפרס

ברוכים הבאים, היום – מדריך למתקדמים או לפחות משתמשים ברמה סבירה שרוצים להוסיף פונקציונליות לתבנית וורדפרס שלהם ויודעים כיצד לערוך קבצים, מה זה אג'קס, איך עובדים עם PHP וכו'. בקיצור ולמען הסר ספק – אם אתם מתחילים המדריך הזה לא בשבילכם!

ראשית: מה הרעיון?

המון מנהלי אתרים רוצים לדעת אם באנר מסוים או כפתור מסוים זוכה לקליקים! יש כל מיני שימושים שאנחנו יכולים לעשות בגוגל אנליטיקס אבל אף אחד מהם לא מדויק ולא עוזר לנו להבין מה בדיוק קורה.

דוגמה מהמציאות:

יש לי לקוח בשם זמנהוף שירותי תרגום (חברת תרגומים מעולה! מניסיון) ובעל האתר שם ביקש ממני לדעת כמה מקליקים על הכפתור של "לחצו כדי לדבר עם נציג" אבל רק במצב סלולרי. במצב לא סלולרי הכפתור הזה הוא כלל לא כפתור אלא טקסט / מספר טלפון.

בדיוק בעבורו יצרתי את סקריפט הAjax הקטנטן הזה אשר יעזור לי לתעד כמה מקליקים על אלמנטים מסוימים ומבלי שהגולש ירגיש שזה קורה… זאת אומרת מהר! יאפשר לי לראות ספירה של כל האלמנטים שמעניינים אותי וגם יכולת לאפס את הספירה כשאני רוצה.

ניצור את הקבצים

בכדי לצאת לדרך עלינו ליצור תיקייה ובתוכה מספר קבצים

סוג שם קובץ תיאור
תיקייה click-counter
קובץ PHP clicks-viewer.php יכיל את הקוד שיצור דף בממשק הניהול שלנו
קובץ JS ajax-clicks_counter.js יקלוט קליקים ויתחיל פעולת אג'קס לתיעוד הקליק
קובץ PHP ajax-clicks_counter.php ישמור את הקליק ויעלה את הספירה של הקליק עבור אייטם זה

הקוד עבור clicks-viewer.php

קובץ זה עושה 3 פעולות:

  1. ניצור פריט חדש בתפריט של ממשק הניהול שלנו בוורדפרס.
  2. נטען כמה קבצים עיצוביים כדי להציג את המידע בצורה אלגנטית וקריאה
  3. נחזיר את המידע כלומר את האלמנטים עבורם אנו מתעדים קליקים.

הקוד המלא של הדף עם הערות

<?php
/****************************************************
**	REGISTER MENU ITEM
****************************************************/
add_action('admin_menu', 'clickcount_menuitem');
function clickcount_menuitem(){
	$pagetitle	= __('Click Count Stats', THEME_NAME);
	$curpage 	= add_submenu_page('themes.php', $pagetitle, $pagetitle, 'administrator', 'clickcountstats', 'clickcountstats_pagedata'); 	
	add_action( 'admin_print_styles-' . $curpage, 'clickcountstats_options_admin_styles' );	
}


/****************************************************
**	ADD SOME STYLING FILES
****************************************************/
// ENQUEUE SCRIPTS & STYLES TO THIS PAGE
add_action( 'admin_init', 'poststats_admin_init' );
function poststats_admin_init() {
   wp_register_style('bootstrapcss', 'http://ajax.aspnetcdn.com/ajax/bootstrap/3.0.3/css/bootstrap.min.css');
   wp_register_script('bootstrapjs', 'http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js');
}


function clickcountstats_options_admin_styles() {
	wp_enqueue_style('bootstrapcss');
	wp_enqueue_script('bootstrapjs');
}


/****************************************************
**	RETURN THE DATA IN A TABLE FORM
****************************************************/
function clickcountstats_pagedata() {
	?>
	<div class="wrap"><div id="icon-tools" class="icon32"></div>
	
		<h2 style="border-bottom: 1px solid #ccc; padding: 10px 0;margin: 0 0 10px;"><?php _e('Click Count Statistics', THEME_NAME); ?></h2>
		
		<table class="table table-responsive table-bordered table-striped bgFF">
			<tr>
				<th class="text-right"><?php _e('Count', THEME_NAME); ?></th>
				<th class="text-right"><?php _e('Link Name', THEME_NAME); ?></th>
				<th class="text-right"><?php _e('Actions', THEME_NAME); ?></th>
			</tr>
			<?php
			$counterArr = get_option('sgx_clickcounter');
			
			foreach($counterArr as $key => $value) {
					
				// FIX STRING
				$string = str_replace('_', ' ', $key);
					
				echo '
					<tr>
						<td class="text-right"><span id="count-'.$key.'">'.$value.'</span></td>
						<td class="text-right">'.$string.'</td>
						<td class="text-right"><button class="btn btn-danger btn-xs resetClickCount" data-key="'.$key.'">'.__('Reset Count', THEME_NAME).'</button></td>
					</tr>
				';
				
			}
			?>
		</table>
		
	</div>	
	<?php
}
?>

הקוד עבור ajax-clicks_counter.js

קובץ זה מכיל 2 פעולות עיקריות:

  1. מקשיב לקליקים על פריטים שאנו רוצים לתעד
  2. מקשיב לקליק על כפתור איפוס ספירה בממשק הניהול

התגובה לכל קליק:

  1. מריץ פעולת אגקס שמסתיימת בהעלאת המספר של הקליקים
  2. מריץ פעולת אגקס שמסתיימת באיפוס מספר הקליקים של פריט

הקוד המלא עם הערות

jQuery(function($){

	// RECORD CLICK COUNT 
	$('.recordClick').click(function(e) {
		e.preventDefault();
		var key = $(this).data('key');
	
		$.post(ajax_object.ajaxurl, {
			action: 'record_click',
			key: key
		}, function(data) {
			var $response	= $(data);
			var answer		= $response.filter('div#answer').html();
			if(answer) {window.location.replace(url);}
		});	
	
	});

	// RESET CLICK COUNT 4 ITEM
	$('.resetClickCount').click(function() {
	
		$(this).removeClass('btn-danger');
		$(this).addClass('btn-default');
		
		var key = $(this).data('key');
		$.post(ajax_object.ajaxurl, {
			action: 'reset_clickcount',
			key: key
		}, function(data) {
			var $response	= $(data);
			var answer		= $response.filter('div#answer').html();
			if(answer && url) {window.location.replace(url);}
		});	
	
	});
	
});

הקוד עבור ajax-clicks_counter.php

קובץ זה מכיל 2 פעולות עיקריות:

  1. קולט מידע על פריט ומעלה את הספירה שלו
  2. מאפס את הספירה של קליקים עבור פריט מסוים

הקוד המלא עם הערות

שימו לב שהמסלול נכון עבור קובץ הJS בשורה הראשונה

<?php
wp_enqueue_script('ajax-global-func', get_stylesheet_directory_uri().'/click-counter/ajax-global_func.js', array('jquery'), 1.0);
wp_localize_script('ajax-global-func', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php')));
 
 
/*************************************************************
**	UPDATE CLICK COUNT FOR SELECTED ITEMS
*************************************************************/
add_action('wp_ajax_record_click', 'record_click');
add_action('wp_ajax_nopriv_record_click', 'record_click');
function record_click() {

	$key				= sanitize_text_field($_POST['key']);
	$alloptions			= get_option('sgx_clickcounter');
	$ccount				= $alloptions[$key];
	$ncount				= $ccount + 1;
	$alloptions[$key]	= $ncount;
	$result 			= update_option('sgx_clickcounter', $alloptions);

	
	echo '<div id="answer">'.$result.'</div>';
	
	die();
} 



 
 
/*************************************************************
**	RESET CLICK COUNT FOR SPECIFIC ITEM
*************************************************************/
add_action('wp_ajax_reset_clickcount', 'reset_clickcount');
add_action('wp_ajax_nopriv_reset_clickcount', 'reset_clickcount');
function reset_clickcount() {

	$key				= sanitize_text_field($_POST['key']);
	$myoptions[$key]	= 0;
	$result 			= update_option('sgx_clickcounter', $myoptions);

	echo '<div id="answer">'.$key.'</div>';
	
	die();
}
?>

אל תשכחו להכליל לFunctions.php

כעת שיש לנו את הקבצים מוכנים, הכל ממתין ומוכן להרצה נשארה לנו עוד פעולה אחת (אבל קריטית) והיא להכליל את הקבצים הרצויים אל functions.php – הוסיפו את השורות הבאות לקובץ Functions.php

include(get_template_directory_uri().'/click-counter/clicks-viewer.php');
include(get_template_directory_uri().'/click-counter/ajax-clicks_counter.php');

הגיע הזמן להריץ את הפונקציונליות החדשה

טוב, אז הכנו את הקבצים, הכל מוכן… אבל איך קובעים איזה קישור נרצה לתעד?

חשוב לשחק לפי הכללים

  • לתת לכל קישור שנרצה לתעד ערך שונה
  • לשמור על מבנה תקני (כבר מגיעה דוגמה)

אוקיי.. אז – אם קישור רגיל נראה כך:

 <a href="http://www.example.com">אני קישור</a> 

קישור שאנחנו רוצים למדוד יראה כך:

 <a href="http://www.example.com" class="recordClick" data-key="unique_id">אני קישור</a> 

יש להחליף את הערך ב"data-key" בערך ייחודי עבור קישור שנרצה לתעד

שאלות ותשובות

איפה למצוא את זה

יש לנו דף חדש בממשק הניהול!

  • ממשק הניהול בוורדפרס
  • בתפריט ל > עיצוב
  • תת פריט > Click Count Stats

בדף זה תמצאו תיעוד של כל הכפתורים עליהם החלתם את הספירה / קלאס – כל פעם שתוסיפו לקישור חדש את הקלאס (ראו כאן למעלה) ואת הKEY הייחודי הוא יתווסף באופן אוטומטי לטבלה אשר קיימת בדף זה

בוודאי! ניתן להחיל את אותו קלאס ותג "data-key" על תמונות, קונטיינרים וכל אלמנט אחר שאתם חושבים שיקליקו עליו. ניתן לראות כי סקריפט הג'אווה סקריפט מקשיב לקליק על אלמנט עם קלאס מסוים ולא מוגבל על פי סוג האלמנט עצמו.

לדוגמה – תג תמונה ללא ההגדרה

 <img src="http://www.example.com/image.jpg" alt="Example Image" /> 

לדוגמה – תג תמונה עם ההגדרה

 <img src="http://www.example.com/image.jpg" alt="Example Image" class="recordClick" data-key="example_unique_id" /> 

שאלות? טופס התגובות כאן בשבילך

אני יודע שסקרתי ממש בצורה שטחית את הפונקציות אבל המדריך הזה הוא למשתמשים מתקדמים אז אני מקווה שאתם מסתדרים עם הקוד. אם לא או שאתם צריכים עזרה או הסברים נוספים – אנחנו כאן בשבילכם. אם אהבתם אל תשכחו לשתף – שיהיה בהצלחה, שגיב SEO.

  • אהבתם? שתפו!