【初心者向け】WordPressオリジナルテーマの作り方ステップバイステップ

WordPress

WordPressで自分だけのオリジナルテーマを作ってみたい！

そんなあなたに向けて、ゼロからテーマを作る手順をステップごとにわかりやすく解説します。

1. テーマ作成に必要な準備

まずはローカル環境でWordPressを動かす準備をしましょう。

• ローカル環境構築ツール（以下いずれかを使用）
  • Local by Flywheel（初心者向け）
  • XAMPP/MAMP（汎用性高）
• エディター：VS CodeやSublime Textなど
• 基本的なHTML/CSSの知識

2. テーマフォルダと基本ファイルの作成

WordPressの「wp-content/themes」ディレクトリに、自作テーマ用のフォルダを作ります。

例：my-original-theme

中に以下のファイルを用意しましょう：

my-original-theme/
├── style.css
├── index.php
└── functions.php

3. style.cssとfunctions.phpの設定

style.css の冒頭にテーマ情報を記述します：

/*
Theme Name: My Original Theme
Author: あなたの名前
Description: 初めて作ったオリジナルテーマ
Version: 1.0
*/

functions.php にテーマの初期設定を記述：

<?php
function mytheme_setup() {
  add_theme_support('title-tag');
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'mytheme_setup');

4. テンプレートファイルの作成

最低限必要なテンプレートファイル：

• index.php：最終的な出力テンプレート（万能）
• header.php：ヘッダー部分
• footer.php：フッター部分
• sidebar.php：サイドバー（必要なら）

5. WordPressにテーマを認識させる

管理画面の「外観 → テーマ」で自作テーマが表示されていれば成功！

テーマを有効化して、表示を確認してみましょう。

6. 最低限のレイアウトを整える

style.css にCSSを記述して、基本的な見た目を調整します。

body {
  font-family: sans-serif;
  line-height: 1.6;
  padding: 20px;
}

7. テンプレートタグで動的な表示に

WordPressのテンプレートタグを使えば、投稿内容やサイト情報が表示されます。

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

8. ヘッダー・フッター・サイドバーの分割

index.php に直接書いていたHTMLを get_header(), get_footer() で分割しましょう。

<?php get_header(); ?>

<main>
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
      the_title('<h2>', '</h2>');
      the_content();
    endwhile;
  endif;
  ?>
</main>

<?php get_footer(); ?>

9. 投稿ページと固定ページの作成

以下のテンプレートファイルも順次追加すると、より本格的になります。

• single.php：投稿詳細ページ
• page.php：固定ページ
• archive.php：アーカイブ一覧
• 404.php：エラーページ

10. テーマ完成後の確認と調整

• レスポンシブ対応（メディアクエリ）
• ブロックエディタとの整合性チェック
• 構造化データの導入（余裕があれば）

✅ まとめ

自作テーマは最初こそ手間がかかりますが、自分好みのデザインを作れる自由さは格別です。HTML/CSSの基礎があれば、少しずつ理解しながらカスタマイズできます。

まずは「最小構成」で作って動かしてみる！
これが一番の学習法です。

🔗 関連記事

• WordPressテーマファイル構成を徹底解説！
• functions.phpって何？初心者向けに超やさしく解説
• ローカル環境でWordPressを動かす方法【初心者OK】