Un widget WordPress « Photos au hasard »

Mis à jour le
  • Présentation générale

    Ce widget a été créé à partir du tuto de Guillaume Voisin ici : Tutoriel WordPress : Créer un widget. Il a été écrit sous forme de plugin afin d’être facilement transportable en cas de changement de thème WordPress.

    Il affiche dans la barre latérale des photos venant d’articles et de pages différentes du site, que ces photos soient simplement insérées dans les articles ou alors des images à la Une.

    Au survol de la souris, l’infobulle affiche le titre de l’article ou de la page où se situe cette photo, un clic renvoie sur celle-ci comme vous pouvez le voir dans la barre latérale ci-contre sous le titre « 9 photos au hasard ».

    Il est possible de choisir :

    • le texte du titre du widget
    • ainsi que le nombre de photos qui s’affichent.
  • Format des images

    Par défaut, les photos sont toutes au format 75×75 pixels. Ce format est appelé dans le widget « vignette ».

    Si votre thème ne crée pas ce format que j’ai appelé « vignette » dans le widget, le plugin fonctionnera quand même, mais la page ne sera pas optimisée car les photos seront réduites à ce format par le navigateur web du visiteur. Vous pouvez créer ce format en l’appelant alors « vignette » (75×75 pixels) en suivant ce tuto : Gérer plusieurs tailles d’images personnalisées sur WordPress. En pratique, il suffit d’ajouter la ligne suivante au fichier function.php de votre thème :

    add_image_size('vignette', 150, 150, true);

    Pour finir, il faut ensuite générer les vignettes pour les anciennes images stockées avec le plugin Regenerate_Thumbnails

    Si vous avez déjà créé ce format d’image (75×75 pixels) en lui donnant une autre appellation, il suffira de modifier la ligne 50 suivante :

    50
     $pic = wp_get_attachment_image_src( $photo->ID, 'vignette');

    en remplaçant « vignette » par le nom que vous utilisez déjà. Il faudra alors enregistrer ce fichier en UTF8 sans BOM avec notepad++ (sous Windows), textwrangler (sous mac) ou tout autre logiciel d’édition de code.

  • Code source

    Afficher le code source

  • Feuille de style

    Vous pouvez customiser à votre guise l’apparence du widget avec la classe CSS .widget_photos_hasard comme par exemple :

    1
    2
    3
    4
    5
    6
     .widget_photos_hasard {
    text-align: center;
    margin:auto;
    width:100 %;
    
    }
  • Téléchargement

    Vous pouvez télécharger désormais la version 1.1 qui fonctionne avec WordPress 4.3 (au contraire de 1.0) en cliquant sur le bouton suivant :

    Widget téléchargé 168 fois depuis le 31 décembre 2013
  • Installation

    Il s’installe comme n’importe quel plugin. Lorsque le plugin est activé, le widget est disponible dans la page des widgets WordPress.
    Ce widget affiche uniquement les photos des articles et pages publiques effectivement publiées.
    Il n’affichera pas les photos des brouillons, de la poubelle, ou des articles privés.
    Cependant, il affichera les photos des articles protégés par mot de passe.

  • Variante

    Pour empêcher l’affichage des photos des articles protégés par mot de passe, il suffit d’ajouter à la clause WHERE de la requête SQL ($photos_hasard=$wpdb->get_results…) une condition qui les exclu comme celle-ci :

    AND wp2.post_password =''

    qui devient donc :

    WHERE wp2.post_status = 'publish' AND wp1.post_mime_type LIKE 'image %' AND wp2.post_password =''

    Remarque : Seules les pages sont choisies au hasard et pour chacune de ces pages, la photo exposée sera toujours la même car cette photo est le résultat de la clause GROUP dans la requête SQL qui est toujours exécutée de la même manière sur le serveur. En supprimant la clause GROUP BY :

    GROUP BY wp1.post_parent

    les photos seront alors réellement choisies au hasard, mais pourront être alors celles d’une même page ou d’un même article.

Si vous avez trouvé une faute d’orthographe, informez-nous en sélectionnant le texte et en appuyant sur Ctrl + Entrée

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.