wordpressのThemeを作ってみよう

「WordPressのオリジナルテーマを自作するなんて自分には無理だ」と思っていませんか？

WordPressのテーマを自作するのも、学校の勉強をするのも、理解するためのコツは同じで「できた！」「分かった！」という成功体験を積み重ねていくことが大事です。

例えば、歴史の勉強で教科書を丸暗記するのは大変ですが、実際に自分が見たことのある建物や場所に関わることなら覚えやすいですよね。「これ知ってる」「見たことある」という自分の体験につながることは理解するスピードも変わってくるはずです。

WordPressの勉強も同じで、一から順番に知識だけを詰め込んでいくのは大変ですし、時間も相当かかります。その中には運用したときにはほとんど使わない知識も含まれています。自作テーマを作る前に、参考書やWebサイトの知識ばかりを頭に入れても面白くないですよね。

ですので本記事では、まずはテーマを作り上げて実際に動くことを体験することに重点を置いています。「こんなに簡単に動くものなんだ！」という体験をぜひしてください。

そこから「ここの表示はもう少し自分好みに変えたいな」というように振り返って勉強するほうが確実に理解度は深まるはずです。

本記事の流れで進めて頂ければ、オリジナルテーマの作成は3時間でできます。

ちなみに私は、HTMLは少し分かりますが、PHPなどのプログラム知識はほとんどありません。それでもオリジナルテーマは完成しました。

「あまり詳しくないんだよなぁ」という方でも本記事のまま記述していくだけで3時間後にはオリジナルテーマは完成していますので、ぜひ頑張ってみてください

必須のファイルは2つだけ

WordPressのオリジナルテーマに必須のファイルはたった2つです。

「何を表示するか」と「どんなデザインか」という役割に分かれています。

すでに勉強されている方は「他サイトや参考書では○○.phpとか△△.phpとか3つも4つも必要って書いてあったぞ」と思われるかもしれません。

実はその通りです。

ですが、冒頭でもご説明した通り「本当は必要なもの」を最初から理解しようとするとかなりのことを覚えなければいけません。

ここは騙されたと思ってこのまま読み進めてください。大丈夫です！

これから着手するファイルイメージは以下のようなものになります。後でしっかり解説しますので、まずはさらっと見ておいてください。

「何を表示するか」を決めるファイル ⇒ index.php
「どんなデザインか」を　　〃　　⇒ style.css

基本となる部分はこれだけで、あとは自分好みにカスタマイズしていきます。

index.php と style.css を準備する

ではここから実際に進めていきましょう！

基本となるページ「index.php」と、そのスタイルを定義する「style.css」を作成します。

index.php

ブログのTOPページにアクセスされた際に表示されるページです。

テキストエディタで新規ファイルを作成し、下記の要素を記述して「index.php」という名前で保存してください。保存時の文字コードは「UTF-8」がよいでしょう。

<html lang="ja">
<head>
<title></title>
</head>
<body>
</body>
</html>

シンプル過ぎてビックリされたかもしれませんね。HTMLを構成する最低限の要素のみとなっています。これから色々と変更を加えていきますが、今はこれでOKです。

style.css

先ほど同様、テキストエディタで新規ファイルを作成し、下記の要素を記述して「style.css」という名前で保存してください。保存時の文字コードは「UTF-8」にしておきましょう。

「style.css」というファイル名はWordPress内のルールで決まっていますので「そういうものだ」と気軽に考えておいてください。

/*
Theme Name: SampleTheme
Author: SampleUser
Author URI: http://●●●.com
Description: サンプルのテーマ
*/

「ん？CSSファイルなのに宣言が入ってるぞ」と思われるかもしれませんね。

この段階では、まだ実際のスタイルは記述していません。記述した内容は管理画面でテーマを選択する際に表示される「説明のようなもの」を記述しています。

それぞれの意味は下記の通りです。４つありますが、最低限書いてほしいのは１つ目だけです。他はなくても困りません。あ、そんなこと言ったらややこしいですよね、ではせっかくですので４つとも書いてください（苦笑）どこに反映されるかはこの後ご説明します。

Theme Name：　テーマの名称（必須です）
Author：　テーマの作成者（任意）
Author URI：　ブログのURL（任意）
Description：　テーマの説明（任意）

2つのファイルを1つのフォルダにまとめる

ここまでで作成した「index.php」と「style.css」を任意のフォルダにまとめて保存しておきましょう。フォルダのファイル名は半角英数字であれば何でも構いません。私は「sample」というフォルダにまとめて入れました。

この部分のオペレーション動画を作りましたが、恐らく見ていただかなくてもご理解いただける作業かと思いますね…お心の広い方だけどうぞ！わずか15秒です。

フォルダをサーバーにアップロードする

作成したフォルダごとサーバーにFTPソフトを利用してアップロードしましょう。アップロードする階層は下記の「themes」フォルダの中です。

（WordPressをインストールしたフォルダ）/wp-content/themes/

すでに「twentyfourteen」や「twentyfifteen」などの他のテーマが設置されているかもしれません。気にせず同じ階層にフォルダ（私の場合は「sample」）ごとアップロードしてください。

アップロード後の私のサーバー「themes」フォルダは下記のようになっています。

ブログにテーマを反映する

ここまでの作業で、あなたのブログはすでにオリジナルテーマに変更できる準備が整いました。

「え、まだ何も書いてないぞ」と思われるかもしれません。確かにこの状態でテーマ反映すると画面は真っ白になります。

でも気にせずやりますよ。心配されなくても、問題ありませんので安心してくださいね。

ここまでで作成したテーマをブログに反映してみましょう。WordPressの管理画面にログインしてください。

概観＞テーマ

を選択しましょう。

すると一覧の中に「SampleTheme」というテーマが増えているはずです。

このテーマ名は先ほど作成した「style.css」の1つ目の文字列を表示していますので、別の文字列に変更されている方はその文字列になっています。

ほら、もう応用が効いて仕組みが1つ分かりましたよね！

テーマ名の横にある「有効化」ボタンをクリックしましょう。テーマが反映されます。

なお、先ほど「style.css」に４つ記述した内容は上記の「テーマ詳細」をクリックした後に表示されるページに使われています。

こんな感じです。

個人で自作する場合はここまで細かく設定しなくてもいいかもしれませんが、空っぽなのもなんですので書いておきました。

テーマが反映されたサイトをチェックする

テーマを有効化すると、サイトが真っ白になったと思います。でも安心してくださいね。それで正解です。

まだ何を表示するか指示を入れていないだけです。真っ白になったということはこれからどんどんチューニングできるという準備完了の合図なんです。

この状態で放っておくのはさすがに不安だと思いますので、引き続き、基本的な要素をどんどん表示していきます。くどいですが、何はともあれ準備は完了です。

ブログタイトル（サイトタイトル）を表示する

ブログタイトルを表示するには「index.php」に以下の1行を追加します。追加する場所は<body>と</body>の間です。
※以降、特に注記をしていない場合は、<body>と</body>の間に追加すると解釈してくださいね

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

キャッチフレーズを表示する

キャッチフレーズを表示するには「index.php」に以下の1行を追加します。

<?php bloginfo('description'); ?>

記事要素を表示する

ここまでのパーツはページに1つ表示すればよかったわけですが、ブログの記事は少し性質が異なります。たくさん書かれている方は記事数が10や20、それ以上の場合もあるでしょう。それらをひとつずつ記述していては大変です。

WordPressにはループ処理という概念があります。「データがある分をすべて出す」というような処理です。これを使うことで一つ一つの記事を書き出すような面倒なことをしなくてよくなります。「index.php」に以下のように宣言します。

※ここから記事の表示に関する解説になりますので、ブログの記事数が0だと何も表示されません。記事を1つも登録されていない方は、事前に3つほどダミーで結構ですので作成しておいてください。
※下記は宣言の例ですので、記述してもまだ何も表示されません

<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<!-- ここに繰り返し表示したい項目を記述します -->

<?php endwhile; endif; ?> <!-- ループ終了 -->

「うわ～！結局、意味不明なのが出て来たよ」と思われた方、あまり気にしてもらわなくて大丈夫です。HTMLでも「<html>で始まれば</html>で閉じる」というルールがありますよね。それに近いものです。おまじないだと思って理解して頂ければ大丈夫です。

上記の「ここに繰り返し表示したい項目を記述します」の部分に「記事タイトル」や「本文」、「カテゴリー」など1つの記事ごとに表示させたい項目を追加します。一般的な組み合わせは下記のような感じになります。「index.php」に追加してみてください。
※この記述で初めて要素が表示されます

<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->

ちなみに記事タイトルから記事へのリンクを貼りたい場合は、上記の「記事タイトル」表示の行を

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

としておくとリンクが貼れますので、好みで使ってくださいね。

ここまでのまとめ

少し長くなってきましたのでここまでの記述をまとめました。

今後のCSSでのレイアウト調整を考慮して各パーツを<div>でくくっておくと良いでしょう。

本記事では、すべて<div>タグにしていますが、テーマを完成させたときには、サイトタイトルや記事タイトルなどに<h1>や<h2>をマークアップしておくと、SEOも考慮したテーマにできます。

<html lang="ja">
<head>
<title></title>
</head>
<body>
<div><?php bloginfo('name'); ?></div>
<div><?php bloginfo('description'); ?></div>
<div>
<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->
</div>
</body>
</html>

上記の記述だけでも「なんとなく見たことある情報が表示されてきたな」と思える感じになってきたと思います。

WordPressはここまで作っておくと、エラーなく一通り動きます。

WordPressはとてもかしこく作られていて、テンプレートが無い場合はそれらの代わりをすべてトップページ（index.php）が行ってくれる仕組みになっているんです。

もちろん見栄えはすべてTOPページ風にはなってしまいますが、ちゃんと情報も表示してくれるんです。

まだ基本部分ではあるのですが、これだけでもブログは一通り動くんですよ。すごいですよねぇ、WordPressは。

ご自身の手でテンプレートを作り上げてみると理解も深まったのではないでしょうか？難しい知識を先に勉強するよりもまずは作ってしまうことが大事だと思いますね！

「習うより慣れろ」とはよく言ったもんです。

トップページ以外のテンプレート準備

ではここから少しずつブログっぽく仕上げていきましょう。

先ほどご説明したようにブログには役割の異なるページがあります。ここまでで作成した「index.php」はトップページ、記事詳細ページ、カテゴリページなどブログに必要なページをすべて兼任してくれる優秀なPHPファイルですが、1種類のテンプレートで使いまわすことになるため、どのページも同じ見栄えになります。

せっかくテーマを自作しますので、それぞれのページごとに表示する要素やデザインをカスタマイズしたいですよね。

ということで、これから「記事ページ」など他のテンプレートも作成していきますよ。

「え～またイチからこの作業をやっていくの？」と思われた方、安心してください。

WordPressには「インクルード」という考え方があります。似たようなテンプレートを作成する際、共通で使う部分は別のファイルで管理しておいて、それを必要な時に読み込んで一体化させてしまうというものです。

「共通で使う部分」というのはページ上部のロゴやサイト名、ナビゲーション、ページ下部であればフッター要素などですね。どのページでも同じように表示されている部分と思ってもらえればOKです。

ではここまでで作った「index.php」のベース部分を使いながら他のテンプレートも作っていきます。

インクルードの準備をする（切り出し編）

インクルードは外部ファイルを自分のファイルに読み込むという処理です。

index.phpから見た場合、まだ外部のPHPファイルというのは存在しませんね。インクルードするために外部ファイルを作っていきます。

ページを分解する

前述しましたようにインクルードは「トップページ」や「記事ページ」で共通で利用するパーツと別々に記述するパーツを分けるところから始まります。

ここまでで作成した「index.php」を他のテンプレート（single.phpやpage.php）でも利用する共通部分とそうでない部分に分けて、共通部分は外部ファイルにしていきます。固有の記述部分だけ自分自身のファイルに残しておきます。

一般的に共通化して利用するのは「ヘッダー」「フッター」と今はまだ説明していませんが「サイドバー」ですね。ここまでで作成した「index.php」の中身を見ていきましょう。

ヘッダー部分の切り出し（header.php）

「ヘッダー」はページ上部にどのページでも共通で表示させておきたい部分を指定しましょう。これまでの「index.php」では「キャッチフレーズ」までが適当だと思います。「index.php」の1行目から以下の部分までを「切り取り」して別ファイルに貼り付けてください。保存時のファイル名は「header.php」としてください。保存先はこれまでに作成していたフォルダ（私の場合は「sample」）の中で結構です。

<html lang="ja">
<head>
<title></title>
</head>
<body>
<div><?php bloginfo('name'); ?></div>
<div><?php bloginfo('description'); ?></div>

フッター部分の切り出し（footer.php）

フッターは今の「index.php」には表示要素はありませんが、コピーライトの表記などをすることもありますので、合わせて作成しておきます。今度は「index.php」の末尾から以下の2行を「切り取り」して別ファイルに貼り付けてください。保存時のファイル名は「footer.php」としてください。保存先はこれまでに作成していたフォルダ（私の場合は「sample」）の中で結構です。

</body>
</html>

残った index.php にインクルード読み込みタグを埋め込む

上記2つの作業をすると「index.php」の記述内容はメインの部分を残してほとんどなくなりましたね。このままだと切り出したヘッダーとフッターは消えたままとなりますので、ここにインクルードの読み込みタグを設置します。現状のindex.phpはこんな感じです。

<div>
<?php if(have_posts()): while(have_posts()): the_post(); ?> <!-- ループ開始 -->

<?php echo get_the_date(); ?> <!-- 投稿日時を表示 -->
<?php the_category(', '); ?> <!-- カテゴリーを表示 -->
<?php the_title(); ?> <!-- 記事タイトルを表示 -->
<?php the_content(続きを読む); ?> <!-- 記事本文を表示 -->

<?php endwhile; endif; ?> <!-- ループ終了 -->
</div>

インクルードの準備をする（読み込み編）

では早速「index.php」に読み込みタグを設置していきましょう。

ヘッダー（header.php）を読み込む

ヘッダー部分を読み込むには「index.php」に以下の1行を追加します。ヘッダー要素を切り取った場所に追加してください。「index.php」の1行目ですね。

<?php get_header(); ?>

フッター（footer.php）を読み込む

フッター部分を読み込むには「index.php」に以下の1行を追加します。フッター要素を切り取った場所に追加してください。「index.php」の最下部ですね。

<?php get_footer(); ?>

インクルードの表示テスト

ここまで完了したら一度、インクルードが無事に動作するかをチェックしましょう。これまでサーバーには「index.php」と「style.css」の2種類だけでしたが、今回切り出した「header.php」と「footer.php」を合わせた合計4ファイルをこれらと同じ階層に上書きアップロードしてください。
※「index.php」も変更していますので、サーバーへのアップロードの際は上書きしておいてくださいね

先ほどまでの「index.php」と「style.css」の2種類だけで構成していた時と表示が何も変わっていなければ正解です。もし表示が崩れていたり、同じ要素が2つもある場合は切り出しのポイントが重複していたり貼り付けミスの場合がありますので、これまでの解説を見直して修正してみてください。

下記は私の例ですがこのような表示になっていればここまでは完璧です。
※「サイト名：サンプルサイト」「キャッチフレーズ：サンプルのキャッチフレーズ」「タイトル：test1　本文：text1」と「タイトル：test2　本文：text2」という内容です