WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」

WordPressで記事を作成するときに、操作などをわかりやすく伝える方法の一つに「アニメーションGIF」を使った方法がありますが、アニメーションGIFを記事内にそのまま挿入した場合、通常はページ読込と同時にループ再⽣されてしまうため、ページが見づらくなってしまうという難点があります。

そのようなときに便利なのが、アニメーションGIFの再生／停止を制御できる「Gifffer」です。

そこでここでは、WordPress環境に「Gifffer」を導入して、アニメーションGIFの再⽣／停⽌を制御する⽅法を紹介します。

Giffferのインストール

「Gifffer」は、Webページに挿入されているアニメーションGIFの再⽣／停⽌を制御できるjQueryプラグインで、WordPress環境へのインストール手順は、次のとおりです。

本体のダウンロード

以下のWebページ（GitHub）で「Clone or Download」＞「Download ZIP」を選択し、Gifffer本体をダウンロードします。

https://github.com/krasimir/gifffer

jsファイルの配置

ダウンロードしたファイル「gifffer-master.zip」を解凍し「build」フォルダーの中にある「gifffer.min.js 」をサーバへアップロードします。

ここでは、例としてWordpressのコンテンツルート配下の「/wp-content/plugins/gifffer/」ディレクトリをアップロードする場所としました。

Giffferの呼び出し設定

次にWordpressの設定を⾏います。

テーマ（子テーマがある場合は、子テーマ）の「footer.php」に、Giffferを呼び出すためのコードを追記します。

<script src="/wp-content/plugins/gifffer/gifffer.min.js"</script>
<script>jQuery(window).on('load',function(){Gifffer();});</script>

以上で、設定は完了です。

アニメーションGIFの挿入方法

アニメーションGIFファイルをアップロード

アニメーションGIFファイルは、画像ファイルと同じように挿入箇所にドラッグ＆ドロップで挿入し、挿入時の設定は「リンク先︓なし、サイズ︓フルサイズ」とします。

リンク先を設定すると、他のプラグインと競合してうまく表示されない場合があり、サイズをフルサイズ以外に設定すると、Wordpressが勝手に静⽌画に差し替えてしまうのでご注意ください。

コードの編集

アニメーションGIFファイルを記事に挿入すると、次のようなHTMLコードとして挿入されています。

<img src="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648" />

このコードの「src」属性を「data-gifffer」に変更することで、Giffferを使った再⽣になります。

<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648" />

プレビューで確認してみると、以下のように画像の中央に再生ボタンが表示されており、クリックすると再生されます。

枠線を消す

記事を閲覧するブラウザによってはアニメーションGIFをクリックしたときに枠線が表⽰されることがありますが、この枠線はCSSで消すことができます。

枠線を消したいときは「style.css」に次のコードを追記します。

/* gifffer */
.gifffer {
  outline: none;
}

クラス「gifffer」をアニメーションGIFを挿入するコードに追加します。

<img data-gifffer="https://4thsight.xyz/wp-content/uploads/2018/05/1526569507.gif" alt="WordPressでアニメーションGIFの再生／停止を制御する方法「gifffer」" width="150" height="150" class="alignnone size-full wp-image-2648 gifffer" />

すると、枠線が消えます。

あとがき

ちょっした操作をアニメーションGIF動画として記事に挿入したい場合、Giffferなら動画ファイルのように再生したいときだけクリックしてもらえばよいので、閲覧する側にとっても優しいですね。

ただ、アニメーションGIFはファイルサイズが大きくなりがちで、再生コントロールを付けようとすると、ここで紹介しているように少し手間がかかるため、手間なく簡単にアニメーション素材を挿入したい場合は、webmなどの動画形式で対応したほうが良いかもしれません。