WordPress自作テーマの作り方完全ガイド｜初心者でもゼロから公開までできる手順を解説

はじめに

WordPress自作テーマとは、既存テーマを使わず、自分でHTML・CSS・PHPを組み合わせて作るオリジナルのWordPressテーマです。

「デザインを自由に作りたい」「不要な機能を減らして軽いサイトにしたい」「WordPressの仕組みを理解したい」という人にとって、自作テーマは非常に有効な選択肢です。

この記事では、初心者でもWordPress自作テーマをゼロから作成し、公開できるように、基本知識、ファイル構成、テーマ化の手順、SEO対策、セキュリティ、公開前チェックまで順番に解説します。

1. WordPress自作テーマとは？初心者が作る前に知っておきたい基礎知識

1-1. WordPressテーマの役割と仕組み

WordPressテーマは、サイトの見た目やレイアウトを決めるファイル一式です。

投稿本文や固定ページの内容はWordPressのデータベースに保存され、テーマ側のテンプレートファイルがそれらを呼び出して画面に表示します。

つまり、WordPressテーマは「データをどのように表示するか」を担当するものです。

たとえば、ブログ記事ページでは投稿タイトル、本文、投稿日、カテゴリー、アイキャッチ画像などをテーマファイルで出力します。トップページ、一覧ページ、固定ページ、検索結果ページなども、それぞれテーマ内のテンプレートによって表示が制御されます。

1-2. 自作テーマと既存テーマ・子テーマの違い

WordPressテーマには、大きく分けて既存テーマ、自作テーマ、子テーマがあります。

既存テーマは、公式テーマや有料テーマのように、すでに完成されたテーマを利用する方法です。すぐにサイトを作れる反面、細かいデザイン調整や構造変更には制限があります。

自作テーマは、ゼロから自分でテーマファイルを作る方法です。デザインや機能を自由に設計できますが、HTML、CSS、PHP、WordPress関数の理解が必要です。

子テーマは、既存テーマを親テーマとして利用し、一部だけカスタマイズする方法です。親テーマの機能を活かしながら変更できるため、既存テーマをベースに調整したい場合に向いています。

完全にオリジナルのサイトを作りたいなら自作テーマ、既存テーマを少し変更したいだけなら子テーマが適しています。

1-3. クラシックテーマとブロックテーマの違い

WordPressテーマには、クラシックテーマとブロックテーマがあります。

クラシックテーマは、PHPテンプレートを中心に構成される従来型のテーマです。index.php、single.php、page.php、functions.phpなどを使ってページを作ります。WordPressテーマ制作を学ぶ場合、多くの教材や情報がクラシックテーマを前提にしています。

ブロックテーマは、サイトエディターやブロックを使ってサイト全体を編集できる新しい形式のテーマです。theme.jsonやHTMLテンプレートを使い、フルサイト編集に対応しています。

初心者がWordPress自作テーマの基本を理解するなら、まずはクラシックテーマから学ぶのがおすすめです。PHPテンプレートやWordPressループの仕組みを理解すると、ブロックテーマにも応用しやすくなります。

1-4. 自作テーマに向いている人・向いていない人

WordPress自作テーマに向いているのは、オリジナルデザインのサイトを作りたい人、HTMLやCSSを学んだ次のステップに進みたい人、WordPressの内部構造を理解したい人です。

また、企業サイト、ポートフォリオサイト、ブログ、メディアサイトなどを自分で設計したい場合にも自作テーマは役立ちます。

一方で、すぐにサイトを公開したい人、コードを書きたくない人、デザインや機能に強いこだわりがない人には、既存テーマの利用が向いています。

自作テーマは自由度が高い反面、制作、修正、保守を自分で行う必要があります。

1-5. 自作テーマで必要になるHTML・CSS・PHP・WordPressの基礎知識

WordPress自作テーマでは、以下の知識が必要です。

HTMLは、ページの構造を作るために使います。見出し、本文、リンク、画像、リストなどを正しくマークアップします。

CSSは、デザインやレイアウトを整えるために使います。文字サイズ、余白、色、レスポンシブ対応などを設定します。

PHPは、WordPressのデータを表示するために使います。投稿タイトルや本文を出力したり、条件分岐で表示内容を変えたりします。

WordPressの基礎知識としては、テンプレート階層、WordPressループ、テンプレートタグ、functions.phpの役割を理解しておくとスムーズです。

最初から完璧に理解する必要はありません。まずは最小構成のテーマを作り、少しずつ機能を追加していくのがおすすめです。

2. WordPress自作テーマを作る前に準備するもの

2-1. ローカル開発環境を用意する

WordPress自作テーマを作るときは、いきなり本番サーバーで作業するのではなく、ローカル開発環境を用意しましょう。

ローカル環境とは、自分のパソコン上でWordPressを動かせる開発環境のことです。Local、XAMPP、MAMP、Dockerなどを使うと、サーバーにアップロードしなくてもテーマ制作を進められます。

ローカル環境を使うメリットは、エラーが出ても本番サイトに影響しないことです。表示確認やコード修正を安全に行えます。

2-2. コードエディタを用意する

テーマファイルを編集するには、コードエディタが必要です。

代表的なエディタにはVisual Studio Codeがあります。HTML、CSS、PHPのコード補完や拡張機能が豊富で、初心者にも使いやすいエディタです。

ファイルを直接編集できる環境を整えておくと、テーマ制作が効率よく進みます。

2-3. テーマ用フォルダを作成する

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

たとえば「mytheme」というテーマを作る場合は、以下のような場所にフォルダを作成します。

wp-content/themes/mytheme

このmythemeフォルダの中に、index.php、style.css、functions.phpなどのテーマファイルを作成していきます。

フォルダ名は半角英数字とハイフンを使い、わかりやすい名前にしましょう。

2-4. 作業前に決めておくサイト構成

テーマを作り始める前に、サイト構成を決めておくとスムーズです。

トップページ、投稿一覧ページ、個別記事ページ、固定ページ、カテゴリー一覧、検索結果、404ページなど、必要なページを整理しましょう。

また、ヘッダー、フッター、サイドバー、ナビゲーションメニュー、メインビジュアル、記事カードなど、共通パーツも事前に考えておくと制作しやすくなります。

2-5. 公開用サーバー・ドメイン・WordPress本体の準備

自作テーマを公開するには、サーバー、ドメイン、WordPress本体が必要です。

ローカル環境でテーマを完成させたら、本番サーバーのWordPressにテーマをアップロードします。

公開前に、PHPのバージョン、WordPressのバージョン、SSL設定、パーマリンク設定なども確認しておきましょう。

3. WordPress自作テーマの基本ファイル構成

3-1. 最小構成に必要なindex.phpとstyle.css

WordPressテーマとして認識させるために最低限必要なファイルは、index.phpとstyle.cssです。

index.phpは、テーマの基本テンプレートです。ほかに適切なテンプレートがない場合、最終的にindex.phpが使われます。

style.cssは、テーマ情報とCSSを記述するファイルです。WordPressはstyle.cssのコメント情報を読み取り、管理画面にテーマとして表示します。

3-2. style.cssにテーマ情報を記述する

style.cssの先頭には、テーマ情報をコメントで記述します。

CSS
/*
Theme Name: My Theme
Theme URI: https://example.com/
Author: Your Name
Description: WordPress自作テーマのサンプルです。
Version: 1.0
Text Domain: mytheme
*/

最低限Theme Nameがあればテーマとして認識されます。ただし、管理しやすくするためにAuthor、Description、Versionなども書いておくとよいでしょう。

3-3. functions.phpの役割

functions.phpは、テーマに機能を追加するためのファイルです。

CSSやJavaScriptの読み込み、アイキャッチ画像の有効化、メニュー登録、ウィジェットエリアの追加、カスタム投稿タイプの登録などを行います。

functions.phpはWordPressテーマ制作で頻繁に使う重要なファイルです。

3-4. header.php・footer.php・sidebar.phpに共通パーツを分ける

サイト全体で共通して使う部分は、専用ファイルに分けると管理しやすくなります。

header.phpには、DOCTYPE宣言、headタグ、ヘッダー、ナビゲーションなどを記述します。

footer.phpには、フッター、閉じタグ、wp_footer()などを記述します。

sidebar.phpには、サイドバーやウィジェットエリアを記述します。

共通パーツを分けることで、複数ページに同じコードを書く必要がなくなります。

3-5. single.php・page.php・archive.phpなど主要テンプレートの役割

WordPressテーマでは、ページの種類ごとにテンプレートファイルを作成できます。

single.phpは個別投稿ページに使われます。

page.phpは固定ページに使われます。

archive.phpはカテゴリー、タグ、月別アーカイブなどの一覧ページに使われます。

front-page.phpはトップページ用テンプレートです。

search.phpは検索結果ページ、404.phpはページが見つからない場合のテンプレートです。

これらを用意することで、ページごとに異なるデザインを作れます。

3-6. assetsフォルダでCSS・JavaScript・画像を管理する

CSS、JavaScript、画像ファイルはassetsフォルダにまとめると管理しやすくなります。

例として、以下のような構成にします。

mytheme/
├─ index.php
├─ style.css
├─ functions.php
├─ header.php
├─ footer.php
├─ single.php
├─ page.php
├─ archive.php
└─ assets/
   ├─ css/
   ├─ js/
   └─ images/

ファイルの場所を整理しておくと、後から修正するときに迷いにくくなります。

4. WordPress自作テーマの作り方｜最小構成でテーマを認識させる

4-1. wp-content/themes内にテーマフォルダを作る

まず、wp-content/themes内に自作テーマ用のフォルダを作成します。

wp-content/themes/mytheme

フォルダ名はテーマ名に合わせてわかりやすくしましょう。

4-2. index.phpを作成する

mythemeフォルダ内にindex.phpを作成します。

最初は以下のような簡単な内容で問題ありません。

PHP
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My Theme</title>
</head>
<body>
  <h1>WordPress自作テーマです</h1>
</body>
</html>

この段階では、WordPressの投稿を表示する機能はまだありません。まずはテーマとして認識される状態を作ります。

4-3. style.cssを作成してテーマ名を設定する

次にstyle.cssを作成し、テーマ情報を記述します。

CSS
/*
Theme Name: My Theme
Description: 初めてのWordPress自作テーマ
Version: 1.0
Author: Your Name
*/

このファイルがないと、WordPress管理画面にテーマとして表示されません。

4-4. 管理画面から自作テーマを有効化する

WordPress管理画面にログインし、「外観」から「テーマ」を開きます。

作成したテーマが表示されていれば成功です。

テーマを有効化し、サイトを表示してindex.phpの内容が表示されるか確認しましょう。

4-5. 表示されないときに確認するポイント

自作テーマが表示されない場合は、以下を確認します。

style.cssがテーマフォルダ直下にあるか確認します。

style.cssの先頭にTheme Nameが書かれているか確認します。

index.phpが存在しているか確認します。

テーマフォルダの場所がwp-content/themes内になっているか確認します。

ファイル名のスペルミスがないか確認します。

特に、style.cssの記述ミスやフォルダ階層の間違いは初心者によくある原因です。

5. 静的HTMLをWordPressテーマ化する手順

5-1. HTMLファイルをパーツごとに分割する

すでに静的HTMLで作ったサイトがある場合は、それをWordPressテーマ化できます。

まず、HTMLを共通パーツごとに分割します。

ヘッダー部分はheader.php、フッター部分はfooter.php、サイドバーはsidebar.php、メインコンテンツはindex.phpやsingle.phpなどに分けます。

5-2. get_header()・get_footer()・get_sidebar()を使う

分割したファイルは、WordPressのテンプレートタグで読み込みます。

PHP
<?php get_header(); ?>

<main>
  <h1>メインコンテンツ</h1>
</main>

<?php get_footer(); ?>

サイドバーを使う場合は、以下のように記述します。

PHP
<?php get_sidebar(); ?>

これにより、header.php、footer.php、sidebar.phpを各テンプレートから呼び出せます。

5-3. wp_head()とwp_footer()を正しく設置する

header.phpにはwp_head()を記述します。

PHP
<?php wp_head(); ?>
</head>

footer.phpにはwp_footer()を記述します。

PHP
<?php wp_footer(); ?>
</body>
</html>

wp_head()とwp_footer()は、WordPress本体やプラグインが必要なコードを出力するために重要です。

これらがないと、CSSやJavaScriptが正しく読み込まれなかったり、管理バーが表示されなかったりします。

5-4. CSSとJavaScriptをfunctions.phpで読み込む

CSSやJavaScriptは、HTMLに直接書くのではなくfunctions.phpで読み込みます。

PHP
<?php
function mytheme_enqueue_scripts() {
  wp_enqueue_style(
    'mytheme-style',
    get_stylesheet_uri(),
    array(),
    '1.0'
  );

  wp_enqueue_script(
    'mytheme-script',
    get_template_directory_uri() . '/assets/js/main.js',
    array(),
    '1.0',
    true
  );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

wp_enqueue_style()とwp_enqueue_script()を使うことで、WordPressのルールに沿ってファイルを読み込めます。

5-5. 画像パスやリンクURLをWordPress用に書き換える

静的HTMLでは、画像パスを以下のように書くことがあります。

HTML
<img src="images/logo.png" alt="ロゴ">

WordPressテーマでは、テーマフォルダのURLを取得する関数を使います。

PHP
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/logo.png" alt="ロゴ">

トップページへのリンクは、home_url()を使います。

PHP
<a href="<?php echo esc_url(home_url('/')); ?>">ホーム</a>

URLやパスは固定で書かず、WordPress関数を使うことが大切です。

6. WordPressループで投稿一覧・記事ページを表示する

6-1. WordPressループとは

WordPressループとは、投稿データを取得して表示するための基本的な仕組みです。

投稿一覧や個別記事ページでは、ループを使ってタイトル、本文、日付、カテゴリーなどを表示します。

基本形は以下です。

PHP
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
  <?php endwhile; ?>
<?php endif; ?>

have_posts()で投稿があるか確認し、the_post()で投稿データをセットします。

6-2. 投稿タイトル・本文・日付・アイキャッチ画像を表示する

投稿情報は、WordPressのテンプレートタグで表示できます。

PHP
<article>
  <h1><?php the_title(); ?></h1>

  <time datetime="<?php echo esc_attr(get_the_date('c')); ?>">
    <?php echo esc_html(get_the_date()); ?>
  </time>

  <?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('large'); ?>
  <?php endif; ?>

  <div>
    <?php the_content(); ?>
  </div>
</article>

the_title()でタイトル、the_content()で本文、get_the_date()で投稿日、the_post_thumbnail()でアイキャッチ画像を表示します。

6-3. 投稿一覧ページを作る

投稿一覧では、複数の記事をループで表示します。

PHP
<?php if (have_posts()) : ?>
  <div class="post-list">
    <?php while (have_posts()) : the_post(); ?>
      <article class="post-card">
        <h2>
          <a href="<?php the_permalink(); ?>">
            <?php the_title(); ?>
          </a>
        </h2>

        <?php if (has_post_thumbnail()) : ?>
          <a href="<?php the_permalink(); ?>">
            <?php the_post_thumbnail('medium'); ?>
          </a>
        <?php endif; ?>

        <p><?php echo esc_html(get_the_excerpt()); ?></p>
      </article>
    <?php endwhile; ?>
  </div>
<?php else : ?>
  <p>記事がありません。</p>
<?php endif; ?>

the_permalink()を使うと、個別記事ページへのリンクを出力できます。

6-4. 個別投稿ページを作る

個別投稿ページにはsingle.phpを使います。

PHP
<?php get_header(); ?>

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

<?php get_footer(); ?>

single.phpを作ることで、記事詳細ページ専用のデザインを設定できます。

6-5. 固定ページを作る

固定ページにはpage.phpを使います。

PHP
<?php get_header(); ?>

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

<?php get_footer(); ?>

会社概要、お問い合わせ、サービス紹介などのページは固定ページで作ることが多いです。

6-6. 記事がない場合の表示を用意する

投稿がない場合の表示も用意しておきましょう。

PHP
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <?php the_title(); ?>
  <?php endwhile; ?>
<?php else : ?>
  <p>表示できる記事がありません。</p>
<?php endif; ?>

記事がないときに何も表示されないと、ユーザーが混乱します。検索結果ページやアーカイブページでは特に重要です。

7. テンプレート階層を理解してページごとのデザインを作る

7-1. テンプレート階層とは

テンプレート階層とは、WordPressがページの種類に応じて、どのテンプレートファイルを使うか決める仕組みです。

たとえば、個別投稿ページではsingle.phpが優先され、固定ページではpage.phpが使われます。該当するファイルがない場合は、最終的にindex.phpが使われます。

テンプレート階層を理解すると、ページごとに異なるデザインを作れるようになります。

7-2. トップページ用テンプレートを作る

トップページ専用のデザインを作りたい場合は、front-page.phpを作成します。

front-page.phpは、サイトのフロントページとして優先的に使われます。

トップページにメインビジュアル、最新記事、サービス紹介、プロフィールなどを表示したい場合に便利です。

7-3. 投稿ページ用テンプレートを作る

投稿ページにはsingle.phpを使います。

さらに、投稿タイプごとにテンプレートを分けることもできます。

通常のブログ記事であればsingle.phpで十分ですが、カスタム投稿タイプを使う場合はsingle-news.phpのようなファイルを作れます。

7-4. 固定ページ用テンプレートを作る

固定ページにはpage.phpが使われます。

特定の固定ページだけデザインを変えたい場合は、page-slug.phpやpage-id.phpを使います。

たとえば、スラッグがaboutの固定ページならpage-about.phpを作ることで、そのページ専用テンプレートを適用できます。

7-5. カテゴリー・タグ・アーカイブページを作る

カテゴリー一覧やタグ一覧にはarchive.phpが使われます。

より細かく分けたい場合は、category.php、tag.php、date.phpなどを作成します。

カテゴリーごとにデザインを変えたい場合は、category-news.phpのようにスラッグ別のテンプレートを作ることもできます。

7-6. 検索結果ページと404ページを作る

検索結果ページにはsearch.phpを使います。

PHP
<h1>検索結果: <?php echo esc_html(get_search_query()); ?></h1>

404ページには404.phpを使います。

存在しないURLにアクセスされたときに、トップページや検索ページへの導線を用意しておくと、ユーザーの離脱を減らせます。

8. 自作テーマに必要な基本機能を追加する

8-1. アイキャッチ画像を有効化する

アイキャッチ画像を使うには、functions.phpで有効化します。

PHP
function mytheme_setup() {
  add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'mytheme_setup');

これで投稿編集画面にアイキャッチ画像の設定欄が表示されます。

8-2. ナビゲーションメニューを追加する

管理画面からメニューを設定できるようにするには、register_nav_menus()を使います。

PHP
function mytheme_setup() {
  register_nav_menus(array(
    'global' => 'グローバルメニュー',
    'footer' => 'フッターメニュー',
  ));
}
add_action('after_setup_theme', 'mytheme_setup');

表示する場所にはwp_nav_menu()を記述します。

PHP
<?php
wp_nav_menu(array(
  'theme_location' => 'global',
));
?>

8-3. ウィジェットエリアを追加する

サイドバーなどにウィジェットを使いたい場合は、register_sidebar()を使います。

PHP
function mytheme_widgets_init() {
  register_sidebar(array(
    'name' => 'サイドバー',
    'id' => 'sidebar-1',
    'before_widget' => '<div class="widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="widget-title">',
    'after_title' => '</h2>',
  ));
}
add_action('widgets_init', 'mytheme_widgets_init');

表示する場所にはdynamic_sidebar()を使います。

PHP
<?php if (is_active_sidebar('sidebar-1')) : ?>
  <?php dynamic_sidebar('sidebar-1'); ?>
<?php endif; ?>

8-4. カスタムロゴを設定する

カスタムロゴを有効化すると、管理画面からロゴ画像を設定できます。

PHP
function mytheme_setup() {
  add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'mytheme_setup');

表示する場所にはthe_custom_logo()を使います。

PHP
<?php the_custom_logo(); ?>

8-5. パンくずリストを設置する

パンくずリストは、ユーザーが現在のページ位置を把握しやすくするためのナビゲーションです。

自作することもできますが、SEOプラグインの機能を使う方法もあります。

自作する場合は、トップページ、カテゴリー、投稿タイトルなどを条件分岐で表示します。

PHP
<nav class="breadcrumb">
  <a href="<?php echo esc_url(home_url('/')); ?>">ホーム</a>
  <span>›</span>
  <span><?php the_title(); ?></span>
</nav>

本格的に実装する場合は、カテゴリー階層や固定ページ階層にも対応させましょう。

8-6. ページネーションを実装する

投稿一覧にはページネーションを設置します。

PHP
<?php
the_posts_pagination(array(
  'mid_size' => 2,
  'prev_text' => '前へ',
  'next_text' => '次へ',
));
?>

記事数が増えたときに、ユーザーが過去の記事へ移動しやすくなります。

9. SEOに強いWordPress自作テーマにするポイント

9-1. titleタグ・meta descriptionを最適化する

SEOに強いWordPress自作テーマを作るには、titleタグやmeta descriptionを適切に設定することが重要です。

titleタグは、検索結果で特に重要な要素です。WordPressでは以下をfunctions.phpに追加して、タイトルタグをWordPressに任せる方法が一般的です。

PHP
add_theme_support('title-tag');

meta descriptionはテーマ側で固定するより、SEOプラグインやカスタムフィールドでページごとに設定できるようにすると管理しやすくなります。

9-2. 見出し構造を正しく設計する

ページ内の見出し構造もSEOに影響します。

基本的には、1ページにh1は1つにし、h2、h3を階層順に使います。

デザイン目的だけで見出しタグを使うのは避けましょう。見た目はCSSで調整し、HTMLでは文書構造を正しく表現することが大切です。

9-3. 構造化データを設定する

構造化データを設定すると、検索エンジンがページ内容を理解しやすくなります。

ブログ記事であればArticle、パンくずリストであればBreadcrumbListなどがよく使われます。

テーマに直接記述することもできますが、管理しやすさを考えるとSEOプラグインと併用する方法もあります。

9-4. 表示速度を改善する

表示速度はSEOとユーザー体験の両方に関係します。

不要なCSSやJavaScriptを読み込まない、画像を圧縮する、WebP形式を使う、遅延読み込みを設定するなどの対策が有効です。

自作テーマでは、必要なコードだけを実装できるため、既存テーマより軽量なサイトを作りやすいというメリットがあります。

9-5. レスポンシブ対応を行う

スマホで見やすいデザインにすることは必須です。

CSSのメディアクエリを使い、画面幅に応じてレイアウトを変更しましょう。

CSS
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 16px;
  }
}

スマホ、タブレット、PCの各画面で表示を確認することが大切です。

9-6. Core Web Vitalsを意識する

Core Web Vitalsは、ページの表示速度や操作性に関する指標です。

特に、画像の読み込み、レイアウトのズレ、JavaScriptの処理負荷に注意しましょう。

画像サイズを指定する、不要なアニメーションを減らす、ファーストビューの読み込みを軽くするなどの工夫が必要です。

9-7. 不要なコードやプラグイン依存を減らす

自作テーマでは、必要な機能だけを実装することで軽量化できます。

ただし、何でもテーマに詰め込むのは避けましょう。

SEO設定、フォーム、キャッシュ、セキュリティなど、プラグインで管理した方がよい機能もあります。

テーマは見た目と表示に関する役割に集中させると、メンテナンスしやすくなります。

10. セキュリティとメンテナンス性を高める実装

10-1. エスケープ処理を行う

WordPress自作テーマでは、出力時にエスケープ処理を行うことが重要です。

URLを出力するときはesc_url()を使います。

PHP
<a href="<?php echo esc_url(home_url('/')); ?>">ホーム</a>

テキストを出力するときはesc_html()を使います。

PHP
<p><?php echo esc_html(get_the_title()); ?></p>

属性値にはesc_attr()を使います。

PHP
<input value="<?php echo esc_attr($value); ?>">

エスケープ処理を行うことで、意図しないコードの出力を防げます。

10-2. サニタイズ処理を行う

サニタイズは、入力されたデータを安全な形に整える処理です。

フォームやカスタマイザーなどでユーザー入力を扱う場合は、保存前にサニタイズします。

PHP
$name = sanitize_text_field($_POST['name']);

URLであればesc_url_raw()、メールアドレスであればsanitize_email()など、用途に応じた関数を使います。

10-3. nonceでフォーム送信を保護する

フォームを自作する場合は、nonceを使って不正なリクエストを防ぎます。

フォーム側ではwp_nonce_field()を使います。

PHP
<?php wp_nonce_field('mytheme_form_action', 'mytheme_nonce'); ?>

送信後の処理ではcheck_admin_referer()やwp_verify_nonce()を使って検証します。

nonceを使うことで、CSRF対策になります。

10-4. WordPressのコーディング規約を意識する

WordPressにはコーディング規約があります。

インデント、関数名、エスケープ、翻訳対応などのルールを意識すると、読みやすく保守しやすいテーマになります。

チームで制作する場合やテーマを配布する場合は、特に重要です。

10-5. テーマ更新を見据えてファイルを整理する

テーマが大きくなると、ファイル管理が重要になります。

テンプレートパーツはtemplate-partsフォルダに分けると便利です。

template-parts/
├─ content.php
├─ content-page.php
└─ content-none.php

共通パーツを整理しておくと、修正範囲がわかりやすくなります。

10-6. バックアップとバージョン管理を行う

テーマ制作では、バックアップとバージョン管理が重要です。

Gitを使うと、変更履歴を管理できます。エラーが起きたときに前の状態へ戻せるため、安全に開発できます。

本番環境へ反映する前には、必ずテーマファイルとデータベースのバックアップを取りましょう。

11. 自作テーマを公開前にチェックする

11-1. 表示崩れを確認する

公開前には、各ページの表示崩れを確認します。

トップページ、投稿一覧、個別記事、固定ページ、カテゴリー、検索結果、404ページなど、主要ページをすべて確認しましょう。

余白、文字サイズ、画像サイズ、ボタン、リンクの表示も細かく確認します。

11-2. スマホ・タブレット表示を確認する

PCで問題なく表示されても、スマホで崩れていることがあります。

ブラウザの開発者ツールを使い、複数の画面幅で確認しましょう。

実機でも確認できると理想的です。

11-3. ブラウザごとの表示を確認する

Chrome、Safari、Firefox、Edgeなど、主要ブラウザで表示を確認します。

CSSの解釈がブラウザによって異なる場合があるため、特にレイアウトやフォーム周りは注意が必要です。

11-4. リンク切れや画像パスを確認する

ページ内リンク、ナビゲーション、画像パス、CSS、JavaScriptの読み込みを確認します。

ローカル環境では表示されていた画像が、本番環境では表示されないこともあります。

固定パスではなく、get_template_directory_uri()やhome_url()を使っているか確認しましょう。

11-5. エラー表示・デバッグモードで確認する

開発中は、wp-config.phpでデバッグモードを有効にしてエラーを確認できます。

PHP
define('WP_DEBUG', true);

本番公開時には、画面にエラーが表示されないように設定を戻しましょう。

PHPエラーや警告が出ていないか確認してから公開することが大切です。

11-6. テスト投稿で各ページの表示を確認する

テスト投稿を用意し、さまざまなパターンで表示確認します。

長いタイトル、短い本文、画像あり、画像なし、カテゴリー複数、コメントありなど、実際の運用に近い状態でチェックしましょう。

記事がない場合の表示も忘れずに確認します。

12. WordPress自作テーマをサーバーに公開する手順

12-1. テーマフォルダをzip化する

管理画面からテーマをアップロードする場合は、テーマフォルダをzip形式にします。

zipファイルの中に、index.phpやstyle.cssが直接入っている状態にしましょう。

フォルダ階層が二重になっていると、テーマが正しく認識されないことがあります。

12-2. 管理画面からテーマをアップロードする

WordPress管理画面の「外観」から「テーマ」を開き、「新規追加」「テーマのアップロード」を選択します。

zipファイルをアップロードし、インストール後に有効化します。

初心者にはこの方法がわかりやすくおすすめです。

12-3. FTPでテーマファイルをアップロードする

FTPソフトを使ってアップロードする方法もあります。

サーバー上のwp-content/themes内にテーマフォルダを配置します。

ファイル数が多い場合や、細かく修正しながら反映したい場合はFTPが便利です。

12-4. 本番環境でテーマを有効化する

アップロード後、管理画面から自作テーマを有効化します。

有効化したら、トップページや投稿ページを開いて、正しく表示されるか確認します。

本番環境ではローカル環境とURLやサーバー設定が異なるため、必ず動作確認を行いましょう。

12-5. 公開後に必ず確認する項目

公開後は、表示崩れ、リンク切れ、画像表示、問い合わせフォーム、メニュー、スマホ表示、SEO設定を確認します。

また、検索エンジンにインデックスさせたい場合は、WordPressの表示設定で「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていないか確認しましょう。

13. WordPress自作テーマでよくあるエラーと解決方法

13-1. テーマが認識されない

テーマが認識されない原因は、style.cssまたはindex.phpが不足しているケースが多いです。

style.cssの先頭にTheme Nameがあるか確認しましょう。

また、テーマフォルダがwp-content/themes直下にあるかも確認してください。

13-2. CSSやJavaScriptが読み込まれない

CSSやJavaScriptが読み込まれない場合は、functions.phpの記述を確認します。

wp_enqueue_style()やwp_enqueue_script()のパスが間違っていないか、wp_head()とwp_footer()が設置されているか確認しましょう。

13-3. 画像が表示されない

画像が表示されない場合は、画像パスの指定ミスが原因です。

相対パスではなく、get_template_directory_uri()を使ってテーマフォルダのURLを取得しましょう。

PHP
<img src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/sample.jpg" alt="">

13-4. 投稿本文が表示されない

投稿本文が表示されない場合は、WordPressループが正しく書かれているか確認します。

the_content()はループ内で使う必要があります。

PHP
<?php while (have_posts()) : the_post(); ?>
  <?php the_content(); ?>
<?php endwhile; ?>

13-5. 画面が真っ白になる

画面が真っ白になる場合は、PHPエラーが起きている可能性があります。

wp-config.phpでWP_DEBUGを有効にし、エラー内容を確認しましょう。

関数名のスペルミス、セミコロン忘れ、閉じかっこの不足などがよくある原因です。

13-6. 管理バーが表示されない

ログイン中なのに管理バーが表示されない場合は、wp_head()またはwp_footer()が不足している可能性があります。

header.phpにwp_head()、footer.phpにwp_footer()があるか確認しましょう。

13-7. 文字化けやレイアウト崩れが起きる

文字化けが起きる場合は、文字コードがUTF-8になっているか確認します。

レイアウト崩れが起きる場合は、CSSの読み込み順、HTMLの閉じタグ、レスポンシブ設定を確認しましょう。

14. WordPress自作テーマをさらに使いやすくする応用カスタマイズ

14-1. カスタム投稿タイプを追加する

ブログ記事とは別に、お知らせ、制作実績、商品情報などを管理したい場合は、カスタム投稿タイプを使います。

functions.phpにregister_post_type()を記述して追加できます。

PHP
function mytheme_register_post_type() {
  register_post_type('news', array(
    'label' => 'お知らせ',
    'public' => true,
    'has_archive' => true,
    'supports' => array('title', 'editor', 'thumbnail'),
  ));
}
add_action('init', 'mytheme_register_post_type');

カスタム投稿タイプを使うと、サイトの情報設計がしやすくなります。

14-2. カスタムフィールドを活用する

カスタムフィールドを使うと、通常の本文以外の情報を入力できます。

たとえば、商品価格、開催日、所在地、リンクURLなどを管理できます。

プラグインを使う方法もありますが、テーマ側で表示部分を設計する必要があります。

14-3. テーマカスタマイザーに対応する

テーマカスタマイザーに対応すると、管理画面からロゴ、色、テキストなどを変更できるようになります。

サイト運営者がコードを触らずに変更できるため、納品用テーマや長期運用するサイトに便利です。

14-4. ブロックエディターに対応する

現在のWordPressでは、ブロックエディターへの対応も重要です。

本文エリアの幅、ブロックの余白、画像の表示、エディター用CSSなどを調整すると、編集画面と公開画面の見た目を近づけられます。

PHP
add_theme_support('editor-styles');
add_editor_style('assets/css/editor-style.css');

14-5. 多言語化・翻訳対応を行う

テーマを配布・販売する場合は、多言語化に対応しておくと便利です。

表示テキストには__()や_e()を使います。

PHP
<?php echo esc_html__('続きを読む', 'mytheme'); ?>

Text Domainをstyle.cssに記述し、翻訳ファイルを用意すれば、複数言語に対応しやすくなります。

14-6. プラグインに頼りすぎない設計にする

便利なプラグインを使うことは悪くありません。

ただし、テーマの基本表示が特定のプラグインに依存しすぎると、プラグイン停止時にサイトが崩れる可能性があります。

テーマ本体では必要最低限の表示を成立させ、拡張機能はプラグインに任せるバランスが大切です。

15. WordPress自作テーマに関するよくある質問

15-1. 初心者でもWordPressテーマは自作できる？

初心者でもWordPressテーマは自作できます。

ただし、最初から高機能なテーマを作ろうとすると難しく感じます。まずはindex.phpとstyle.cssだけの最小テーマを作り、次にheader.php、footer.php、single.php、page.phpを追加していくのがおすすめです。

15-2. 自作テーマを作るのにどれくらい時間がかかる？

簡単なブログテーマであれば、学習しながら数日から数週間で作成できます。

企業サイトやメディアサイトのようにページ数や機能が多い場合は、数週間から数か月かかることもあります。

完成までの時間は、HTML、CSS、PHP、WordPressの理解度によって大きく変わります。

15-3. PHPがわからなくても作れる？

HTMLとCSSだけでは、本格的なWordPress自作テーマを作るのは難しいです。

ただし、必要なPHPは最初から高度なものではありません。

the_title()、the_content()、get_header()、get_footer()など、よく使うWordPress関数から覚えれば十分に始められます。

15-4. 自作テーマと子テーマはどちらがよい？

完全にオリジナルのデザインや構造で作りたいなら自作テーマがおすすめです。

既存テーマの一部だけを変更したい場合は子テーマが向いています。

学習目的でWordPressの仕組みを理解したいなら、自作テーマを作ることでテンプレートやループの理解が深まります。

15-5. 自作テーマはSEOに不利になる？

自作テーマだからSEOに不利になるわけではありません。

むしろ、不要なコードを減らし、表示速度や見出し構造を最適化できれば、SEOに強いテーマを作ることも可能です。

ただし、titleタグ、メタ情報、構造化データ、レスポンシブ対応、表示速度などを適切に実装する必要があります。

15-6. 作ったテーマを配布・販売してもよい？

自分で作ったテーマは配布・販売できます。

ただし、WordPress公式ディレクトリで配布する場合は、テーマレビューの基準を満たす必要があります。

また、外部ライブラリや画像素材を使っている場合は、ライセンスを必ず確認しましょう。

15-7. ブロックテーマとクラシックテーマはどちらから学ぶべき？

初心者がWordPressテーマ制作の基本を学ぶなら、まずはクラシックテーマがおすすめです。

クラシックテーマでは、テンプレート階層、WordPressループ、PHPテンプレートの仕組みを理解しやすいからです。

その後、ブロックテーマやtheme.jsonを学ぶと、WordPressの新しいテーマ制作にも対応しやすくなります。

まとめ

WordPress自作テーマは、HTML、CSS、PHP、WordPressの仕組みを使って、オリジナルのサイトデザインを作る方法です。

最初は難しく感じるかもしれませんが、index.phpとstyle.cssの最小構成から始めれば、初心者でも少しずつ理解できます。

基本の流れは、ローカル環境を用意し、テーマフォルダを作成し、必要なテンプレートファイルを追加し、WordPressループで投稿を表示し、functions.phpで機能を追加することです。

さらに、SEO、セキュリティ、レスポンシブ対応、表示速度、メンテナンス性を意識すれば、実用的なWordPress自作テーマに仕上げられます。

まずは小さなブログテーマから作り、トップページ、投稿ページ、固定ページ、アーカイブページと順番に機能を増やしていきましょう。WordPress自作テーマを作れるようになると、既存テーマでは実現しにくい自由なサイト制作ができるようになります。