カスタムテーマを作成する際、あるいは子テーマを編集する際、時に単一のコアブロック、またはテーマ全体のスタイルバリエーションで特定のスタイル機能を削除したり非表示にしたりする必要が出てきます。
これは単なる好みの問題ではなく、通常パフォーマンスの向上、デザインの一貫性の確保、よりシンプルなユーザーインターフェースなどの実用的なメリットが期待できます。
スタイル機能を削除または非表示する方法は、要件やスキルレベルによっていくつかあります。今回は、WordPressブロックテーマ「Twenty Twenty-Five」の子テーマを使った例を使ってその方法をご紹介していきます。
無効化の方法はブロックやテーマの登録方法によって異なる
ブロックまたはテーマのスタイルバリエーションの登録を解除する場合、すべてを無効にするのか一部を無効にするのか、また削除してしまうのか、単にインターフェースで非表示するのかを区別します。この違いは重要です。
ブロックを無効化する方法を習得するには、そのブロックがどのように登録されているかを確認することから始めます。たとえば、JavaScriptで登録されたコアブロックは、その言語で無効化するのがベストです。対照的にテーマスタイルのバリエーションはPHPで登録されるため、異なるアプローチが必要になる可能性があります。
今回はカスタムブロックの無効化は取り上げませんが、操作方法はブロックの登録方法に依存します。
スタイルバリエーションとは？
WordPressでは、ブロックスタイルとテーマスタイルのバリエーションが区別されます。前者はボタンブロックの「塗りつぶし」や「アウトライン」のような特定のブロックの視覚的なバリエーション。このバリエーションはコア、theme.json、block.json（またはプラグイン）に登録されます。
テーマスタイルのバリエーションは、色、タイポグラフィ、レイアウトなどに対するもので、固有のtheme.jsonファイルで定義されます。これにより、ユーザーはテーマを変更することなくサイトの外観を切り替えることができます。Twenty-Twenty Fiveにはデフォルトのスタイルに加えて、8つのスタイルバリエーションが付属しています。
まずはスクリプトのエンキュー
子テーマで作業する場合は、適切にスクリプトをエンキューすることが重要です。
今回の例では、カスタムunregister-blocks.jsファイルをエンキューすることから始めます。
// 親スタイルと子スタイルをエンキュー
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// WordPress管理画面でスタイルをエンキュー
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// ブロックエディタ用にJavaScriptをエンキュー
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});上記のように、js/unregister-blocks.jsにJavaScriptファイルがあり、この記事で使用するスクリプトがすべて含まれています。
なお、これは親テーマのURLを返すため、JavaScriptファイルにはget_template_directory_uri()を使用しないでください。
タイミングが肝心
WordPressでPHPを扱う場合、フックがいつ実行するかを把握することが非常に重要です。基本的な読み込みの順序はwp-settings.phpから始まります。
-
定数
-
グローバル変数
-
コアコンポーネント
-
プラグインの読み込み
-
テーマの読み込み
カスタム関数をどのタイミングで実行すべきか見極めることは、WordPress開発において特に難しく厄介な作業のひとつです。
コアブロックスタイルの無効化
コアブロックのスタイル、例えばボタンブロックのアウトラインスタイルを削除したいとします。
塗りつぶしスタイルとアウトラインボタンのスタイルは、Twenty Twenty-Fiveのtheme.jsonファイルに登録されているため、JavaScriptを使用して処理を行います。
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});この結果、ツールバーとサイドバーのアウトラインスタイルが削除されます。
コアブロックの無効化
あるブロックのすべてのスタイルを削除したい場合は、単にスタイルを無効にするよりも、ブロック（または複数のブロック）を無効にしてしまう方が効率的です。インターフェースに表示させないブロックを削除することで、パフォーマンスも向上します。
以下は、引用ブロックを削除する例です。
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});引用ブロックがすでに使用されている状況でスクリプトを実行する場合は、エディターにブロックが使用できないという旨のメッセージが表示されますが、フロントエンドではこれまで通りコンテンツがレンダリングされます。ユーザーはブロックがフォールバックする生のHTMLビューを編集または変換することができます。
そのままにするか、HTMLに変換することでコンテンツとスタイルを保持することができます。
複数のブロックを無効化する場合、例えば引用ブロックと見出しブロックを削除するには、foreachループを実行します。
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});このスクリプトで他のブロックも簡単に削除できます。
テーマのスタイルバリエーションの無効化
ブロックテーマのスタイルバリエーションの良い点は、以前は必要だった手動登録が不要であることです。
代わりに子テーマのルート、または/stylesディレクトリに適切な書式のtheme.jsonファイルを置くだけで、WordPressのコアによって自動的に読み込まれます。
スタイルバリエーションを登録解除する関数が必要だと思われますが、ブロックテーマはブロックスタイルと同様に、不要なスタイルバリエーションを削除するデフォルトのUIが存在しません。
まずは一番簡単な方法から、順を追って見ていきましょう。スタイルバリエーションをブロックテーマに簡単に追加できるということは、逆にその性質上、無効化が難しい理由にもなっています。解決策はいくつかあります。
テーマのスタイルバリエーションを削除する
例えば、Twenty Twenty-Fiveのようなブロックテーマで、Eveningスタイルのバリエーションを削除するとします。
子テーマを使用していない場合、最も直接的な方法は親テーマから対応する.jsonファイルを削除することです。/stylesディレクトリから01-evening.jsonを削除すると、完全にEveningスタイルが削除されます。
しかしこのファイルは次のテーマ更新後に元に戻る可能性が高いため、この方法はおすすめできません。
したがって、子テーマを使用してスタイルバリエーションを上書きする方が賢明です。これは同じパスに同じファイル名の空白ファイルを作成すればOKです。01-evening.jsonを上書きするには、子テーマの/stylesディレクトリ内に01-evening.jsonという空のファイルを追加します。
なお、この方法ではバリエーションを「削除」したことにはなりません。ファイルは依然として認識されますが、ファイルには設定が含まれていないため、バリエーションはUIで見えなくなり、機能しなくなるというカラクリです。子テーマが親テーマの後に読み込まれる前提で機能するため、子テーマが正しく設定されているかどうかを確認することをおすすめします。
CSSでバリエーションを隠す
CSSを使ってUIからスタイルバリエーションを隠すことも可能です。メモリやREST APIからは削除されないため、フロントエンドの肥大化を抑えることはできませんが、サイトエディターで選択できなくなります。
以下は、Eveningスタイルバリエーションを非表示にする例です。
/* サイトエディターで特定のグローバルスタイルのバリエーションを非表示 */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}これは、「エディター」＞「スタイル」＞「スタイル一覧へ」で動作します。Eveningのスタイルを使用していたサイトでは、そのバリエーションが無効になることはありませんが、再度選択したり切り替えたりすることはできなくなります。
JavaScriptでバリエーションを隠す
もう1つの方法として、JavaScriptを使用してバリエーションを非表示にすることも。この場合は、wp_add_inline_scriptを使用してPHPから注入します。スタイルのバリエーションはPHPで登録されるため、やや強引な方法にはなりますが、UIを確実に操作する唯一の実用的な方法である場合もあります。
動作例は以下の通り。
// サイトエディターのUIで特定のスタイルバリエーションを非表示にするためにJSを注入
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// 5秒後にインターバルを停止
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});このスクリプトは、DOMが読み込まれるのを待ってから、バリエーションをスキャンして非表示にするのを数秒間繰り返します。これは壊れやすいという難点がありますが（タイミングとクラス名に依存するため）、ファイルシステムに触れることなく特定のバリエーションを制御する必要がある場合には機能します。
まとめ
サイトをクリーンな状態に保ち、使用しない要素を排除することは、ユーザーエクスペリエンスの向上、そして多くの場合、サイトパフォーマンスの改善につながります。
今回ご紹介した例は、スタイル バリエーションの登録を解除するための堅実なアプローチになります。また、登録解除がややこしく感じる理由も理解できたかもしれません。
カスタムテーマの構築とテストに、高速で信頼性に優れたWordPress向けサーバーをお探しなら、ぜひKinstaをお試しください。開発者向け機能群、ステージング環境、およびパフォーマンスに最適化されたインフラストラクチャで、ローカル開発から本稼働までのワークフローをサポートしています。
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
