現代WordPressテーマ開発の基本概念
現代のWordPressテーマアーキテクチャは、従来の方法とは大きく異なります。最も重要な変化は、ブロックテーマ（Block Theme）とフルサイトエディタ（Full Site Editor: FSE）の全面的な採用です。これにより、テーマの外観やレイアウト——ヘッダー、フッター、記事の内容に至るまで——は、Gutenbergエディタ内の「ブロック」を使って構築および編集することができるようになり、複雑なPHPテンプレートを直接記述する必要がなくなりました。
現代テーマのコアファイル構造が根本的に簡素化されました。その中で最も重要なテンプレートファイルは…theme.jsonそれは、テーマのスタイル、カラーパレット、レイアウトなどのグローバル設定を定義しています。もう一つ非常に重要なファイルは…index.htmlそれは従来のものに取って代わりました。index.phpデフォルトのテンプレートとして、エディタで解析可能な静的なHTMLブロックマークアップを使用してページの骨格を構築します。style.cssファイルはまだ存在しますが、主にトピック情報の宣言に使用されています。ただし、ほとんどのCSSスタイル定義は別の場所に移されています。theme.jsonまたは、エディタによって管理されます。
後方互換性を維持するために、WordPressはテーマのルートディレクトリ内に以下のファイルが存在するかをチェックします：block-templatesまたはtemplatesフォルダーです。これらのフォルダーには、ブロックベースのHTMLテンプレートファイルが保存されています。例えば…single.htmlまたはpage.htmlこれらはPHPテンプレートファイルよりも優先して使用されます。また、テーマからのスタイルやフロントエンドリソースの処理方法は、以下の点に依存しています：wp_enqueue_styleとwp_enqueue_script関数は、通常、メインファイル内にあります。functions.phpそこで登録を行い、順番を待ちます。
推薦図書 WordPressテーマ開発入門から上級者へ：カスタムウェブサイトの構築方法を手取り足取り教えます。
この考え方の変化を理解すること――つまり、固定されたPHPテンプレートの作成から、JSONやブロックタグを使ってスタイルや構造を定義する方法への移行――は、現代のテーマ開発をマスターするための第一歩です。
テーマのコアファイルの作成と設定
現代風のWordPressテーマを作成するには、まず以下の手順が必要です：wp-content/themesディレクトリ内に新しいトピックフォルダを作成してください。ブロックトピックであっても同様です。style.cssこのファイルは引き続き「身元証明」用のファイルとして必要であり、その上部にあるコメントブロックには特定の情報を含める必要があります。
/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/その直後に、現代的なテーマに合った「脳」を作成する必要があります。theme.jsonこのJSONファイルはテーマのルートディレクトリにあり、グローバルなスタイルやテーマ設定を一元管理するために使用されます。このファイルを通じて、レイアウトシステム（フォントサイズ、フォントファミリーなど）、パレット、ブロックのデフォルトスタイルなどを定義することができます。プラグインやサブテーマでもこの設定をさらに上書きして、スタイルをカスタマイズすることが可能です。基本的な構造は以下の通りです：theme.json構造は以下の通りです：
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "name": "黑色", "slug": "black", "color": "#000000" },
{ "name": "白色", "slug": "white", "color": "#ffffff" }
]
},
"typography": {
"fontSizes": [
{ "name": "小", "slug": "small", "size": "14px" },
{ "name": "中", "slug": "medium", "size": "20px" }
]
}
},
"styles": {
"color": {
"background": "white",
"text": "black"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
}
},
"customTemplates": [
{
"name": "宽幅页面",
"title": "宽幅页面",
"postTypes": [ "page" ]
}
]
}トピックのメインテンプレートindex.htmlデフォルトのページ構造が定義されています。この構造は、エディタで認識可能なHTMLコメントで囲まれたブロックタグのみで構成されています。例えば：
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->このような構造では、ヘッダー、メインコンテンツエリア、フッターが明確に区分されており、それらをつなぐための仕組みも用意されています。wp:post-contentブロックを使用して記事のコンテンツを動的に読み込みます。最後に、テーマのルートディレクトリに「Template Parts」というディレクトリを作成する必要があります。partsそして、その中に置く。header.htmlとfooter.htmlなどのコンポーネントファイルです。
推薦図書 2026年の人気入門ガイド：ゼロから自分の最初のWordPressテーマを作成する方法。
テンプレートとテンプレートコンポーネントを使用してページを構築する
ブロックテーマでは、ページのレイアウト構造は主にテンプレート（Templates）とテンプレートパーツ（Template Parts）によって構築されます。テンプレートは、特定のタイプのページ（例えば単一の記事やアーカイブページ）の全体的な枠組みを定義するために使用されます。一方、テンプレートパーツとは、ヘッダーやフッターなどの再利用可能なモジュールのことです。
テンプレートファイルは通常、テーマのディレクトリ内に保存されています。templatesフォルダ内にあります。WordPressは、異なるクエリタイプに応じて自動的に適切なテンプレートファイルを選択します。例えば、single.html単一の記事を表示するために使用されます。page.html静的ページ用です。home.htmlまたはindex.htmlブログのホームページに使用できます。theme.jsonのcustomTemplates一部のデータシートではカスタムテンプレートが定義されており、ユーザーはページエディタ内でそれらのテンプレートから選択することができます。
テンプレートコンポーネントは以下の場所に保存されています：partsフォルダ内にあるこのファイルにより、コードの再利用性とメンテナンスの利便性が大幅に向上しました。ヘッダーファイルを作成しましょう。header.htmlトップエリアは、サイトタイトルバーやナビゲーションバーなどを使って構築することができます。フッターファイルも作成してください。footer.html著作権情報や小道具（ツール）を表示するためのエリアとして使用できます。
典型的header.html以下のようになるかもしれません：
<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
<!-- wp:site-title /-->
<!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->この例では、wp:navigationブロックは、その…（The block is…）refこの属性は、「外観」→「エディタ」で作成・保存されたナビゲーションメニュー（IDは4）を参照しています。これは、サイト全体でコンテンツと構造を分離するという機能の強力さを示しています。メインテンプレート内でこれらのコンポーネントを参照することにより、それらをページに挿入するには、その方法を使用します。
より複雑なレイアウトについては、以下の方法を利用することができます：wp:group、wp:columns、wp:query行、列、および繰り返し処理される内容を構築するために、ブロックを使用します。例えば、wp:queryこのブロックでは、最新の記事を動的に表示することができます。これは従来のテーマにおける「メインループ」に相当しますが、現在ではすべてビジュアルエディタを通じて設定されています。
推薦図書 ゼロからマスターへ：WordPressテーマ開発の完全ガイドと実践トレーニング。
関数ファイルを通じて機能やスタイルを追加する
たとえブロックテーマが多くの部分で他の要素に依存しているとしても…theme.jsonHTMLテンプレートとは異なりますが…functions.phpファイルは依然として拡張テーマ機能の核心です。これは戻り値を持たないPHPファイルであり、機能の追加、スタイルスクリプトの登録、テーマサポートの定義などに使用されます。
基本的な操作の一つは、テーマのスタイルシートやスクリプトを登録し、キューに入れることです。たとえスタイルが主に…theme.json管理さん、おそらく追加のカスタムCSSが必要になるでしょう。
function my_modern_theme_setup() {
// 添加对特定功能的支持，例如自定义标志
add_theme_support('custom-logo');
// 通过区块编辑器添加主题样式
add_theme_support('wp-block-styles');
// 添加对全站编辑器的支持
add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');
function my_modern_theme_scripts() {
// 排队主题的主样式表
wp_enqueue_style(
'my-modern-theme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get('Version')
);
// 排队编辑器样式
add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');functions.phpそれはカスタム機能を追加するのにも最適な場所です。例えば、以下のように利用することができます：register_block_styleこの関数は、既存のコア要素（例えば段落など）にカスタムの視覚的なバリエーションを登録し、ユーザーがエディタの「スタイル」パネルで選択できるようにします。
// 为段落块注册一个“特别提示”样式
register_block_style(
'core/paragraph',
array(
'name' => 'notice',
'label' => __( '特别提示', 'my-modern-theme' ),
'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
)
);さらに、フック（hook）なども使用することができます。wp_head、wp_footer）カスタムコードを挿入するか、または以下の方法で…add_filterデフォルトのクエリ動作や出力内容などを変更したい場合、複雑なカスタマイズが必要な場合には、小規模なプラグインを作成することがよりモジュール化された解決策となるかもしれません。
テストとデバッグに関するトピック
開発が完了した後、テーマを全面的にテストすることが非常に重要です。まず、ローカル環境または一時的な環境でテーマを有効にし、フロントエンドページの基本レイアウト、レスポンシブデザイン、すべてのコア要素（タイトル、段落、画像、ギャラリー、ボタンなど）の表示が正常かどうかを確認します。また、ナビゲーションメニューやリンクが正しく機能しているかも確認する必要があります。
次に、Gutenbergエディタを使って詳細なテストを行う必要があります。新しいページや記事を作成し、さまざまなブロックを使って複雑なレイアウトを構築してみてください。ブロックのツールバーや設定パネルが正常に機能しているかを確認し、カスタムスタイル（例えばプロパティを通じて）の設定も試してみてください。theme.json定義したパレットやフォントサイズがブロックに正しく適用されているかを確認してください。特に、全サイト用のエディタ（「外観」→「エディタ」）を使って、ヘッダー、フッター、ホームページのテンプレートなどを変更してみてください。変更内容を保存した後、それがフロントエンドに正しく反映されるかを確認してください。
デバッグは現代の開発において非常に重要なプロセスです。ブラウザの開発者ツール（F12キー）を開いて、JavaScriptのエラーやCSSの競合がないかを確認してください。wp-config.php設定内容define('WP_DEBUG', true);PHPの警告やエラーをページ上に表示することで、コードの問題を迅速に特定することができます。また、テーマがWordPressのコーディング基準に準拠しているかを確認し、コンソール内のW3C検証ツールでHTML構造に誤りがないかをチェックしてください。
最後に、異なるブラウザ（Chrome、Firefox、Safari、Edge）やデバイス（デスクトップ、タブレット、スマートフォン）でクロスプラットフォームの互換性テストを行い、すべてのユーザーが一貫した体験を得られるようにします。
概要
現代のWordPressテーマ開発は、コンセプトの革新と言えます。それは、プロセス指向のPHPテンプレートの作成から、より高度で柔軟なテーマ開発手法へと移行しているのです。theme.jsonブロックタグとウェブサイト全体の編集を核としたデクラレーション型開発です。開発者はこれらを熟知している必要があります。theme.jsonグローバルなスタイルを定義するために設定を使用し、HTMLブロックテンプレートを使用してページ構造を構築し、そして…functions.php機能が強化されました。このモードにより、カスタムレイアウトのハードルが大幅に下がり、コンテンツクリエイターには大きなデザインの自由度が与えられますが、同時に開発者にはブロックエディターシステムを深く理解することが求められます。上記のコアスキルの道筋に従うことで、柔軟で強力、かつ将来に向けたWordPressテーマを構築することができるでしょう。
FAQ よくある質問
###の開発ブロックテーマには、PHPの知識が必要ですか？
はい、まだ必要です。ページの主要な構造はHTMLテンプレートによって定義されていますが、functions.phpファイルは、トピック機能の追加、スタイルスクリプトの登録、フックやフィルターを使用した高度なカスタマイズにとって依然として不可欠です。さらに、カスタムクエリに基づいた動的なテンプレートコンポーネントの作成や複雑なビジネスロジックの処理を行う際には、PHPの知識が非常に重要になります。
ブロックテーマと従来のテーマは共存できるのでしょうか？
はい。WordPressはテーマの種類を自動的に判断します。もしテーマのルートディレクトリに必要なファイルが含まれていれば、問題なく動作します。theme.jsonファイルとtemplates/partsフォルダ内にあるブロックテンプレートは、WordPressによってブロックテーマとして認識され、サイト全体での編集機能が有効になります。しかし、これらのファイルが存在していても、システムは予備として従来のテーマのPHPテンプレートシステムを引き続き使用します。もしリクエストに対応するブロックテンプレートが存在しない場合、システムは自動的に対応するPHPテンプレートを使用するように切り替わります。single.php）。
如何为我的块主题添加自定义CSS
主に3つの方法があります。最も推奨される方法は、以下の通りです：theme.jsonファイルのstyles一部のCSSは、全体に適用されるものや特定のブロックにのみ適用されるものがあります。次に、テーマ内でこれらのCSSを設定することができます。style.cssファイル内に追加のスタイルルールを記述してください。より動的な処理や特定のページのスタイルについては、そちらでも対応が可能です。functions.phpここで使用されているのはwp_add_inline_style関数内でインラインで追加するか、またはブロックに直接カスタムスタイルを登録します。
全サイト編集モードは、既存のウェブサイトにリスクをもたらすのでしょうか？
既存のコンテンツを持つウェブサイトで、新しいブロックテーマに切り替える場合は慎重に行う必要があります。まずはテスト環境（ローカル開発環境や仮想サイトなど）でテーマの完全なテストを行い、新しいテーマで既存のコンテンツが正しく表示され、レイアウトに乱れが生じないことを確認してください。変更する前には、ウェブサイト全体（ファイルとデータベースを含む）を必ずバックアップしておいてください。全サイト編集機能は非常に強力ですが、直接変更されるのはテンプレートであり、操作を誤るとそのテンプレートを使用しているすべてのページに影響を与える可能性があります。
次はどうする？
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。
日本語