MENU

【WordPress×PHP】テーマとPHPの関係を基本から解説

【WordPress×PHP】テーマとPHPの関係を基本から解説
目次

はじめに

【PHP】無名関数・アロー関数の使い方を解説までの全15回(以下「PHP基礎編」)では、変数・条件分岐・繰り返し・配列・関数と、PHPでプログラムを書くための基本をひととおり解説してきました。

今回から新しいシリーズとして、WordPress×PHPを始めます。WordPressは、その本体もテーマもPHPで作られています。PHP基礎編で学んだ文法を使って、WordPressの仕組みを理解し、自分のサイトを安全にカスタマイズできるようになることがこのシリーズの目標です。

解説には、当サイト(kurumico.com)でも使っているテーマSWELLとその子テーマを使います。SWELL以外のテーマを使っている方向けには、違いが出るところで補足を入れていきます。

シリーズの構成(全14回)

このシリーズは、次の構成で進める予定です。記事を公開したら、順次リンクを追加していきます。

  1. WordPressとPHPの関係(この記事)
  2. 安全に触る準備:子テーマ・ローカル環境・バックアップ
  3. SWELLの子テーマ functions.php の基本
  4. テンプレートタグ(the〜とget〜の違い)
  5. ループの仕組み(SWELLの single.php を読む)
  6. 条件分岐タグ(is_single・is_page など)
  7. オブジェクトの基礎(-> と ::)
  8. アクションフック(add_action)
  9. フィルターフック(add_filter)
  10. WP_Queryで記事一覧を自作する
  11. エスケープとセキュリティ
  12. ショートコードを作る
  13. カスタムフィールド(get_post_meta)
  14. 子テーマに固定ページ用テンプレートを作る(総まとめ)

第1回の今回は、まだコードを書き換えません。WordPressの中でPHPがどのように動いているのかを、SWELLのテーマファイルを読みながら確認していきます。

WordPressはPHPで動いている

【PHP】PHPとは?基本から解説で、PHPはサーバー上で動き、HTMLを組み立ててブラウザに返す言語だと解説しました。WordPressは、この仕組みをそのまま使っています。

ブラウザでWordPressの記事を開くと、サーバーの中では次の流れで処理が進みます。

  1. ブラウザが「この記事のページをください」とリクエストを送る
  2. サーバー上でWordPress本体(PHP)が動き出す
  3. データベースから、記事のタイトルや本文などのデータを取り出す
  4. テーマのPHPファイルが、取り出したデータをHTMLの形に組み立てる
  5. 完成したHTMLがブラウザに返され、表示される
WordPressでページが表示されるまでの流れ。ブラウザのリクエストを受けてWordPress本体が動き、データベースから記事データを取り出し、テーマのPHPファイルがHTMLを組み立ててブラウザへ返す

ポイントは、記事の中身はデータベース、見た目の組み立てはテーマと役割が分かれていることです。記事を書くときは管理画面からデータベースに保存し、表示するときはテーマのPHPファイルがそのデータを読み出してHTMLにします。

このシリーズで触るのは、4番目の「テーマのPHPファイル」の部分です。WordPress本体のファイルは、アップデートのたびに上書きされるため、書き換えてはいけません。

テーマとは?親テーマと子テーマの関係

テーマはPHPファイルの集まり

テーマは、サイトの見た目や機能を決めるファイルの集まりです。サーバーのwp-content/themes/フォルダの中に、テーマごとのフォルダがあります。

wp-content/
└── themes/
    ├── swell/          ← 親テーマ(SWELL本体)
    └── swell_child/    ← 子テーマ

SWELLの場合、swellフォルダが親テーマ、swell_childフォルダが子テーマです。

親テーマは直接編集しない

親テーマのファイルを直接書き換えると、テーマをアップデートしたときに、書き換えた内容がすべて消えてしまいます。アップデートでは、テーマのフォルダが新しいファイルで丸ごと置き換えられるからです。

そこで使うのが子テーマです。子テーマは「親テーマの機能をすべて受け継いだうえで、変えたい部分だけを上書きする」ためのテーマです。カスタマイズは子テーマに書いておけば、親テーマをアップデートしても消えません。

子テーマのフォルダには、最低限次の2つのファイルがあります。SWELLの子テーマ(swell_child)も同じです。

ファイル役割
style.css子テーマの情報と、追加するCSSを書く
functions.php追加する機能をPHPで書く

子テーマのstyle.cssの先頭には、次のようなコメントが書かれています。

/*
    Template: swell
    Theme Name: SWELL CHILD
*/

Template: swellの行が「親テーマはswellフォルダのテーマです」という指定です。この1行によって、WordPressはswell_childをswellの子テーマとして扱います。

子テーマのファイルが優先される

子テーマに親テーマと同じ名前のテンプレートファイルを置くと、親テーマのファイルの代わりに子テーマのファイルが使われます。たとえば、子テーマにsingle.phpを置くと、投稿ページの表示には子テーマのsingle.phpが使われ、親テーマのsingle.phpは使われなくなります。

親テーマと子テーマの関係。子テーマに同じ名前のファイルがあれば子テーマのファイルが使われ、なければ親テーマのファイルが使われる

ただし、functions.phpだけは例外です。子テーマのfunctions.phpは親テーマのものを置き換えるのではなく、両方とも読み込まれます。読み込まれる順番は、子テーマが先、親テーマが後です。

SWELL以外のテーマでも、親テーマ・子テーマの仕組みは同じです。ただし、子テーマが配布されていないテーマもあります。その場合は、子テーマを自分で作る必要があります。作り方は第2回で解説します。

SWELLのテーマファイルを眺めてみよう

SWELLのフォルダの中身

親テーマswellのフォルダを開くと、次のようなPHPファイルが並んでいます(一部を抜粋)。

swell/
├── functions.php   ← テーマの機能を定義する
├── header.php      ← 全ページ共通のヘッダー部分
├── footer.php      ← 全ページ共通のフッター部分
├── home.php        ← トップページ(最新の投稿一覧)
├── single.php      ← 投稿ページ
├── page.php        ← 固定ページ
├── archive.php     ← カテゴリー・タグなどの一覧ページ
├── 404.php         ← ページが見つからないとき
└── parts/          ← ページの部品のファイル

表示するページの種類によって、使われるファイルが変わります。この「どのページでどのファイルを使うか」のルールを、テンプレート階層と呼びます。

SWELLで実際に確かめると、ページの種類と使われるファイルは次のとおりでした。

表示するページ使われるファイル
トップページ(最新の投稿一覧)home.php
投稿ページ(この記事のようなページ)single.php
固定ページ(お問い合わせなど)page.php
カテゴリーの一覧ページarchive.php
存在しないURL404.php
WordPressのテンプレート階層。表示するページの種類に応じて、home.php・single.php・page.php・archive.php・404.phpのどれが使われるかが決まる

テンプレート階層のルールはWordPress共通ですが、どのファイルを用意しているかはテーマによって異なります。たとえばarchive.phpがないテーマでは、代わりにindex.phpが使われます。index.phpは、ほかに当てはまるファイルがないときに最後に使われるファイルです。

single.phpの中身を見てみよう

投稿ページで使われるsingle.phpを開いてみましょう。SWELLのsingle.phpの冒頭は、次のようになっています(一部を抜粋)。

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

get_header();
while ( have_posts() ) :
	the_post();

	$SETTING = SWELL_Theme::get_setting();
	$the_id  = get_the_ID();

最初の行のif ( ! defined( 'ABSPATH' ) ) exit;は、このファイルにブラウザから直接アクセスされたときに処理を止めるための記述です。ABSPATHはWordPressの起動時に作られる定数なので、WordPressを通さずにファイルだけを開くと、ここでexitして何も表示しません。SWELLのほとんどのPHPファイルの先頭に書かれています。

続くget_header()は、header.phpを読み込む関数です。ファイルの最後にはget_footer()があり、footer.phpを読み込みます。全ページ共通のヘッダーとフッターを別ファイルにしておき、各テンプレートから読み込んでいるわけです。

その間のwhile ( have_posts() ) :からendwhile;までが、記事の内容を表示する部分です。この繰り返しを、WordPressではループと呼びます。ループの詳しい仕組みは第5回で解説します。

管理画面の「外観」→「テーマファイルエディター」でも、テーマのファイルを開いて中身を見られます。ただし、ここで本番サイトのファイルを保存すると、書き間違い1つでサイトが真っ白になることがあります。このシリーズでは、第2回で準備するローカル環境で書き換えを試していきます。今の段階では、中身を見るだけにしておきましょう。

子テーマのfunctions.phpの中身

次に、SWELLの子テーマswell_childのfunctions.phpを見てみましょう。配布されている状態では、次のように書かれています(コメントの一部を省略)。

<?php

/* 子テーマのfunctions.phpは、親テーマのfunctions.phpより先に読み込まれることに注意してください。 */

/**
 * 子テーマでのファイルの読み込み
 */
add_action('wp_enqueue_scripts', function() {

	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/style.css' ) );
	wp_enqueue_style( 'child_style', get_stylesheet_directory_uri() .'/style.css', [], $timestamp );

	/* その他の読み込みファイルはこの下に記述 */

}, 11);

1行目のコメントに、先ほど解説した「子テーマが先に読み込まれる」ことが書かれていますね。

その下のadd_action()は、子テーマのstyle.cssをページに読み込むための記述です。add_action()は「WordPressの処理の決まったタイミングで、この関数を実行してください」と登録する関数で、フックと呼ばれる仕組みの1つです。フックは第8回・第9回で詳しく解説します。

今はまだすべてを理解できなくて大丈夫です。このシリーズを読み終えるころには、このファイルに自分でコードを書き足せるようになります。

PHP基礎編の文法はここで使われている

テーマのファイルは難しそうに見えますが、使われている文法の多くは、PHP基礎編で解説したものです。ここまでに見たSWELLのコードから、PHP基礎編の文法を探してみましょう。

SWELLのコード文法解説した記事
while ( have_posts() ) : 〜 endwhile;while文の代替構文【PHP】for文・while文の使い方を解説、【PHP】if文による条件分岐を解説
if ( ! defined( 'ABSPATH' ) ) exit;if文・論理演算子の!【PHP】if文による条件分岐を解説
$the_id = get_the_ID();関数の戻り値を変数に代入【PHP】関数の作り方と使い方を解説
add_action('wp_enqueue_scripts', function() { … }, 11);無名関数を引数に渡す【PHP】無名関数・アロー関数の使い方を解説

さらに、single.phpの後半には次のようなコードもあります。

$defaults = [
	'before'         => '<div class="c-pagination -post">',
	'after'          => '</div>',
	'next_or_number' => 'number',
];
wp_link_pages( $defaults );

これは、【PHP】配列の基本と使い方を解説で解説した連想配列です。記事を複数ページに分けたときのページ送りの設定を連想配列にまとめ、wp_link_pages()関数に渡しています。WordPressの関数は、このように設定を連想配列で受け取るものがとても多いです。

一方で、PHP基礎編では解説していない書き方も出てきます。

  • SWELL_Theme::get_setting() の ::
  • $queried_object->post_content の ->(home.phpなどで使われています)
  • do_action()・apply_filters()(フックの仕組み)

::と->はオブジェクトに関係する書き方で、第7回で解説します。do_action()とapply_filters()は、第8回・第9回で解説するフックと関係しています。

SWELLのファイルには<?=esc_attr( … )?>のような書き方も出てきます。<?= 〜 ?>は<?php echo 〜 ; ?>を短く書いたもので、HTMLの中に値を1つ出力したいときに使います。

よくある質問・エラー対処

Q. テーマファイルエディターが見当たりません

→ 管理画面の「外観」メニューにない場合は、「ツール」メニューの中を確認してください。ブロックテーマを使っているとこちらに表示されます。また、セキュリティ系のプラグインやサーバーの設定によって、エディター自体が無効になっていることもあります。このシリーズでは、ローカル環境のファイルを直接開いて編集するので、エディターがなくても問題ありません。


Q. SWELL以外のテーマでもこのシリーズの内容は使えますか?

→ 使えます。テンプレート階層、ループ、フック、WP_Queryなどは、WordPress共通の仕組みです。ただし、SWELL独自の関数(SWELL_Theme::で始まるもの)や、SWELL独自のフックはSWELLでしか使えません。その部分は記事の中で補足します。


Q. ブロックテーマでもPHPのテンプレートファイルはありますか?

→ WordPress標準の「Twenty Twenty-Five」などのブロックテーマでは、テンプレートがPHPではなくHTMLファイルで作られています。そのため、この記事で紹介したsingle.phpのようなファイルはありません。ただし、functions.phpやフックはブロックテーマでも使えます。SWELLは、PHPのテンプレートファイルを使うクラシックテーマです。

おわりに(まとめ)

まとめ

WordPressは、データベースに保存した記事のデータを、テーマのPHPファイルがHTMLに組み立てて表示しています。

  • ✅ 記事の中身はデータベース、見た目の組み立てはテーマのPHPファイルが担当する
  • ✅ 親テーマを直接編集すると、アップデートで変更が消える
  • ✅ カスタマイズは子テーマに書く(同じ名前のテンプレートファイルは子テーマが優先)
  • ✅ functions.phpは子テーマ・親テーマの両方が、子テーマ→親テーマの順に読み込まれる
  • ✅ ページの種類によって使われるファイルが決まる(テンプレート階層)
  • ✅ テーマファイルには、PHP基礎編で学んだwhile文・配列・無名関数がそのまま使われている

次回は、テーマを安全に書き換えるための準備(子テーマ・ローカル環境・バックアップ)について解説します。

次回は、テーマのファイルを安全に書き換えて試すための準備について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません!

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください!


【CSS】テキスト関連プロパティについて基本解説|Webの基礎


よかったらシェアしてね!
  • URLをコピーしました!
目次