Une galerie photo automatique sans plugin avec WordPress

Quand on a besoin d’ajouter une fonctionnalité à un site WordPress, on a toujours tendance à jeter un coup d’oeil du côté des plugins. Et pour cause, ça facilite souvent la vie. Les plugins ont par contre leur lot de désagréments et il vaut parfois mieux passer par une méthode maison, faite à la main.

Le but n’est pas ici de revenir sur les problèmes que posent les plugins, passons donc directement aux explications de ma méthode.

Note : je ferai ici abstraction du style CSS, je le laisse à votre libre appréciation.

Comment ça marche ?

On va tout simplement utiliser la fonction de création automatique de miniatures de WordPress. Les miniatures des images étant enregistrées, on les extrait des articles/pages et on les affiche toutes. Ces miniatures ont un lien qui mène à la version de l’image en taille réelle.

Cette galerie est automatique car il n’est pas nécessaire d’insérer les images dans le contenu lui-même. Les images sont toutes « attrapées » en tant que pièces jointes.

Functions.php

Par commodité, on va utiliser le fichier functions.php qui se trouve dans le dossier du thème. Si ce fichier n’existe pas, créez-le ! De cette manière, on n’aura plus qu’à faire appel à la fonction au bon endroit dans les articles/pages au lieu de devoir insérer tout le code. C’est notamment pratique si vous avez plusieurs modèles de pages, puisqu’il suffit de modifier une fois le code dans le fichier functions.php pour que la modification de la fonction soit répercutée ailleurs.

Dans le fichier sus nommé, insérez donc ceci :

// Création de la fonction
function get_images() {
    // Définition des arguments
    $args = array(
        // Ordre ascendant
        'order'          => 'ASC',
        // Ordre défini par le numéro d'image dans l'overlay d'envoi des images
        'orderby'        => 'menu_order',
        // Le genre de contenu recherché : pièce jointe
        'post_type'      => 'attachment',
        // Le post auquel appartiennent les pièces jointes
        'post_parent'    => $post->ID,
        // Le type de pièce jointe
        'post_mime_type' => 'image',
        // Tout prendre
        'post_status'    => null,
        // Tout prendre
        'numberposts'    => -1
    );
    // Définir la variable et lui appliquer les arguments de sélection
    $attachments = get_posts($args);
    // S'il y a des pièces jointes, de type image, dans ce post-ci, etc.
    if ($attachments) {
        // Pour chaque image
        foreach ($attachments as $attachment) {
            // Ajouter le titre
            echo apply_filters('the_title', $attachment->post_title);
            // Insérer le tout avec le lien
            echo wp_get_attachment_link($attachment->ID, 'thumbnail', false, false);
        }
    }
}

Avec ce morceau de code on a maintenant créé la fonction get_images, on peut l’utiliser où on veut dans la boucle WordPress.

Page.php ou single.php

Qu’on prenne l’exemple d’une page ou d’un article, le principe est le même. Imaginons la boucle la plus simple possible et que je souhaite que les miniatures des images soient affichées juste au-dessus du contenu de la page. Voici ce que ça donne :

//Initialisation de la boucle
if (have_posts()) : while (have_posts()) : the_post();
    // Le titre de la page
    the_title();
    // L'ensemble des miniatures de toutes les photos de la page
    get_images();
    // Le contenu de la page
    the_content();
endwhile; endif;

Vous remarquez donc qu’il suffit d’ajouter <?php get_images(); ?> pour que ça fonctionne.

Notes et explications supplémentaires

  1. Une pièce jointe est considérée « comme un post » dont le post parent est l’article ou la page en cours ;
  2. Au lieu du tri par menu_order vous pouvez tout à fait utiliser date ;
  3. Cette démarche permet d’afficher toutes les images d’une page ou d’un article sous forme de miniatures avec un lien pour chacune d’entre elles vers l’image en grande taille mais on peut dériver la fonction pour d’autres types de fichiers ;
  4. Dans le cas de l’utilisation de menu_order, l’ordre des miniatures est défini par la numérotation attribuée aux images dans la boîte d’envoi ;
  5. Il est important de définir correctement la taille des miniatures dans l’administration de WordPress, dans « Réglages > Médias » ;
  6. En poussant la chose un peu plus loin il est très aisé de combiner ça à un effet de « Lightbox », en jQuery par exemple. J’utilise personnellement souvent ShadowBox, à nouveau sans plugin.
b8c8579f4c9c7dafbb6ee4ae97bf11cd00000000000000000000000