jQueryライブラリのfancybox3を「Wordpressギャラリーで使う」＆「ダウンロードリンクをつける」＆「fancybox2と似たcssにする」方法です。
長いので、今回は「Wordpressギャラリーで使う」編です。
fancybox3というのは、下記デモページのように、画像をモーダルウィンドウ表示させるものです。
fancybox3の公式ページに細かく設定方法が書かれているので（英語ですが）大体設定はできたのですが、ちょっとしたカスタマイズをしたいときに日本語のサイトがほぼ無かったので（特にWordpressのカスタマイズをするのに）苦労しました。
忘備録として書いておきます。
1.ダウンロード
公式ページからファイルをダウンロードします。
fancybox3は個人利用なら無料ですが、商用利用だとお金が掛かるようです。
2.解凍＆アップロード
解凍したら、必要なファイルをサーバにアップロードします。
必要なファイルは、「dist」の中にある「jquery.fancybox.min.css」と「jquery.fancybox.min.js」の２つのみ。
WPの子テーマに入れると思うので、適当にcssとかjsのフォルダを作って入れます。
3.header.phpに読み込みコード記述
公式ページではこのように記述してね、と書いてあります。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My page</title> <!-- CSS --> <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> </head> <body> <!-- Your HTML content goes here --> <!-- JS --> <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <script src="jquery.fancybox.min.js"></script> </body> </html>
これでもいいんですが、Wordpress用の記述方法があるので、<?php wp_head(); ?>の直前に下記を記述します。
<?php
wp_enqueue_style('jquery-fancybox-min',
/wp-content/themes/○○○-child/css/jquery.fancybox.min.css');
wp_enqueue_script('jquery-fancybox-min',
'/wp-content/themes/○○○-child/js/jquery.fancybox.min.js',array(jquery)); ?>
本当はjsは読み込み速度向上のために</body>タグの直前に書いたほうがいいのと、どうせならパスもphpで取りたかったんですが、実装したテーマが原因なのか上手く反映できなかったので、<head>の中・相対パス直接記述にしました。（テーマはHumming birdでした）
4.WPギャラリーを準備する
↓こういう並べて表示できるやつですね。（このサイトのギャラリーはすでに違うjsが適用されています。。）
投稿・固定ページの編集画面でメディアを追加からギャラリーを作成できます。このとき、リンク先は「メディアファイル」にしておいてください。（fancyboxを設定したときにポップアップして表示されるのがメディアファイルになります）
5.aタグに独自データ属性「data-○○」を追加する
fancybox2まではclassに特定の単語を追加すればすぐに使えてたみたいなんですが、fancybox3では独自データ属性（カスタムデータ属性）を使っています。
■基本的な使い方
WPギャラリーではなく、単純に画像を貼ってそれをfancyboxにするのであれば、公式ページの書き方をすればできます。
<a href="image.jpg" data-fancybox data-caption="My caption"> <img src="thumbnail.jpg" alt="" /> </a>
aタグの中に「data-fancybox」を入れると適用されます。「data-caption」はポップアップしたときに下に表示される文字です。
ポップアップしたときにスライドさせて見せたいときは、「data-fancybox=”group”」のようにグループにしたいイメージ同士に同じ名前を入れます。（groupでなくてOK）
<a href="image_1.jpg" data-fancybox="group" data-caption="Caption #1"> <img src="thumbnail_1.jpg" alt="" /> </a> <a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2"> <img src="thumbnail_2.jpg" alt="" /> </a>
このfancybox3は、画像以外にもテキストでもPDFでもなんでもできるっぽい（aタグのURLで自動検出しているらしい）ので、もし画像以外でうまく表示できなかったら「data-type」を設定するといいです。（なんとなく、data-typeを入力したほうが表示が早い気がする。例：data-type=”image”）
Javascriptで編集したいときは、下記を記述します。（これは</body>タグの直前がいいですね）
<script type="text/javascript">
$("[data-fancybox]").fancybox({
// オプション内容を記述
});
</script>
■WPギャラリーのaタグに独自データ属性を追加する
では本題。jQueryでWPギャラリーのaタグにdata-○○を追加します。
</body>タグの直前に下記を記述します。
<script type="text/javascript">
jQuery(function($) {
$( '.gallery a' ).attr({
'data-fancybox': 'images',
'data-type': 'image',
'data-caption': 'こちらからダウンロードできます',
});
});
WPギャラリーのaタグ「.gallery a」に「data-fancybox」「data-type」「data-caption」を追加しています。キャプションは自由に入れてください。
とりあえずこれでWPギャラリーにfancybox3が適用されました。
この先の「ダウンロードリンクをつける」、「fancybox2と似たcssにする」は次回～。
