テーマ開発・じゅんび:作るものと道具

テーマのためのPHP超入門

テーマ開発に必要なPHPは、実はごくわずか。「差しこみ札」としてのPHPタグ、echo、関数呼び出し、whileループ——この4つだけをテーマ専用に覚えます。

テンプレート作りに入る前に、避けて通れない相手——PHPと顔合わせをしておきましょう。安心してください、テーマ開発で使うPHPはプログラミング言語の全部ではなく、ほんの一部。今日覚えるのは4つだけです。

PHPは「HTMLへの差しこみ札」

WordPressのテンプレートファイルは、HTMLの中に「ここにWordPressのデータを差しこんで」という札を立てたものです。その札がPHPタグ。

<h1><?php bloginfo('name'); ?></h1>

<?phpから?>までが札の範囲。この例は「ここにサイト名を差しこんで」という意味で、表示されるときには<h1>シマエナガ堂</h1>になります。札の外は100%ふつうのHTML——だからHTMLが書ける人は、もうテンプレートの9割が書けています。

覚えること1:echo(表示する)

echoは「これを画面に出力して」の命令です。

<p><?php echo 'こんにちは'; ?></p>
<!-- 表示結果: <p>こんにちは</p> -->

文の終わりに;(セミコロン)を打つのがPHPのルール。JavaScriptと同じ感覚です。

覚えること2:関数を呼ぶ(WordPressに頼む)

テーマ開発の主役は、WordPressが最初から用意してくれている関数(命令のセット)です。名前()の形で呼び出します。

<?php bloginfo('name'); ?>     <!-- サイト名を表示して -->
<?php the_title(); ?>          <!-- この記事のタイトルを表示して -->
<?php the_content(); ?>        <!-- この記事の本文を表示して -->
<?php echo home_url(); ?>      <!-- トップページのURLをちょうだい(echoで表示) -->

JavaScriptでconsole.log()を呼んだのと同じ形。テーマ開発とは、WordPressの関数をHTMLの中に置いていく作業と言ってもいいくらいです。

覚えること3:if(あるときだけ)

「記事があるときだけ表示する」のような条件分岐です。テンプレートでは、HTMLを間にはさめる特別な書き方(コロン記法)をよく使います。

<?php if (have_posts()) : ?>
  <p>記事があります</p>
<?php endif; ?>

if (条件) :からendif;までが「あるときだけゾーン」。JavaScriptのifと考え方は同じで、囲み方がテンプレート向きになっただけです。

覚えること4:while(記事のぶんだけくり返す)

一覧ページでは、記事の数だけ同じHTMLをくり返します。それがwhile。WordPressテーマでは、この決まり文句のセットをループと呼びます。

<?php while (have_posts()) : the_post(); ?>
  <article>
    <h2><?php the_title(); ?></h2>
  </article>
<?php endwhile; ?>

意味は「記事がある間(while)、次の記事を手に取って(the_post)、この中のHTMLを出力する」。記事が5本あれば<article>が5回出力されます。この決まり文句は、この先のレッスンで何度も何度も書くので、いま丸暗記しなくても勝手に手が覚えます。

このレッスンのまとめ

  1. PHPタグ<?php ?>HTMLへの差しこみ札——札の外はふつうのHTML
  2. 覚える道具はecho・関数呼び出し・if・whileの4つだけ。主役はWordPressが用意した関数
  3. if (have_posts()) : while (have_posts()) : the_post();——ループは「記事のぶんだけくり返す機械」

やってみよう:はじめての差しこみ札

シマエナガ堂テーマのindex.phpに、PHPの札を立ててみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title><?php bloginfo('name'); ?></title>
</head>
<body>
  <h1><?php bloginfo('name'); ?></h1>
  <p>テーマが動きました!</p>
</body>
</html>

前回ベタ書きしていた「シマエナガ堂」の文字を、bloginfo('name')の札に置きかえました。保存して表側を再読みこみしても、見た目は同じ——でも意味が変わっています。ためしに管理画面の「設定」→「一般」でサイト名を「シマエナガ堂サポート」などに変えて再読みこみすると、h1とタブの表示が連動して変わるはず。データとテンプレートが分離した瞬間です(確認したらサイト名は戻しておきましょう)。