プラグイン UJS Group Blocks を theme.json 有効・無効の両方に対応しました
こんにちは、魚沼情報サービスの対馬です。
WordPress コアのグループブロックをカスタマイズしたものをブロックパターンとして登録してどこでも使えるようにしたプラグイン「UJS Group Blocks」を昨年9月に制作しました。
ブロックパターンの一例
例えば、このような斜線模様の枠付きのボックスを呼び出して簡単に使うことができます。
他にも選べるデザインがあり、今後も随時追加していく予定です。
その後、弊社が制作させていただいたサイトにこのプラグインをインストールしてお客様からご好評をいただいています。
プラグイン UJS Group Blocks について、詳しくは以下の記事をご覧ください。
theme.json とは？
私がウェブサイト制作に使用している WordPress テーマ Lightning がバージョン 15.* にアップデートして、theme.json が利用できるようになりました。
theme.json は WordPress のフルサイト編集に対応したブロックテーマ向けのファイルで、theme.json を利用することによって便利な WordPress の最新機能が使えるようになります。
Lightning はブロックテーマではなくクラシックテーマに分類されますが、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 有効化に対応できるようにしました。
ひとつのプラグインで theme.json 有効・無効のどちらでも使えるようになっています。
こんなちっぽけなプラグインでさえ、theme.json の有効・無効の両方に対応するのに手間がかかりました。両方に対応している Lightning ってすごいなぁ…。
サイト運営者プロフィール
- 魚沼情報サービス (新潟県南魚沼市)
-
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
» ご相談・お問い合わせはこちらからどうぞ
最新の投稿
お知らせ2023年12月8日年末年始休業のお知らせ
WordPress2023年11月21日WordPress サイト開設スターターパックを提供開始しました
WordPress2023年9月29日ノーコードでクエリーループに新着(NEW)バッジを表示できるようになった
HTML/CSS2023年9月28日CSS の clip-path で画像をクリップしてみた
WordPress サイト制作・カスタマイズ・サポートを承ります
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。
* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。
また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきます。
