WordPressのブロックエディタには、ギャラリーブロックというのがあります。
標準機能としては良くできていますが、いくつか問題点があります。
他のプラグインなど色々調べましたが、機能がごついので逆に使いにくく感じました。
そこで、標準のギャラリーブロックをカスタマイズして、少し使いやすくカスタマイズしたのがこの記事になります。
横方向の画像数が変わると画像サイズが変わってしまう
横方向を3列にして、ギャラリーの画像数が10個だとすると1余ります。その時、余った1つの画像は横幅いっぱいに表示されます。別にその画像に意味があるわけではないので、大きくなられてもうれしくありません。
そこで、CSSのカスタマイズですべての画像が同じサイズになるようにします。
.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-item {
flex-grow: initial;
}キャプションを入れると画像のリンク範囲が狭くなる
キャプションを入れない時には気が付かないのですが、キャプションを入れたとたんに画像がクリックしにくくなります。
理由は簡単で、画像の上にキャプションが重なっていて、キャプションにリンクが張られていないからです。まず、キャプションにリンクを張る機能がそもそもありません。次に、リンクを張ることができるようにするプラグインはありますが、リンクをいちいち入力するのは耐えられません。
苦肉の策で、CSSでカスタマイズすることにします。
疑似要素を使わない方法を検索で最初に見つけたのですが、その方法だと重なり順序の問題が解決できませんでした。疑似要素を使って、画像全体にかぶせることで、キャプションの下の画像のリンクのクリック範囲が画像全体になります。
.blocks-gallery-item > figure > a:after{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
ギャラリーの画像をクリックした後に画像を閉じにくい
この辺は、Javascriptのプラグインを使う方が簡単です。
Lityを使う
Lightbox系のプラグインはいちいち重いので、Lityという軽量のJavascriptのプラグインを導入することにしました。Lityは画像を開くときも閉じるときもストレスなく、動くようになります。
Lityは軽量なのですが、機能的に少し足りないかもしれません。スライドショーやキャプションの表示に対応してません。
baguetteBox.jsを使う
baguetteBoxはスライドショーやキャプションに対応している軽量なLightbox系プラグインです。とても簡単に使うことができますが、Gutenbergの画像キャプションで使われているfigcaptionタグに対応させるには一手間必要です。
///////////////////////////////////
//baguetteboxの呼び出し
///////////////////////////////////
function call_baguettebox_scrips_demo() {
//baguettebox CSSの呼び出し
wp_enqueue_style( 'baguettebox-style', get_stylesheet_directory_uri() . '/css/baguetteBox.min.css' );
//baguetteboxスクリプトの呼び出し
wp_enqueue_script( 'baguettebox-js', get_stylesheet_directory_uri() . '/js/baguetteBox.min.js', array(), false, true );
//実行コードの記入
$data = "
window.onload = function() {
baguetteBox.run('.l-contents__main' , {
//animation: 'fadeIn',
async : true,
fullscreen:true,
captions: function(element) {
var target = element.parentNode; // figure
if(target.getElementsByTagName('figure')!= null){
if(target.getElementsByTagName('figcaption')[0]!= null){
return target.getElementsByTagName('figcaption')[0].innerText;
}
};
}
} );
};
";
wp_add_inline_script( 'baguettebox-js', $data, 'after' ) ;
}
add_action( 'wp_enqueue_scripts', 'call_baguetteBox_scrips_demo' );
ギャラリー全体で画像の高さを揃えたい
ギャラリーブロックには高さを揃えるオプションがあります。このオプションを有効にすることで、高さの異なる画像を並べた時に各行の高さが揃います。
しかし、画像の高さがバラバラの場合、行ごとに一番高さが高い画像に他の画像の高さが揃ってしまいます。その結果、ギャラリー全体ですべての画像の高さを揃えることができません。
例えば、4:3のアスペクト比ですべての画像を揃えたいと思っても、ブロックのオプションだけでは対応できません。
CSSでは横方向のwidthからheightを設定することができません。(CSS4からできるらしい)
なので、レスポンシブには簡単に対応できませんが、苦肉の策で各画像のheightを固定値にすることで、高さを固定値に揃えることは可能です。
li.blocks-gallery-item {
height: 100px;
}jQueryで横幅を取得して高さを指定すればレスポンシブに対応できますが、それはこれからの課題ということにしておきます。
サムネイルサイズの指定がない
標準のギャラリーブロックにはサムネイル画像サイズの指定がないので、嫌な予感がしたのですが、 それぞれのサムネイル画像はCSSでリサイズされているだけで、大きな画像がそのまま読み込まれています。
ギャラリーの枚数が多い時にスマホでは結構ヤバいことになります。
これは標準ブロックが変更されない限りどうにもならないので、他のプラグインを使うしかない感じです。
Kadence BlocksのAdvanced Galleryを使う
Advanced Galleryブロックを素直に使えば、すべて解決なのかもしれません。
Kadence Blocksは結構いい感じのブロックが揃っています。
Advanced Galleryブロックでは、石積み、グリッド、カルーセル、流体幅カルーセル、またはスライダースタイルでフォトギャラリーを追加できます。
4つの異なるオプションのキャプションの場所をお楽しみください。それぞれにスタイルフォント、背景などのオプションがあります。
各ギャラリー内で、サムネイルの比率の定義、画像フィルターの追加、境界線の半径の設定、ボックスシャドウの追加ができます。各画像を別のページまたはWebサイトへのカスタムリンクにすることができます。または、組み込みのライトボックスを簡単に有効にすることができます。さらに、サムネイルに使用する画像サイズと、究極のパフォーマンスを得るためのライトボックス画像を選択できます。
まとめ
標準のWordpressギャラリーブロックは動きに癖があります。しかし、その癖を消せる方法を使うとかなり良い動きをするようになります。標準ブロックは将来的にも残るものですので、変なプラグインを使うよりもリスクが少ないと思います。
