PHP初心者が挑戦できる！WordPressオリジナルテーマを作る！必要最小限編

2024年12月23日2024年12月27日

URLをコピーしました！

WordPressのテーマは、サイトのデザインや機能を決める重要な要素です。デザイン通りのサイトにするには、既存のテーマでは出来ない場合もあり、オリジナルテーマを作成することで、完全にデザイン通りのサイトを構築することができます。
しかし、「オリジナルテーマはPHPが難しそう」「どこから始めればいいのか分からない」という方も多いのではないでしょうか？

この記事では、PHP初心者でも挑戦できるように、Localを使ってオリジナルテーマを作成する際に必要なPHPの学習を解説します。基本的なPHPの練習してから、オリジナルテーマ作成ができる準備をしておきましょう！

Localでサイトを作る

まずは、WordPressのローカル環境を作成するために、Localをインストールします。

Localをダウンロードし、インストールします。
新しいサイトを作成し、WordPressをセットアップします。

詳しくは、下記のページで解説していますのでご参照ください。

オリジナルテーマ用フォルダを準備

オリジナルテーマを作成するためのフォルダを準備します。

Localのサイトフォルダに移動します。Local画面上部にある「Go to site folder」をクリックします。
例: app/public/wp-content/themes/
上記の themes フォルダ内に新しいフォルダを作成します。
フォルダ名はテーマ名にしましょう（例: mytheme）。

フォルダには以下のファイルを入れておきます（初期状態では空でOK）。

index.phpを作成します。
style.cssを作成します。

ビジュアルスタジオコードなどで、このあとindex.php が扱えるように指定のフォルダを開いておきましょう。

ビジュアルスタジオコードのインストール。最小限のセットアップは下記のページをご参照ください。

WordPressでテーマを反映

WordPressでテーマを反映してみます。Wordpressのテーマは、最小限のファイル　index.php とstyle.cssがあればテーマ一覧に反映します（スクリーンショットはないので、画像は表示されません）

WordPress管理画面にログインします。
「外観」→「テーマ」 を開きます。
先ほど作成したテーマが表示されているはずです。
ここで「有効化」をクリックします。

ただし、この段階では、サイト表示をしてもブラウザ画面に何も表示されません。

またstyle.cssがない場合はエラーが出て、反映することができませんので、空のstyle.cssを作成して対応します。

PHPの基本を練習しよう

PHP（Hypertext Preprocessor）とは、WebアプリケーションやWebサイトの開発に用いられるプログラミングで，インタプリンタ言語です。動的なWebページの生成やデータ処理など、幅広い用途で利用されています。WordpressはシステムファイルがPHPを使って作成されており、オリジナルテーマを作成する上では、必要な知識です。

まずはindex.phpを編集しながらPHPの基本をみてみましょう。以下のコードを入力し、Wordpressのダッシュボード＞サイト表示から、プレビュー確認を行いましょう。

<?php
$name = '山田';

echo $name;
?>

<?php はPHPを記述する場合に書く、PHPの開始タグです。
$nameは変数を宣言する部分です。
echoは変数や文字列を出力する命令です。
?> はPHPがここで終了という、PHPの終了タグです。

HTMLとPHPを組み合わせる

WordPressでは、HTMLコード内にPHPを組み込むことが一般的です。PHPを使用して動的なデータを取得し、その結果をHTMLとしてブラウザに送信します。これにより、ブラウザのソースコードを確認すると、PHPの処理結果がHTMLとして表示される仕組みです。

また、PHPコードのコメントアウトには、// を2つ使用します。以下はその例です：

// これはPHPのコメントです

このコメント形式を使用することで、コード内に注釈を加えることができます

<?php
$name = '山田';
//echo $name;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オリジナルテーマ</title>
</head>
<body>
    <h1>こんにちは、<?php echo $name; ?>さん！</h1>
</body>
</html>

<?php echo $name; ?>の部分でPHP変数をHTMLに出力しています。

ブラウザをリロードすると、HTMLを使った画面に「山田」と表示されています。ブラウザ上で、右クリック＞ソースを確認してみます。変数部分は処理されて文字列として表示しています。

WordPressテーマでよく使うPHP構文

初めての方は、Wordpress内でよく使われるPHPの構文について前もって、理解しておきましょう。

WordPressテーマでは、以下のPHP構文が頻出します

if文　条件に応じて処理を分岐

<?php
$name = '山田';
if ($name === '山田') {
    echo 'ようこそ、山田さん！';
} else {
    echo 'こんにちは！';
}
?>

$name という変数が文字列「山田」と等しい場合、「ようこそ山田さん」と出力され、そうでない場合は「こんにちは」と出力されます。このとき、「===」という比較演算子が使われています。比較演算子には、以下のような種類があります。

== ：等しい
!= ：等しくない
< ：小さい
> ：大きい
<= ：以下
>= ：以上

<?php
$age = 20;

if ($age >= 18) {
    echo '成人です。';
} else {
    echo '未成年です。';
}
?>

変数$ageの値が18以上の場合、「成人です。」と表示されます。
それ以外の場合、「未成年です。」と表示されます。例題は成人ですと出ます。

また、if構文をendifで終了させる書き方は、特にテンプレートファイルの中など、HTMLとPHPが混在する状況でよく使われます。この形式は、HTMLの中にPHPの条件分岐を簡潔に埋め込むのに便利です。

<?php
$name = '山田';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>オリジナルテーマ</title>
</head>
<body>
<?php if ($name === '山田'): ?>
    <p>ようこそ、山田さん！</p>
<?php else: ?>
    <p>こんにちは！</p>
<?php endif; ?>
</body>
</html>

通常の、{}を使う形式と異なり、:endifの形式は、HTMLが混ざるコードに適しており、読みやすくなり、Wordpressではよく使われます。

while文: 繰り返し処理

<?php
$number = 1;

while ($number <= 5) {
    echo $number . '<br>';
    $number++;
}
?>

while文は条件が満たされている間、処理を繰り返します

$numberは1から始まります。
$numberが5以下の間、echoで現在の値を出力します。
$number++で、1ずつ増えます。

$number++は「インクリメント演算子」と呼ばれ、変数の値を1増やす操作を意味します。

また、while文にもendwhileを使った記述方法があり、HTMLとの混在で見やすいコードを書くのに適しています。

while文の条件部分に:を使用。
PHPのループ処理をHTMLの中で記述し、endwhile;で終了します。
if文と組み合わせることが一般的。

少し難しい：投稿ループの形式

WordPressのテーマでは、投稿ループを表示するために「have_posts() 」や「the_post() 」を使用します。このループの記述方法には、つぎのような2つのパターンがあります。

{} 形式

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
</head>
<body>
    <?php if (have_posts()) { ?>
        <?php while (have_posts()) { the_post(); ?>
            <article>
                <h2>
                    <a href="<?php echo get_permalink(); ?>">
                        <?php echo get_the_title(); ?>
                    </a>
                </h2>
                <p><?php echo get_the_excerpt(); ?></p>
            </article>
        <?php } ?>
    <?php } else { ?>
        <p>投稿が見つかりませんでした。</p>
    <?php } ?>
</body>
</html>

`endwhile`形式

コードの見通しを良くしたい場合は、endwhile や endif を使用する方法が便利です。下記は、endwhile形式を使用したコードの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
</head>
<body>
<?php if (have_posts()): ?>
    <?php while (have_posts()): the_post(); ?>
        <article>
            <h2>
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
            </h2>
            <p><?php the_excerpt(); ?></p>
        </article>
    <?php endwhile; ?>
<?php else: ?>
    <p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</body>
</html>

have_posts()
- 現在のクエリに投稿が存在するかを確認します。投稿が存在する場合はtrueを返し、次の投稿が取得可能になります。
the_post()
- 現在の投稿をグローバル変数$postに設定し、投稿データを準備します。この関数を呼び出さないと、ループ内で投稿データにアクセスできません。
get_permalink()
- 現在の投稿のパーマリンク（URL）を取得します。
get_the_title()
- 現在の投稿のタイトルを取得します。
get_the_excerpt()
- 現在の投稿の抜粋を取得します。抜粋が設定されていない場合は、投稿内容の一部が自動的に使用されます。
the_permalink()
- パーマリンクを直接出力します（echoを省略可能）。
the_title()
- タイトルを直接出力します（echoを省略可能）。
the_excerpt()
- 抜粋を直接出力します（echoを省略可能）。

実際のテーマコードを書く場合は、構造が複雑でないなら{} 形式を使うと良いでしょう。一方、構造が複雑なテンプレートやネストされたコードの読みやすさを重視するなら、endwhile形式を推奨します。

関数

functions.phpを作成して、WordPressのテーマにカスタム機能を追加する準備をします。

そもそも関数とは？

関数は、何度も使う処理をまとめたものです。例として、挨拶を出力する関数を作成します。

<?php
function greet($name) {
    return "こんにちは、" . $name . "さん！";
}

echo greet('山田');
?>

関数の宣言: function greet($name)

PHPで関数を定義しています。
greetという名前の関数を作成。
この関数は、1つの引数$nameを受け取ります。

関数の処理内容

return文を使って文字列を返します。
"こんにちは、" . $name . "さん！"
- "こんにちは、"と、引数$nameの値、さらに"さん！"を連結しています。
- .は文字列をつなげる演算子（連結演算子）です。

関数の実行: echo greet('山田');

greet関数を呼び出し、引数として'山田'を渡します。
関数は"こんにちは、山田さん！"という文字列を返します。
echoはその返り値を画面に表示します。

実行結果

こんにちは、山田さん！

WordPressのfunctions.php

`functions.php`とは

functions.phpは、WordPressテーマの機能を追加・カスタマイズするための特別なファイルです。

テーマ独自の機能を追加

ウィジェットやカスタムメニューの登録
ショートコードの作成

WordPressの動作を変更

CSSやJavaScriptの読み込み方法を調整
投稿やページの表示設定を変更

プラグインのような働き

簡単な機能なら、プラグインを使わずにfunctions.phpで実現できます。

functions.phpに以下のコードを記述し、テーマのセットアップを行います。

<?php
function mytheme_setup() {
    add_theme_support('title-tag'); // タイトルタグを有効化
}
add_action('after_setup_theme', 'mytheme_setup');
?>

関数の宣言: `function mytheme_setup()`

mytheme_setupという名前の関数を定義しています。
WordPressのテーマをセットアップするための処理を記述します。
アクションフックのタイミングで関数を実行しています。

関数内の処理: `add_theme_support('title-tag');`

add_theme_support関数を使ってテーマの機能を有効化。
'title-tag'は、WordPressが自動的にHTMLの<title>タグを生成する機能を有効にするものです。
テーマ開発でタイトルタグを手動で記述する必要がなくなります。

アクションフックとは？

WordPressの特定のタイミングやイベントでカスタム処理を実行するための仕組み。
テーマやプラグインの開発で、既存の動作に追加の処理を組み込むことができます。

function my_custom_function() {
    echo 'サイトが読み込まれました！';
}
add_action('wp_footer', 'my_custom_function');

このコードは、wp_footerフックを使い、フッター部分に「サイトが読み込まれました！」を追加します。

応用編：アクションフック

以下は少し小難しいアクションフックになります。アコーディオン内にありますので、興味がある方は、タイトルをクリックしてご参照ください。

アクションフックについて

アクションフック: `add_action('after_setup_theme', 'mytheme_setup');`

add_action関数でWordPressの特定のタイミングに処理を登録。
'after_setup_theme':
- テーマがセットアップされるタイミングを指定。
- このタイミングでmytheme_setup関数が実行されるよう設定しています。
テーマが有効化されたとき、mytheme_setup関数が呼び出される。
WordPressがテーマに必要な設定を適用し、<title>タグが適切に生成されるようになる。

<title>サイトのタイトル | サイトの説明</title>

`add_theme_support`の役割

WordPressテーマに特定の機能を追加するための関数。
他に有効化できる機能例

add_theme_support('post-thumbnails'); // アイキャッチ画像を有効化
add_theme_support('custom-logo'); // カスタムロゴを有効化

`after_setup_theme`フックのタイミング

テーマの初期化に使われるフック。
子テーマを作成する場合、親テーマのセットアップ後にこのフックが動作します。

複数のテーマ機能をセットアップする場合

function mytheme_setup() {
    add_theme_support('title-tag');
    add_theme_support('post-thumbnails');
    add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'mytheme_setup');

理解しておきたい主なアクションフックの種類

after_setup_theme テーマの初期化時。テーマ機能のセットアップに使用される。
wp_enqueue_scripts スクリプトやスタイルを登録・読み込む際に使用。
init WordPressが初期化されるタイミングで実行される。
wp_footer フッター部分が出力される直前に実行される。
wp_head タグ内に追加の内容を挿入する際に使用される。
template_redirect テンプレートファイルが読み込まれる直前に実行される。
save_post 投稿が保存されるときに処理を追加できる。
admin_menu 管理画面のメニューをカスタマイズする際に使用される。
login_enqueue_scripts ログイン画面のスクリプトやスタイルを追加する際に使用。

配列の基本

配列は、複数の値を一つの変数に格納するためのデータ型です。配列を作成するには、array()または[]を使用します。

<?php
// 配列の作成
$colors = ['赤', '青', '緑'];

// 配列の中の要素を出力
echo $colors[0]; // 結果: 赤
echo $colors[1]; // 結果: 青
echo $colors[2]; // 結果: 緑
?>

foreach文の基本

foreach文を使うと、配列の要素を出力することができます。

<?php
$colors = ['赤', '青', '緑'];

foreach ($colors as $color) {
    echo $color . '<br>';
}
?>

$colors配列から1つずつ値を$colorに取り出します。
配列のすべての値がechoで表示されます。
.'<br>’は、赤の後ろで改行されて表示されるために設定しています。

配列とforeach文の実用例

WordPressテーマ内では、配列とforeach文を組み合わせてナビゲーションメニューを作成することがあります。

<?php
$menu_items = ['ホーム', 'ブログ', 'お問い合わせ'];

echo '<ul>';
foreach ($menu_items as $item) {
    echo '<li>' . $item . '</li>';
}
echo '</ul>';
?>

$menu_items配列にメニュー項目を格納します。
foreach文で配列の各項目を取り出し、リストタグ<li>で囲んで表示します。

実行結果（HTML出力）:

<ul>
    <li>ホーム</li>
    <li>ブログ</li>
    <li>お問い合わせ</li>
</ul>

応用：上記の例だと、a要素が入っていません。少しコードが複雑になりますが、a要素を入れるためのPHPも考えてみます。

<?php
$menu_items = [
    'ホーム' => 'index.php',
    'ブログ' => 'blog.php',
    'お問い合わせ' => 'contact.php'
];

echo '<ul>';
foreach ($menu_items as $name => $url) {
    echo '<li><a href="' . $url . '">' . $name . '</a></li>';
}
echo '</ul>';
?>

連想配列$menu_itemsは、キーとして表示する名前（例: “ホーム”）と、値としてリンク先のURL（例: “index.php”）をペアにしています。
$nameには 'ホーム'、'ブログ'、'お問い合わせ' というメニュー項目の名前が代入されます。
$urlには、それぞれのメニュー項目に対応するURL（index.php, blog.php, contact.php）が代入されます。
これを使って<a href="...">...</a>形式のリンクを作成しています。

実行結果（HTML出力）

<ul>
    <li><a href="index.php">ホーム</a></li>
    <li><a href="blog.php">ブログ</a></li>
    <li><a href="contact.php">お問い合わせ</a></li>
</ul>

連想配列とは？

キー（key） と 値（value） をペアで格納する配列です。
キーは文字列や数値が使え、値は任意のデータ型を格納できます。

普通の配列との違い

普通の配列では、データは 連続する番号（インデックス） をキーとして扱います。
連想配列では、自分で好きな 名前（キー） をつけられるため、データの意味を分かりやすく整理できます。

$array = [
    'キー1' => '値1',
    'キー2' => '値2',
];

応用：Wordpress推奨のメニュー作成

`functions.php` にメニューを登録

テーマの functions.php にメニューを登録して、使う方が効率的です。これにより外観からメニューが適用されダッシュボード設定したメニューが反映するようになります。

<?php
function register_my_menus() {
    register_nav_menus(
        array(
            'main-menu' => __('Main Menu'),
        )
    );
}
add_action('init', 'register_my_menus');
?>

WordPress管理画面でメニューを作成

管理画面の「外観」→「メニュー」で新しいメニューを作成し、先ほど登録した「Main Menu」に割り当てます。

`header.php` メニューを呼び出す

wp_nav_menu()関数を使って、メニューを表示するためのPHPを追加します。

<?php
wp_nav_menu(
  array(
    'theme_location' => 'main-menu', // 表示するメニューの「スラッグ」を指定
    'container' => 'nav', // メニューを囲むHTMLタグを指定（例: div, nav,false）
    'container_class' => 'main-menu', // 囲むタグ（container）に付与するクラス名
    'menu_class' => 'menu-list', // ul要素に付与するクラス名
  )
);
?>

wp_nav_menu()関数は、WordPressのメニュー機能を利用して動的にHTMLのナビゲーションメニュー(nav>ul>li>a）を生成するための関数です。オプションを連想配列で指定します。
array()は、複数の要素（キーと値のペアなど）を含む配列を作成するためのPHP関数です。wp_nav_menu()では、この配列を使ってメニュー表示に必要なオプションを指定します。
この配列では、キー（例: theme_location）が設定項目を示し、それに対応する値を指定します。
例えば、'theme_location' => 'main-menu'では、管理画面で登録されたmain-menuというスラッグのメニューを表示することを意味します。
その他にも、囲むHTMLタグやスタイリングに使うクラス名を指定するオプションがあります。

生成されるHTMLは下記のようになります。

<nav class="main-menu">
  <ul class="menu-list">
    <li>
      <a href="https://example.com/home">Home</a>
    </li>
    <li>
      <a href="https://example.com/about">About</a>
    </li>
    <li>
      <a href="https://example.com/services">Services</a>
    </li>
    <li>
      <a href="https://example.com/contact">Contact</a>
    </li>
  </ul>
</nav>

オリジナルテーマの構成

PHPの基本を押さえたところで、次に必要な作業は、WordPressオリジナルテーマを構築するためのファイル準備です。オリジナルテーマを作成するには、以下が必要になります：

ワイヤーフレーム
- デザインカンプを作る前に、サイトの構成やレイアウトを決める設計図。
デザインカンプ
- サイト全体のデザインを反映した完成形のイメージ（カンプ）があると、効率よく作業が進められます。
HTML/CSSデータ
- コーディング済みのHTML/CSSファイルがテーマの土台となります。

これらのステップを経て、ようやくWordPressテーマ作成に進めることができます。

WordPressテーマ構成のために必要な最小限のPHPファイル

style.css

テーマの情報を記載するファイル。
すでにスタイルシートが書いてあるファイルの一番上部に記述します。
WordPressテーマとして認識させるための必須ファイル。

/*
Theme Name: My Original Theme
Theme URI: https://example.com/
Author: あなたの名前
Author URI: https://example.com/
Description: 自分で作ったオリジナルテーマ
Version: 1.0
*/

index.php

テーマの基本テンプレート。
WordPressはテンプレートファイルが見つからない場合、このファイルをデフォルトで使用します。
コーディングされている「index.html」の拡張子をindex.phpに書き換えます。他のサブページも同様です。

functions.php

テーマの機能を追加するためのファイル。
テーマ作成の際にはほぼ必須と言えます

screenshot.png

テーマのプレビュー画像。
style.cssと同じフォルダに配置し、WordPress管理画面でテーマを視覚的に選べるようにします。
サイズは 1200px × 900px 推奨。

index.phpの準備

まずは基本のHTMLを用意します。HTMLは、マークアップを行う際にheader要素、main要素、footer要素に分けて行います。下記のコードをindex.phpにコピーしておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本の構成</title>
</head>
<body>
<header>
    <h1>タイトル</h1>
    <nav>ナビゲーション</nav>
</header>

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

<footer>
    フッターコンテンツ
</footer>

</body>
</html>

header.phpの作成

次に上記のコードの１行目からHTMLの<head>部分から<header>までを切り取って、header.phpに移動します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body>
<header>
    <h1><?php bloginfo('name'); ?></h1>
    <nav>
        <?php wp_nav_menu(array('theme_location' => 'main-menu')); ?>
    </nav>
</header>

<?php wp_head(); ?>

wp_head() は、WordPressのテーマの <head> タグ内に、必要なコードやリソース（CSS、JavaScriptなど）を挿入するための関数です。プラグインやテーマ機能で追加されるスタイルやスクリプトを正しく読み込むために使用されます。ず <head> タグの閉じる直前（</head> の直前）に配置します。

<?php bloginfo(‘name’); ?>

bloginfo('name') は、WordPressサイトの設定情報を取得して表示する関数です。管理画面の設定 → 「一般」 → 「サイトのタイトル」で設定された内容が表示されます。サイトの名前が<h1>内に挿入され、ページのタイトル部分に利用されることが多いです

`bloginfo()`関数の非推奨のパラメーター

bloginfo()関数には、サイトの情報（タイトル、URL、説明など）を取得して表示する機能があります。ただし、この関数で使用できるパラメータの中には「非推奨」とされるものもあり、将来的に削除される可能性があります。これらは最新のテーマやプラグイン開発では避けるべきです。

home
- サイトのホームURLを取得します。
- 代替: get_home_url()を使用してください。
url
- サイトのホームURLを取得します。
- 代替: 同じくget_home_url()を使用。
wpurl
- WordPressのインストールURLを取得します。
- 代替: get_site_url()を使用してください。
stylesheet_directory
- 使用中のテーマのスタイルシートディレクトリURLを取得します。
- 代替: get_stylesheet_directory_uri()を使用もしくは、functions.phpで記述する
template_directory
- 使用中のテーマのテンプレートディレクトリURLを取得します。
- 代替: get_template_directory_uri()を使用してください。

get_home_url()やget_site_url()などの関数は、より明確で安全に設計されています。新しい関数を使用することで、より堅牢で保守性の高いコードを書くことができます。

<!-- 非推奨 -->
<?php bloginfo('url'); ?>

<!-- 推奨 -->
<?php echo get_home_url(); ?>

CSSファイルをfunctions.phpで読み込む場合

非推奨な使い方

<!-- header.php内で -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css">

推奨とされる使い方

// functions.php
function my_theme_enqueue_styles() {
    wp_enqueue_style(
        'my-theme-style', 
        get_stylesheet_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

CSSのキャッシュバスティング（更新時にブラウザキャッシュをクリア）を自動的に管理しますし、必要に応じて条件付き読み込むこともできます。

footer.phpの作成

footer.phpには、HTMLの<footer>部分とwp_footer()を切り取って貼り付けます。

<footer>
    フッターコンテンツ
</footer>
<?php wp_footer(); ?>
</body>
</html>

<?php wp_footer(); ?>

wp_footer() は、WordPressテーマの </body> タグの直前に配置し、必要なコードやスクリプトを挿入するための関数です。主に プラグインやテーマ機能 で登録された JavaScriptやトラッキングコード を正しく読み込むために使用されます。例えば、Googleアナリティクスのコードや動的なスクリプトがここで追加される場合があります。wp_footer() → </body> タグ直前のコード追加に必要。

index.phpの作成

index.phpは、WordPressの基本構成に従い、get_header()とget_footer()のWordpress関数を使って、header.php とfooter.phpを読み込みます。

<?php get_header(); ?>

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

<?php get_footer(); ?>

functions.phpの作成

<?php
// テーマのセットアップ
function my_theme_setup() {
    // タイトルタグのサポートを有効化
    add_theme_support('title-tag');

    // HTML5対応の機能を有効化
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
}
add_action('after_setup_theme', 'my_theme_setup');

// スタイルシートとスクリプトの読み込み
function my_theme_enqueue_styles() {
    // style.cssの読み込み
    wp_enqueue_style(
        'my-theme-style', 
        get_stylesheet_directory_uri() . '/style.css'
    );
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

// メニューを登録
function register_my_menu() {
    register_nav_menu('main-menu', 'Main Menu');
}
add_action('after_setup_theme', 'register_my_menu');

タイトルタグのサポート

add_theme_support('title-tag');

このコードを追加することで、<title>タグが自動的に生成されます。header.phpで手動で書く必要がなくなります。

HTML5対応

add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));

検索フォームやコメントフォームなどでHTML5のマークアップが使用されるようになります

スタイルシートの読み込み

wp_enqueue_style(
        'my-theme-style', 
        get_stylesheet_directory_uri() . '/style.css'
);

get_stylesheet_uri()は、テーマのstyle.cssへのURLを取得します。WordPressの推奨方法でスタイルを読み込むため、テーマのカスタマイズやプラグインとの互換性が向上します。

ファイル構成

以下のようなファイル構成が最小限の構成となります。

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

その他に固定ページ用のPHP、投稿ページ用のPHP、カテゴリーページ用のPHP、検索用のPHPといった感じで、Wordpressは、表示するページが増えれば増えるほど、必要になるPHPの数が増えてきます。

my-theme/
├── style.css
├── index.php
├── page.php
├── single.php
├── archive.php
├── search.php
├── 404.php
├── sidebar.php
├── header.php
├── footer.php
└── functions.php

各ファイルの優先順位

WordPressでは、上記のようなテンプレートファイルが特定のリクエストに応じて使用されます。

style.css
テーマのスタイルシートファイルで、テーマ情報（テーマ名や作成者など）も記述します。必須ファイルです。
index.php
テーマの基本テンプレートファイル。他に適したテンプレートファイルが存在しない場合に使用されます（最下位の優先順位）。
front-page.php
サイトのホームページに使用されるテンプレート。設定 > 表示設定でフロントページが指定されている場合、最優先で使用されます。
home.php
ブログ投稿の一覧ページに使用されるテンプレート。front-page.phpが存在しない場合に使用されます。
page.php
固定ページに使用されるテンプレート。
page-{slug}.php
固定ページのスラッグ（例: contact）に基づいて使用されるテンプレート。
例: page-contact.php。
page-{ID}.php
固定ページのID（例: 42）に基づいて使用されるテンプレート。
例: page-42.php。
single.php
単一投稿ページ（ブログ投稿など）に使用されるテンプレート。
single-{post_type}.php
カスタム投稿タイプ（例: product）に基づいて使用されるテンプレート。
例: single-product.php。
archive.php
カテゴリ、タグ、カスタム投稿タイプのアーカイブページに使用されるテンプレート。
archive-{post_type}.php
特定のカスタム投稿タイプ（例: product）のアーカイブページに使用されるテンプレート。
例: archive-product.php。
search.php
検索結果ページに使用されるテンプレート。
404.php
404エラーページ（ページが見つからない場合）に使用されるテンプレート。
sidebar.php
サイドバー部分を表示するテンプレート。get_sidebar()で呼び出されます。
header.php
ヘッダー部分を表示するテンプレート。get_header()で呼び出されます。
footer.php
フッター部分を表示するテンプレート。get_footer()で呼び出されます。
functions.php
テーマ全体の機能を定義するファイル。このファイルはすべてのテンプレートで読み込まれます。テーマのスタイルシートファイル。テーマ情報もこのファイルに記述されます。

page.php

固定ページ（例: 「About」ページや「Contact」ページ）のテンプレートを提供。固定ページがリクエストされた場合に使われるテンプレートファイルです。通常、固定ページは1件のみが表示されるため、while ループは不要ですが、if 文は使います。

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title(); ?></h1>
            <div>
                <?php the_content(); ?>
            </div>
        <?php endwhile; ?>
    <?php else : ?>
        <p>ページが見つかりません。</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

the_title() でページタイトル、the_content() でそのページの本文を表示します。
have_posts() で投稿があるか確認し、while ループ内でその投稿の内容を表示しています。固定ページでは通常、1つの投稿が表示されるので、このループが1回だけ回ります。
the_title() でタイトルを、the_content() で本文を表示します。

single.php

個別投稿（ブログ記事など）の表示に使用。個別の投稿ページを表示するためのテンプレートです。

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) : the_post(); ?>
            <h1><?php the_title(); ?></h1>
            <div>
                <?php the_content(); ?>
            </div>
        <?php endwhile; ?>
    <?php else : ?>
        <p>投稿が見つかりませんでした。</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

the_title() でページタイトル、the_content() でそのページの本文を表示します。
投稿があるかを if で確認し、その後 while ループで投稿を取り出して表示します。
the_title() で投稿タイトル、the_content() で投稿内容を表示しています

sidebar.php

サイドバーのウィジェットやナビゲーションを管理するテンプレート。サイドバーのウィジェットやナビゲーションを管理するテンプレート

<aside>
    <h2>サイドバー</h2>
    <?php dynamic_sidebar('sidebar-1'); ?>
</aside>

dynamic_sidebar('sidebar-1') は、管理画面の「外観」→「ウィジェット」で設定したウィジェットエリア（ここでは sidebar-1）を表示します。サイドバーに動的なコンテンツを追加するために使います。

functions.phpにウィジェットエリアを登録

sidebar.phpを使用するためには、ウィジェットエリアをfunctions.phpに登録する必要があります。

<?php
// ウィジェットエリアの登録
function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => 'サイドバー',
        'id'            => 'sidebar-1',
        'before_widget' => '<section>',
        'after_widget'  => '</section>',
        'before_title'  => '<h2>',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

register_sidebar() 関数で、サイドバーエリア（sidebar-1）を登録します。これにより、管理画面からウィジェットを追加・管理できるようになります。

404.php

ユーザーが存在しないページにアクセスしたときに表示される「404 – ページが見つかりません」ページを管理します。ページが見つからなかった場合に表示されるコンテンツを定義

<?php get_header(); ?>

<main>
    <h1>404 - ページが見つかりません</h1>
    <p>申し訳ありませんが、お探しのページは見つかりませんでした。</p>
    <p>以下のリンクから他のページをご覧ください。</p>
    <ul>
        <li><a href="<?php echo home_url(); ?>">ホーム</a></li>
        <li><a href="<?php echo home_url('/blog'); ?>">ブログ</a></li>
    </ul>
</main>

<?php get_footer(); ?>

ユーザーが無効なURLを入力した場合に「404エラー」を表示します。home_url() を使ってホームページへのリンクを提供しています。

search.php

ユーザーがサイト内検索を行った際に表示される検索結果ページを管理。検索クエリに基づいて、検索結果を表示するためのテンプレートです。

<?php get_header(); ?>

<main>
    <h1>検索結果: <?php echo get_search_query(); ?></h1>
    
    <?php if ( have_posts() ) : ?>
        <ul>
            <?php while ( have_posts() ) : the_post(); ?>
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile; ?>
        </ul>
    <?php else : ?>
        <p>検索結果が見つかりませんでした。</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

get_search_query() で検索したキーワードを表示し、have_posts() と the_post() を使って検索結果をループして表示します。検索結果がなければ、「検索結果が見つかりませんでした」と表示します。

archive.php

投稿のアーカイブページ（カテゴリ別、タグ別、日付別など）を表示するテンプレートです。投稿がカテゴライズされたり、特定のアーカイブページにアクセスされたときに使用されます。

<?php get_header(); ?>

<main>
    <h1><?php the_archive_title(); ?></h1>
    <p><?php the_archive_description(); ?></p>

    <?php if ( have_posts() ) : ?>
        <ul>
            <?php while ( have_posts() ) : the_post(); ?>
                <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
            <?php endwhile; ?>
        </ul>
    <?php else : ?>
        <p>投稿がありません。</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

the_archive_title() と the_archive_description() を使って、アーカイブのタイトルや説明を表示します。また、have_posts() と the_post() を使ってアーカイブされた投稿を表示します。例えば、カテゴリーページやタグページで使われます。

functions.phpに追加設定

search.php や archive.php に関連する機能を追加する場合、例えば検索機能を強化するために、functions.php でカスタムクエリやウィジェットを設定

<?php
// カスタム検索機能の追加
function my_custom_search_functionality($query) {
    if ($query->is_search && !is_admin()) {
        // カスタム検索ロジックをここに追加
    }
}
add_action('pre_get_posts', 'my_custom_search_functionality');

WordPressのテーマ作成において、get_header(), get_footer(), そしてループ（whileやif）は非常に重要な役割を果たします。これらを理解して活用することで、サイトのコンテンツを効率的に表示できるようになります。基本的な構造をしっかり作成し、必要に応じて条件分岐やループを活用することで、柔軟で管理しやすいテーマを作成できます。

テーマ作成の第一歩として、これらの基本的なファイルをきちんと理解し、実装できるようになることが大切です。これからさらにWordPressのテーマ作成を進めていく中で、少しずつカスタマイズや機能追加を行い、自分だけのオリジナルテーマを完成させていってください。