WordPressオリジナルテーマの作り方｜クラシックテーマの基本ファイルと実装手順

WordPressのオリジナルテーマには、ブロックテーマとクラシックテーマがあります。この記事はPHPのテンプレートで表示を作るクラシック親テーマの自作を扱います。実サイトのテーマを直接上書きする前に、ローカルや検証用環境で進めてください。

最初にテーマの種類と作業環境を決める

ブロックテーマはHTMLのテンプレートやサイトエディター等を中心に作ります。以下のPHPファイルによる例と混ぜて作らないようにします。ここではwp-content/themes内に独自のフォルダを作り、最小表示を確認した後に機能を足します。

最小構成：style.cssとindex.phpを作る

たとえばテーマフォルダをdoiya-sampleにします。クラシックテーマの最小構成はstyle.cssとindex.phpです。次のコードは学習用の最小例で、このサイトの実際の全コードではありません。まずstyle.cssの先頭へテーマ情報と最小の見た目を書きます。

/*
Theme Name: Doiya Sample
Version: 1.0.0
Text Domain: doiya-sample
*/
body { margin: 0; font-family: sans-serif; line-height: 1.8; }
main { max-width: 760px; margin: auto; padding: 24px; }
img { max-width: 100%; height: auto; }
a { overflow-wrap: anywhere; }

index.phpはWordPressのループで記事を表示します。タイトルや本文を固定の文字列で並べるのではなく、投稿データから読み込みます。wp_headとwp_footerはプラグインやWordPress側の出力にも関わるので入れます。

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<main>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <article <?php post_class(); ?>>
      <?php if (is_singular()) : ?>
        <h1><?php the_title(); ?></h1>
        <?php the_content(); ?>
      <?php else : ?>
        <h2><a href="<?php echo esc_url(get_permalink()); ?>"><?php the_title(); ?></a></h2>
        <?php the_excerpt(); ?>
      <?php endif; ?>
    </article>
  <?php endwhile; ?>
  <?php the_posts_pagination(); ?>
<?php else : ?>
  <p>記事が見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>

functions.phpでCSSとテーマ機能を読み込む

上の例ではCSSをまだ読み込んでいません。同じフォルダへfunctions.phpを追加し、wp_enqueue_styleを使います。PHPファイルの末尾の閉じタグは省略できます。

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

function doiya_sample_assets() {
    wp_enqueue_style(
        'doiya-sample-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
}
add_action('wp_enqueue_scripts', 'doiya_sample_assets');

検証環境の「外観→テーマ」で認識されるか確認し、有効化して記事が表示されるか試します。白い画面やエラーになった場合は元のテーマへ戻せる状態を保ち、変更したPHPとログを確認します。

ページの役割ごとにテンプレートを分ける

ファイル	主な役割
header.php／footer.php	共通の外枠。get_header／get_footerで呼ぶ
single.php	個別投稿
page.php	固定ページ
archive.php	カテゴリー等のアーカイブ
404.php	存在しないURLの案内
index.php	他に該当するテンプレートがない場合の基本表示