WordPressのテーマを自作すると、記事や固定ページの見せ方を自分で決められます。ここではクラシックテーマを作る基本手順と、「どいやさんぽ。」で実際に使っている親テーマ・子テーマの構成を整理します。
先に全体像：テーマの種類を決め、最低限のファイルで表示し、ページごとの役割を分け、必要なら子テーマに変更を切り出します。最後にスマホと主要ページで表示を確かめます。
このサイトの最初の親テーマを作った全操作が記録に残っているわけではありません。前半は再現できる一般的な作り方、後半は現在のテーマで確認できる構成として読んでください。
最初に決める：ブロックテーマかクラシックテーマか
WordPressには主にブロックテーマとクラシックテーマがあります。この記事で扱うのは、PHPのテンプレートファイルで表示を組み立てるクラシックテーマです。既存テーマの見た目を少し変えるだけなら子テーマも選択肢ですが、表示全体を自分で作るなら親テーマの構成から考えます。
1. テーマ用フォルダと基本ファイルを作る
開発用のWordPress環境にある wp-content/themes/ の下に、テーマ名のフォルダを作ります。クラシックテーマが動く最小構成は style.css と index.php です。style.css の先頭にはテーマ名などを記したヘッダーを置きます。
my-original-theme/
├─ style.css
└─ index.phpindex.php は、より適したテンプレートがない場合に使われる最後の受け皿です。実際のブログでは、この2ファイルだけで終わらせず、ページごとに分けた方が修正しやすくなります。
最小例：style.css の先頭
/*
Theme Name: My Original Theme
Version: 1.0
*/最小例：index.php
<!doctype html>
<html>
<head><?php wp_head(); ?></head>
<body>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>これは構造を理解するための短い例です。実際には文字コード、言語属性、見出し階層、リンク、エスケープ、アクセシビリティも整え、共通部分を header.php と footer.php に分けます。
2. ページの役割ごとにファイルを分ける
my-original-theme/
├─ style.css 見た目とテーマ情報
├─ functions.php テーマの機能やCSS・JSの読み込み
├─ header.php 共通ヘッダー
├─ footer.php 共通フッター
├─ front-page.php トップページ
├─ single.php 投稿の本文ページ
├─ page.php 固定ページ
├─ archive.php カテゴリーなどの一覧
├─ 404.php 存在しないURLの表示
├─ index.php ほかに該当しない場合の表示
├─ template-parts/ 再利用する小さな表示部品
└─ assets/ 画像・CSS・JSなどこの一覧は設計例で、すべてが必須ファイルという意味ではありません。WordPressは開いたURLに合わせてテンプレートを選びます。まずトップ、投稿、固定ページ、一覧、404の順に表示を確認すると、欠けた場所を見つけやすくなります。
3. 記事データはWordPressの仕組みで表示する
記事タイトルや本文をHTMLに直接書き込むと、新しい記事を投稿しても自動で反映されません。テンプレートではWordPressのループと、the_title()・the_content() などの関数を使います。URLや属性を出力する場所では、適切なエスケープ関数も使います。
ヘッダーのメニューやフッターのリンクは、すべてのページで動作を確認します。トップだけきれいでも、記事ページや検索結果で崩れればテーマは完成とは言えません。
4. 子テーマで変更を分ける
現在の「どいやさんぽ。」では first_originaltheme を親テーマ、doiyasanpo-gemini を子テーマとして使っています。子テーマの style.css には Template: first_originaltheme を指定します。この値は親テーマのフォルダ名と一致させます。
子テーマに同じ名前のテンプレートを置くと、そのページ表示を上書きできます。一方、子テーマの functions.php は親テーマのものと一緒に読み込まれるため、単純な置き換えではありません。既存の機能と重複しないよう注意します。
このサイトの子テーマの構成
doiyasanpo-gemini/
├─ style.css
├─ functions.php
├─ header.php / footer.php
├─ front-page.php / single.php
├─ page-ask.php / page-articles.php
├─ js/site-ai.js
└─ template-parts/
├─ ai-form.php
└─ related-posts.phpトップ、記事、記事一覧、AI質問ページを子テーマ側で調整しています。page-ask.php と page-articles.php はページ専用の表示に使い、関連記事と質問フォームは template-parts/ に分けています。このフォルダ構成に「唯一の正解」はありません。ファイルの責務が分かり、後から探しやすいことが大切です。
作る前に用意すると進めやすい確認ページ
テーマを作るときは、空のトップページだけで見た目を決めないようにします。長いタイトルの記事、見出し・箇条書き・画像を含む本文、固定ページ、記事一覧を先に用意すると、テンプレートごとの違いを確認できます。文章量が増えたときにも余白や行幅が保てるかを見るためです。
ファイルを一つ追加したら、そのファイルが担当するページを開き、ほかのページも崩れていないか確認します。特に共通のヘッダーやCSSを変えたときは、記事と固定ページの両方を見ると手戻りを減らせます。デザインを決める過程はプレビュー比較の記録にも残しています。
5. 公開前の確認と更新方法
- 開発環境やプレビューでトップ、記事、固定ページ、一覧、404を開く
- スマートフォン幅でヘッダー、画像、本文を確認する
- PHPの構文エラーとリンク先を確認する
- 変更したテーマフォルダをZIPにしてWordPressへアップロードする
- 公開サイトでも同じページを確認する
子テーマをアップロードするなら、ZIPの先頭に doiyasanpo-gemini フォルダが来る形にします。親テーマも必要です。GitHubに保存したソース一式のZIPが、そのままWordPressに入れるテーマZIPと同じ構造とは限りません。
WordPress公式の最初のクラシックテーマの解説と子テーマの解説も、実装前に確認できます。
コメント