Cocoon設定の拡大効果にfancybox3を追加する方法

はじめに

Cocoon 2.8.0でライブラリ「Spotlight」がバージョン0.7.0になり、自動再生に対応しなくなりました。

Cocoon 2.8.0公開。iconショートコード機能の追加。主にブロックエディター周りの不具合修正

Cocoon v2.7.9からv2.8.0までの変更点です。機能追加 iconショートコード機能の追加iconショートコードFont Awesomeのアイコンフォントを本文中やウィジェットなどで利用するためのショートコード機能を追加しました...

wp-cocoon.com

そこで、代替としてCocoon設定→画像→画像の拡大効果にライブラリ「fancybox」を追加します。

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

完成イメージ

実装手順

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

// Cocoon設定（画像）に入力フォームを追加
add_filter('admin_input_form_tag', function ($res, $name) {
  if ($name !== OP_IMAGE_ZOOM_EFFECT) {
    return $res;
  }

  $now_value = get_image_zoom_effect();

  ob_start();
  ?>
  <li>
    <input type="radio" name="image_zoom_effect" id="image_zoom_effect_5" value="fancybox"<?php the_checkbox_checked('fancybox', $now_value) ?>>
    <label for="image_zoom_effect_5">fancybox</label>
  </li>
  <?php

  $html = ob_get_clean();
  $res  = preg_replace('#(</ul>)#', $html . '$1', $res);

  return $res;
}, 10, 2);


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  if (get_theme_option(OP_IMAGE_ZOOM_EFFECT) !== 'fancybox') {
    return;
  }

  wp_enqueue_style('fancybox-css', '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css');
  wp_enqueue_script('fancybox-js', '//cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', ['jquery'], null, true);

  ob_start();
  ?>
  jQuery(function ($) {
    // 画像リンクにdata-fancybox属性を設定
    $('.wp-block-image a').attr('data-fancybox', 'gallery');

    // fancybox3の初期化
    $('[data-fancybox="gallery"]').fancybox({
      buttons: [       // ツールバー
        "zoom",        // ズ－ム
        "slideShow",   // スライドショー
        "fullScreen",  // フルスクリーン
        "close"        // 閉じる
      ],
      slideShow: {
        speed: 1000    // スライド切り替え（デフォルト3000）
      }
    });
  });
  <?php
  wp_add_inline_script('fancybox-js', ob_get_clean());
});

画像の拡大効果の違い

表2に、各画像の拡大表示効果の違いをまとめます。

さいごに

今回紹介した方法を使えば、fancybox3を拡大効果として追加し、スライドショー付きの画像表示を簡単に実現できます。
特にSpotlightの代替として使いたい場合や、より多機能なポップアップ表示を求める場合に有効です。