WordPressテーマの自作方法・作り方｜初心者でもできるステップ解説【2026版】

2026年7月7日2026年7月10日

公開: 2026-07-07 / 最終更新: 2026-07-07
対象読者: WordPressテーマを自分で作りたい人・既製テーマでは実現できないデザインを求めている人

「既製テーマでは実現できないデザインを作りたい」「WordPressの仕組みを深く理解したい」という人にとって、テーマの自作は1つの選択肢です。

ただし、現実的にはほとんどのケースで既製テーマ + カスタマイズの方が効率的です。「本当に自作が必要か」「子テーマでのカスタマイズで足りないか」を見極めることも重要。

この記事では、

WordPressテーマ自作に必要な技術
テーマのファイル構造（最低限）
ゼロから作るステップ
自作 vs 既製テーマの判断基準
子テーマでカスタマイズする方法

を解説します。

WordPressテーマ自作に必要な技術

ゼロから自作するには、以下の技術知識が必要です。

必須スキル

HTML / CSS: サイトの骨格とデザイン
PHP: WordPressのテンプレートタグ・ループ処理
WordPress テンプレート階層: index.php / single.php 等のファイル構造の理解
WordPress関数: wp_head() / get_header() / the_post() 等

あると便利なスキル

JavaScript: 動的UI・アニメーション
SCSS / Sass: CSS書きやすく
Webpack / Vite: アセット管理
WordPress フック（アクション・フィルター）: より高度なカスタマイズ
WP-CLI: コマンドラインでの管理

「HTMLとCSSは書けるけど、PHPは初めて」という人なら、まずは子テーマでのカスタマイズから始めるのが現実的です。

テーマの最小ファイル構造

WordPressテーマとして認識される最低限のファイル構造:

my-theme/
├── style.css        ← 必須（テーマ情報を記載）
├── index.php        ← 必須（メインテンプレート）
├── screenshot.png   ← 推奨（管理画面サムネイル 880x660px推奨）
└── functions.php    ← 推奨（テーマの機能定義）

style.css の冒頭

テーマとして認識されるには、style.css の冒頭にコメント形式でテーマ情報を書く必要があります。

/*
Theme Name: My Original Theme
Theme URI: https://example.com/
Author: Your Name
Author URI: https://example.com/
Description: 自作のWordPressテーマです。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-original-theme
*/

/* ここから実際のCSS */
body { font-family: sans-serif; }

index.php の最小例

<?php get_header(); ?>

<main>
  <h1><?php bloginfo('name'); ?></h1>

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

<?php get_footer(); ?>

functions.php の最小例

<?php
function my_theme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('html5', ['search-form', 'comment-form', 'comment-list', 'gallery', 'caption']);
}
add_action('after_setup_theme', 'my_theme_setup');

function my_theme_enqueue_styles() {
    wp_enqueue_style('main', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

ゼロからテーマを作るステップ

Step 1: 設計を決める

どんなページが必要か？（トップ・記事・固定ページ・カテゴリ等）
どんなレイアウトか？（ヘッダー・サイドバー・フッター等）
ブロックエディタ対応するか？

スケッチかワイヤーフレームで構造を決めてから着手するのがおすすめ。

Step 2: 開発環境を準備

ローカル開発環境: Local（旧 Local by Flywheel）、MAMP、Docker など
コードエディタ: VS Code 推奨
WordPress本体のセットアップ

Step 3: 最小構成のテーマを作成

上記の style.css index.php を作成し、wp-content/themes/my-theme/ に配置。管理画面の「外観 → テーマ」で有効化。

Step 4: テンプレート階層を追加

WordPressにはテンプレート階層があり、ファイル名に応じて表示が分岐します。

ファイル名	用途
`index.php`	全ての fallback
`single.php`	個別記事
`page.php`	固定ページ
`archive.php`	アーカイブページ
`category.php`	カテゴリページ
`tag.php`	タグページ
`404.php`	404エラーページ
`header.php`	ヘッダー部分
`footer.php`	フッター部分
`sidebar.php`	サイドバー

Step 5: CSSとレイアウトを作り込む

style.cssにデザインを書いていきます。ブロックエディタ対応を考えるなら、editor-style.cssの用意も忘れずに。

Step 6: JavaScriptを追加（必要に応じて）

functions.php で wp_enqueue_script() を使ってJSを読み込みます。

Step 7: 機能拡張

カスタム投稿タイプ（記事以外の投稿種類）
カスタムフィールド
ウィジェット
カスタマイザー（管理画面でデザイン変更できる仕組み）

Step 8: テスト

表示崩れチェック
レスポンシブ確認（スマホ・タブレット）
ブラウザ互換性確認
WordPressデバッグモードでエラー確認

自作 vs 既製テーマの判断基準

自作を検討すべきケース:

完全に独自のデザイン・機能が必要
既製テーマでは実装できない仕様がある
学習目的でWordPressの仕組みを深く理解したい
大規模サイトで独自の機能を作り込む必要がある
受託制作で完全カスタマイズを求められる

既製テーマでOKなケース（ほとんどの場合）:

一般的なブログ・コーポレートサイト
デザインに強いこだわりはない
早く公開したい
1人〜少人数で運営する
学習コストを抑えたい

現実的には、99%のケースで既製テーマで十分です。SWELL / Cocoon / Astraなどの既製テーマは、何百〜何千時間の開発が積み重なった完成品で、自作で同等品を作るのは現実的ではありません。

子テーマでカスタマイズするほうが現実的

「自作したい」と思う多くのケースは、実は子テーマでのカスタマイズで解決できます。

子テーマとは

既存テーマ（親テーマ）をベースに、変更点だけを子テーマで上書きする仕組み。

メリット:

親テーマのアップデートでカスタマイズが消えない
自作よりも開発コストが大幅に低い
既存テーマの機能・性能を活用できる

子テーマの作成手順

wp-content/themes/
├── parent-theme/        ← 既存の親テーマ（SWELL等）
└── parent-theme-child/  ← 子テーマ
    ├── style.css
    └── functions.php

style.css に親テーマを指定:

/*
Theme Name: My SWELL Child
Template: swell
Version: 1.0.0
*/

/* カスタマイズしたいCSSをここに */

functions.php で親テーマのCSSを読み込み:

<?php
function my_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style']);
}
add_action('wp_enqueue_scripts', 'my_child_enqueue_styles');

これで、親テーマを上書きするカスタマイズを子テーマで自由に追加できます。

よくある質問（FAQ）

Q. テーマ自作にはどれくらいの期間がかかる？

A. 基礎学習に数ヶ月、実用レベルの自作テーマで数百時間が現実的。「サクッと作れる」ものではありません。

Q. プログラミング未経験でもできる？

A. HTML/CSS/PHPの学習から始める必要があり、半年〜1年の学習期間を見込んでください。並行して子テーマでのカスタマイズから始めるのが現実的。

Q. 自作テーマを販売できる？

A. 可能です。WordPress.org公式テーマディレクトリへの登録や、ThemeForestでの販売が一般的なルート。ライセンスはGPLになります。

Q. 自作テーマでSEOは問題ない？

A. 適切にコーディングすればSEO上の問題はありません。ただし、構造化データ・パンくず・OGP等の実装は自分で行う必要があり、SWELL等の既製テーマよりも工数がかかります。

Q. ブロックエディタ完全対応のテーマを自作するのは？

A. FSE（Full Site Editing）対応のブロックテーマは、従来のテーマよりも開発の発想が異なります。学習コストが上がる代わりに、新しいWordPressのトレンドに沿った設計が可能。

Q. テーマ自作の代わりに、既製テーマをカスタマイズする方が早い？

A. ほぼ全てのケースで早いです。SWELL等の有料テーマで実現できないことがあるかは、購入前に公式デモ・ドキュメントで確認してください。

まとめ｜自作よりまず「既製テーマ + 子テーマ」を検討

WordPressテーマの自作は、学習目的や特殊な要件がある場合の選択肢です。

ただし、現実的にはほとんどのケースで:

既製テーマ（SWELL / Cocoon / Astra等）+ 子テーマカスタマイズ

の方が、時間効率・コスト・品質のすべての面で優れています。

「こんなデザイン・機能ができるテーマがない」と感じる前に、

既製テーマの公式デモ
子テーマでのカスタマイズ範囲
カスタマイズプラグイン（Elementor等）

をまず確認しましょう。それでも実現できない場合に初めて、自作という選択肢が現実味を帯びます。

※ 本記事はWordPress 6.0以上の環境を前提に2026年5月時点の情報で執筆しています。WordPress本体のバージョンによっては、関数名・仕様が変更されている可能性があります。

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

SatoHideyuki