Simplicity2で使用していたbaguetteBoxをカスタマイズした結果

Simplicity2に搭載されている baguetteBox

この baguetteBox を違う呼び出し方法で使ってみた結果、とても使いやすくなりました。

私の場合、画像ファイルを少し特殊な方法で呼び出しているので、少し手を加えるしかありませんでした。
そんなに特殊な方法でもないのかもしれませんが、一般的には少数な方法ではないかと思います。

実際にbaguetteBoxを使ってみた結果、動作しなかった原因や自作コードを追加して、カスタマイズした方法や使い方を掲載しています。

Simplicityのバージョン 2.6.1以上が必要です。
baguetteBox.js は、Simplicityのバージョン 2.6.1 から実装されました。

1 baguetteBoxが動作しない原因は？
2 自作したbaguetteBoxの呼び出し方法を公開
3 まとめ

baguetteBoxが動作しない原因は？

Simplicityのバージョン2.6.3で、利用されていただいていた時のことです。

私は、コンテンツ内の画像のポップアップ（ズーム）表示として、標準で実装されているbaguetteBox.jsを利用させていただこうと思いました。

管理画面からチェックを入れるだけで使うことができるので、とても良いのですが、私が利用している外部画像では機能しないことが判明。

実際に管理画面での設定は完了して、使い始めてみると、なぜが動作しない。

記事の中には、きちんとリンク先に画像のURLを挿入しています。
ソースコードを何度も見て確認しました。

リンク先のメディアファイルに、外部画像を呼び出していましたので、最初は外部画像を使っていることが原因かも？
と思い、色々と試してみることに

外部の無料利用可能な画像URLを指定してみても問題なし。
正常に動作します。

どうも、「私が使っている画像のURLに問題があるようだな」と、結論を出しました。
外部画像が原因という訳ではないようです。

動作しない原因は、画像URLの書式にありました。

私は、画像などのメディアファイルは、Google フォト にアップロードさせて、その画像を呼び出してくるようにしています。
WordPress（ワードプレス）内で使用するコンテンツの画像は、ほとんど、Google フォトに格納した画像を使っています。

URLは、このようになります。
拡張子が付かないURLに付かないんです。

https://lh3.googleusercontent.com/*****=w500-h500-no

Google フォトのURLには、.jpg などの拡張子が付与されていないんですよね。

baguetteBoxの公式の使用方法を見てみても、今回のような特殊な使い方について書かれていませんでした。
私が理解できなかっただけかもしれませんが・・・

baguetteBoxの使用方法
https://github.com/feimosi/baguetteBox.js

baguetteBoxの初期設定では、メディアファイルか否かを拡張子で判別しているようです。

拡張子がこのような書式でないとダメなようで、有効に機能しないようです。

.jpg
.jpeg
.gif
.png
.webp

クラス属性で対応していないか等、Googleで検索してみるが、見つからず。

WordPress（ワードプレス）の管理画面からアップロードさせた画像を使えば良いのでしょうが、サーバーのディスクり容量のことを考えると。
ということで、私にとっては、あまりやりたくない方法です。

できれば、WordPress（ワードプレス）で使用する画像は、WordPress（ワードプレス）を設置しているサーバーと違う場所に置いておきたいと思っています。

試行錯誤した結果、自作することで解決しました。

自作したbaguetteBoxの呼び出し方法を公開

baguetteBox + Google フォトの画像の組み合わせが使えないのであれば、諦めようかとも思いました。
でも、一応チェレンジしてみるかと思い、呼び出し方を自作してみることに。

結果的に自身が実現させたかったことに近い状態になり、とても満足しているので、カスタマイズして良かったです。

もっと良い方法があるよと思われる方もいらっしゃるかもしれませんが、私なりの精一杯の方法を公開しておきます。

baguetteBox.js が有効に機能するファイルをパターンとして設定しています。

$pattern = '.+\.(gif|jpe?g|png|webp)|[a-zA-Z0-9]+\.googleusercontent\.com';

具体的に有効になるファイルはこのようなファイルになります。

.gif の拡張子ファイル
.jpg の拡張子ファイル
.jpeg の拡張子ファイル
.png の拡張子ファイル
.webp の拡張子ファイル
lh3.googleusercontent.com 含んだファイル

Simplicityのバージョン 2.6.1以上が必要です。
baguetteBox.js は、Simplicityのバージョン 2.6.1 から実装されました。

Simplicity2のfunctions.phpにコードを追加すればＯＫです。

使い方やコードは、下に記載しています。

baguetteBox + Google フォトが使える設定

Simplicity2に標準実装されている方法に Google フォトが使えるようにした方法です。

リンク先に画像が指定されていない場合の記事でも読み込まれます。

Simplicity2の親テーマの場合は
themes/simplicity2/functions.php
Simplicity2の子テーマの場合は
themes/simplicity2-child/functions.php

functions.php に下記のコードを挿入します。

if( !is_admin() ) {
  function child_add_baguettebox() {
    // 検索パターン
    $pattern = '.+\.(gif|jpe?g|png|webp)|[a-zA-Z0-9]+\.googleusercontent\.com';

    // 投稿・固定ページか、リストスタイルが本文表示の時だけ呼び出す
    if ( is_singular() || ( get_theme_mod( 'list_style', 'cards') == 'bodies' ) ) {
      // baguettebox CSSの呼び出し
      wp_enqueue_style( 'baguettebox-style', get_template_directory_uri() . '/css/baguetteBox.min.css' );
      // baguettebox スクリプトの呼び出し
      wp_enqueue_script( 'baguettebox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', array(), false, true );

      //実行コードの記入
      $data =
        'window.onload = function(){'
      . 'baguetteBox.run(\'.entry-content\', {\'filter\':/' . $pattern . '/i});'
      . '};'
      ;

      wp_add_inline_script( 'baguettebox-js', $data, 'after' );
    }
  }
  add_action( 'wp_print_scripts','child_add_baguettebox' );
}

baguetteBox + Google フォト + 該当記事のみ読み込む設定

Simplicity2に標準実装されている方法に Google フォトが使えるようにした方法に、更に機能をプラスしている方法です。

リンク先に画像が指定されている場合の記事のみ読み込まれます。

Simplicity2の親テーマの場合は
themes/simplicity2/functions.php
Simplicity2の子テーマの場合は
themes/simplicity2-child/functions.php

functions.php に下記のコードを挿入します。

if( !is_admin() ) {
  function child_add_baguettebox() {
    // 記事の本文を取得する
    $the_content = get_the_content();

    // 検索パターン
    $pattern = '.+\.(gif|jpe?g|png|webp)|[a-zA-Z0-9]+\.googleusercontent\.com';

    // 記事本文からパターン検索を実行
    $is_baguettebox = preg_match( '!'.$pattern.'!i', $the_content );

    // 検索結果にパターンが存在すれば呼び出す
    if ($is_baguettebox) {
      // 投稿・固定ページか、リストスタイルが本文表示の時だけ呼び出す
      if ( is_singular() || ( get_theme_mod( 'list_style', 'cards') == 'bodies' ) ) {
        // baguettebox CSSの呼び出し
        wp_enqueue_style( 'baguettebox-style', get_template_directory_uri() . '/css/baguetteBox.min.css' );
        // baguettebox スクリプトの呼び出し
        wp_enqueue_script( 'baguettebox-js', get_template_directory_uri() . '/js/baguetteBox.min.js', array(), false, true );

        //実行コードの記入
        $data =
          'window.onload = function(){'
        . 'baguetteBox.run(\'.entry-content\', {\'filter\':/' . $pattern . '/i});'
        . '};'
        ;

        wp_add_inline_script( 'baguettebox-js', $data, 'after' );
      }
    }
  }
  add_action( 'wp_print_scripts','child_add_baguettebox' );
}

functions.php のファイルは、FTPで転送することをオススメします。
管理画面からコードを挿入することも可能ですが、この方法で書き込んだ場合は、間違ったコードを挿入した場合、WordPress（ワードプレス）全体が動作しなくなります。

管理画面のbaguetteBoxは無効にする

標準で実装されている管理画面の設定では無効にする必要があります。

管理画面の設定を有効にしていると、baguetteBox が二重に読み込まれてしまうからです。

管理画面からの設定は、無効にする必要があります。

Simplicity2標準機能のbaguetteBoxを無効にする方法

「外観」 → 「カスタマイズ」 → 「画像」
↓
「画像リンク拡大効果のタイプ」で、【拡大効果なし】を選択する
↓
「公開」ボタンを押す

動作確認

最後に動作確認します。

このようなHTMLを挿入して、画像のポップアップ（ズーム）表示ができれば、成功です。

<a href="https://lh3.googleusercontent.com/*****=w500-h500-no"><img src="https://lh3.googleusercontent.com/*****=w300-h300-no" alt="" width="300" height="300"></a>