STEP2:最小構成テーマ作成
WordPressのテーマは、実はたった2つのファイルさえあれば動作します。まずは必要最小限の構成でテーマを作り、WordPressがテーマをどう認識するかの仕組みを理解しましょう。
必須の2ファイル
WordPressがテーマとして認識するために最低限必要なのは、「style.css」と「index.php」の2ファイルです。
wp-content/themes/my-theme/ ├── style.css ← テーマ情報とスタイルを記述 └── index.php ← ページ全体のHTML出力を担当
style.cssの書き方
style.cssの先頭には、テーマの情報を記述するコメントブロックが必須です。この記述がないと、WordPressはテーマとして認識しません。
/*
Theme Name: My First Theme
Theme URI: https://example.com/
Author: あなたの名前
Author URI: https://example.com/
Description: 学習用に作成したオリジナルテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/
body {
font-family: sans-serif;
line-height: 1.6;
}
index.phpの書き方
index.phpは、投稿一覧やトップページなど、他に専用テンプレートがない場合に使われる最も基本的なテンプレートファイルです。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<h1><?php bloginfo('name'); ?></h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>
<?php wp_footer(); ?>
</body>
</html>
ループ処理がポイント
have_posts()とthe_post()による繰り返し処理は「The Loop(ザ・ループ)」と呼ばれ、WordPressテーマの中核となる仕組みです。投稿を1件ずつ取り出して表示する、あらゆるテンプレートの基本です。テーマを有効化する
2ファイルを作成したら、管理画面の「外観」→「テーマ」に一覧表示されるようになります。選択して「有効化」すれば、最小構成のテーマが動作します。この時点ではデザインはほぼありませんが、投稿一覧が表示されれば成功です。