WordPress: Comment construire un plugin Shortcode pour un curseur simple avant et après l’image

Je publiais un article Plus tôt, cela comprenait une image avant et après avec une superposition de curseur. Bien qu’il existe de nombreux plugins disponibles qui remplissent cette fonction, je préfère ne pas utiliser de plugins tiers en raison des frais généraux supplémentaires, y compris des fonctionnalités limitées et des publicités pour les mises à niveau. je comme to Gardez mon WordPress Instance aussi maigre que possible, j’ai donc créé un plugin qui utilise WordPress et jquery Pour afficher les images avant et après.

SUCKAGE AVANT ET APRÈS

Voici le shortcode qui l’a produit:

[before_after before="https://cdn.martech.zone/wp-content/uploads/2025/04/black-white.jpg" after="https://cdn.martech.zone/wp-content/uploads/2025/04/full-color.jpg" width="600"]

Comment installer le plugin avant et après le curseur

Suivez ces étapes pour installer et activer le plugin sur votre site WordPress:

1. Créer un nouveau dossier dans le wp-content/plugins/ répertoire et le nommer before-after-slider.
2. Créer un nouveau fichier à l’intérieur de ce dossier et le nommez before-after-slider.php.
3. Copier et coller le code suivant dans le before-after-slider.php déposer.
4. Enregistrer le fichier et activer le plugin du tableau de bord administrateur WordPress.

Lorsque la page se charge:

• Si le shortcode est détecté, le script jQuery et CSS sont injectés dans l’en-tête de la page.
• Le script initialise le comportement du curseur, réglant initialement la poignée au milieu (50%).
• Les utilisateurs interagissent avec la poignée pour révéler plus ou moins de l’image avant ou après dynamiquement.

<?php
/**
 * Plugin Name: Before and After Shortcode
 * Plugin URI:  https://dknewmedia.com
 * Description: A simple shortcode to add a before and after slider over an image.
 * Version:     1.0
 * Author:      Douglas Karr
 * Author URI:  https://dknewmedia.com
 * License:     GPL-2.0+
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

function ba_slider_scripts() {
    global $post;
    if ( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'before_after' ) ) {
        wp_enqueue_script( 'jquery' ); // jQuery is already included in WordPress
        wp_add_inline_script( 'jquery', '
            jQuery(document).ready(function($) {
                $(".ba-slider").each(function() {
                    var $slider = $(this),
                        $before = $slider.find(".ba-before"),
                        $after = $slider.find(".ba-after"),
                        $handle = $slider.find(".ba-handle");
                    
                    // Initialize slider position
                    var initialPercent = 50;
                    $before.css("clip-path", "inset(0 " + (100 - initialPercent) + "% 0 0)");
                    $after.css("clip-path", "inset(0 0 0 " + initialPercent + "%)");
                    $handle.css("left", initialPercent + "%");
                    
                    // Handle drag and click
                    $slider.on("mousedown touchstart", function(e) {
                        e.preventDefault();
                        var moveHandler = function(moveEvent) {
                            moveEvent.preventDefault();
                            var clientX = moveEvent.type.includes("touch") ? moveEvent.originalEvent.touches[0].clientX : moveEvent.clientX,
                                offsetX = clientX - $slider.offset().left,
                                percent = Math.max(0, Math.min(100, (offsetX / $slider.width()) * 100));
                            
                            // Update clip-path for both images
                            $before.css("clip-path", "inset(0 " + (100 - percent) + "% 0 0)");
                            $after.css("clip-path", "inset(0 0 0 " + percent + "%)");
                            $handle.css("left", percent + "%");
                        };
                        
                        $(document).on("mousemove touchmove", moveHandler);
                        $(document).on("mouseup touchend", function() {
                            $(document).off("mousemove touchmove", moveHandler);
                        });
                    });
                });
            });
        ' );

        // Inline CSS to minimize requests
        wp_add_inline_style( 'wp-block-library', '
            .ba-slider { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
            .ba-slider img { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover; object-position: center; }
            .ba-before, .ba-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
            .ba-before img, .ba-after img { width: 100%; height: 100%; }
            .ba-handle { position: absolute; top: 0; width: 4px; height: 100%; background: #fff; cursor: ew-resize; box-shadow: 0 0 5px rgba(0,0,0,0.3); z-index: 10; }
            .ba-handle::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.3); }
        ' );
    }
}
add_action( 'wp_enqueue_scripts', 'ba_slider_scripts' );

// Shortcode function
function ba_slider_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'before' => '',
        'after' => '',
        'width' => '600',
        'height' => '',
    ), $atts, 'before_after' );

    // Sanitize inputs
    $before = esc_url( $atts['before'] );
    $after = esc_url( $atts['after'] );
    $width = esc_attr( $atts['width'] );
    $height = $atts['height'] ? 'height: ' . esc_attr( $atts['height'] ) . 'px;' : 'aspect-ratio: 16 / 9;';

    if ( ! $before || ! $after ) {
        return '<p>Error: Both before and after images are required.</p>';
    }

    // Generate HTML, wrapped in wp-block-image and figure for centering
    $output="<div class="wp-block-image">";
    $output .= '<figure class="aligncenter size-full">';
    $output .= '<div class="ba-slider" style="width: ' . $width . 'px; max-width: 100%; ' . $height . '">';
    $output .= '<div class="ba-before"><img src="' . $before . '" alt="Before" /></div>';
    $output .= '<div class="ba-after"><img src="' . $after . '" alt="After" /></div>';
    $output .= '<div class="ba-handle"></div>';
    $output .= '</div>';
    $output .= '</figure>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'before_after', 'ba_slider_shortcode' );

La première partie du plugin assure Sécurité et environnement approprié en sortant immédiatement si le code est accessible en dehors de WordPress (if (!defined('ABSPATH')) exit;).

Chargement JavaScript et CSS: Le plugin entend conditionnellement JavaScript et CSS seulement Si la page ou la publication actuelle contient le [before_after] Shortcode. Cette optimisation évite les scripts de chargement inutilement à l’échelle du site.

• Il se connecte à WordPress wp_enqueue_scripts Action pour ajouter les deux:
  • Javascripqui utilise jQuery pour initialiser le curseur avant / après. Il:
    • Positionne les images avant et après côte à côte à l’aide de CSS clip-path pour révéler ou masquer des parties de chaque image.
    • Ajoute des écouteurs d’événements pour les événements de souris et de contact, permettant au visiteur de faire glisser une poignée horizontalement pour ajuster les parties visibles des images avant et après en temps réel.
    • Met à jour la position de la poignée et ajuste dynamiquement la visibilité de chaque image en fonction du mouvement du pointeur.
  • CSS en lignelequel:
    • Style le conteneur de curseur et les images à empiler correctement avec un positionnement absolu.
    • Conçoit la poignée traînante, y compris une ligne blanche verticale et un indicateur circulaire, pour une amélioration de l’expérience utilisateur (Ux).

Fonctionnalité de raccourci: La fonction de raccourci principale ba_slider_shortcode():

• Accepte et désinfecte quatre attributs facultatifs:
  • before (URL de l’image «avant»),
  • after (URL de l’image «après»),
  • width (largeur de pixel du curseur),
  • height (Hauteur de pixels ou par défaut est un rapport d’aspect 16: 9 si aucun n’est fourni).
• Vérifie que les deux before et after Les images sont fournies; Sinon, il affiche un message d’erreur.
• Construit la structure HTML du curseur:
  • Enveloppe le curseur dans un wordpress wp-block-image div et un figure élément d’alignement.
  • Comprend les deux images et la poignée draggable à l’intérieur d’un div avec classe ba-slider.
  • Applique la largeur et le rapport de hauteur / aspect spécifié par l’utilisateur en ligne.