Ajouter un compteur de vues sur un post WordPress

Voilà un nouveau tutoriel succinct qui devrait en ravir plus d’un.
Si vous souhaitez rendre votre site un peu plus « vivant » et montrer au lecteurs de votre site qu’ils ne sont pas les seuls à consulter boire vos paroles, un compteur de vues est la solution qu’il vous faut.

Nous allons procéder en plusieurs étapes pour que vous compreniez bien le fonctionnement de ce compteur.

Compter le nombre de vues

Avec cette première fonction, on va compter le nombre de vues et enregistrer ce nombre dans un post_meta.
Si le post_meta n’existe pas, on l’initialise par 1 (première consultation). Dans le cas contraire, on récupère la valeur du meta et on l’incrémente de 1. Tout simplement !

function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        add_post_meta($postID, $count_key, '1');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

Vous pouvez appeler cette fonction dans votre thème en utilisant :

<?php setPostViews($postID); ?>

Retourner le nombre de vues

Cette seconde fonction est encore plus simple, ici, on cherche simplement à retourner la valeur actuelle du compteur.
On retourne donc la valeur du post_meta lorsqu’il y en a une, sinon, on retourne 1 pour la première consultation.

function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        return "1";
    }
    return $count;
}

Vous pouvez appeler cette fonction dans votre thème en utilisant :

<?php getPostViews($postID); ?>

Enregistrer et afficher le nombre de vues

On se retouve maintenant avec 2 fonctions, l’une pour enregistrer le nombre de vues, et l’autre pour retourner se même nombre.

Nous allons maintenant les combiner pour afficher un compteur qui est capable de mettre à jour sa valeur et de l’afficher en même temps.

A noter que

function set_get_PostViews($postID) {
	setPostViews($postID);
	$counter_views = getPostViews($postID);
	if ( $counter_views < 2) {
		echo $counter_views.' vue';}
	else {
		echo $counter_views.' vues';
	};
}

Vous pouvez appeler cette fonction dans votre thème en utilisant :

<?php set_get_PostViews($postID); ?>

Et si j’ai du cache sur mes pages ?

Très bonne question…que je me suis posée quand j’ai utilisé pour la première fois W3 Total Cache.

En effet, en cache (tout dépends de la configuration de votre plugin), PHP n’est pas exécuté, donc le compteur n’est pas mis à jour, et l’affichage non plus…en gros, le compteur ne sert plus à rien.

Pour palier ce problème, la seule solution efficace que j’ai trouvée, c’est d’utiliser AJAX.
Wordpress permet d’utiliser très simplement AJAX, ceci va donc considérablement nous faciliter la tâche. Je traiterais d’ailleurs de cet outil « magique » dans un futur billet.

On enregistre donc le nombre de vues de manière asynchrone, et on affiche la nouvelle valeur du compteur de la même en javascript. « SOUPER EASY… »

function set_get_PostViews($postID) {
	if(!empty($_POST['ID_count'])){
		$postID = ($_POST['ID_count']);
	}
	setPostViews($postID);
	$counter_views = getPostViews($postID);
	$return .= '<div id="set_views_count" data-id="'. $postID .'">';
	if ( $counter_views < 2) {
		$return .= $counter_views .' vue';
	} else {
		$return .= $counter_views .' vues';
	};
	$return .= '</div>';
	echo $return;

	if(!empty($_POST['ID_count'])){
		die();
	}
}
add_action( 'wp_ajax_my_set_get_PostViews', 'set_get_PostViews' );
add_action( 'wp_ajax_nopriv_my_set_get_PostViews', 'set_get_PostViews' );

A noter que pour retourner une valeur « prop' » via l’AJAX de WordPress, il faut faire un die() à la fin de la fonction.

Personnellement, pour pouvoir utiliser mes fonctions avec et sans AJAX je test si la fonction a bien été appelée via AJAX en vérifiant que $_POST n’est pas vide. Il y a peut-être mieux, j’attends donc vos suggestions !

Voilà le JS correspondant (à adapter selon vos besoins évidemment).

if ($('#set_views_count').length) {
    var ID_count = $('#set_views_count').attr('data-id');
    $.post( ajaxurl, {
        action: 'my_set_get_PostViews',
        'ID_count': ID_count
    },
    function(response) {
        $('#set_views_count').html(response);
    });
    return false;
};

Et enfin, il vous suffit de placer ce code dans votre page (single.php ?) à l’endroit où vous souhaitez afficher le compteur.

<?php set_get_PostViews($postID); ?>

Afficher le nombre de vues des posts dans l’administration

Pour cette dernière étape, il n’est pas nécessaire de s’attarder, elle permet simplement d’ajouter une colonne dans le back-office pour afficher les nombres de vues des différents posts.

add_filter('manage_posts_columns', 'posts_column_views');
add_action('manage_posts_custom_column', 'posts_custom_column_views',5,2);
function posts_column_views($defaults){
    $defaults['post_views'] = __('Views');
    return $defaults;
}
function posts_custom_column_views($column_name, $id){
	if($column_name === 'post_views'){
        echo getPostViews(get_the_ID());
    }
}

C’est terminé !

Si vous êtes allergique au code, il existe une alternative simple en utilisant ce plugin.