WordPressテーマを自作したいと思っても、「どのファイルから作ればよいの？」「PHPが分からないと無理？」と迷いますよね。
初めてのテーマ自作には、HTML形式のテンプレートをブロックで組み立てる「ブロックテーマ」がおすすめです。最小構成から始めれば、PHPを書かなくても、WordPressが認識するオリジナルテーマを作れます。
この記事では、練習用のブロックテーマをローカル環境で作り、トップページをパソコンとスマートフォンで表示するところまで進めます。掲載コードは実際にローカルWordPressへ適用し、表示結果を確認しています。
WordPressテーマを自作する前の基礎知識
WordPressテーマは、記事や固定ページの内容を、どのような見た目でブラウザへ表示するか決めるファイルの集まりです。色や文字だけでなく、ヘッダー、フッター、投稿ページ、一覧ページの構造も管理します。
ブロックテーマとクラシックテーマの違い
| 比較項目 | ブロックテーマ | クラシックテーマ |
|---|---|---|
| テンプレート | ブロックマークアップを記述したHTMLファイル | PHPとHTMLを組み合わせたPHPファイル |
| 全体設定 | theme.jsonを中心に設定 | functions.phpやCSS、テーマ独自設定を使用 |
| 編集画面 | サイトエディターでヘッダーなども編集できる | カスタマイザーやテーマ独自画面を使う |
| 初心者の始め方 | 標準ブロックで小さく作り始めやすい | PHPとテンプレートタグの学習が必要 |
この記事では、WordPressがテーマ開発の中心として案内しているブロックテーマを作ります。クラシックテーマを改修したい場合は、同じファイル構成にはならないため注意してください。
テーマとテンプレートの違いを先に整理したい場合は、次の記事を確認してください。
作業はローカル環境で行う
公開中のサイトで、作成途中のテーマを有効化してはいけません。テンプレートに誤りがあると、ページが表示されなくなったり、必要なリンクが消えたりします。
- ローカルWordPress
- コードエディター
- Chromeなどのブラウザ
- テーマフォルダーを操作できる環境
この4つを用意してから始めましょう。公開サイトへ反映するときは、バックアップとステージング環境での確認も必要です。
今回作るブロックテーマ
今回は、ネイビーのヘッダー、淡い青のメインビジュアル、3つの特徴カードを持つトップページを作ります。テーマ名はBeginner Block Theme、フォルダー名はbeginner-block-themeです。
最初に作るファイル構成は次のとおりです。
style.css：テーマ名など、WordPressがテーマを認識する情報theme.json：配色、文字、コンテンツ幅など、テーマ全体の設定templates/index.html：ほかの専用テンプレートがない場合に使う基本テンプレートtemplates/front-page.html：サイトのトップページ用テンプレートparts/header.htmlとparts/footer.html：複数ページで共有する部分
WordPress公式資料では、ブロックテーマが動作するための最低限のテンプレートとしてtemplates/index.htmlが説明されています。theme.jsonは必須ではありませんが、配色や編集機能を管理するため、実際の制作ではほぼ必要です。
ブロックテーマを自作する手順
テーマフォルダーを作る
ローカルWordPressのwp-content/themesを開き、その中にbeginner-block-themeフォルダーを作ります。
フォルダー名は半角英数字とハイフンで付けると安全です。空白、日本語、ほかのテーマと同じ名前は避けてください。
style.cssへテーマ情報を書く
テーマフォルダー直下にstyle.cssを作り、次のコードを記述します。
/*
Theme Name: Beginner Block Theme
Author: WP-LOAD
Description: 初めての自作練習用ブロックテーマ
Version: 1.0.0
Text Domain: beginner-block-theme
*/Theme Nameが管理画面に表示されるテーマ名です。コメントの開始記号/*と終了記号*/を削除すると、テーマ情報として正しく読み込めません。
theme.jsonで色とレイアウトを設定する
テーマフォルダー直下にtheme.jsonを作ります。このファイルでは、サイトエディターで使える色、本文幅、文字、余白などをまとめて設定できます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"appearanceTools": true,
"layout": {
"contentSize": "760px",
"wideSize": "1160px"
},
"color": {
"palette": [
{ "slug": "navy", "color": "#16324f", "name": "ネイビー" },
{ "slug": "blue", "color": "#2563eb", "name": "ブルー" },
{ "slug": "light", "color": "#eff6ff", "name": "ライトブルー" },
{ "slug": "white", "color": "#ffffff", "name": "ホワイト" }
]
},
"typography": {
"fluid": true
}
},
"styles": {
"color": {
"background": "#f8fafc",
"text": "#1f2937"
},
"spacing": {
"blockGap": "1.5rem"
},
"typography": {
"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"lineHeight": "1.8"
},
"elements": {
"link": {
"color": { "text": "#2563eb" }
}
}
},
"templateParts": [
{ "name": "header", "title": "ヘッダー", "area": "header" },
{ "name": "footer", "title": "フッター", "area": "footer" }
]
}contentSizeは通常の本文幅、wideSizeは「幅広」配置の最大幅です。paletteに登録した色は、ブロックエディターのカラーパレットにも表示されます。
JSONでは、最後の項目の末尾にカンマを付けられません。引用符の閉じ忘れや余分なカンマがあると、設定全体を読み込めなくなるため注意してください。
ヘッダーのテンプレートパーツを作る
partsフォルダーを作り、その中にheader.htmlを追加します。
<!-- wp:group {"align":"full","backgroundColor":"navy","textColor":"white","style":{"spacing":{"padding":{"top":"24px","bottom":"24px","left":"24px","right":"24px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-navy-background-color has-text-color has-background" style="padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px">
<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide">
<!-- wp:site-title {"level":0,"style":{"typography":{"fontSize":"1.5rem","fontWeight":"700"}}} /-->
<!-- wp:navigation {"textColor":"white","overlayBackgroundColor":"navy","overlayTextColor":"white"} /-->
</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->site-titleブロックは「設定」→「一般」に登録したサイト名を表示します。navigationブロックはナビゲーションを表示し、スマートフォンでは開閉メニューへ切り替わります。
フッターのテンプレートパーツを作る
同じpartsフォルダーへfooter.htmlを作ります。
<!-- wp:group {"align":"full","backgroundColor":"navy","textColor":"white","style":{"spacing":{"padding":{"top":"32px","bottom":"32px","left":"24px","right":"24px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-white-color has-navy-background-color has-text-color has-background" style="padding-top:32px;padding-right:24px;padding-bottom:32px;padding-left:24px">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">© Beginner Block Theme</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->まずは表示を確認するため、著作権表記を固定文字で記述しています。実際のテーマではサイト名ブロックやPHPによる年表示など、運営方法に合う形へ調整します。
基本のindex.htmlを作る
templatesフォルダーを作り、その中にindex.htmlを追加します。専用テンプレートが見つからないとき、WordPressはこのファイルへ戻って表示します。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"64px","bottom":"64px","left":"24px","right":"24px"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="padding-top:64px;padding-right:24px;padding-bottom:64px;padding-left:24px">
<!-- wp:query-title {"type":"archive","showPrefix":false} /-->
<!-- wp:query {"queryId":1,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:query-pagination-previous /-->
<!-- wp:query-pagination-next /-->
<!-- /wp:query-pagination -->
</div>
<!-- /wp:query -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->template-partブロックで、先ほど作ったヘッダーとフッターを読み込みます。queryブロックは投稿を取得し、post-template内のタイトルと抜粋を記事ごとに繰り返します。
トップページのfront-page.htmlを作る
templatesフォルダーへfront-page.htmlを追加します。トップページでは、このファイルがindex.htmlより優先されます。
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"default"}} -->
<main class="wp-block-group">
<!-- wp:group {"align":"full","backgroundColor":"light","style":{"spacing":{"padding":{"top":"88px","bottom":"88px","left":"24px","right":"24px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-light-background-color has-background" style="padding-top:88px;padding-right:24px;padding-bottom:88px;padding-left:24px">
<!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"clamp(2rem, 6vw, 4rem)","lineHeight":"1.25"}}} -->
<h1 class="wp-block-heading has-text-align-center" style="font-size:clamp(2rem, 6vw, 4rem);line-height:1.25">はじめての<br>ブロックテーマ</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">WordPressのブロックで、読みやすいサイトを作ります。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons">
<!-- wp:button {"backgroundColor":"blue"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-blue-background-color has-background wp-element-button" href="#features">特徴を見る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
</div>
<!-- /wp:group -->
<!-- wp:group {"anchor":"features","style":{"spacing":{"padding":{"top":"72px","bottom":"72px","left":"24px","right":"24px"}}},"layout":{"type":"constrained"}} -->
<div id="features" class="wp-block-group" style="padding-top:72px;padding-right:24px;padding-bottom:72px;padding-left:24px">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">このテーマの特徴</h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column {"style":{"border":{"radius":"16px"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"}}},"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background" style="border-radius:16px;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">シンプル</h3><!-- /wp:heading --><!-- wp:paragraph --><p>必要なファイルから始めるため、役割を追いやすい構成です。</p><!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"radius":"16px"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"}}},"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background" style="border-radius:16px;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">編集しやすい</h3><!-- /wp:heading --><!-- wp:paragraph --><p>サイトエディターから色やレイアウトを調整できます。</p><!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"border":{"radius":"16px"},"spacing":{"padding":{"top":"28px","bottom":"28px","left":"28px","right":"28px"}}},"backgroundColor":"white"} -->
<div class="wp-block-column has-white-background-color has-background" style="border-radius:16px;padding-top:28px;padding-right:28px;padding-bottom:28px;padding-left:28px"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">スマホ対応</h3><!-- /wp:heading --><!-- wp:paragraph --><p>標準ブロックが画面幅に合わせて並び方を調整します。</p><!-- /wp:paragraph --></div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->見出しのclamp()は、画面幅に合わせて文字サイズを変えながら、最小値と最大値を超えないようにするCSS関数です。3つのカラムは、画面が狭くなるとWordPressの標準スタイルで縦並びになります。
自作テーマをインストールして有効化する
テーマフォルダーをwp-content/themesへ直接作った場合は、管理画面の「外観」→「テーマ」を開くとBeginner Block Themeが表示されます。
別のローカル環境へ入れる場合は、beginner-block-themeフォルダーをZIP圧縮し、次の手順で追加します。
- 「外観」→「テーマ」→「新しいテーマを追加」を開きます。
- 「テーマのアップロード」を押します。
beginner-block-theme.zipを選び、「今すぐインストール」を押します。- インストール完了後にプレビューします。
- 表示に問題がなければ「有効化」を押します。
「スタイルシートが見つかりません」と表示された場合は、ZIPの中に余分な親フォルダーがあり、WordPressがstyle.cssを見つけられない可能性があります。ZIPを開き、テーマフォルダー直下にstyle.cssがあるか確認してください。
掲載コードを適用した表示結果
ここまでのファイルをローカルWordPressへインストールし、実際にChromeで表示しました。まずはパソコン表示です。
ヘッダーにはサイト名とナビゲーション、中央にはメイン見出しとボタン、その下には3つの特徴カードが横並びで表示されています。
次は、幅390pxのスマートフォン表示です。
ナビゲーションはメニューボタンへ変わり、3つのカードは縦並びになりました。横スクロールや画像切れがないことも確認しています。
テーマをページ別に拡張する方法
トップページが表示できたら、ページの種類に合わせたテンプレートを少しずつ追加します。
| ファイル | 主な用途 |
|---|---|
templates/single.html | 投稿の個別ページ |
templates/page.html | 固定ページ |
templates/archive.html | カテゴリーや日付などの一覧 |
templates/search.html | 検索結果 |
templates/404.html | 存在しないURLを開いたとき |
WordPressは、表示するURLに合うテンプレートを優先順に探し、見つからなければindex.htmlへ戻ります。この仕組みをテンプレート階層と呼びます。
すべてを一度に作る必要はありません。まずindex.htmlで共通表示を作り、投稿ページ、固定ページ、404ページの順に追加すると、どのファイルが表示へ影響するか理解しやすくなります。
サイトエディターで調整した内容に注意する
ブロックテーマを有効化すると、「外観」→「エディター」からテンプレートやスタイルを画面上で変更できます。
ただし、サイトエディターで保存したテンプレートはデータベースに保存され、テーマ内のHTMLファイルより優先される場合があります。ファイルを直したのに表示が変わらないときは、サイトエディター側に保存済みの変更が残っていないか確認してください。
- ファイルで配布する初期デザイン
- 管理画面で運営者が行うカスタマイズ
この2つを分けて考えると、変更が反映されない原因を探しやすくなります。
WordPressテーマ自作でよくある失敗
テーマが管理画面に表示されない
style.cssの場所とテーマヘッダーを確認します。style.cssはテーマフォルダー直下に置き、Theme Nameを正確に記述してください。
有効化しても白い画面になる
templates/index.htmlがない、ファイル名の大文字と小文字が違う、ブロックコメントが閉じられていない、といった原因が考えられます。
最初はindex.htmlへ見出しブロック1つだけを書き、表示できてからヘッダーやクエリを追加すると原因を切り分けやすくなります。
theme.jsonの設定が反映されない
JSONの構文エラーを確認します。コードエディターのJSON検証や、$schemaによる入力補助を使うと、余分なカンマやプロパティ名の誤りを見つけやすくなります。
サイトエディターで保存したスタイルが、テーマのtheme.jsonより優先されている場合もあります。別の新規サイトでテーマを有効化して比べる方法も有効です。
公開サイトで直接編集してしまう
編集途中のエラーが読者にも見えてしまいます。ローカル環境で作り、パソコンとスマートフォン、投稿、固定ページ、一覧、404ページを確認してからステージング環境へ移します。
自作テーマを公開する前の確認項目
- 見出しが順番どおりで、
main、header、footerの役割が分かれている - キーボードでメニューやリンクを操作できる
- 文字色と背景色に十分なコントラストがある
- パソコンとスマートフォンで横スクロールが発生しない
- 長いタイトル、画像なしの記事、長いURLでも崩れない
- 投稿、固定ページ、一覧、検索、404ページを確認した
- WordPress本体やPHPのデバッグログにエラーがない
- ライセンス、翻訳、スクリーンショットなど配布条件を確認した
自分のサイトだけで使う場合と、WordPress.orgのテーマディレクトリで配布する場合では必要な確認が異なります。配布する場合は、Theme Handbookの公開手順と審査要件を確認してください。
WordPressテーマ自作についてよくある質問
PHPを知らなくてもテーマを作れますか？
この記事のブロックテーマは、PHPを書かなくても作れます。ただし、独自のデータ取得や管理機能を追加するときはPHPが必要になる場合があります。まず標準ブロックで作り、必要になった機能だけ学ぶ進め方がおすすめです。
既存テーマを少し変えるだけでも自作が必要ですか？
色や余白の調整だけなら、サイトエディターや追加CSSで足りる場合があります。既存テーマのファイルを変更したい場合は、更新で変更を失わないよう子テーマを検討してください。
functions.phpは必要ですか？
今回の最小ブロックテーマには必要ありません。独自の処理、機能、アセット読み込みなどをPHPで追加するときに作成します。デザインと無関係な重要機能は、テーマではなくプラグインへ分けることも検討しましょう。
自作テーマを別サイトへ移せますか？
テーマフォルダーをZIP圧縮すれば、別のWordPressへインストールできます。ただし、サイトエディターで保存した変更はデータベース側にあるため、テーマファイルだけでは移らない場合があります。配布用ファイルへ反映すべき変更か確認してください。
まとめ
WordPressテーマを初めて自作するなら、style.css、theme.json、templates/index.htmlからブロックテーマを作ると、各ファイルの役割を理解しやすくなります。
基本表示ができたら、ヘッダーとフッター、トップページ、投稿ページなどを1つずつ追加しましょう。公開サイトへ直接適用せず、ローカル環境でパソコン・スマートフォン表示とエラーを確認してから反映することが大切です。