Widget wordPress : Articles au hasard

L’objectif de ce billet est de montrer la mise en place d’un widget wordPress affichant un certain nombre d’articles au hasard. Ceci peut être intéressant pour peupler la barre latérale et inciter le lecteur à continuer la navigation sur un autre article.

Widget wordPress random Articles
Widget wordPress random Articles

Afin de séparer le code du widget et le reste des fonctions du thème, on écrit tout dans un fichier que l’on appelle avec require_once() dans functions.php du thème :

On a au préalable défini le chemin du thème :  define( 'DIVI_CHILD', get_stylesheet_directory() );  et l’on crée le fichier widget_random_articles.php dans le répertoire include du thème.

La structure d’un widget est la suivante :

On choisit de définir deux options : le titre du widget et le nombre d’articles à afficher. La fonction d’écriture est définie à l’extérieur : function random_articles( $args ) .

On obtient donc le code final :

Si l’on tient à écrire la fonction random_articles() à l’intérieur de la classe (cela évitera qu’une autre fonction portant le même nom lève une erreur fatale), on l’appelle avec $this->random_articles( $args ); à la ligne 40.

Le widget et ses options dans la page des widgets de wordPress :

Options du widget Articles au hasard
Options du widget Articles au hasard

On ajoute les styles suivants :

L’instruction @media est à ajuster en fonction de votre thème. Les instructions flex permettent d’aligner les items sur les petits écrans. La classe .hover apporte un petit effet d’agrandissement lorsque la souris survole un article.

Si l’on veut écrire les styles dans une feuille de style /include/css/random-articles.css, et l’inclure seulement si le widget est actif, on ajoute au code à la ligne 45 juste avant random_articles( $args ); :

On peut améliorer le widget en proposant des catégories à inclure ou exclure, afficher l’image à la une en choisissant la taille de la miniature …

Et hop, un joli widget wordPress pour afficher des articles au hasard dans la barre de widgets.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *