対象はPHPテンプレートを使うクラシックテーマです。最小の認識条件と、記事を実際に表示できる状態を分けて説明します。ブロックテーマの作成手順ではありません。過去の画面写真は空ファイルでテーマ認識を確認した時点のものです。
WordPressには優れたテーマがたくさんあります。
無料であればCoconn、有料であればSWELLが個人的には推しています。
これまで既存のテーマをベースにしたカスタマイズはたくさん行ってきましたが、もっと深いところでの理解とカスタマイズを行いたい！
ということで時間を見つけて、自作テーマ（自前のスターターテーマ）を作ることにしました。
ということで第一弾！
WordPressの基礎知識や環境構築、スターターテーマなど事前に学ぶことは色々あるのですが…
まずは最小構成で自作テーマを作って表示することから始めようと思います。
体形的な知識も無しにいきなり作るのは非効率！という方もいるかもしれませんが、
初めから何かの参考書を頼るのではなく、手を動かしながら、わからないことは調べてというスタイルの方が本当の意味で自力が付くと思います。
スターターテーマを使わずに
WordPress自作テーマを制作する
最小構成のWordPress自作テーマの作り方
最小構成、最小手順でWordPressの自作テーマを作成して表示させてみます。
拍子抜けするくらい簡単に自作テーマが作成＆表示できます。
以下の2つのファイルを作成すれば、ある意味自作テーマが表示できます。
- index.php（テンプレートファイルがない場合に最後に使われるテンプレート）
- style.css（CSSを記述するファイル）
以下、やり方を解説します。
本来はLocalなどを使ってローカル環境でWordPressを構築するみたいな手順が主流ですが、
いきなりレンタルサーバーでWordPressを構築したいと思います。
学習には本番から分離したWordPress検証環境を用意します。既存サイトのテーマをいきなり切り替えず、元のテーマ名とファイルを控えておきます。
細かい手順は省きますが、アカウントを作成して、WordPressをインストール。
管理画面に入るところまで進めましょう。
テキストファイルを作成して、index.phpという名前のファイルを作成しましょう。
テーマ認識だけなら空でも構いませんが、表示確認にはこの後のindex.php例を入れてください。
同様にテキストファイルを作成して、style.cssという名前のファイルを作成しましょう。
このファイルは空の状態だとWordPressテーマとして認識されませんので、
以下のようなコメントを記載する必要があります。
/*
Theme Name: SUIMIN
*/index.phpとstyle.cssを格納したフォルダを作成。
それをZIPファイルに圧縮します。
あとは①で構築したWordPressの管理画面から、外観 > テーマ ＞新規追加 ＞ テーマのアップロード へアクセス。
ZIPで圧縮したテーマ（suimin.zip）を選択しましょう。
今すぐインストールボタンを押すとテーマのインストールが完了します。
まずは自作テーマを有効化してみましょう。
テーマ名だけ表示されています。
サイトのトップページを表示してみましょう。
index.phpには何も記述していないので、真っ白な画面が表示されます。
ここまではテーマが認識された状態です。空のindex.phpでは本文もWordPressのフックも出力されないため、下記の表示用コードを追加します。
ここから色々、足して自作テーマを改造していきましょう！
テーマ情報を記載するStyle.cssのヘッダーコメントの記述方法
テーマ名だけStyle.cssのヘッダーに記載しました。
Style.cssのヘッダー部分について調べて、テーマ情報とテーマのサムネイルの設定方法をちゃんとしていこうと思います。
/*
Theme Name: SUIMIN
*/しかし本来であれば、もう少し詳細の記述が必要になります。
| 項目 | テーマ認識の条件 | 備考 |
|---|---|---|
| Theme Name | 〇 | テーマ名 |
| Theme URI | – | テーマに関連するWebページのURL |
| Author | 任意 | 制作者名または組織名 |
| Author URI | – | 制作者名または組織名に関連するWebページのURL |
| Description | 任意 | テーマに関する説明 |
| Tags | – | テーマ検索用のキーワード。詳細 |
| Version | 任意 | XX または XXX 形式で書かれたテーマのバージョン |
| Requires at least | 任意 | テーマが動作する最も古いメインの WordPress バージョン |
| Tested up to | 任意 | テーマがテストされた最後のメインの WordPress バージョン |
| Requires PHP | 任意 | サポートされている最も古い PHP バージョン |
| License: GNU | 任意 | テーマのライセンス |
| License URI | 任意 | テーマ ライセンスの URL |
| Text Domain | 任意 | ドメインに使用される文字列 |
| Domain Path | – | テーマ検索用の翻訳を見つける場所 |
| Template | 子テーマのみ必要 | 子テーマにいれるStyle.cssは親テーマのテンプレート名を記載する |
/*
Theme Name: SUIMIN
Theme URI: https://suimin-theme.com/
Author: MOTOKI LLC.
Author URI: https://motoki-design.co.jp/wordpress/
Description: A minimal classic theme for learning.
Tags: blog, block-styles
Version: 1.0.0
Requires at least: 5.6
Tested up to: 5.6
Requires PHP: 7.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suimin
Domain Path: /languages
*/ちなみに子テーマに入れるstyle.cssの記述は以下の通り。
子テーマの場合はテンプレート名（Template）の記述が必要
/*
Template: suimin
Theme Name: SUIMIN Child
Theme URI: https://suimin-theme.com/
Author: MOTOKI LLC.
Author URI: https://motoki-design.co.jp/wordpress/
Description: SUIMIN Child Theme
Tags: blog, block-styles
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suiminchild
Domain Path: /languages
*/参考
テーマ情報の確認
あとは記述したStyle.cssをアップロードして更新します。※FTPを使いました。
自作テーマを選択すると詳細情報が追記されています。
自作WordPressテーマのサムネイル登録
テーマ画像が透明なままなので、以下の仕様の画像を追加してあげます。
| 画像サイズ | 幅 880px × 高さ660px |
| ファイル名 | screenshot.png |
| ファイル形式 | png |
FTPを使ってscreenshot.pngをアップロードします。
テーマのサムネイルが登録されました！
まとめ
初めてのWordPress自作テーマということで、超最小構成で構築してみした。
真っ白とはいえ、テーマとして認識・表示できていますので、あとは必要な要素を調べて肉付けしていくだけです。
本ブログでは、これからも自作テーマについて調べたことをまとめる予定です。
最終的には自前のスターターテーマ（自作テーマを作るためのベースの自作テーマ）としてブラッシュアップしていこうと思います。
GitHubの過去の例は今回の修正と同期していません。現行コードは本文を参照してください。過去のコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
白い画面から本文を表示するindex.phpへ
作成したindex.phpの中身を以下に置き換えます。本文とページ送りを表示し、プラグインが使うwp_head・wp_body_open・wp_footerも呼び出します。これは表示確認用で、商品販売や会員機能を含む完成テーマではありません。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo esc_html(wp_get_document_title()); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<main>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); wp_link_pages(); ?>
</article>
<?php endwhile; ?>
<?php the_posts_navigation(); ?>
<?php else : ?>
<p>表示できる投稿がありません。</p>
<?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>この2ファイル版はstyle.cssをまだ画面へ読み込みません。次回以降functions.phpでCSSを読み込み、title-tagサポートを追加したら、この例のtitle要素は削除して重複を防ぎます。
2ファイルのテーマで分割本文を確かめる
最小構成のindex.phpとstyle.cssを検証用テーマへ配置し、実WordPressで投稿を開きました。分割した本文の2をEnterで開くと2ページ目の本文に切り替わり、1から戻ると1ページ目の本文が表示されます。PC幅1280pxとスマホ幅390pxで確認しています。
本文を分割して試す場合は、投稿へページ区切りブロックを挿入してください。分割用の区切りがない投稿では番号は出ません。下の画面の「Pages: 1 2」はwp_link_pages()が出力した番号です。投稿一覧のページ送りとは別の機能です。
この段階では装飾用のCSSを読み込んでおらず、通常の文字とリンクで表示されます。見た目を整える前に、本文、番号、移動先を確かめてください。次のヘッダーとフッターの作成でテンプレートを分割します。
本番の使用中テーマへ上書きせず、別の検証用ディレクトリへ配置します。
今回は管理画面での有効化と投稿0件の表示を確認しました。
導入前のテーマ名と原本を保存し、問題が出た場合は元のテーマへ戻してください。
外観で有効化して投稿0件を確認する
まず検証用WordPressの使用中テーマ名を控え、別のフォルダーにこの記事のstyle.cssとindex.phpを配置します。
管理画面の「外観 → テーマ」でstyle.cssのTheme Nameに指定した名前を探し、「有効化」を選びます。
「有効」と表示されたテーマ名を確認してから、サイトのトップページを開きます。
投稿がない検証環境では、「表示できる投稿がありません。」という案内が出ることを確認します。
この案内が出れば、テーマの認識だけでなく、index.phpの投稿0件の分岐まで実行されています。
記事がある環境で投稿0件を試すために既存記事を削除する必要はありません。
投稿のある場合の本文表示と分割番号の確認は、前節の手順で別に確かめます。
問題があれば「外観 → テーマ」で控えておいた元のテーマを有効化します。
ヘッダー項目と戻し方
独立したテーマを認識させるstyle.cssの基本項目はTheme Nameです。Templateは子テーマで親フォルダー名を指定する項目です。その他の情報は配布時の要件と区別してください。上のバージョン値は過去の例で、動作保証ではありません。詳しくは公式のstyle.css仕様を参照してください。
検証環境で投稿あり／なし、ページ送り、PC・スマホの本文表示とリンク操作を確認します。戻すときは外観のテーマ画面から元のテーマを有効化します。管理画面に入れない場合に備え、検証環境のファイルを復元できる状態で進めます。
