ここから、STEP 02で作ったHTML・CSSをWordPressのクラシックテーマへ移します。最初にWordPressがテーマとして認識できる最小構成を作ります。
この教材でクラシックテーマを作る理由
WordPressには、PHPテンプレートを中心に作るクラシックテーマと、ブロックを中心に作るブロックテーマがあります。この教材では、PHP、テンプレート階層、ループの仕組みを学ぶためにクラシックテーマを作ります。
どちらが常に優れているという意味ではありません。案件の要件、既存サイトの構成、更新する人の運用方法に合わせて選びます。
テーマとして認識される最低限の構成
WordPressがテーマとして認識するために必要なファイルと役割を確認してください。
自作テーマはwp-content/themesの中へ専用フォルダーを作ります。最低限のテーマ情報を持つstyle.cssと、表示の土台になるテンプレートを用意します。
テーマ名や説明などの情報は、style.cssの先頭にあるテーマヘッダーへ記述します。管理画面のテーマ一覧に表示されない場合は、フォルダーの場所、ファイル名、テーマヘッダーを確認してください。
テーマフォルダーを作る
次の画像は、「テーマフォルダーを作る」で扱うコードや構成をブラウザで表示した結果です。
wp-content/themes/my-original-theme/
├── style.css
├── index.php
└── functions.phpstyle.cssへテーマ情報を書く
次の図では、「style.cssへテーマ情報を書く」の仕組みや関係を確認できます。
/*
Theme Name: My Original Theme
Author: Your Name
Version: 1.0.0
*/index.phpへ確認用のHTMLを書く
次の図では、「index.phpへ確認用のHTMLを書く」の仕組みや関係を確認できます。
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<h1><?php bloginfo('name'); ?></h1>
<?php wp_footer(); ?>
</body>
</html>テンプレートに必要な共通処理
language_attributes()でHTMLの言語情報を出力するbloginfo('charset')で文字コードを出力するbody_class()でページに応じたクラスを出力するwp_head()でhead内の必要な出力を受け取るwp_body_open()でbody開始直後の出力位置を用意するwp_footer()でbody終了前の必要な出力を受け取る
これらはWordPress本体やプラグインがCSS、JavaScript、メタ情報などを出力するためにも使います。見た目に変化がなくても、省略しないでください。
管理画面から有効化する
「外観」→「テーマ」で自作テーマを有効化し、サイト名が表示されることを確認します。真っ白な場合は、PHPエラーとファイル名を確認してください。
テーマを有効化した直後に確認する
- 管理画面のテーマ一覧で自作テーマを確認する
- テーマを有効化する
- サイトのトップページを開く
- 管理バーが表示されるか確認する
- HTMLソースで言語、文字コード、bodyクラスを確認する
- 開発者ツールのConsoleでエラーがないか確認する
白い画面や重大なエラーが出た場合は、そのまま編集を重ねません。エラーログと直前の変更を確認し、表示できていた状態まで戻してから原因を切り分けます。