プラグインなしで変更前・変更後の画像を切り替え表示する方法

はじめに

プラグイン「Twenty20 Image Before-After」などを使わずに、変更前後の画像を表示する独自の独自のショートコードを追加します。

この記事では、この方法について説明します。

完成イメージ

変更前 変更後

使用方法

以下にショートコードを示します。

[my_image_before_after]

実装手順

以下のコードをfunctions.phpに追加します。

add_shortcode('my_image_before_after', function ($atts) {
  $atts = shortcode_atts([
    'before' => '',
    'after'  => '',
  ], $atts);

  if (empty($atts['before']) || empty($atts['after'])) {
    return '<p>画像IDが指定されていません。</p>';
  }

  // 画像のURLを取得
  $img1 = wp_get_attachment_url($atts['before']);
  $img2 = wp_get_attachment_url($atts['after']);

  if (!$img1 || !$img2) {
    return '<p>指定された画像が見つかりません。</p>';
  }

  ob_start();
  ?>
  <div class="image-before-after">
    <div class="image-before-after__rect">
      <img src="<?= esc_url($img1); ?>" class="image-before-after__before" alt="Before">
      <img src="<?= esc_url($img2); ?>" class="image-before-after__after" alt="After">
      <input type="range" min="0" max="100" value="50" class="image-before-after__range">
    </div>
    <div class="image-before-after__labels">
      <span class="image-before-after__label-before">変更前</span>
      <span class="image-before-after__label-after">変更後</span>
    </div>
  </div>
  <?php
  return ob_get_clean();
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .image-before-after__rect {
    margin: 0 auto;
    position: relative;
    width: fit-content;
  }

  .image-before-after__before {
    left: 0;
    position: absolute;
    top: 0;
  }

  .image-before-after__after {
    clip-path: inset(0 50% 0 0);
  }

  .image-before-after__range {
    bottom: 10px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 80%;
  }

  .image-before-after__labels {
    text-align: center;
  }

  .image-before-after__label-before,
  .image-before-after__label-after {
    color: #999;
    display: inline-block;
    font-size: 14px;
    margin: 0 15px;
  }
  <?php

  $handle = 'image-before-after';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    $(document).on('input', '.image-before-after__range', function () {
      let percentage = $(this).val();
      let $container =$(this).closest('.image-before-after__rect');

      $container.find('.image-before-after__after').css('clip-path', `inset(0 ${100 - percentage}% 0 0)`);
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean());
});

さいごに

今回紹介した方法を使えば、プラグインを使わずに、ショートコードで簡単に変更前後の画像表示を実現できます。
実際の仕組みは、変更前と変更後の画像を重ね合わせ、見せ方を工夫しているだけです。