[Débutant] Créer un plugin WordPress pour flouter une image

Vous avez besoin de créer un plugin WordPress rapidement pour flouter une ou plusieurs de vos images en ligne? Avec quelques lignes de codes, peu importe votre niveau, vous pouvez créer cet effet sur vos images WordPress. Voici comment vous pouvez créer un plugin WordPress pour flouter des images

Créez un nouveau répertoire dans le répertoire wp-content/plugins de votre installation WordPress et nommez-le par exemple image-floue.

Créez un fichier image-floue.php à l’intérieur de ce répertoire et commencez par y inclure l’en-tête de plugin suivant:

<?php

/**

 * Plugin Name: Image Floue

 * Plugin URI: https://ekoledubiz.com/

 * Description: This plugin adds a blur effect to images.

 * Version: 1.0

 * Author: Ekoledubiz

 * Author URI: https://example.com

 * License: GPL2

 * License URI: https://www.gnu.org/licenses/gpl-2.0.html

 * Text Domain: image-floue

 */

Ensuite, vous pouvez utiliser la fonction add_filter() de WordPress pour ajouter un filtre qui appliquera l’effet de flou sur les images. Vous pouvez par exemple utiliser la fonction PHP imagefilter() pour ce faire. Voici un exemple de code qui montre comment vous pouvez le faire:

<?php

function blur_images( $html ) {

  // Only apply the blur effect to images with the class "blur"

  if ( strpos( $html, 'class="blur"' ) === false ) {

    return $html;

  }

  // Load the image and apply the blur effect using imagefilter()

  $doc = new DOMDocument();

  $doc->loadHTML( $html );

  $tags = $doc->getElementsByTagName( 'img' );

  foreach ( $tags as $tag ) {

    $src = $tag->getAttribute( 'src' );

    $image = imagecreatefromstring( file_get_contents( $src ) );

    imagefilter( $image, IMG_FILTER_GAUSSIAN_BLUR );

    ob_start();

    imagepng( $image );

    $blurred_image_data = ob_get_contents();

    ob_end_clean();

    // Replace the original image with the blurred version

    $blurred_image_data_uri = "data:image/png;base64," . base64_encode( $blurred_image_data );

    $html = str_replace( $src, $blurred_image_data_uri, $html );

  }

  return $html;

}

add_filter( 'the_content', 'blur_images' );

Enfin, n’oubliez pas de fermer le fichier image-blur.php avec la balise de fermeture PHP ?>.

Voilà, votre plugin est maintenant prêt à être activé et utilisé dans WordPress. Pour appliquer l’effet de flou sur une image, rajouter la class ‘blur’ 🙂

Vous souhaitez ajouter un flou sur TOUTES les images de votre WordPress? Voici le code à utiliser.

function blur_image($image_url, $image_id, $size) {
  // Check if GD library is installed
  if (!function_exists('imagecreatetruecolor')) {
    return $image_url;
  }

  // Load image from URL
  $image = imagecreatefromstring(file_get_contents($image_url));

  // Apply blur effect
  imagefilter($image, IMG_FILTER_GAUSSIAN_BLUR);

  // Save the image
  $temp_filename = tempnam(sys_get_temp_dir(), 'blur_image');
  imagejpeg($image, $temp_filename, 100);
  imagedestroy($image);

  // Return the blurred image URL
  return str_replace(basename($image_url), basename($temp_filename), $image_url);
}

add_filter('image_downsize', 'blur_image', 10, 3);