← STEP1:環境準備STEP3:デザイン実装 →

必須の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ファイルを作成したら、管理画面の「外観」→「テーマ」に一覧表示されるようになります。選択して「有効化」すれば、最小構成のテーマが動作します。この時点ではデザインはほぼありませんが、投稿一覧が表示されれば成功です。

関連コンテンツ

↑