Création d'une extension WordPress : Effet Lightbox

Voici le code « fabrication maison » d’une extension WordPress permettant d’appliquer un effet d’agrandissement type Lightbox sur les images cliquables de votre site.

Créez un dossier lightbox dans le dossier Plugins de WordPress. Ce dossier va contenir 3 fichiers : lightbox.php, lightbox.js et lightbox.css.

lightbox.php

Le code PHP permet de déclarer l’extension dans WordPress, de charger les pages necessaires (jQuery, lightbox.css et lightbox.js), de fabriquer la page des réglages dans le Tableau de bord, puis d’enregistrer les réglages dans la table wp_options.

La feuille de style interne permet d’appliquer les réglages enregistrés, à savoir la taille de la bordure blanche, et la hauteur de l’image agrandie.

<?php
/*
Plugin Name: Lightbox
Plugin URI: https://lesdocs.fr/creation-dune-extension-wordpress-effet-lightbox/
Description: L'extension Lightbox de Guillaume
Version: 1.0
Author: Guillaume Guittenit
*/

add_action('wp_enqueue_scripts','fichiers_lightbox');

function fichiers_lightbox() {
    wp_enqueue_script('jquery');
    // Mettre en file d'attente la feuille de style
    wp_register_style('lightbox_style', plugin_dir_url( __FILE__ ) . 'lightbox.css');
    wp_enqueue_style('lightbox_style');
    // Mettre en file d'attente les codes JavaScript
    wp_register_script('lightbox_script', plugin_dir_url( __FILE__ ) . 'lightbox.js');
    wp_enqueue_script('lightbox_script');
    
}

// Lien vers la page des réglages
function lien_reglage_lightbox() {
    add_menu_page('Réglages Lightbox', 'Lightbox', 'administrator', 'lightbox_reglages', 'lightbox_page_reglage', 'dashicons-admin-generic');
}
add_action('admin_menu', 'lien_reglage_lightbox');

// Page des réglages
function lightbox_page_reglage() {
?>
<h2>Réglages de l'effet Lightbox</h2>
<form method="post" action="options.php">
    <?php settings_fields('groupe-lightbox-reglages'); ?>
    <?php do_settings_sections('groupe-lightbox-reglages'); ?>
    <label>Taille de la bordure de l'image en pixels</label>
    <input type="text" id="taille_bordure" name="taille_bordure"  value="<?php echo get_option('taille_bordure'); ?>">px<br>
    <label>Hauteur de l'image en pourcentage de la fenêtre</label>
    <input type="text" id="hauteur_image" name="hauteur_image"  value="<?php echo get_option('hauteur_image'); ?>">%
    <?php submit_button(); ?>
</form>
<?php } 

// Enregistrement des réglages dans wp_options
add_action('admin_init', 'lightbox_reglages');

function lightbox_reglages() {
    register_setting('groupe-lightbox-reglages', 'taille_bordure');
    register_setting('groupe-lightbox-reglages', 'hauteur_image');
}

// Chargement des modifications CSS
add_action('wp_head', 'taille');
function taille() {
?>
<style>
.grande img {
    border-width: <?php echo get_option('taille_bordure'); ?>px;
    max-height: <?php echo get_option('hauteur_image'); ?>%;
}
</style>
<?php
}

Ci-dessous, la page des réglages de notre extension Lightbox :

Les réglages de l'extension Lightbox

lightbox.css

Le code CSS permet de positionner la grande image par dessus la vignette, avec une bordure blanche et un arrière plan sombre et transparent.

.grande {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer
    display: none;
    align-items: center;
    justify-content: center;
}

.grande img {
    max-height: 90%;
    border: 4px white solid;
    border-radius: 5px;
}

Notez la propriété display: none qui prendra la valeur flex suite au clic sur la vignette grâce au code jQuery ci-dessous.

lightbox.js

Pour finir, le code JavaScript permettant de faire apparaitre la grande image suite au clic sur la vignette.

function agrandir(source) {
    jQuery(".grande").html("<img src='" + source + "'>");
    jQuery(".grande").fadeIn("slow").css("display", "flex");
}


// Quand la page est prête, faire ceci :
jQuery(function ($) {
    $('<div class="grande"></div>').prependTo('body');

    function changehref(index, attributeValue) {
        var SourceGrandeImage = $(this).attr('href');
        return ('href', 'javascript:agrandir("' + SourceGrandeImage + '")');
    }
    
    $(".wp-block-image a").attr('href', changehref);

    $(".grande").click(function () {
        $(".grande").fadeOut("fast");
    });

});

Tout d’abord, on insère une balise <div> vide dans <body> avec une classe « grande ».

Ensuite, on crée une fonction changehref() qui change la valeur de l’attribut href des liens des images cliquables. La valeur de ces liens appelle une fonction agrandir() avec un paramètre contenant la source de la grande image.

Pour finir, la fonction agrandir() insère une balise <img> contenant la source de la grande image dans le <div class= »agrandir »>.

Effet Lightbox, extension WordPress
Création d'une extension WordPress : Effet Lightbox - Les Docs