Toolchain

WordPressのテンプレートの開発方法については、公式ドキュメントやネット上に多くの資料がありますが、逆に情報が多すぎてわかりづらいと感じることもあるかと思います。

そこで本記事では、私の環境でサンプルの開発環境構築から、本当にシンプルなテーマの作成までをわかりやすく説明します。

このブログ記事を含めて、全3回シリーズで WordPress のテーマ作成を、できるだけ簡単に解説していきます。

対象読者

自社のWordPressサイトを少しカスタマイズしてみたい中小企業の方
最低限の知識でテーマを作成したい方

目的

WordPressの最小構成テーマを自作し、管理画面から適用するまでの流れを紹介します。
CSSやデザインは含めず、構造と動作確認をゴールにしています。

1. ローカル開発環境の構築

このブログのやり方では次の二つのソフトウェアでローカル（皆さんの手元のコンピューター）でWordpressを作成します。

Local by Flywheel
- 初心者にもおすすめの簡単ローカル開発環境
Visual Studio Code
- 上記のLocalから起動できるので、入れておいた方が簡単かもしれません。

2. Localの初期設定

1. ローカル開発環境を構築する（すでにWordPressを立ち上げた人はスキップ）

まずは、WordPressが動作するローカル環境を構築します。

Local（公式サイト）からアプリをダウンロードします。
インストール後、Local を起動するとアプリケーションが立ち上がります。
画面のナビゲーションに従って、新しい WordPress サイトを作成します。

このとき、Webサイトの名前は任意のもので構いません。

また、WordPress 管理画面にログインするための「ユーザー名」と「パスワード」も求められるので、自分の覚えやすいものを入力しておきましょう。

2. WordPress の起動確認

例）http://sample.local/admin

先ほど登録した「ユーザー名」と「パスワード」でログインすれば、WordPress のダッシュボードに入ることができます。

3. VS Codeの起動とテーマディレクトリの作成

Local の管理画面から「Open in VS Code」ボタンを使って、Visual Studio Code を起動します。
VS Code 左側のファイルマネージャーから、次のディレクトリを探してください：

wp-content/themes/

ここには、初期状態でいくつかのテーマディレクトリ（例：twentytwentyfour など）が入っています。これらと同じ階層に新しいディレクトリを作成します。
WordPress のテーマとして最低限必要なファイルは次の2つです：

index.php
style.css

この2つのファイルを、先ほど作成したディレクトリ（例：original）の中に追加します。
この段階では、中身は空でも問題ありません。
あとでコードを記述していきます。

4. 管理画面からテンプレートを確認する

WordPress の管理画面に戻り、左メニューから「外観（Appearance）」をクリックします。
先ほど作成したテーマ（例：original）が表示されていれば成功です。
次に、「有効化（Activate）」ボタンをクリックすると、そのテーマが現在のサイトに適用されます。
しかしながら、ソースコードに中身を何も書いていないので、サイトを表示しても何も表示されない状態になると思いますが、それで問題ありません。

5. index.phpファイルにサンプルコードを記述する

<?php
/**
* Template Name: Original Template
*
*/
?>

<main>
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1><?php the_title(); ?></h1>
        <div>
          <?php the_content(); ?>
        </div>
      </article>
    <?php endwhile;
  else :
    echo '<p>ページが見つかりませんでした。</p>';
  endif;
  ?>
</main>

<?php
/**
* Template Name: Original Template
*
*/
?>

<main>
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <h1><?php the_title(); ?></h1>
        <div>
          <?php the_content(); ?>
        </div>
      </article>
    <?php endwhile;
  else :
    echo '<p>ページが見つかりませんでした。</p>';
  endif;
  ?>
</main>

6. テーマをページに適用

次に、WordPress の管理画面から固定ページを新規作成、または既存のページを編集します。
編集画面の右側に「テンプレート（Template）」という項目が表示されています。
ここで、先ほど index.php に記述したテンプレート名 Original Template を選択してください。
テンプレートが適用されると、そのページに指定したレイアウトが反映されます。
プレビューで、タイトルと本文が表示されるかどうかを確認してみましょう。

テーマの環境設定が完了

これで、シンプルなオリジナルテンプレートの作成と適用が完了しました！
今はまだ style.css に何も書いていないため、デザインはされていませんが、
ここにCSSを記述することで、自由にレイアウトや見た目を整えることができます。

参考

WordPressを再評価する：忌避から理解、そして実用へ

Scrap Book

WordPressのテーマを作る方法 – 環境構築編 –