2023年1月5日 / 最終更新日 : 2024年1月18日対馬俊彦 WordPress

プラグイン UJS Group Blocks を theme.json 有効・無効の両方に対応しました

こんにちは、魚沼情報サービスの対馬です。

WordPress コアのグループブロックをカスタマイズしたものをブロックパターンとして登録してどこでも使えるようにしたプラグイン「UJS Group Blocks」を昨年9月に制作しました。

ブロックパターンの一例

例えば、このような斜線模様の枠付きのボックスを呼び出して簡単に使うことができます。

他にも選べるデザインがあり、今後も随時追加していく予定です。

その後、弊社が制作させていただいたサイトにこのプラグインをインストールしてお客様からご好評をいただいています。

プラグイン UJS Group Blocks について、詳しくは以下の記事をご覧ください。

WordPress の「グループ」ブロックのカスタマイズ例

theme.json とは？

私がウェブサイト制作に使用している WordPress テーマ Lightning がバージョン 15.* にアップデートして、theme.json が利用できるようになりました。

theme.json は WordPress のフルサイト編集に対応したブロックテーマ向けのファイルで、theme.json を利用することによって便利な WordPress の最新機能が使えるようになります。

Lightning はブロックテーマではなくクラシックテーマに分類されますが、theme.json はクラシックテーマでも役に立つために Lightning 15.* 以降ではこのファイルを使えるようになりました。

theme.json で使える便利な機能については、以下のベクトルさんの製品更新情報に詳しく説明されています。

Lightning 15系アップデートでの theme.json 対応について

theme.json の有無による違い

グループブロックを CSS でカスタマイズしている場合、theme.json の影響を受ける可能性があります。

このファイルの有無によって出力される HTML が以下のように違っています。

theme.json なし

<div class="is-layout-constrained wp-block-group">
<div class="wp-block-group__inner-container">
<p>グループブロックに段落ブロックを配置してあります。</p>
</div>
</div>

theme.json あり

<div class="is-layout-constrained wp-block-group">
<p>グループブロックに段落ブロックを配置してあります。</p>
</div>

theme.json があると、上記のようにクラス名 .wp-block-group__inner-container のインナーコンテナが出力されなくなります。

いままでの theme.json なしの場合、インナーコンテナに対して CSS を当てて装飾することが多く、私はそういうカスタマイズをあちらこちらで行っていて、影響を受ける箇所があまりにも多く、こんなことになるなんて思っていなかったので、すべてを把握できていません。

私は、インナーコンテナがなくなってしまうという情報を最初に目にしたとき、ウヒャ～ッ!! と困り果ててしまったのですが、Lightning 15.* では theme.json の有効・無効を選べるようにしていただき、大変ありがたかったです。

theme.json 有効化に対応

既存のサイトは theme.json を有効化せずに運用しますが、新規制作するサイトではこのファイルを有効化しますので、先ほど説明したプラグイン UJS Group Blocks をバージョン 0.1.2 で theme.json 有効化に対応できるようにしました。

自作プラグイン UJS Group Blocks を theme.json に対応しました

ひとつのプラグインで theme.json 有効・無効のどちらでも使えるようになっています。

こんなちっぽけなプラグインでさえ、theme.json の有効・無効の両方に対応するのに手間がかかりました。両方に対応している Lightning ってすごいなぁ…。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら