WordPressオリジナルテーマ作成ガイド｜CodeQuest.work

WordPressオリジナルテーマを一から作りたい方へ。本記事では、ローカル環境の構築から必要なテンプレートファイル一覧、さらに各ファイルの実装コード例までを1本にまとめた完全ガイドです。初心者でもこの記事を読みながら進めれば、テーマ制作の全体像を把握できます。

Step 1：ローカル開発環境を構築する（Local by Flywheel）

テーマ開発を始めるには、まずローカル環境が必要です。「Local by Flywheel」を使えば、初心者でも数分でWordPressの開発環境をセットアップできます。

Q. Local by Flywheelとは？

Local by Flywheelは、初心者からプロの開発者まで幅広く利用されているローカル環境構築ツールです。簡単な操作でWordPressをインストールでき、SSLの有効化やメールキャプチャ機能など、開発に役立つ機能が充実しています。

インストールと初期設定

Localの公式サイトにアクセスし、OS（Windows / Mac / Linux）に合ったインストーラーをダウンロードします。
インストール後、Localを起動して「Create a New Site」をクリックします。
サイト名（例：「my-wordpress-site」）を入力し、環境設定は推奨のままでOKです。
ユーザー名・パスワード・メールアドレスを設定し、「Install WordPress」をクリックすれば完了です。

Localのダッシュボードから「Open Site」でサイト確認、「Admin」で管理画面にアクセスできます。

Localを使うメリット

簡単な操作性：初心者でも迷わず設定可能。サーバー設定を自動で行ってくれます。
SSL対応：ワンクリックでSSLを有効化できます。
サイトのクローン：プロジェクトを複製して別の環境でテスト可能です。
軽量で高速：無駄なリソースを使わず快適に動作します。

Step 2：テンプレートファイル一覧と役割

ローカル環境が整ったら、テーマフォルダにテンプレートファイルを作成していきます。WordPressテーマは、役割ごとに分かれた複数のテンプレートファイルで構成されています。

必須ファイル（4つ）

テーマを動作させるために最低限必要なファイルです。

index.php：テーマの基本テンプレート。他のテンプレートが用意されていない場合に使用されます。
style.css：テーマ情報（テーマ名、バージョン、作者情報など）のヘッダーコメントを含むCSSファイルです。
functions.php：テーマに独自の機能を追加するためのファイル。ナビゲーションメニューやウィジェットの登録、スクリプトの読み込みなどを記述します。
screenshot.png：テーマ管理画面に表示されるサムネイル画像（推奨サイズ 1200×900px）。

基本的なファイル（8つ）

ほとんどのWordPressテーマで使用される一般的なテンプレートファイルです。

header.php：ページの<head>要素やナビゲーションメニューなど、ヘッダー部分を定義します。
footer.php：フッター部分を定義。著作権情報やスクリプトの読み込みを記述します。
sidebar.php：サイドバーを表示するテンプレートファイル。ウィジェットエリアの設置にも使います。
single.php：個別投稿ページのテンプレートです。
page.php：固定ページのテンプレートです。
archive.php：カテゴリ・タグ・著者・日付などのアーカイブページを表示するテンプレートです。
search.php：検索結果ページのテンプレートです。
404.php：404エラーページのテンプレートです。

拡張ファイル（7つ）

テーマをさらにカスタマイズしたい場合に使用するテンプレートです。

front-page.php：フロントページ（ホームページ）専用のテンプレートです。
home.php：投稿一覧ページ（ブログページ）専用のテンプレートです。
category.php：カテゴリ別投稿一覧のテンプレートです。
tag.php：タグ別投稿一覧のテンプレートです。
author.php：著者別アーカイブページのテンプレートです。
date.php：日付アーカイブページのテンプレートです。
comments.php：コメントとコメントフォームを表示するテンプレートです。

Step 3：主要テンプレートファイルの実装例

ファイル一覧を把握したら、次は実際にコードを書いていきましょう。ここでは主要なテンプレートファイルの実装例を紹介します。

index.php

すべてのページで使用される基本テンプレートです。WordPressループを使って投稿を表示します。

<?php get_header(); ?>

<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
      <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      <?php the_excerpt(); ?>
    </article>
  <?php endwhile; endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

style.css

テーマ情報のヘッダーコメントは必須です。WordPressがこの情報をもとにテーマを認識します。

/*
Theme Name: My Theme
Theme URI: https://example.com
Author: Your Name
Description: カスタムWordPressテーマ
Version: 1.0
License: GNU General Public License v2 or later
*/

header.php

ページ共通のヘッダー部分を定義します。wp_head()はプラグインやテーマがhead内にスクリプトやスタイルを出力するために必須です。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  <header>
    <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
    <nav>
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?>
    </nav>
  </header>

footer.php

フッター部分を定義します。wp_footer()はbody閉じタグの直前に配置します。

  <footer>
    <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

front-page.php

ホームページを固定ページとして表示する場合に使用します。「設定 → 表示設定」でフロントページを固定ページに設定するとこのテンプレートが使われます。

<?php get_header(); ?>

<main class="front-page">
  <section class="hero">
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  </section>
</main>

<?php get_footer(); ?>

single.php

投稿の個別ページ用テンプレートです。投稿日やカテゴリなどのメタ情報も表示します。

<?php get_header(); ?>

<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
      <h1><?php the_title(); ?></h1>
      <time datetime="<?php echo get_the_date('c'); ?>"><?php the_date(); ?></time>
      <?php the_content(); ?>
    </article>
  <?php endwhile; endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

page.php

固定ページ表示用のテンプレートです。single.phpと似ていますが、通常サイドバーを表示しないレイアウトにすることが多いです。

<?php get_header(); ?>

<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <article>
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </article>
  <?php endwhile; endif; ?>
</main>

<?php get_footer(); ?>

404.php

ページが見つからない場合のエラーページです。ユーザーを適切に誘導するメッセージを表示しましょう。

<?php get_header(); ?>

<main>
  <h1>ページが見つかりません</h1>
  <p>お探しのページは存在しないか、移動した可能性があります。</p>
  <a href="<?php echo home_url('/'); ?>">トップページへ戻る</a>
</main>

<?php get_footer(); ?>

functions.php

テーマに独自の機能を追加するファイルです。ナビゲーションメニューの登録やスタイルシート・スクリプトの読み込みなど、テーマの基盤となる設定を行います。

<?php
// テーマサポート機能を有効化
function mytheme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    register_nav_menus(array(
        'primary' => 'メインメニュー',
    ));
}
add_action('after_setup_theme', 'mytheme_setup');

// スタイルシートとスクリプトの読み込み
function mytheme_enqueue_scripts() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

まとめ

WordPressオリジナルテーマの制作は、「環境構築 → ファイル構成の理解 → コード実装」の3ステップで進めるのが効率的です。

まずはLocal by Flywheelでローカル環境を整えましょう。
次にテーマに必要なテンプレートファイルの全体像を把握します。
最後に各ファイルのコードを実装し、少しずつカスタマイズに挑戦してみてください。

テンプレートファイルの役割を理解することで、より柔軟で効率的なテーマ開発が可能になります。

WordPress オリジナルテーマ作成ガイド｜環境構築からテンプレートファイル実装まで