MENU
ゼロぐらいから学べる！Web制作応援ブログ
  1. ホーム
  2. WordPress
  3. テーマ作成
  4. 【WordPressテーマの作り方 第1回】ゼロから始める！自作テーマの基本と準備

【WordPressテーマの作り方 第1回】ゼロから始める！自作テーマの基本と準備

WordPress テーマ作成

「WordPressって自作テーマを作れるらしいけど、難しそう…」
そんな風に感じて、一歩踏み出せずにいませんか？

安心してください。
このシリーズは HTMLとCSSの基礎がわかる方なら、必ずWordPressテーマを自作できる ようになることをゴールにしています。

第1回では、「テーマとして最低限動く状態」 までを初心者向けにやさしく解説。
さらに、現在推奨されているコードと、昔よく使われていた非推奨コードを両方掲載し、違いを理解できるようにします。

💡 今回のゴール
  • 自作テーマに必要なファイル4つを作成
  • WordPressにテーマとして認識させる
  • 最低限のページ表示まで完成させる
目次

1. 自作テーマに必要な4つのファイル

WordPressテーマは意外とシンプルで、最低限必要なのは次の4つです。

  1. 1 style.css — テーマ情報 & CSS
  2. 2 index.php — すべてのページを受け止める基本テンプレート
  3. 3 functions.php — テーマの機能や設定を追加
  4. 4 screenshot.png — 管理画面でのテーマサムネイル画像

これらを正しい場所に配置すれば、「とりあえず動くテーマ」として認識されます。

2. style.cssの書き方と役割（テーマの名刺）

style.css はテーマの顔です。
WordPressが「このフォルダはテーマだ」と判断するために必須で、テーマの基本情報を記述します。

/*
Theme Name: my-original-theme （管理画面に表示されるテーマ名）
Description: はじめての自作WordPressテーマ
Author: あなたの名前
Version: 1.0.0
*/
📌 ポイント

  • ✓
    このコメントは style.css の最上部に書く
  • ✓
    これがないとテーマとして認識されない
  • ✓
    他にも Theme URI や Author URI など任意項目があるが、最初はこの4つでOK

3. index.phpの書き方と役割（最終的な受け皿テンプレート）

WordPressで表示するページが見つからない場合、最終的にindex.phpが使われます。
他に該当するテンプレートがなければ、このファイルが使われます。
最小構成でも必ず以下は含めましょう。

<!DOCTYPE html>
<html <?php language_attributes(); ?>> <!-- サイトの言語属性を自動設定 -->
<head>
  <meta charset="<?php bloginfo('charset'); ?>"> <!-- 文字コードを自動設定 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- スマホ対応 -->

  <!-- style.cssを読み込む -->
  <!-- 学習用サンプル。enqueue に移行したらこの <link> は削除 -->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

  <?php wp_head(); ?> <!-- 必須：プラグインやテーマのhead処理を出力 -->
</head>
<body <?php body_class(); ?>> <!-- ページごとのクラスを自動付与 -->

  <h1><?php bloginfo('name'); ?></h1> <!-- サイトタイトル -->
  <p><?php bloginfo('description'); ?></p> <!-- キャッチフレーズ -->

  <?php wp_footer(); ?> <!-- 必須：プラグインやテーマのfooter処理を出力 -->
</body>
</html>
⚠️ 注意

  • !
    wp_head() と wp_footer() は全ページ必須
  • !
    これらがないと管理バーやプラグインが正常に動作しない

4. functions.phpの書き方と役割（テーマの機能設定）

functions.php は、テーマの振る舞いや機能を設定するファイルです。
まずはタイトルタグを自動出力する設定を追加します。

<?php
// タイトルタグをWordPressに自動生成させる（推奨）
add_theme_support('title-tag');
💡 補足

  • i
    add_theme_support('post-thumbnails') でアイキャッチに対応できる
  • i
    古いテーマでは手動の <title> が残っていることがある

実務で推奨：CSS/JS は enqueue で読み込む

学習の最初は <link rel="stylesheet"> でも動きますが、実務では WordPressのフック（wp_enqueue_scripts）を使って読み込むのが標準です。依存関係やバージョン管理、プラグインとの競合回避に有効です。

✅ 基本形（style.css を読み込む）

// functions.php
// テーマのCSSを正しく読み込む（推奨：enqueue）
add_action('wp_enqueue_scripts', function () {
  // テーマのバージョンを自動取得してキャッシュ更新に利用（更新時に自動で変わる）
  $ver = wp_get_theme()->get('Version');

  // テーマ直下の style.css を読み込む（推奨）
  wp_enqueue_style(
    'theme-style',              // ハンドル名（自由）
    get_stylesheet_uri(),       // /wp-content/themes/テーマ名/style.css
    [],                         // 依存スタイル（なければ空配列）
    $ver                        // バージョン（キャッシュ対策）
  );
});

💡 応用例（assets 配下のCSS/JSを読み込む）

// functions.php
add_action('wp_enqueue_scripts', function () {
  $theme_uri = get_stylesheet_directory_uri();
  $ver = wp_get_theme()->get('Version');

  // 例：/assets/css/app.css
  wp_enqueue_style(
    'theme-app',
    $theme_uri . '/assets/css/app.css',
    [],
    $ver
  );

  // 例：/assets/js/app.js（jQueryに依存する場合）
  wp_enqueue_script(
    'theme-app',
    $theme_uri . '/assets/js/app.js',
    ['jquery'],  // 依存スクリプト
    $ver,
    true         // true: フッターで読み込む（推奨）
  );
});
⚠️ 注意（重複読み込みの回避）

  • !
    enqueue に切り替えたら、index.php の <link rel="stylesheet" href="..."> は削除してください。
  • !
    wp_head() と wp_footer() は必須です（読み込みフックの出力先になります）。

5. screenshot.pngの役割（管理画面サムネイル）

テーマ管理画面での見た目を良くするための画像です。
必須ではありませんが、設定をおすすめします。

  • 1
    推奨サイズ：640×480px
  • 2
    ファイル名：screenshot.png（小文字で）
  • 3
    場所：テーマフォルダ直下

6. フォルダ構成例と設置場所

テーマファイルは、WordPressの /wp-content/themes/ フォルダに配置します。

/wp-content/themes/my-original-theme/
├── index.php        // 最終的な受け皿テンプレート
├── style.css        // テーマ情報とCSS
├── functions.php    // テーマの設定や追加機能
└── screenshot.png   // 管理画面サムネイル
⚠️ 注意点

  • フォルダ名は半角英数字が望ましい
  • フォルダ階層を二重にしない（my-original-theme/my-original-theme/ はNG）
  • アップロードはFTP/SFTP、またはzip化して管理画面から行える

7. テーマの有効化手順

  1. 1
    管理画面で「外観」→「テーマ」を開く
  2. 2
    作成したテーマを確認して「有効化」をクリック
  3. 3
    トップページで表示を確認

8. よくあるトラブルと解決方法

テーマが表示されない

  • ! style.css のテーマ情報が抜けている
  • ! index.php が空
  • ! フォルダの階層が誤っている

CSSが反映されない

  • ! CSSを直リンクしている → get_stylesheet_uri() を使用

9. タイトルタグの書き方（推奨と非推奨）

項目推奨（現在）非推奨（昔）理由
タイトルタグadd_theme_support('title-tag');<title><?php wp_title(); ?><?php bloginfo('name'); ?></title>新仕様に対応、メンテ性が高い

推奨（現在）

// functions.php
add_theme_support('title-tag');

非推奨（昔の方法）

<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

この書き方はWordPress 4.1以前の古い方法。
今は add_theme_support('title-tag') を使うのが主流です。

10. まとめと次回予告

今回は「最低限動くテーマ」を作成しました。
次回は header.php や footer.php に分割し、コードを整理して管理しやすくします。

WordPress テーマ作成
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

ロバンガさんのアバター ロバンガさん

Web制作会社勤務、業界歴10年以上。現場を走り回ってきた制作者。
これからWeb制作を学ぶ人に寄り添いながら、実務で役立つ知識をわかりやすくシェアします。
「ゼロぐらいから学べる！」をモットーに、あなたの“がんばろ”を応援します！

関連記事

目次