(cache) PHP未経験だけどWordPressテーマを作りたい！という人へ。WordPressテーマ作成ことはじめ

お久しぶりです。こんにちは。
かなり久しぶりのブログ記事ですが、この記事を以てこのブログは終了となります。

最後くらい何か書こう・・・と思って、どこかでお話したいなあと思っていた、「PHPを書いたことがないけど、WordPressのテーマを作りたい！」という、PHP初心者さん向けの内容を記事にして有終の美を飾ろうと思います。

記事にしようと思った理由

冒頭でチョット書いたように、本当はスライド作ったりしてお話ししてみたかったことです。
なぜなら、私もPHP全くわからないのに突然WordPressの案件を依頼され、ひいひい言いながら習得したからです！

今回の内容はWordPressのタグを解説するというよりも、テーマで使うPHPの主な構文はこんなのがありますよ、と言った解説です。

ガチガチにPHPを触っていたりする方には物足りない内容です。TwitterアカウントもFacebookページも消してしまったので、この記述はまずいのでは？という部分があれば、そっとお問い合わせフォームからマサカリを投げてもらえるとうれしいです。

それではさっそく解説していきます。

まず最初にすること

なにはともあれ、インストールしたWordPressの直下にあるwp-config.phpを開き、WP_DEBUGの値をfalseからtrueに変更しましょう。
「記述を書いていたら真っ白になった！！」というのは割とあるあるなのです。

そんなときに、このWP_DEBUGがtrueになっていると、「どのファイルの」「何行目の記述」がエラーを起こしているのかを教えてくれます。

define( 'WP_DEBUG', true );

ただし、wp-includes/◯◯.php の×行目がエラーですよ、という感じで書かれている時は、ほぼ100%直前に記述した箇所や、有効化したプラグインに何らかの問題があります。例えば、無限ループを引き起こしていたり、想定されていない引数が呼ばれていたり・・・。

wp-includes
wp-admin

の中にあるファイルは、基本的に触らないを意識しましょう。編集しても、今やセキュリティアップデートでWordPress本体に自動更新がかかるので、自分で書き添えた内容は消えてしまいます。

編集するファイルは、あくまで今構築しているテーマフォルダの中のみにすべし！を心がけましょう。

そして、開発が完了したら忘れずWP_DEBUGをfalseに戻しましょうね。（よく忘れてしまう）

テーマファイルはどこに、何を置く？

テーマファイルは、wp-content/themesの中に作ります。インストールした際、デフォルトテーマであるtwentysixteen（初回インストール時によって異なります）などのフォルダがあります。

まずは既存に倣い、wp-content/themesの中にフォルダを作りましょう。被りそうにない、オリジナルの名前がよいと思います。
もし案件などで作成する場合は、ドメイン名でもいいかもしれませんね。

とりあえず、私は「mybasetheme」というフォルダにしました。すると、WordPress管理画面の［外観］→［テーマ］内に、こんな表示がでます。

つまり、このままではテーマを有効化することができません。説明にあるとおり、空のスタイルシート（style.css）を追加しましょう。

すると、説明文がこのように変わります。

今回は独立したテーマを作るので、空のindex.phpを追加します。
そうすると、ようやくテーマを有効化することができるようになります。

あとは「有効化」をクリックすれば、アクティブになるテーマが切り替わり、ついにテーマ作成の第一歩を踏み出したことになります。

次の手順は「Theme Check」プラグインのインストール！

［プラグイン］→［新規追加］で、「Theme Check」を検索してインストールしましょう。
ダウンロードしてくる場合はこちらのURLからどうぞ。

テーマチェックプラグインはテーマをテストし、最新のテーマレビュースタンダードのスペックへの対応を確認する簡単な方法です。これで、WordPress.org のテーマ提出時に使われているものと全て同じ自動テストツールを、あなたのテーマに対して実行できます。

と、プラグインの説明に書いてあるとおり、このプラグインを有効化してテーマチェックをすれば、「今このテーマには何が足りないか」「何があるといいのか」をリストアップしてくれます。

プラグインを有効化すると、［外観］の中に［Theme Check］という項目が追加されます。

style.cssもindex.phpも空の状態なので、現時点でここにテーマ名はでてきません。
とりあえず、この状態で「テスト実行！」をクリックしてみましょう。

何やらたくさんの「必須」や「推奨」「警告」といった文章が並んでいます。
このチェックはあくまで「最新のテーマレビュースタンダードのスペックへの対応を確認する簡単な方法」なので、たとえば企業サイトや自分だけのブログ、サイトなどであれば、「◯◯のクラスが必要です」といったCSSに関するところは厳密に対応しなくてもよいかもしれません。

ただし、

必須: style.css ヘッダーに Text Domain: がありません。
必須: style.css のヘッダーに Version: がありません。
必須: style.css のヘッダーに Theme name: がありません。
必須: style.css のヘッダーに License: がありません。
必須: style.css のヘッダーに License URI: がありません。
必須: style.css のヘッダーに Description: がありません。
必須: style.css のヘッダーに Author: がありません。

というような、テーマ自体に関する対応事項は対応してしまいましょう。

style.cssの例文はCodexに掲載されています。Codexの例を見ながら書き換えるとこんな感じですね。

/*
Theme Name: MyBaseTheme
Theme URI:
Author: Chiaki
Author URI: http://mellowchanter.info/
Description: My Base Theme for making WordPress Theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: mybasetheme
*/

Codexの例文の一番最後の行はコメントなので飛ばしました。Tagsは、公式ディレクトリに掲載したときに検索のタグにひっかけるためのものなので、掲載しないのであれば空欄でOKです。

では、この状態でTheme Checkの画面をリロードしてみます。

まず、最初にテーマチェックの画面を開いたときにでていなかったテーマ名が出るようになりました。
テスト実行をしてみると、以下のような画面になります。

style.css ヘッダーに◯◯がありません。というエラーが消えましたね。
今はヘッダー以外何も書いていない状態なので、警告はとりあえず現時点では無視しましょう。

HTMLをPHPファイルに分割

初めてWordPress化に挑戦するのなら、先にHTMLを作ってしまうとよいかと思います。
空で作成したindex.phpにとりあえずヘッダーとフッターを含めたベースとなるHTMLを構築しましょう。

作ったHTMLを分割して、phpファイルを作っていきます。

ヘッダーとフッターなど、共通化したい部分を専用のファイルに分割

ヘッダーやフッターを始めとした、どのページでも共通して出したい部分をindex.phpから分離しましょう。
WordPressで用意されているインクルードタグの一例です。

header.php – ヘッダー
footer.php – フッター
sidebar.php – サイドバー

分割したら、当然index.phpからは記述が消えてしまいます。
index.phpを表示させるために、分割したファイルをindex.phpから呼び出しましょう。

<?php get_header(); // ヘッダーの呼び出し ?>

呼び出しのタグは、Codexのインクルードタグの解説ページに載っています。
ヘッダーやフッター、サイドバーは解説ページにある通り、専用の呼び出しタグがありますが、それ以外は

<?php get_template_part(); ?>

で呼び出します。filename.phpを呼び出したいときは

<?php get_template_part( 'filename' ); ?>

filename-hoge.phpを呼び出したいときは

<?php get_template_part( 'filename', 'hoge' ); ?>

というような書き方をします。

どこまで分けるかは好みだと思いますが、私はファイルの中身が長くなるとどこを触ればいいのかわからなくなってしまうので、必要に応じてファイルを分けています。例えば、sideabar.phpの中のバナー郡のみのファイル、ウィジェットを表示するファイルなどなど・・・。
この辺は場数を踏んで、自分のやりやすさを追求していくといいと思います。

header.php の中身をWordPressに最適化する

何をどう置き換えればいいかは、事前に導入したTheme Checkが教えてくれます。
代表的なところでは以下のリストでしょうか。

wp_head の追加
titleタグ
読み込ませるCSSやJavaScript
コメント返信のスクリプト
htmlのlang属性をWordPressタグに変更
bodyにbody_classを追加

wp_head の追加

headの中に以下のタグを追加しましょう。

<?php wp_head(); ?>

これがないと、この次に続くtitleタグやCSS、JSの追加が反映されなくなったり、導入したプラグインがうまく動かなくなるといったことが発生します。なにはともあれ、絶対に追加しておきましょう。

titleタグ

titleタグは、今はheader.phpに書かず、functions.phpに記述します。
新たにfunctions.phpのファイルを作成し、以下の記述を書きましょう。

<?php
function mybasetheme_setup() {
 add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'mybasetheme_setup' );

mybasetheme_setup は関数名なので、好きな名前に変更して下さい。
add_theme_supportタグはafter_setup_themeというアクションフックの中に入れます。

このあたりはCodexにも書かれているので、参考にしてみて下さい。

これでサイトをリロードすると、wp_head()をきちんと書いていれば、titleタグが自動で吐き出されます。

読み込ませるCSSやJavaScript

CSSにはwp_enqueue_style、JavaScriptにはwp_enqueue_scriptをそれぞれ使用します。

functions.phpにこのように記述しましょう。

function mybasetheme_style_and_scripts() {
 wp_enqueue_style( 'mybasetheme-style', get_stylesheet_uri() );
 wp_enqueue_script( 'jquery' );
 wp_enqueue_script( 'mybasetheme-script', get_template_directory_uri().'/js/example.js', array(), '1.0.0' );
}

add_action( 'wp_enqueue_scripts', 'mybasetheme_style_and_scripts' );

wp_enqueue_scriptsというアクションフックを使って、wp_enqueue_styleとwp_enqueue_scriptをまとめて呼び出します。

WordPressにはjQueryなどJSライブラリも同梱されているので、何が入っているかはCodexのWordPress に含まれ登録されているデフォルトスクリプトを確認して下さい。

コメント返信のスクリプト

これはTheme Checkで指摘されている事項です。

必須: 待機状態のコメント返信のスクリプトを見つけることができません。プラグインとテーマの移行/2.7/Enhanced Comment Displayをご覧ください。
<?php if ( is_singular() ) wp_enqueue_script( “comment-reply” ); ?>

wp_enqueue_scriptが使われているので、前項で取り上げたwp_enqueue_scripts内に書けばよいでしょう。

htmlのlang属性をWordPressタグに変更

こちらもTheme Checkの指摘事項です。

必須: language_attributes が見つかりません。language_attributesをご覧ください。
<html <?php language_attributes(); ?>>

htmlのlang属性の部分を、このままコピーして書き換えましょう。

bodyにbody_classを追加

Theme Checkの指摘事項が続きます。

必須: body タグ内の body_class 呼び出しが見つかりません。body_class
<?php body_class( $class ); ?>

bodyタグにこのように追記して下さい。

<body <?php body_class(); ?>>

パラメータは、初期値の他に追加したいクラス名があれば追加します。以下のような感じですね。

<?php body_class( 'hoge' ); ?>

これで、概ねheader.phpの中身は整いました。FacebookのいいねやTwitterカードの設定は、別途書き足すか、プラグインを導入しましょう。

footer.phpにwp_footer()を追加する

フッターやサイドバーは、構築するサイトによって違いがあるのでここでは割愛しますが、共通してwp_footer()は必ず必要になるので、追加しましょう。Theme Checkでも指摘されています。

必須: wp_footer が見つかりません。wp_footerをご覧ください。
<?php wp_footer(); ?>

bodyの閉じタグの前にでも入れておきましょう。

functions.php に必要な記述を追加する

Theme Checkで指摘されているものを入れましょう。

コンテンツ幅

必須: コンテンツの幅が定義されていません。例:
if ( ! isset( $content_width ) ) $content_width = 900;

この$content_widthは、コンテンツの最大幅をWordPressに教えてあげるものです。Codexからの引用となりますが、

この機能を使うと、例えば oEmbed 埋め込みや投稿内の画像などといったあらゆるコンテンツの最大幅をテーマ内で設定可能になります。

WordPress はこのテーマ機能を活用することで、oEmbed コードをフロントエンドで指定のサイズ (横幅) に拡大・縮小したり、メインコンテンツエリアのレイアウトを崩すことなく画像を挿入したりといったことができます。また、この機能によりプラグインも $content_width に保存された値にアクセスできるため、どんなテーマにでも完璧に溶け込めるような基礎を築くこともできます。

というように、入れておいて損はない記述です。もっと詳しく知りたい方は、Codexを読んでみて下さい。

add_theme_support( ‘automatic-feed-links’ ) の追加

必須: add_theme_support( ‘automatic-feed-links’ ) が見つかりません。add_theme_support

header.php整形のときに追加したmybasetheme_setup 関数の中に入れましょう。

アイキャッチの有効化

アイキャッチもadd_theme_supportで有効化しないと使えません。
mybasetheme_setup 関数の中に、以下の記述を追加しましょう。

add_theme_support( 'post-thumbnails' );

覚えておくPHPタグ

基本的なWordPressテーマを作るのであれば、以下のPHPタグと、変数の使い方を覚えるとひとまず形にはなります。
PHPタグはJavaScriptと使い方はそう大差ないので、JavaScriptを使っている人にはおなじみの記述です。

while文
if文
foreach文

while文

while文は以下の書式をスニペットに覚えさせたりしてすればよいと思います。

<?php
if ( have_posts() ) :
 while ( have_posts() ) : the_post();
?>
<article id="article-<?php the_ID(); ?>" <?php post_class(); ?>>
〜〜〜
</article><!-- /article-<?php the_ID(); ?> -->
<?php
 endwhile;
endif;
?>

私はwhile文はほぼこの記述しか使いません。

この記述は何をしてくれるかと言うと、投稿や固定ページなどで書いた内容を参照するループ文です。
アーカイブ系のページでは、表示する件数（デフォルトでは10件）分の記事を表示し、投稿ページではその投稿の内容を表示したりします。

if文

「もし◯◯が××なら、△△をして、そうでなければ□□をする」という記述です。
今表示中のページがカテゴリーの場合に特別な処理をしたいとか、カスタムフィールドの値があるか、などでよく使います。

<?php
if( is_category() ) :
 // カテゴリーページの場合、カテゴリーの名前をタイトルとして出力する
?>
<h2><?php single_cat_title(); ?></h2>
<?php endif; ?>

例文では「そうでなければ」の部分は省いていますが、概ねこのように使います。
カスタマイズが多くなってくると、使うことが多くなってきます。

foreach文

返り値が配列になるWordPress関数もあるので、その値を取り出すときに使います。

<?php $categories = get_categories(); ?>
<ul>
 <?php foreach ( $categories as $category ) : ?>
 <li><?php echo $category->name; ?></li>
 <?php endforeach; ?>
</ul>

この例文は、get_categories()というWordPress関数を使ってカテゴリーの一覧を取得し、foreachで値を出力しています。
私はCodexで「戻り値」が配列になっているものはforeachで値を取得したり、カスタムフィールドを配列で取得した時に使ったりしています。

変数

PHPの変数は以下のように定義します。

$hoge = 'ほげ';
var_dump( $hoge );

$hogeをダンプすると、「ほげ」というテキストが表示されます。
何回も共通して使うようなものは、変数にしてまとめてしまいましょう。

私は主にカスタムフィールドの値を変数にして使用しています。

WordPressのテンプレート階層

今回作成したのは、index.php、header.php、footer.php、functions.phpとかなりミニマムですが、WordPressはそのページに適したファイルの内容を生成してくれます。

例えば、投稿の詳細ページならsingle.phpを追加すれば、index.phpではなく、single.phpで記述した内容を反映します。

WordPressのテンプレート階層は、文字で説明するより画像で見たほうがわかりやすいかと思うので、ぜひ一度概要図をチェックしてみてください。わざわざif文で条件分岐したりせず、テンプレート階層で解決できるようなことが結構あります。
画像ファイルをダウンロードして、いつでも見れるようにしておくのもいいかもしれませんね。

まとめ

テーマの作り方は人それぞれですが、このように「必要だと言われているものを入れていく」という点から作成していくとわかりやすいのではないかなと思います。
デフォルトテーマを参考に書き上げるのもいいのですが、デフォルトテーマはWordPressの機能を十分に活用した記述になっているので、functions.phpなんかは逆にとっつきにくく感じると思います。（現に私がそうでした）

WordPressのテーマを実装する上で大事なのは、検索力とも言えるかもしれないな、とこの記事を書いていて思いました。

Codexも、初めて見る人にとっては「どこから見ればいいんだろう？」となるかもしれません。
Codexは確かにたくさんの情報、使い方が載っていますが、見方がわからないとつらいですよね。
無理にCodex内で検索しようとせず、やりたいことをgoogleで検索してみると、解説している記事がたくさんあります。

例えば、「WordPress タイトル出し方」と検索したら、タイトルの出し方のみを解説している記事もありますし、「WordPress ナビゲーション」と検索すれば、カスタムメニューの使い方を解説している記事もあります。

「実装したいことを絞って探して、真似してみる」が、私のテーマ作成の根本です。

WordBenchや、WordCampといったWordPressのコミュニティ主催の勉強会に行ってみたり、たくさん出ている書籍から自分にとってわかりやすい書籍を購入するのもいいと思います。

外観を整えるだけなら、本当に今回挙げたwhile文、if文、foreach文を駆使すれば大体のことは出来ますし、機能面ではたくさんのプラグインが登録されていて、自分のやりたいことがプラグインを有効化するだけで出来たりもします。

ちょっとずつ試して、探して、自分なりのテーマの作り方を身に着けてみて下さい。