WordPressを学び始めると、テーマやプラグインを入れるだけでも見た目を変えることができます。
ただ、「どのコードが画面のどこに表示されているのか」が分からないまま進めると、後からカスタマイズが難しく感じることがあります。
そこで今回は、最小構成の独自テーマを作成して、表示画面とコードのつながりを理解する方法を紹介します。
まだWordPress環境を作成していない場合は、先にWordPress構築の記事をご覧ください。
独自テーマを作成する
まず、WordPressのテーマフォルダへ移動します。
htdocs/site1/wp-content/themes/
※ site1 は前回作成したWordPressフォルダ名です。
この中に、任意のテーマフォルダを作成します。
今回は例として、
basic-theme
というフォルダを作成します。
その中に、以下の3つのファイルを用意します。
basic-theme
├─ index.php
├─ functions.php
└─ style.css
これでテーマの土台が完成です。
テーマを有効化する
WordPress管理画面から、
外観 → テーマ
を開きます。
作成したテーマが表示されるので、有効化します。
これで独自テーマの準備は完了です。
各ファイルの役割
index.php（画面に表示する内容を書く）
index.php は、実際にブラウザへ表示する内容を決めるファイルです。
今回は、投稿や固定ページの内容を表示するために、以下を記述します。
記事がありません
このコードでは、
・投稿が存在するか確認する
・記事を順番に取得する
・タイトルを表示する
・本文を表示する
という処理を行っています。
ここで使われている have_posts() や the_post() の詳しい仕組みは別の記事で解説します。
今は、
「管理画面に書いた内容を取得して画面へ出力している」
くらいの理解で十分です。
functions.php（テーマの設定を書く）
functions.php は、テーマの動作や設定を書くためのファイルです。
今回は、style.css を読み込む設定だけ行います。
<?php
add_action(‘wp_enqueue_scripts’, function () {
wp_enqueue_style(
‘main-style’,
get_stylesheet_uri()
);
});
この記述によって、後で作成する style.css が画面へ適用されます。
style.css（テーマ情報とデザインを書く）
style.css は、テーマ情報やデザインを管理するファイルです。
まずはテーマとして認識させるために最低限の情報だけ記述します。
/*
Theme Name: basic-theme
Version: 1.0
*/
テーマと管理画面はどう使い分けるのか？
ホームページ制作を少し触ったことがある方であれば、
「index.phpに直接HTMLやPHPを書けば画面を表示できるのに、なぜWordPressでは管理画面から記事を書く必要があるのか？」
と疑問に思うかもしれません。
実際、私も最初はここでかなり混乱しました。
管理画面には記事を書く場所があり、一方でテーマ側にも index.php が存在します。
「結局どちらに書けばいいの？」
「役割は何が違うの？」
という状態でした。
結論から言うと、どちらからでも画面へ表示すること自体は可能です。
例えば、
index.php に直接HTMLを書く方法
管理画面で記事を書いて、テーマ側で取得して表示する方法
どちらも成立します。
ただし、WordPressでは役割を分けて考えると整理しやすくなります。
次回以降の記事では、この役割分担を理解するために、
ワードプレスの要素を一つずつ整理して紹介していきます。
