【WordPress】初めての自作テーマ開発で押さえておきたいポイント

2025年12月25日 2025年12月25日

remy_world

少しだけオリジナルなサイトを作ってWordPressで運用したい場合、何から初めて良いのか分からないと思います。親テーマを直接弄ると、親テーマの更新で上書きされてしまう可能性もあります。そここで、子テーマを活用してサイト開発を始めてみたい方向けに、気を付けるべきポイントをメモとして残しています。

なお、テーマは普段使っている"Lightning"を親テーマとしていますが、Lightningの子テーマであれば公式サイトからダウンロードできますので、こちら使えば便利です。

子テーマ活用での基本的な継承ルール

子テーマは、親テーマのファイルをすべて継承しつつ、変更したいファイルだけを子テーマ側に配置してカスタマイズするために利用されます。これにより、親テーマがアップデートされても、子テーマのカスタマイズが失われるのを防ぐことができます。

テンプレートファイル（PHPファイル）の継承

親テーマにindex.phpがあっても、子テーマにindex.phpがなければ、WordPressは親テーマのindex.phpを読み込みます。
子テーマにindex.phpを作成・追加すると、子テーマのindex.phpが優先的に読み込まれます。つまりオーバーライドされる。

functions.php の扱い

functions.phpは、子テーマの functions.php が読み込まれた後に、親テーマの functions.phpも読み込まれます。これは「上書き」ではなく、機能の「追加・拡張」として動作します。ただし、同じ関数名があった場合は、子テーマの関数が優先されます。

CSS (style.css) の扱い

子テーマの style.cssは必須です。親テーマの CSS を読み込むこともできますが、基本的にはこちらが読み込まれます。
テーマの切り替え画面で親テーマの情報（テーマ名、作者など）を定義する役割も持ちます。
WordPressにテーマとして認識させるためにはこのstyle.cssとindex.phpが最低限必要となります。子テーマのindex.phpは内容は空でも構いません。
style.cssの書き方は下記の通りで、動作に影響しないようにコメントアウトで囲まれてます。それでもWordPressはこの内容を読み取ってテーマとして認識してくれます。

/*
Theme Name: Lightning Child テーマ
Theme URI:
Template: lightning
Description:子テーマから作った練習用サイトです
Author:
Tags:
Version: 1.0.0
*/

/*
Theme Name: Lightning Child テーマ
Theme URI:
Template: lightning
Description:子テーマから作った練習用サイトです
Author:
Tags:
Version: 1.0.0
*/

ここで注意が必要なのは、例えばTheme Name:のように最初は大文字で、その間はスペースで挟みます。コロン(:)の右側は英語でも日本語でも大丈夫です。

それだけで下記の通りWordPressはテーマと認識します。

「ホームページの表示」設定によるテンプレート階層の違い

「最新の投稿」に設定した場合

ホームページ表示⇨最新の投稿

読み込まれる順番は次の通り。投稿一覧がトップページとなる。
home.php ⇨ index.php

「固定ページ」に設定した場合

ホームページ表示⇨固定ページ

ホームページがトップページとなり、投稿ページが投稿一覧となる。
上記の場合、予め「HOME」と「ブログ」の固定ページを2つ作成しておく必要があります。

ホームページとして読み込まれる順番
front-page.php ⇨ page.php ⇨ index.php
投稿ページとして読み込まれる順番
home.php ⇨ index.php

要するに、WordPressはテンプレート階層に従って、該当するテンプレートファイルを探しますが、目的のテンプレートが見つからない場合は最終的にindex.phpが読み込まれます。

他のアクセスやお問い合わせなどの固定ページは、トップページの内容としてではなく、独立したページとして作成し、メニューに追加するのが標準的なWordPressの使い方です。

ブログ投稿とお知らせなどの固定ページを一つのページにしたい時

これは企業サイトにありがちなケースで、トップページに、お知らせや最新のブログ投稿などをまとめて表示させたい場合などです。

最も一般的な方法は、まずfront-page.phpを作成します。前述のように、front-page.phpはWordPressの「表示設定」で「ホームページの表示」が「固定ページ」に設定されている場合に、トップページとして一番最初に読み込まれます。

このfront-page.phpに以下のコンテンツを埋め込みます。

front-page.php

固定ページ（お知らせなど）の内容

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_content(); // 固定ページの本文を表示
    endwhile;
endif;

if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_content(); // 固定ページの本文を表示
    endwhile;
endif;

最新のブログ投稿一覧

// 最新のブログ投稿（お知らせ）を5件取得する場合
$args = array(
    'post_type'      => 'post', // 投稿タイプを指定
    'posts_per_page' => 5,      // 表示件数
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    echo '<h2>最新のブログ投稿</h2>';
    echo '<ul>';
    while ( $the_query->have_posts() ) : 
      $the_query->the_post();
      echo '<li>
      <a href="' . get_permalink() . '">' . get_the_title() . '</a>
      </li>';
    endwhile;
    
    wp_reset_postdata(); // クエリのリセット
else :
    // 投稿が見つからなかった場合の処理
    echo '<li>最新のブログ投稿がありません。</li>';
endif;
  echo '</ul>';

// 最新のブログ投稿（お知らせ）を5件取得する場合
$args = array(
    'post_type'      => 'post', // 投稿タイプを指定
    'posts_per_page' => 5,      // 表示件数
);
$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
    echo '<h2>最新のブログ投稿</h2>';
    echo '<ul>';
    while ( $the_query->have_posts() ) : 
      $the_query->the_post();
      echo '<li>
      <a href="' . get_permalink() . '">' . get_the_title() . '</a>
      </li>';
    endwhile;
    
    wp_reset_postdata(); // クエリのリセット
else :
    // 投稿が見つからなかった場合の処理
    echo '<li>最新のブログ投稿がありません。</li>';
endif;
  echo '</ul>';

以上です。😀

Follow me!

カテゴリー: Wordpress、テーマ開発