WordPressのブロックエディタには、ギャラリーブロックというのがあります。
標準機能としては良くできていますが、いくつか問題点があります。
他のプラグインなど色々調べましたが、機能がごついので逆に使いにくく感じました。
そこで、標準のギャラリーブロックをカスタマイズして、少し使いやすくカスタマイズしたのがこの記事になります。
WordPress5.9でギャラリーブロックが大幅アップデート
WordPress5.9でギャラリーブロックが大幅アップデートされて、ブロックが出力するHTML構造が大きく変わってしまいました。これは結構なインパクトがあるアップデートでした。
Wordpree5.9以前の過去記事に含まれるギャラリーブロックは古いHTMLのままなので影響を受けません。そこはひとまず安心です。
ですが、Wordpress5.9以降のギャラリーブロックでは以前この記事に書かれていたカスタマイズはうまく動きませんでした。
WordPress5.8時代のギャラリーブロックとWordpress5.9以降のギャラリーブロックが混在するサイトでは、2種類のCSSを管理していく必要があります。
ギャラリーブロックHTMLの違い
見てもらうとわかりますが、Wordpress5.9以降ではul/liが1つのfigureにまとめられてflexboxの階層が一つ減ったシンプルな構造になっています。class名も変わっています。Wordpress5.8までのCSSは完全に無視されてしまいます。
個人的には、Wordpress5.8時代の方がwrap要素がきちんとあってCSSを当てやすいと思うのですが、Wordpress5.9からそのwrap要素（blocks-gallery-grid）がなくなったので、ギャラリー回りでデザインが崩れているだけでなく、修正方法に頭を悩ませている人も多いかもしれません。
この記事の内容とは別の内容でギャラリーブロックをCSSでカスタマイズしていたサイトがありましたが、Wordpress5.9以降のギャラリーブロックに対してはCSSだけで対応できない部分がありました。
ギャラリーブロックHTML/Wordpress5.8まで
<figure class="wp-block-gallery">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<-- IMAGE HERE -->
</figure>
</li>
</ul>
</figure>ギャラリーブロックHTML/Wordpress5.9以降
<figure class="wp-block-gallery has-nested-images">
<figure class="wp-block-image">
<!-- IMAGE HERE -->
</figure>
</figure>WordPress5.8までと5.9以降のギャラリーブロックのHTML構造の違いについては以下の記事が詳しいです。
横方向の画像数が変わると画像サイズが変わってしまう
横方向を3列にして、ギャラリーの画像数が10個だとすると1余ります。その時、余った1つの画像は横幅いっぱいに表示されます。別にその画像に意味があるわけではないので、大きくなられてもうれしくありません。
そこで、CSSのカスタマイズですべての画像が同じサイズになるようにします。
WordPress5.8まで
ギャラリーブロックに画像が一枚しかない場合は、100%幅で表示される。
.blocks-gallery-grid .blocks-gallery-item, .wp-block-gallery .blocks-gallery-item {
flex-grow: initial;
}WordPress5.9以降
一律、flex-growを解除してしまうと、ギャラリーブロックに画像が一枚しかない場合は100%幅で表示されなくなった。
.wp-block-gallery.has-nested-images figure.wp-block-image{
flex-grow:0;
}画像が一枚しかないギャラリーブロックを従来通り100%表示にする場合は、一枚目のflex-grow:1を生かすようにCSSを記述する。
/*ギャラリー画像が1枚だけの時には100%にした場合*/
.wp-block-gallery.has-nested-images figure.wp-block-image:not(:first-child){
flex-grow:0;
}ちなみに、ギャラリーに一枚しか画像が無い場合をCSSで判定するには、first-childとlast-childのAND条件で判定できる。
/*ギャラリー画像が1枚だけの時には100%にした場合*/
.wp-block-gallery.has-nested-images figure.wp-block-image:first-child:last-child{
flex-grow:1;
}キャプションを入れると画像のリンク範囲が狭くなる
キャプションを入れない時には気が付かないのですが、キャプションを入れたとたんに画像がクリックしにくくなります。
理由は簡単で、画像の上にキャプションが重なっていて、キャプションにリンクが張られていないからです。まず、キャプションにリンクを張る機能がそもそもありません。次に、リンクを張ることができるようにするプラグインはありますが、リンクをいちいち入力するのは耐えられません。
苦肉の策で、CSSでカスタマイズすることにします。
疑似要素を使わない方法を検索で最初に見つけたのですが、その方法だと重なり順序の問題が解決できませんでした。疑似要素を使って、画像全体にかぶせることで、キャプションの下の画像のリンクのクリック範囲が画像全体になります。
WordPress5.8まで
.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);
}
WordPress5.9以降
.wp-block-gallery.has-nested-images .wp-block-image > 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ギャラリーブロックは動きに癖があります。しかし、その癖を消せる方法を使うとかなり良い動きをするようになります。標準ブロックは将来的にも残るものですので、変なプラグインを使うよりもリスクが少ないと思います。
