はじめに
前回の記事ではEWWW Image Optimizer・WP Super Cache・Cloudflareを設定してWordPressサイトの表示速度を大幅に改善しました。今回はWordPressのカスタムテーマ開発の入門を解説します。既存テーマをそのまま使うだけではなく、functions.php の基礎を理解してテーマに機能を追加したり、テンプレート階層を把握してレイアウトをカスタマイズしたりする方法を学びましょう。また、本番テーマに直接手を加えず安全にカスタマイズできる子テーマの作成方法まで一通り解説します。
1. WordPressテーマの基本構造を理解する
1.1 テーマに最低限必要なファイル
WordPressのテーマは /wp-content/themes/テーマ名/ ディレクトリに格納されています。テーマとして機能するために最低限必要なファイルは以下の2つだけです。
| ファイル | 役割 |
|---|---|
style.css | テーマの基本情報（名前・作者・バージョン）とスタイル定義 |
index.php | すべてのページのフォールバックとなるメインテンプレート |
実際の開発では以下のファイルも一緒に用意するのが一般的です。
| ファイル | 役割 |
|---|---|
functions.php | テーマの機能追加・フックの登録 |
header.php | ヘッダー部分のテンプレート |
footer.php | フッター部分のテンプレート |
sidebar.php | サイドバー部分のテンプレート |
single.php | 個別投稿ページのテンプレート |
page.php | 固定ページのテンプレート |
archive.php | アーカイブページのテンプレート |
1.2 style.cssのヘッダー情報
style.css の先頭には、WordPressがテーマを認識するために必要なコメントブロックを記述します。
css
/*
Theme Name: My Custom Theme
Theme URI: https://example.com
Author: Your Name
Author URI: https://example.com
Description: オリジナルのカスタムテーマです。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/💡 Text Domain について： 多言語対応（翻訳）を行う際に使用する識別子です。テーマ名をハイフン区切りにした文字列を指定するのが慣例です。
2. functions.phpの基礎
2.1 functions.phpとは
functions.php はテーマの「機能追加ファイル」です。WordPressが読み込む際に自動で実行されるため、ここにコードを書くことでテーマに様々な機能を追加できます。プラグインに近い役割を持ちますが、あくまでそのテーマ専用の機能を定義する場所として使います。
⚠️ functions.phpを直接編集する前にバックアップを取りましょう： 構文エラーがあるとサイト全体が真っ白になることがあります。編集前にファイルをバックアップするか、後述の子テーマ経由で編集することを強くおすすめします。
2.2 after_setup_themeフック：テーマの基本機能を登録する
テーマの機能登録は after_setup_theme アクションフックの中で行うのが正しい書き方です。
php
<?php
function my_theme_setup() {
// アイキャッチ画像を有効化
add_theme_support( 'post-thumbnails' );
// HTMLタグのサポート
add_theme_support( 'title-tag' );
// カスタムロゴを有効化
add_theme_support( 'custom-logo' );
// ナビゲーションメニューを登録
register_nav_menus( array(
'primary' => 'メインメニュー',
'footer' => 'フッターメニュー',
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );| 関数 | 効果 |
|---|---|
add_theme_support( 'post-thumbnails' ) | アイキャッチ画像機能を有効化 |
add_theme_support( 'title-tag' ) | <title> タグをWordPressに管理させる |
add_theme_support( 'custom-logo' ) | カスタムロゴのアップロード機能を有効化 |
register_nav_menus() | ナビゲーションメニューの登録場所を定義 |
2.3 wp_enqueue_scriptsフック：CSS・JavaScriptを正しく読み込む
CSSやJavaScriptを読み込む際は <link> タグや <script> タグを直接テンプレートに書かず、必ず wp_enqueue_scripts フックを使います。こうすることでプラグインとの依存関係が正しく管理されます。
php
function my_theme_scripts() {
// メインCSSの読み込み
wp_enqueue_style(
'my-theme-style',
get_stylesheet_uri(),
array(),
'1.0.0'
);
// JavaScriptの読み込み（jQueryに依存）
wp_enqueue_script(
'my-theme-script',
get_template_directory_uri() . '/js/main.js',
array( 'jquery' ),
'1.0.0',
true // フッターで読み込む
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );💡 第5引数を true にする理由： JavaScriptをフッターで読み込むことでHTMLの解析をブロックしなくなり、表示速度が改善されます。特別な理由がない限り true を指定しましょう。
2.4 カスタム関数を追加する
functions.phpには独自のヘルパー関数も追加できます。たとえば抜粋文字数を変更する場合は以下のように書きます。
php
// 抜粋の文字数を100文字に変更
function my_custom_excerpt_length( $length ) {
return 100;
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );
// 抜粋末尾の「…」を変更
function my_custom_excerpt_more( $more ) {
return '...続きを読む';
}
add_filter( 'excerpt_more', 'my_custom_excerpt_more' );⚠️ 関数名の衝突に注意してください： WordPressやプラグインで既に使われている関数名と同じ名前を付けると致命的なエラーになります。必ずテーマ固有のプレフィックス（例：my_theme_）を付ける習慣をつけましょう。
3. テンプレート階層を理解する
3.1 テンプレート階層とは
functions.phpには独自のヘルパー関数も追加できます。たとえば抜粋文字数を変更する場合は以下のように書きます。
php
// 抜粋の文字数を100文字に変更
function my_custom_excerpt_length( $length ) {
return 100;
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );
// 抜粋末尾の「…」を変更
function my_custom_excerpt_more( $more ) {
return '...続きを読む';
}
add_filter( 'excerpt_more', 'my_custom_excerpt_more' );⚠️ 関数名の衝突に注意してください： WordPressやプラグインで既に使われている関数名と同じ名前を付けると致命的なエラーになります。必ずテーマ固有のプレフィックス（例：my_theme_）を付ける習慣をつけましょう。
3.2 主なテンプレートの優先順位
| 表示内容 | 優先順位（高い順） |
|---|---|
| 個別投稿 | single-{post_type}-{slug}.php → single-{post_type}.php → single.php → singular.php → index.php |
| 固定ページ | {slug}.php → page-{id}.php → page-{slug}.php → page.php → singular.php → index.php |
| カテゴリーアーカイブ | category-{slug}.php → category-{id}.php → category.php → archive.php → index.php |
| トップページ | front-page.php → home.php → index.php |
| 404ページ | 404.php → index.php |
💡 テンプレート階層の使い方： たとえば「newsカテゴリーだけ別レイアウトにしたい」場合は category-news.php を作成するだけで自動的に適用されます。index.php だけが必須で、他のファイルは必要に応じて追加していけばOKです。
3.3 get_template_part()でテンプレートを分割する
テンプレートファイルが長くなってきたら get_template_part() を使って部品ごとに分割しましょう。
php
<?php
// single.phpの中で投稿コンテンツ部分を別ファイルに分割する例
get_template_part( 'template-parts/content', 'single' );
// → template-parts/content-single.php を読み込む
?>| 関数 | 役割 |
|---|---|
get_header() | header.phpを読み込む |
get_footer() | footer.phpを読み込む |
get_sidebar() | sidebar.phpを読み込む |
get_template_part( 'name' ) | 任意のテンプレートパーツを読み込む |
4. 子テーマの作成方法
4.1 子テーマとは
既存のテーマ（親テーマ）に直接手を加えると、テーマのアップデート時に変更がすべて上書きされてしまいます。子テーマとは親テーマを継承しながら、差分だけをカスタマイズできる仕組みです。
| 親テーマに直接編集 | 子テーマを使う | |
|---|---|---|
| テーマ更新時の影響 | ❌ 変更がすべて消える | ✅ カスタマイズが保持される |
| 安全性 | ❌ 低い | ✅ 高い |
| 推奨度 | ❌ 非推奨 | ✅ 推奨 |
4.2 子テーマの作成手順
ステップ1：子テーマ用のディレクトリを作成する
/wp-content/themes/ の中に子テーマ用のフォルダを作成します。フォルダ名は慣例として 親テーマ名-child とします。
/wp-content/themes/twentytwentyfour-child/ステップ2：style.cssを作成する
子テーマフォルダ内に style.css を作成し、以下のヘッダーを記述します。Template に親テーマのフォルダ名を正確に指定することが重要です。
css
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
Version: 1.0.0
Author: Your Name
*/ステップ3：functions.phpを作成して親テーマのCSSを読み込む
子テーマフォルダ内に functions.php を作成し、親テーマのスタイルシートを読み込む処理を追加します。
php
<?php
function my_child_theme_enqueue_styles() {
// 親テーマのstyle.cssを読み込む
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// 子テーマのstyle.cssを読み込む（親より後に読み込んで上書き）
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'parent-style' )
);
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );ステップ4：子テーマを有効化する
- 管理画面の**「外観」→「テーマ」**を開きます。
- 子テーマが一覧に表示されていることを確認します。
- 子テーマの「有効化」をクリックします。
💡 get_template_directory_uri() と get_stylesheet_directory_uri() の違い： 前者は常に親テーマのディレクトリを、後者は現在有効なテーマ（子テーマ）のディレクトリを返します。子テーマ開発では両者を使い分けることが大切です。
4.3 子テーマでテンプレートをカスタマイズする
特定のテンプレートファイルだけ上書きしたい場合は、親テーマと同じファイル名で子テーマフォルダ内に作成するだけです。WordPressは子テーマのファイルを優先的に読み込みます。
/twentytwentyfour-child/
├── style.css
├── functions.php
└── single.php ← 親テーマのsingle.phpより優先される⚠️ すべてのファイルをコピーする必要はありません： 変更したいファイルだけ子テーマに置けばOKです。子テーマにないファイルは自動的に親テーマのものが使われます。
5. よく使うテンプレートタグ一覧
テンプレートファイルの中でよく使う関数（テンプレートタグ）をまとめます。
| テンプレートタグ | 出力内容 |
|---|---|
the_title() | 投稿タイトルを表示 |
the_content() | 投稿本文を表示 |
the_excerpt() | 投稿の抜粋を表示 |
the_permalink() | 投稿のURLを表示 |
the_date() | 投稿日を表示 |
the_author() | 投稿者名を表示 |
the_post_thumbnail() | アイキャッチ画像を表示 |
get_the_ID() | 投稿IDを取得 |
bloginfo( 'name' ) | サイト名を表示 |
home_url() | サイトのトップURLを取得 |
6. カスタムテーマ開発チェックリスト
✓ style.css にテーマ情報のコメントブロックを正しく記述しているか
✓ functions.php でアイキャッチ・タイトルタグ・ナビゲーションメニューを after_setup_theme で登録しているか
✓ CSS・JavaScriptは wp_enqueue_scripts フックで読み込んでいるか
✓ 関数名にテーマ固有のプレフィックスを付けているか
✓ テンプレート階層を理解して適切なファイル名でテンプレートを作成しているか
✓ 本番テーマのカスタマイズは子テーマ経由で行っているか
✓ get_template_directory_uri() と get_stylesheet_directory_uri() を正しく使い分けているか
✓ 編集前に必ずバックアップを取っているか
まとめ
今回はWordPressカスタムテーマ開発の入門として functions.php の基礎・テンプレート階層・子テーマの作成方法を解説しました。ポイントをまとめると：
- テーマに最低限必要なファイルは
style.cssとindex.phpの2つだけで、他は必要に応じて追加する functions.phpではフックを使って機能を追加し、関数名の衝突を避けるためにプレフィックスを必ず付ける- テンプレート階層を把握しておくと特定のページだけ別レイアウトにする際に迷わなくなる
- 親テーマへの直接編集はアップデートで消えるため、必ず子テーマ経由でカスタマイズする
get_template_directory_uri()とget_stylesheet_directory_uri()の違いを意識して使い分ける
次の記事では、WordPressのカスタム投稿タイプとカスタムタクソノミーの作成方法について解説します。お楽しみに！
コメント