WordPressのカスタムテーマは、サイトの見た目や表示構造を目的に合わせて設計するためのテーマです。
既存テーマの設定だけでは表現しにくいデザインや、ページごとの細かな表示制御が必要なときに選択肢になります。
ただし、テーマ制作は見た目を整えるだけの作業ではありません。テンプレート構成、CSS、PHP、管理画面で扱う機能、公開後の保守までを含めて設計する必要があります。
この記事では、初めてテーマ制作に取り組む人に向けて、クラシックテーマを例に基本ファイルと実装の流れを整理します。WordPressを含むCMS全体の選び方から検討したい場合は、CMSの種類と特徴を比較した記事も参考になります。
WordPressのカスタムテーマとは
カスタムテーマとは、WordPressサイトの表示やレイアウトを自分で定義するテーマのことです。
既存テーマを設定画面で調整する方法もありますが、独自のブランド表現、ページごとの表示切り替え、不要な機能を抑えた構成などを重視する場合は、テーマを作ることで自由度が高まります。
一方で、テーマはサイト表示の土台です。記事一覧、固定ページ、個別記事、ヘッダー、フッター、メニュー、アイキャッチ画像などが関わるため、最初から大きく作り込むより、小さく作って表示確認と修正を重ねる進め方が現実的です。
作成前に決めておきたいこと
テーマ制作を始める前に、どこまでをテーマで扱うかを決めておくと、後から構成が崩れにくくなります。
| 確認項目 | 考え方 |
|---|---|
| 目的 | 会社紹介、ブログ、サービス紹介など、サイトで何を伝えるかを整理します。 |
| 表示の範囲 | トップページ、投稿詳細、固定ページ、一覧ページなど、必要な画面を洗い出します。 |
| 運用方法 | 公開後に誰が更新し、どの部分を管理画面から変更したいかを確認します。 |
| 保守性 | テーマ更新、プラグインとの相性、表示速度、アクセシビリティを継続して見直せる構成にします。 |
この整理をせずに作り始めると、表示はできても修正しにくいテーマになりやすくなります。
作成前に準備するもの
ローカル開発環境
本番サイトを直接編集すると、表示崩れやエラーがそのまま公開画面に出るおそれがあります。
まずはローカル環境や検証環境を用意し、そこでテーマを作成してから本番へ反映する流れにします。
HTML・CSS・PHP・JavaScriptの基礎
WordPressテーマでは、HTMLでページの構造を作り、CSSで見た目を調整し、PHPでWordPressの投稿データや設定を呼び出します。
必要に応じてJavaScriptも使いますが、最初から複雑な処理を入れる必要はありません。
まずは投稿タイトル、本文、メニュー、アイキャッチ画像を正しく表示するところから始めると、テーマの仕組みを理解しやすくなります。
ファイルを扱う手段
テーマファイルは、通常 wp-content/themes/ 配下に配置します。
ローカルで作成したファイルを本番へ反映する場合は、ホスティング環境に応じてFTP、SSH、Git、管理画面のテーマアップロードなどを使います。
どの方法でも、反映前のバックアップと復元手順は必ず用意しておきます。
カスタムテーマの基本ファイル
クラシックテーマの最小構成では、テーマ用フォルダを作り、その中に style.css と index.php を置きます。
機能を追加する場合は functions.php を使い、共通部分を分ける場合は header.php と footer.php を作成します。
| ファイル | 主な役割 |
|---|---|
style.css |
テーマ名や説明などをWordPressに認識させ、必要に応じてCSSを記述します。 |
index.php |
基本となるテンプレートです。より具体的なテンプレートがない場合に使われます。 |
functions.php |
メニュー、アイキャッチ画像、CSS読み込みなど、テーマの機能を登録します。 |
header.php |
HTMLの開始部分、ヘッダー、ナビゲーションなどの共通部分をまとめます。 |
footer.php |
フッター、WordPressの終了処理、HTMLの閉じタグをまとめます。 |
基本テーマを作る手順
1. テーマフォルダを作る
wp-content/themes/ の中に、テーマ名に合わせたフォルダを作ります。
フォルダ名は半角英数字とハイフンを使い、後から見ても用途がわかる名前にすると管理しやすくなります。
wp-content/themes/my-custom-theme/2. style.cssを作る
style.css は、テーマの情報をWordPressに認識させるための重要なファイルです。
ファイル冒頭にテーマ名などのヘッダー情報を書き、その下に必要なCSSを追加します。
/*
Theme Name: My Custom Theme
Author: Your Name
Description: Original WordPress theme for a business website.
Version: 1.0
Text Domain: my-custom-theme
*/デザイン用のCSSをこのファイルに書くこともできます。
ただし、規模が大きくなる場合は、役割ごとにCSSを分けて読み込む設計も検討します。
3. functions.phpで機能を登録する
functions.php は、テーマ独自の機能やWordPressの設定を追加するためのファイルです。
メニュー、アイキャッチ画像、タイトルタグ、CSSの読み込みなどは、このファイルで整理すると保守しやすくなります。
<?php
function my_custom_theme_setup() {
add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
function my_custom_theme_enqueue_styles() {
wp_enqueue_style(
'my-custom-theme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );テーマに依存しない機能まで functions.php に詰め込みすぎると、テーマ変更時に機能ごと失われます。
サイト全体で使う処理は、テーマではなくプラグインとして切り出すほうが安全な場合があります。プラグイン側の考え方は、ワードプレスのプラグインの作り方でも整理しています。
4. index.phpを作る
index.php は、より具体的なテンプレートが見つからないときに使われる基本テンプレートです。
最初は投稿のタイトルと本文が表示される最小構成から始め、必要に応じて一覧ページや個別ページのテンプレートを追加します。
<?php get_header(); ?>
<main id='primary'>
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<article id='post-<?php the_ID(); ?>' <?php post_class(); ?>>
<h2><a href='<?php the_permalink(); ?>'><?php the_title(); ?></a></h2>
<div class='entry-content'>
<?php the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</main>
<?php get_footer(); ?>ヘッダーとフッターを分割する
すべてのHTMLを index.php に書くと、ページが増えたときに管理しづらくなります。
共通部分は header.php と footer.php に分け、get_header() と get_footer() で読み込む形にすると、後から修正しやすくなります。
header.phpの例
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset='<?php bloginfo( 'charset' ); ?>'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<header class='site-header'>
<p class='site-title'><a href='<?php echo esc_url( home_url( '/' ) ); ?>'><?php bloginfo( 'name' ); ?></a></p>
<nav class='site-navigation' aria-label='メインメニュー'>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
</header>footer.phpの例
<footer class='site-footer'>
<p>© <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?>.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_head() と wp_footer() は、WordPress本体やプラグインが必要なCSS、JavaScript、メタ情報を出力するために重要です。
独自テーマでも省略しないようにします。
ページごとのテンプレートを追加する
基本表示ができたら、必要に応じてテンプレートを増やします。
たとえば、固定ページ用の page.php、投稿詳細用の single.php、一覧用の archive.php などを作ると、ページの種類ごとに表示を調整できます。
最初からすべてを作る必要はありません。
まずは index.php で表示を確認し、サイトの要件に合わせてテンプレートを分けていくと、作業範囲を管理しやすくなります。
公開前に確認したいポイント
テーマを公開する前に、表示だけでなく操作性や復旧手順まで確認しておきます。
- テーマ名、説明、バージョンなどの情報が
style.cssに正しく書かれているか - CSSやJavaScriptを直接書き込まず、適切に読み込んでいるか
wp_head()、wp_footer()、body_class()などの基本関数を入れているか- 投稿、固定ページ、一覧ページ、404ページなどで表示崩れがないか
- スマートフォン表示、キーボード操作、見出し構造、リンク文言に問題がないか
- 本番反映前にバックアップと復元手順を用意しているか
カスタムテーマが向いているケース
カスタムテーマは、ブランドに合わせた独自デザインを作りたい場合、既存テーマでは不要な機能が多すぎる場合、ページごとの表示を細かく制御したい場合に向いています。
一方、短期間で小さなサイトを立ち上げるだけなら、既存テーマやノーコードツールのほうが適していることもあります。選択肢を比較したい場合は、WordPressとノーコード開発の違いもあわせて確認すると判断しやすくなります。
| 向いているケース | 別の方法も検討したいケース |
|---|---|
| 独自のデザインやブランド表現を重視したい | 短期間で簡単なサイトを公開したい |
| ページごとの表示を細かく制御したい | 既存テーマの設定で十分に目的を満たせる |
| 不要な機能を抑えて管理しやすくしたい | 公開後に保守する体制をまだ決めていない |
重要なのは、作れるかどうかだけでなく、公開後に安全に運用できるかどうかです。
テーマ更新、プラグインとの相性、セキュリティ、表示速度、アクセシビリティまで見ておくと、長く使えるサイトに近づきます。
WordPressサイト制作・運用はgreedenへ
WordPressのカスタムテーマ制作では、デザイン、実装、表示速度、セキュリティ、保守運用を一体で考える必要があります。
小さな修正なら自分で対応できても、事業用サイトとして安定して運用するには、専門的な判断が必要になる場面もあります。
greedenでは、WordPressサイトの設計、テーマカスタマイズ、運用保守、トラブル対応まで、サイトの状況に合わせて支援しています。
既存サイトの改善、新規構築、運用体制の見直しを検討している場合は、目的と課題を整理したうえで最適な進め方を提案します。