Une page des articles les plus lus

Aujourd’hui on va voir comment simplement et rapidement créer dans son site une page des articles les plus consultés.

Créer la page a-la-une.php

Je crée d’abord une template de page que j’appelle ici a-la-une.php
Dans l’en tete du fichier je définis le nom de mon template

<?php /** * Template Name: A la Une* * */ get_header(); ?>

Dans le backoffice de wordpress, je crée également une page ‘A la une’ en lui affectant mon nouveau modèle de page:

parent

Le compteur de vues

Ensuite dans le fichier functions.php, on va insérer trois fonctions, tirées du site wpbeginner.com

    /*1ere fonction pour compter les vue et stocker l'information*/

function cc_set_post_views($postID) {
$count_key = 'ecommerce_post_views_count';
$count = get_post_meta($postID, $count_key, true);
if ($count == '') {
$count = 0;
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
} else {
$count++;
update_post_meta($postID, $count_key, $count);
}
}
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
/*2eme fonction pour intégrer le compteur dans le header */
function cc_track_post_views($post_id) {
if (!is_single())
return;
if (empty($post_id)) {
global $post;
$post_id = $post->ID;
}
cc_set_post_views($post_id);
}
add_action('wp_head', 'cc_track_post_views');
/*3eme fonction pour afficher le nombre de vues*/
function cc_get_post_views($postID) {
$count_key = 'cc_post_views_count';
$count = get_post_meta($postID, $count_key, true);
if ($count == '') {
delete_post_meta($postID, $count_key);
add_post_meta($postID, $count_key, '0');
return "0 Vue";
}
return $count . ' Vues';
}
  • Une première fonction pour compter le nombre de vue et stocker l’information dans un nouveau champ additionnel.
  • Une deuxième fonction pour rajouter le traqueur dans le header plutot que dans tous les pages à comptabiliser (single.php etc)
  • Une troisième fonction pour afficher le nombre de vues.

La nouvelle boucle

Le principe de notre page A la une est qu’elle va agir comme une page catégorie: elle est censée afficher une liste d’articles.
On crée donc notre boucle en prenant en compte, dans les arguments de notre fonction, notre nouveau champ additionnel qui contient le nombre de vues :

<?php $popularpost = new WP_Query(array('posts_per_page' => -1, 'meta_key' => 'cc_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC'));

if ($popularpost->have_posts()) :
while ($popularpost->have_posts()) : $popularpost->the_post();
?>



<div>
<?php get_template_part('template-parts/content', get_post_format()); ?>
</div>




<?php endwhile; // End of the loop. ?>

<?php else : ?>
<?php get_template_part('template-parts/content', 'none'); ?>
<?php endif; ?>

On a ici un get_template_part, comme dans la plupart des thèmes par défaut wordpress, qui va chercher  content.php et renvoyer le contenu approprié en fonction du format d’article.Généralement cette page est une succession de « if » pour dire si c’est un article affiche moi le contenu, sinon affiche moi juste l’extrait etc..etc.Si le thème n’est pas codé en ce sens, il suffit alors de placer tout le code dans cette page plutot que dans la page content.php

Notre page A la une agit donc bien comme une catégorie : après avoir pris en compte le compteur de vues, la page va intégrer les articles classiques dans cette nouvelle boucle.Il n’y a pas besoin de créer une page spécifique « single-a-la-une.php » puisqu’il ne s’agit pas d’un custom post type, et qu’on reprend les articles classiques du blog.

Ensuite, pour que wordpress reconnaisse cette page comme une page « catégorie », c’est à dire censée renvoyer l’extrait d’abord, puis l’article ensuite, Il faut la rajouter dans les conditions d’affichage de content.php, par exemple:

       <?php if ( is_search()||is_tag()||is_category()||is_home() ||is_page('a-la-une')) : ?>


<div class="excerpt">
<?php
the_excerpt(); ?>
</div>

<?php else : ?>

<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'personnal' ) ); ?>
<?php wp_link_pages( array( 'before' => '
<div class="page-links">' . __( 'Pages:', 'personnal' ), 'after' => '</div>
' ) ); ?>
</div>
<!-- .entry-content -->
<?php endif;?>

Ainsi wordpress comprend que si c’est une page « a la une » il va renvoyer les extraits plutot que le contenu entier.Comme on reprend les mêmes éléments conteneurs et les mêmes classes, notre page a la meme apparence que notre page catégorie ou archive

Si dans cette page on veut afficher le nombre de vue, à coté de la date par exemple, il suffit de placer la fonction

cc_get_post_views(get_the_ID());

quelque part dans votre code.

Le css

Dans le css, il y aura certainement des modifications à faire : le plus simple est de reprendre tout le code concernant vos page archive ou category, et de remplacer le selecteur spécifique par un « .page-template-a-la-une-php », la nouvelle classe créee par wordpress et ciblant votre page

Par exemple un

.archive .entry-content{overflow: hidden;position: relative;height: 100%;}

devient un

.page-template-a-la-une-php .entry-content{overflow: hidden;position: relative;height: 100%;}