WordPressテーマを今年からSWELLに移行して、工事が大体終わりました。デザイン素人なためどうしてもどうしても素人くさくなってしまうのが悲しくて導入して、すごい綺麗になったのが嬉しくて毎日自分のサイトを眺めています。
SWELLに移行した最終的なきっかけはJSON-LDに対応しているという点でした。いずれ二次創作ではなく創作でやっていきたいと思っているので、ゆくゆくは検索結果からも集客出来るようにならないとな…と思っていて、もし検索結果に表示された時にリッチスニペットを綺麗に表示してくれたらいいなと思い、惹かれました。
SWELLにしてからプラグインが7個で済んでるのが驚きです。削除したプラグインはこんな感じ。
- TinyMCE Advanced（クラシック系の拡張プラグインが不要になったため）
- Classic Widget（クラシック系のプラグインは基本要らないため）
- Portfolio Gallery（後述）
- その他予備のLightbox系プラグイン2個（SWELLには画像ポップアップ機能があるため）
- Shortcord Ultimate（アコーディオンを出すために使っていたがSWELLに搭載されていたため）
多い時は20個くらい入れていたので軽量化という点で大いに助かってます。逆にまだ入れているプラグインは以下。
- Jetpack（アクセス解析、お問い合わせフォーム用）
- まろやかWeb拍手
- All in One SEO（OGP画像出すのに使ってた）
- セキュリティ系プラグイン
- ArkheBlocks（以前Arkheテーマを使っていた名残。ブログカードとかのちまちました移行が面倒だった…）
JetpackはSWELL公式では非推奨になっていますが、進行形で使っているため手放せず。まろやかWeb拍手も投稿一覧では表示されなくなったけど、それはそれでいいかなと思ってます。
それより投稿一覧、続きを読む機能が働かなくて抜粋文でネタバレが表示されてしまってます。タイトルにネタバレ有って書いてあるやつは抜粋を見ないようにお願いします！（無理だよなスマン！）SWELLで続きを読む機能を使う方法が分かる方いましたら教えてください！
ギャラリープラグインが使えない問題
何もかも良いSWELLですが、イラストをまとめてギャラリー表示するのだけは苦労しました。
SWELLを入れてからギャラリー系のプラグインがことごとく作動しなくなってしまいました。ショートコードでギャラリーを表示する系が特にダメで、何も表示されなくなりました。やっと作動しても動作がものすごく重かったりして、せっかく高速が売りのSWELLに対して申し訳ないな…と思ったり。
いいギャラリープラグインはないものかと探して、いくつか使えるものはあったんですが、LightboxとセットのギャラリープラグインだとSWELLの画像ポップアップ機能と二重になってしまい、良くない感じがしました。画像ポップアップ機能をオフにすれば大丈夫なんですが、それだとブログ記事の画像も拡大できなくなるのでちょっと避けたい。
そもそもSWELLの画像ポップアップ機能がふわっと高速で表示されてとても綺麗なので使わないのはもったいない…という思いがあり、なんとか画像を綺麗にギャラリー表示できて、かつLightboxはSWELL独自のものを使える、そんな都合のいいプラグインはないものか…！と探しました。
結果！WordPress標準搭載のギャラリーブロックが1番いいということがわかりました。
デフォルトのギャラリー、クソダサいから使ってこなかったんですが、なんとかCSSをいじって見栄えよくしようと奮闘したので、一応備忘録を残しておきます。（結局失敗したので試行錯誤の一部としてご覧いただければ！）
デフォルトギャラリーをカスタマイズしようとした
デベロッパツールと参考サイトを駆使してギャラリーをカスタマイズしました。以下がそのコード。
/*ギャラリーの最後の画像大きくしない*/
.wp-block-gallery.has-nested-images figure.wp-block-image {
flex-grow: 0;
}
/*ギャラリー要素間の余白詰めた*/
.wp-block-gallery {
--wp--style--gallery-gap-default: 4px;
}
.wp-block-gallery.wp-block-gallery-1 {
gap: 4px !important;
}
.wp-block-gallery.wp-block-gallery-2 {
gap: 4px !important;
}
/*ギャラリー画像の高さ（カラムごと）*/
.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image) {
height: 40vh;
}
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
height: 35vh;
}
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
height: 26vh;
}
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
height: 20vh;
}
/*ギャラリースマホの画像高さ*/
@media (max-width: 959px){
.wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image:not(#individual-image) {
height: 25vh;
}
.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image:not(#individual-image) {
height: 25vh;
}
.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image) {
height: 25vh;
}
.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image:not(#individual-image) {
height: 25vh;
}
}でも崩れる
はい。ダメでした。なぜか分かりませんがふとした瞬間に崩れます。ショートコードの代わりとしてブログパーツや再利用ブロックとしてギャラリーを呼び出そうとするのもダメでした。本当にWordPressはデフォルトのギャラリーブロックを何とかして…。
そもそもサムネイル表示なしで元画像がギュッとなってギャラリーに表示されてる感じもヤバいし、「正方形タイルっぽく見えればいいや」って適当比率でCSS書いた私も素人すぎるし、美しい安定感のあるギャラリーブロックからは程遠い。
ギャラリープラグインの試行錯誤
やはりプラグインに頼るしかないと思い、色々試しました。試したプラグインは以下です。
- Jetpackのタイルギャラリー
ギャラリーを表示させることは可能。しかしいかんせん動作クソ重なのでやめた。多分画像高速読み込みの機能とかがSWELLと競合してしまっている（SWELL公式でもJetpackは非推奨）。jetpackのタイルギャラリーかなり綺麗なので競合しないサイトで使ってみてほしい。
- Foo Gallery
このプラグインはギャラリー表示用のFoo Galleryと画像ポップアップ用のFoo Lightboxに分かれていて、Foo Lightboxを入れなければSWELLのポップアップ機能がつかえるのでは？と思ったがギャラリー自体が表示されなくてダメだった。ショートコードで表示させる系のプラグインは動作しない。
- Portfolio Gallery
これもショートコードで表示させるプラグインなので、同じ理由でダメだった。気に入ってたんだけどな。
- 10web
正式名称忘れてしまった。これはプラグインの使い方自体分からなかった。
- Next GEN Gallery
これも使い方分からず。有名なプラグインらしいけど調べても日本語の使い方がでてこない…
ここに来てギャラリーでSWELLの画像ポップアップ機能を使うのは諦めました。とにかく優先するべきは綺麗なギャラリーの表示！そしてLightBoxでふわっと拡大表示させること！なるべく軽い方法で！
最終的にKadence Brocksに辿り着く
最終的にギャラリープラグインではなく、ブロックの拡張プラグインである「KadenceBrocks」をインストールしました。これはブロック全体を拡張してくれるプラグインですが、その中に「AdvancedGallery」というブロックがあります。それでギャラリーを作りイラストを表示させることが出来ました。
ギャラリーは無料版でも6種類から選べて、メイソンリーやグリッド、スライド式などがあります。グリッドは比率を1:1や16:9などから好きに選べるのでかなり自由です。「リンク先」をメディアファイルにすると、訪問者がイラストをクリックした時にLightboxが動作するようになります。LightBoxの機能は搭載されていないので別途用意します。
LightBoxはGitHubの「baguetteBox.js」
こちらの記事がおおいに役立ちました。
CDN読み込みのコードをコピペしてfunctions.phpに貼りつけるだけ。JavaScriptなので比較的軽く、かつスワイプでイラストを眺めることができてすごくいい感じです。
完成！
良かった…イラストをギャラリー表示できた…！本当にKadenceBrocksに出会えなかったらSWELLでギャラリー表示するのを諦めていたので出会えて良かったです。これは固定ページで表示する場合の苦悩なので、投稿ページで1個1個絵日記的に絵を投げていく人には無関係の話なのですが…
あと今回は利用しませんでしたが、SWELLにはサポートフォーラムというのがあって分からないことは開発者さんに質問することができます。でもブログテーマから外れた悩みなので、相談しませんでした。今のところ解決できてるので良かった。
そんな感じでSWELL用の備忘録でした。