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

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

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

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

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

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

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

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

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

הקוד עבור 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', 'https://ajax.aspnetcdn.com/ajax/bootstrap/3.0.3/css/bootstrap.min.css');
   wp_register_script('bootstrapjs', 'https://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="https://www.example.com">אני קישור</a> 

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

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

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

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

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

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