はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました（サンプルダウンロード）

Posted under - WordPress

166

初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい！っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。

Building WordPress Origin Theme

WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました（2013年 1月現在）。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか？

私が WordPress を始めた頃のデフォルトテーマは、名前もそのままの Default（現在はアップデートが止まっています）というシンプルなテーマでした。なのでまだ WordPress にそんなに詳しくない頃でも、このテーマを参考にしながらオリジナルテーマを作れたように思います。

今回は WordPress で初めてオリジナルテーマを作ってみたいという人向けに、シンプルなテーマを使って、オリジナルテーマの作り方の流れをまとめてみました。テーマ自体は WordPress の基本となるブログ向けのテーマです。

初めての WordPress テーマ – 目次

  1. HTML + CSS で、サイトのデザインを作ろう！
  2. HTML + CSS で作ったら、WordPress のテンプレートファイル化する
  3. WordPress に合わせて index.php を分割しよう！
  4. header.php を編集しよう！
  5. メインのテンプレートファイル index.php の編集に挑戦！
  6. サイドバーの部分 sidebar.php を編集しよう！
  1. フッターを表示する footer.php を編集しよう！
  2. 個別記事を表示する single.php を作ろう！
  3. コメント部分を表示しよう！
  4. 固定ページを表示するメインテンプレートファイル page.php を作ろう！
  5. カスタムメニューを利用できるようにする
  6. 最後に Theme Check プラグインでチェック

1. HTML + CSS で、サイトのデザインを作ろう！

サンプルサイト

まずは WordPress のことは置いておいて、HTML + CSS だけで Webサイトのデザインを作っていきます。慣れてくると HTML + CSS + WordPress の作業をいっぺんにやることも多いですけど、初めてのときは WordPress のページの構造を理解するためにも、まずはおおまかでいいので、HTML + CSS でデザインを完成させておくといいと思います。

純粋な HTML + CSS の Webサイトを基準にしておけば、WordPress ではどこを変更する必要があるのか … ということが分かりやすくなると思うので、初めてのときはこの方法がいいんじゃないかな？と思います。

今回は下記の 3ページを、まずは HTML + CSS で作ってみました。

HTML + CSS サンプル

DOWNLOAD(zip)

一応ダウンロードできるようにしてあるので、興味のある方は参考にしてみていただけると嬉しいです。また、HTML + CSS で作るときは、レイアウト、ページの機能的に、以下のものを最初からデザインに含めておくと、WordPress のテーマにするときにすんなり行くと思います。

デザインに入れておきたいもの
  • ヘッダー、サイドバー、フッター
  • メインナビゲーション
  • 検索フォーム
  • ページ送り（ページャー、ページネーション）
  • コメント一覧、コメントフォーム

ちょっと言葉だけだと分かり難いと思うので、下記の画像でチェックしてみてください。サンプルのトップページのデザインです。

トップページのデザイン

トップページのデザイン

トップページのデザインです。オーソドックスな 2カラムレイアウトです。

レイアウト自体は、オーソドックスな 2カラムレイアウトです。そしてヘッダー下部には、ナビゲーションを付けておきます。とりあえず内容は何でもいいので、ここでは HOME と ABOUT としておきました。それからヘッダー（またはサイドバーなど）には検索フォームも付けておきます。

メインカラム内には、記事見本をふたつぐらい作っておきます。また、ブログですから、「古い記事」「新しい記事」への移動のための「ページャー（ページネーション）」も必要ですね！

サイドバーには、カテゴリーや最近の記事などを、とりあえず設置しておきます。

続いてひとつひとつのブログ記事ページです。

記事ページのデザイン

記事ページのデザイン

記事ページのデザインです。コメント一覧やコメントフォームが必要ですね！

個別記事ページでは、記事下にタグや記事を書いた人（投稿者）を表示するようにしてみました。また、「次の記事」「前の記事」に移動するためのリンクも必要ですね。

その下にはコメント一覧と、コメントを書き込むためのフォームを設置します。ヘッダーやサイドバー、フッターはトップページと共通です。

最後に固定ページのデザインです。

固定ページのデザイン

固定ページのデザイン

固定ページのデザインです。カテゴリーや日付、ページャーはありません。

固定ページはブログの記事と違って、カテゴリーやタグの表示がありません。今回はページの性格上、日付の表示もなしにしています。また、ページャーやコメント一覧、コメント欄もなしにして、すっきりとしたレイアウトになってます。

サンプルテーマのダウンロード

DOWNLOAD(zip)

これから WordPress のテーマを作成していきますが、上記のデザインで WordPress のテーマ化したものも用意しました。HTML のものと比較するのに使ってください。ライセンスは GPL にしてあるので自由に使っていただいて構いません。

初めてのWordPressテーマ 目次

2. HTML + CSS で作ったら、WordPress のテンプレートファイル化する

テーマフォルダの作成

それではこれから作成した HTML ファイル … index.html を使って、WordPress のテーマ作りに取りかかります！まずは準備として、フォルダをひとつ作ります。これがテーマフォルダになるので、テーマの名前を使ったフォルダ名がいいと思います。

ここでは simplesimple という名前を付けることにします。そしてこの simplesimple フォルダに、index.html とスタイルシート（CSSで画像を使ってるなら images フォルダ）を入れます（ファイルはコピーを作っておくと安心です）。

次に index.html のファイルの拡張子を .php に変更して、index.php にします。続いてスタイルシートの方は、style.css というファイル名にします。そして style.css の冒頭に、以下のようなコメントを入れます。

style.css
  1. /*
  2.  Theme Name: テーマの名前
  3.  Description:テーマの説明
  4.  Theme URI: テーマの URL
  5.  Author: 作った人の名前
  6.  Author URI: 作った人の URL
  7.  Version: バージョン
  8.  License: ライセンス
  9.  License URI: ライセンスの URL
  10. */

テーマの名前は必須なので、必ずいれておきましょう。ここでは Simple Simple と入れることにします。あとはとりあえず任意なのですが、配布するテーマだったら、ライセンスなどは入れておきます。

初めてのWordPressテーマ 目次

2.1. WordPress の Themes フォルダに移してみよう！

wp-content/themes

ここまでできたら、WordPress の wp-content/themes フォルダに、作成した simplesimple フォルダを移動させてみます。

そして WordPress の管理画面、外観 → テーマ を見てみると …。

管理画面の 外観 → テーマ

テーマとして認識されてます！

スクリーンショット画像はないけど、テーマとして認識されています！

こんな風にスクリーンショット画像は載ってないけど、WordPress のテーマとして認識されています！WordPress では、最低 index.php 一枚と、テーマ名などを記述（さっき書きましたね！）した style.css という名前のスタイルシートがあれば、テーマとして認識してくれるんです！でもちょっと画像がないのがさみしいので、キャプチャを撮影しておきましょう。

キャプチャを撮影したら、screenshot.png という名前で自分で作ったテーマフォルダ（今回は simplesimple フォルダ）に保存します。images フォルダではないので注意してください。また、画像のサイズは 640 x 480px 以下が推奨されてます。

画像が表示されました

画像が表示されました

すると上記のように、スクリーンショットが表示されました！

初めてのWordPressテーマ 目次

2.2. テーマを有効化して、サイトを確認してみよう！

テーマとして認識されたので、ここで試しにテーマを有効化して、サイトの表示を確認してみることにします。すると …。

Webサイトの表示

CSSが効いてない！

CSSが効いてない … X(

すると上記のように、スタイルシートが効いてない状態で表示されてしまいました …。CSS だけでなく画像のパスも通っていません …。

実は WordPress では、基本的に各ファイルへのパスに、相対パスは使用できません（CSS内は除く）。そこで WordPress ならではのパスの書き方をしなくてはなりません …。

初めてのWordPressテーマ 目次

2.3. WordPress のテンプレートタグ

難しい説明は後にして、とりあえず index.php の style.css へのパスと、ファビコンへのパスを変更してみましょう。テキストエディタで index.php を開きます。

index.php – <head>内の一部
  1. <link rel="shortcut icon" href="images/favicon.ico">
  2. <link rel="stylesheet" href="style.css" media="screen">

上記のように相対パスで書かれてる部分を … 

  1. <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
  2. <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">

こんな風に PHP のコードで書き直します。これは WordPress のテンプレートタグというもの。ここではふたつテンプレートタグを使っていますが、各テンプレートタグは下記のような役目をしています。

TEMPLATE TAG
  • get_template_directory_uri … テンプレートのあるディレクトリ URI を取得します。つまりテーマディレクトリです。
  • get_stylesheet_uri … style.css の URI を取得します。
MEMO

以前は bloginfo('template_directory') といったテンプレートタグを使っていましたが、現在は get_template_directory_uri が推奨されてます。

テンプレートタグを使って書き直すと、実際には下記のように絶対パスで出力されるようになりました！ 

  1. <link rel="shortcut icon" href="http://example.com/wp-content/themes/simplesimple/images/favicon.ico">
  2. <link rel="stylesheet" href="http://example.com/wp-content/themes/simplesimple/style.css" media="screen">

これでとりあえずスタイルシートとファビコンへのパスが通りました！なのでキチンとスタイルシートが反映された状態で、Webサイトが表示されました。

CSSが反映された状態

CSSが反映されました！

記事内の画像については、あとで投稿画面から投稿するので、気にしなくて OK です。

WordPress のテーマ作りというのは、こんな感じで HTML で静的に書かれてるコードを、WordPress のテンプレートタグを使って書き直していく作業ということが言えそうです。さっきはテーマディレクトリやスタイルシートの URL を取得するテンプレートタグを紹介しましたが、このテンプレートタグにはたくさんの種類があるんです。

それらをひとつひとつ暗記する必要はないけれど、何度もテーマを作っていると、自然に覚えてくると思います！

初めてのWordPressテーマ 目次

3. WordPress に合わせて index.php を分割しよう！

次に WordPress サイトの特徴でもあるんですけど、index.php を分割していきます。でも index.php を分割ってどういうことでしょう？実は WordPress では、Webサイトのヘッダーやサイドバー、フッターなどを、別々のファイルに分割しておく … という方法が取られています。

少し図を使って説明すると …。

WordPress サイトの構造

WordPressサイトの構造

大きな画像ばっかりでごめんなさい … X( こんな風にレイアウトの各パーツごとにファイルが分割されています。

こんな感じで、デザインのレイアウトの部品ごとに、別々のファイルになっています。html ファイルではあまり馴染みのない方法かもしれませんが、php ファイルではよくある方法ですね！これに習って、各パーツごとに index.php を 4つに分割してみます。

初めてのWordPressテーマ 目次

3.1. ヘッダー部分を分割！

まずはヘッダー部分である header.php を作ります。index.php の 1行目から、ヘッダーの終わりまでを切り取って、header.php という名前でテーマフォルダ内に保存します。

切り取った header.php
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>TOP PAGE</title>
  6. 	... 省略 ...
  7. </head>
  8. <body>
  9. 	<div id="container">
  10. 		<!-- header -->
  11. 		<div id="header" class="clearfix">
  12. 			... 省略 ...
  13. 		</div>
  14. 		<!-- /header -->

header.php を切り取ってしまったので、index.php の方はヘッダー部分が丸ごとなくなってしまいました。そこで header.php（つまりヘッダー部分）を読み込むようにしてあげます。header.php を読み込むには、index.php に下記のように記述します。

index.php のヘッダー部分
  1. <?php get_header(); ?>
  2.    <!-- main -->
  3.    <div id="main">
  4.           … 以下省略 …

get_header は、header.php を読み込むテンプレートタグ（読み込みタグなので、インクルードタグって呼んだりもします）。こんな風にして header.php を読み込んで、ヘッダー部分を表示します！

INCLUDE TAG
  • get_header … header.php を読み込む
初めてのWordPressテーマ 目次

3.2. サイドバー部分を分割！

header.php を切り取ったみたいに、今度はサイドバー部分を sidebar.php として切り取ります。header.php と同じようにテーマフォルダ内に保存しましょう！

切り取った sidebar.php
  1. <!-- sidebar -->
  2. <div id="sidebar">
  3. 	<div class="widget">
  4. 		<h2>Category</h2>
  5. 		<ul>
  6. 			<li><a href="#">ケーキ</a></li>
  7. 			<li><a href="#">コーヒー</a></li>
  8. 		</ul>
  9. 	</div>
  10. 	...省略...
  11. </div>
  12. <!-- /sidebar -->

そしてサイドバーがすっぽり欠けた index.php には、get_sidebar というテンプレートタグ（インクルードタグ）を記述します。

index.php のサイドバー部分
  1.     ...省略...
  2.     <?php get_sidebar(); ?>
  3.   </div>
  4.   <!-- /container -->
  5.   <!-- footer -->
  6.   <div id="footer">
  7.   ...省略...
  8.   </div>
  9.   <!-- /footer -->
  10.  </body>
  11. </html>
INCLUDE TAG
  • get_sidebar … sidebar.php を読み込む
初めてのWordPressテーマ 目次

3.3. フッター部分を分割しよう！

最後にフッター部分を分割します。同じように index.php のフッター部分を切り取り、footer.php という名前でテーマフォルダ内に保存します。

切り取った footer.php
  1.   </div>
  2.   <!-- /container -->
  3.   <!-- footer -->
  4.   <div id="footer">
  5.     <p id="copyright" class="wrapper">© Simple x Simple All Rights Reserved.</p>
  6.   </div>
  7.   <!-- /footer -->
  8.  </body>
  9. </html>

すっぽりフッター部分が欠けた index.php には、get_footer というテンプレートタグ（インクルードタグ）を書き加えます。マークアップ的には、フッターはサイドバーの次に記述されていることが多いと思うので、下記のように get_sidebar と get_footer が並ぶことが多いと思います。

index.php のフッター部分
  1.     …省略...
  2.    </div>
  3.    <!-- /main -->
  4. <?php get_sidebar(); ?>
  5. <?php get_footer(); ?>

これでページの分割ができました。なんでわざわざ分割するんだろう？と思う人もいるかもしれませんが、これはもうちょっと後で説明しますね！

初めてのWordPressテーマ 目次

3.4. WordPress のテンプレートファイルいろいろ

ここまでくると、テーマファイルの中には以下のファイルが並んでるはずです。

テーマフォルダの中

テーマフォルダ内

キャプチャ画像の screenshot.png と CSS用の画像フォルダ images、スタイルシートである style.css と 4つの php ファイルがあるはずです。そしてこのテーマを構成する php ファイルのことを、WordPress ではテンプレートファイルと呼んでいます。この言葉はよく使う言葉なので、ぜひ覚えておいてくださいね！

そしてさっきは index.php を分割して、部品となる header.php、sidebar.php、footer.php を作りました。テンプレートファイルの中でも、「部品」として分割されたファイルのことを「モジュールファイル」と呼んだりすることもあるので、合わせて覚えておくといいかもです！

さて、この段階ではファイルを分割しただけなので、ページの表示自体は HTML で書いたときとなにも変わりません。それでは各テンプレートファイルに、WordPress の機能を盛り込んでいきましょう。

ここまでのまとめ
  • ヘッダー部分は header.php にする
  • サイドバー部分は sidebar.php にする
  • フッター部分は footer.php にする
  • index.php 側は、各インクルードタグで読み込む。
初めてのWordPressテーマ 目次

4. header.php を編集しよう！

前半部分で <head> 内のファビコンと CSS ファイルへのリンクを、テンプレートタグを使って編集しました。でもそれだけで header.php が完成したわけではありません。ロゴの部分や検索フォームなどを、WordPress のテーマ向けに作り替えていきましょう。

作業はデザインと照らし合わせながら見ていくと分かりやすいと思うので、ヘッダー部分のデザインをもう一度確認してみます。

ヘッダーのデザイン

ヘッダーのデザイン

ヘッダーのデザインは、至ってシンプルですねー。

初めてのWordPressテーマ 目次

4.1. サイト名と紹介文の部分

ヘッダー部分はとてもシンプルです。サイト名とちょっとした紹介文があり、検索フォームとナビゲーションがあります。サイト名部分には、トップページへのリンクを貼ることにします。まずは直書きした HTML を確認してみます。

HTML – サイト名と紹介文の部分
  1. <h1 id="logo">
  2.       <a href="#"><span>Simple x Simple</span></a>
  3. </h1>
  4. <p id="description">Just another WordPress site</p>

<h1> タグと <p> タグでマークアップされています。これを元に、サイト名やトップページへのリンク、紹介部分の部分をテンプレートタグを使って、書き直してしまいましょう。使うテンプレートタグは下記のものです。

TEMPLATE TAG
  • bloginfo('name') … サイト名を表示する
  • bloginfo('description') … 紹介文を表示する
  • home_url() … トップページの URL を取得する
header.php（一部）
  1. <h1 id="logo">
  2.       <a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
  3. </h1>
  4. <p id="description"><?php bloginfo('description'); ?></p>

サイト名や紹介文には bloginfo というテンプレートタグを使います。ここで表示するサイト名や紹介文は、管理ページの 設定 → 一般 からいつでも変更することができます。

設定 → 一般

一般設定

初めてのWordPressテーマ 目次

4.2. 検索フォーム

続いて検索フォーム部分です。同じように直書きした HTML から見ていきましょう。

HTML – 検索フォーム
  1. <form method="get" id="searchform" action="#">
  2.       <input type="text" placeholder="検索" name="s" id="s">
  3.       <input type="submit" id="searchsubmit" value="">
  4. </form>

<form> 内にテキストフィールドと送信ボタンがあります。テキストフィールドは type='text' になってますけど、もちろん type='search' でも構いません。

書き換える部分は、action 属性の中の送信先 URL です。これはトップページの URL で OK なので、さっきと同じように home_url を使えば OK です。検索フォームで注意するのは、name 属性の値です。検索のキーワードは、s というパラメータで渡されるので、必ず name='s' としておきます。

header.php（検索フォームの部分）
  1. <form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
  2.       <input type="text" placeholder="検索" name="s" id="s">
  3.       <input type="submit" id="searchsubmit" value="">
  4. </form>

searchform.php

ここまでできたら、検索フォーム自体を部品化してしまいましょう！<form> ~ </form> の部分を index.php から切り取って、searchform.php という名前でテーマフォルダ内に保存します。そして header.php の方では、get_search_form() と記述して読み込むようにします。

header.php（検索フォームの部分）
  1. <?php get_search_form(); ?>
初めてのWordPressテーマ 目次

4.3. ナビゲーション部分

続いてナビゲーションの部分です。まずは基本となる HTML でのマークアップから見ていきます。

header.php – ナビゲーションの部分
  1. <!-- Navigation -->
  2. <div>
  3.  <ul class="menu">
  4.   <li class="current_page_item"><a href="#">HOME</a></li>
  5.   <li><a href="#">ABOUT</a>
  6.    <ul class="sub-menu">
  7.     <li><a href="#">CHILD#1</a></li>
  8.     <li><a href="#">CHILD#2</a></li>
  9.     <li><a href="#">CHILD#3</a></li>
  10.    </ul>
  11.   </li>
  12.  </ul>
  13. </div>
  14. <!-- /Navigation -->

<div> で大きく囲んで、中に <ul> タグと <li> タグでマークアップしてあります。サブメニューもあるので、リストは入れ子になっていますね！この <div> ~ </div> 間は、どうやって記述するかというと …。とりあえず下記のように丸ごと置き換えてしまいます。

header.php – ナビゲーションの部分
  1. <!-- Navigation -->
  2. <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
  3. <!-- /Navigation -->

wp_nav_menu というテンプレートタグについては、あとで詳しく説明しますが、この一行でさっきの HTML のように、<div> で囲んだ ul、li でマークアップされたナビゲーションを表示してくれます。固定ページをひとつかふたつ作って、サイトの表示を確認してみましょう。

固定ページを作成

固定ページを作成

ABOUT と CONTACT という固定ページを作りました。

ナビゲーション

ナビゲーションとして表示してくれる！

こんな風に、作った固定ページがナビゲーションとして表示されます。出力される HTML は下記のような感じです。

出力される HTML
  1. <div class="menu">
  2.      <ul>
  3.           <li><a href="#">ABOUT</a></li>
  4.           <li><a href="#">CONTACT</a></li>
  5.      </ul>
  6. </div>

menu というクラスのついた div で囲まれて、ul、li要素で固定ページへのリンクが表示されます。ここでチェックしたいのは、div タグに menu というクラスがつく … ということです（なんで注意したいのかは、後述します！）。

TEMPLATE TAG
  • wp_nav_menu … ナビゲーションを表示する
初めてのWordPressテーマ 目次

4.4. <head>内を作ろう！

さっきは <body> 以下のヘッダー部分を作りました。ちょっと前後しちゃいましたが、今度は <head> 内を作っていくことにします。現状ではファビコンとスタイルシートへのパスを、テンプレートタグで書き直しただけでした。

header.php – <head> 内のコード
  1. <head>
  2.   <meta charset="UTF-8">
  3.   <title>ページタイトル</title>
  4.   <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
  5.   <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
  6. </head>

書き換えたいのは <title> タグの部分。タイトルはトップページ以下、色んなページで変わる部分ですよねー。まず、<title> タグにはサイト名を必ず入れる … という前提で、下記のように書きます。

header.php（<title> 部）
  1. <title><?php bloginfo('name'); ?></title>

bloginfo('name') は、<h1> タグのサイト名の部分でも使いましたね！これでとりあえず <title> タグの中に、サイト名を表示させることができました。でもこのままでは、全部のページのタイトルがサイト名になってしまします。そこで wp_title というテンプレートタグを合わせて使います。 

  1. <title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>

wp_title は、各ページのタイトルを表示してくれる便利なテンプレートタグです。()の中に '|' となっていて、'right' という記述があります。これはタイトルを下記のように表示するためです。
ページのタイトル | サイト名

ページタイトルの右側（right）に「|」という区切り文字を入れるっていう意味になってます。これで title タグの部分は完成です！

TEMPLATE TAG
  • wp_title … ページのタイトルを出力
初めてのWordPressテーマ 目次

4.5. <head> 内に書いておきたい大事なもの

さて、ここで <head> 内に書いておきたい大事なものがふたつあります。まずひとつ目は、WordPress のコメント欄で必要になる JavaScript ファイルの読み込みのための記述です。どんな JavaScript ファイルかは後述しますが、<head> 内に下記のように書き加えます。

header.php（一部）
  1. ...省略...
  2. <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
  3. </head>

さらにもうひとつ、絶対に書いておかなくちゃいけないものがあります。

  1. <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
  2. <?php wp_head(); ?>
  3. </head>

</head> の前に、wp_head() と書き加えておきましょう！これは WordPress が <head> 部分を出力する際に、状況に応じて必要なコードを自動で出力するために必要な記述です。例えばプラグインなどを使ったとき、そのスタイルシートのリンクを出力したりするのに必要な記述です。なので必ず記述するようにしましょう。

ここまでで header.php の作業はお終いです！

header.php のまとめ
  • imagesフォルダなどを利用する際のテーマディレクトリへのパスは、get_template_directory_uri で取得する。
  • style.css へのパスは、get_stylesheet_uri で取得する。
  • トップページの URL は home_url で取得する。
  • ブログの名前、紹介文は bloginfo で表示する。
  • 検索フォームは searchform.php に部品化しておく。
  • get_search_form で search form.php を読み込む。
  • wp_nav_menu でナビゲーションを表示する。
  • head 内に wp_enqueue_script( "comment-reply" ) と記述して、JavaScript を読み込む。
  • wp_head を忘れずに！
初めてのWordPressテーマ 目次

5. メインのテンプレートファイル index.php の編集に挑戦！

index.php は、WordPress サイトではなくてはならないメインのテンプレートファイルです。ファイルの分割のところで get_header などを書き加えましたが、メインのコンテンツの部分は、まだ HTML を直書きしたままです。

index.php
  1. <?php get_header(); ?>
  2.  <!-- main -->
  3.  <div id="main">
  4.   <!-- post -->
  5.   <div class="post">
  6.    <h2><a href="#">記事のタイトル</a></h2>
  7.    <p class="post-meta">
  8.     <span class="post-date">2012年12月23日</span>
  9.     <span class="category">Category - <a href="#">ケーキ</a>
  10.     <span class="comment-num"><a href="#">Comment : 0</a></span>
  11.    </p>
  12.    <p>... 記事の本文（画像を含む）...</p>
  13.    <p><a href="#" class="more-link">続きを読む »</a></p>
  14.   </div>
  15.   <!-- /post -->
  16.   ...2つ目の記事（省略）...
  17.   <!-- pager -->
  18.   <div class="navigation">
  19.    <div class="alignleft"><a href="#">« PREV</a></div>
  20.    <div class="alignright"><a href="#">NEXT »</a></div>
  21.   </div>
  22.   <!-- /pager	 -->
  23.  </div>
  24.  <!-- /main -->
  25. <?php get_sidebar(); ?>
  26. <?php get_footer(); ?>

記事の部分（上記の青い部分）… div.post の中に、いろいろなものが記述されています。ここで div の中の「表示したいもの」を、ちょっと整理してみましょう。

  • 記事のタイトル
  • 日付
  • カテゴリー
  • コメント数
  • コンテンツ（画像を含む）

この部分を HTML の直書きではなく、WordPress のテンプレートタグで書き換えてしまうのが次の作業です。でもその前に WordPress ループという大事な部分をチェックしておきます。このコードをどこに書くの？というのは置いておいて、コードの概要を先に見てみますね！

初めてのWordPressテーマ 目次

5.1. WordPress ループ

WordPressループ

まず、WordPress は投稿画面で記事を書きますよね？そして記事があれば、それを表示します。でも記事が何もなければ、表示したくてもできません …。

そこで 1の部分で、まず「表示すべき記事があるかどうか？」をチェックします。そして記事があれば 2の部分を実行します。逆に記事がなければ 3の部分を実行します。if文という PHP の基本構文で、条件（記事の有無）によって処理を変更してるんですね！

肝心なのは 2の部分です。トップページなどでは、表示する記事が複数あるのでが普通です。ふたつ記事を書けばふたつ、3つ記事を書けば 3つ表示します。2の部分は、その分だけ繰り返す … というのを頭にいれておいてください。

そしてこの一連のコードの部分を、WordPressループと呼んでます。ループというのは繰り返すっていう意味ですよね！

さて、index.php に戻ってみましょう。さっきの WordPressループを index.php に記述して、実際に書いた記事を表示させてみます。

index.php
  1. <?php get_header(); ?>
  2. <!-- main -->
  3. <div id="main">
  4.  <?php if (have_posts()) :
  5.   while (have_posts()) : the_post();
  6.    // この部分で記事を表示する処理をします。
  7.   endwhile; // 繰り返し処理終了
  8.  else : ?>
  9.    <div class="post">
  10.     <h2>記事はありません</h2>
  11.     <p>お探しの記事は見つかりませんでした。</p>
  12.    </div>
  13.  <?php endif; ?>
  14.  <!-- pager -->
  15.  <div class="navigation">
  16.   <div class="alignleft"><a href="#">« PREV</a></div>
  17.   <div class="alignright"><a href="#">NEXT »</a></div>
  18.  </div>
  19.  <!-- /pager	 -->
  20. </div>
  21. <!-- /main -->
  22. <?php get_sidebar(); ?>
  23. <?php get_footer(); ?>

メインカラムとなる div#main の中に WordPress ループを記述しました（青い部分）。記事がなかったときの表示は、そのまま <p>お探しの記事は見つかりませんでした。</p> などとしておけばいいと思います。また、記事数が多くなったときに表示する、次のページ、前のページへのリンクは、WordPressループの後に記述（後でテンプレートタグ化）します。

WordPress ループを記述したので、次に「表示したいもの」を、テンプレートタグを使ってループの中に記述していきます。使用するテンプレートタグは以下の通りです。

TEMPLATE TAG
  • 記事のタイトルを表示 … the_title
  • 記事のパーマリンクを出力（URLのこと）… the_permalink
  • 記事の日付を表示 … the_date（後でちょっと補足あり）
  • 記事のカテゴリーを表示 … the_category
  • コメント数を表示 … comments_popup_link
  • コンテンツ（画像含む）、続きを読むのリンクを表示 … the_content

ちょっとたくさんありますが … たとえば記事のタイトルを <h2> でマークアップして、リンクで囲みたいなら下記のように記述します。

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

HTML タグと WordPress のテンプレートタグが混在していますが、落ち着いて整理してみれば、そんなに難しくないと思います。

それでは実際に、index.php の WordPress ループの中にテンプレートタグを書き加えていきます。もともとの HTML と比較してみてくださいね！

もともとのHTML

HTML

テンプレートタグで書き直したもの

テンプレートタグで書き直したもの

記事のタイトル、日付、カテゴリー、コメント数、それから記事本文であるコンテンツの部分を、テンプレートタグを使って書き直しました。これで矢印内の <div> ~ </div> 間が、記事の数だけ繰り返し処理されて表示されます！また、div タグに the_ID などのテンプレートタグがついてますが、これは後述しますね。

こんな風に WordPress のテーマ作りでは、たくさんのテンプレートタグを使います。各テンプレートタグの使い方は、WordPress Codex にまとまっているので、知らないテンプレートタグは調べるクセを付けておくといいと思います。

初めてのWordPressテーマ 目次

5.2. ちょっと寄り道 – 日付を表示する the_date

日付を表示する the_date の表示形式は、管理画面の一般設定から行うことができます！

設定 → 一般 から日付の設定

日付の設定

ただ the_date は、同じ日付の記事が複数ある場合に、2つ目以降の日付が表示されない … という仕様です。ちょっと説明しにくいので、下記の図をみてください。

the_date での日付の表示

同じ日付は省略されます

こんなレイアウトで、日付とタイトルを表示するときには、the_date を使うとスッキリしていいかもしれませんね！でも一般的なブログのレイアウトだと、やっぱり全部の記事に日付を出したい … 。そんなときは、the_date の代わりに、下記のように書けば OK です。

  1. <?php echo get_the_date(); ?>

the_date の代わりに、get_the_date を使います！

初めてのWordPressテーマ 目次

5.3. 記事を投稿して表示を確認！

ここまでできたら管理画面からいくつか記事を投稿して、トップページの表示を確認してみます。

いくつか記事を投稿してみよう！

新規投稿

記事を公開したら、トップページの表示を確認してみます。

そしてトップページを確認してみると …。

トップページの表示

投稿した記事が表示されました

こんな風に投稿した記事が表示されました！

初めてのWordPressテーマ 目次

5.4. ちょっと寄り道 – WordPress が自動で付けてくれるクラス

さっきの WordPress ループの中、記事を囲む <div> タグには、下記のようにいくつかテンプレートタグが記述されていました。 

  1. <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

まず、 id="post-<?php the_ID(); ?>" の部分。これは記事ひとつひとつに対して、一意な ID を付けるための記述です。the_ID は、WordPress が自動で生成する、記事の ID を出力してくれます。

また、その後に <?php post_class(); ?> という記述があります。これを記述すると、ページによって WordPress が自動でクラスを付けてくれます。例えばトップページではどんなクラスがつくかというと …。

  • post … ブログ記事を意味するクラス
  • type-post … 投稿のタイプを意味するクラス（post はブログ記事の意味）
  • category-cake … 属するカテゴリーを表すクラス
    などなど …

ここで押さえておきたいのは、post というクラスです。ブログを表示するときには post というクラスがつきます。でも固定ページを表示するときには、page というクラスになります。なのでちょっと注意が必要ですね！

TEMPLATE TAG
  • the_ID … 記事の ID を出力します。
  • post_class … 記事に合わせてクラスを作ってくれます。
初めてのWordPressテーマ 目次
5.4.1 画像につくクラス

また、記事内の画像にもクラスがつくのはご存知だと思います。中でも重要なのは、レイアウトに関するクラスです。

メディアの挿入

メディアの挿入

「配置」によって、つくクラスが変わりますよね！

画像を貼付けるとき、配置から「左」「右」「中央」を選ぶと、下記のようなクラスが <img> タグにつきます。

  • alignleft … 左に配置
  • alignright … 右に配置
  • aligncenter … センターに配置

なので style.css で、各レイアウトにあわせて、float などを記述しておかないと、ちゃんとレイアウトできなくなっていまいますね！

初めてのWordPressテーマ 目次

5.6. 次のページ、前のページへのページャーを付けよう！

ちょっとクラスについて寄り道しちゃいました …。記事を表示する部分が終ったら、次は「次のページ」「前のページ」というリンクを表示させます。これは記事が増えていって、1ページでは表示しきれなくなったときに表示するものですね！

ページャーの書き方はいろいろな方法があるのですが、一番簡単なのが「次のページ」「前のページ」という表示方法です。

「次のページ」「前のページ」

「前の記事」「次の記事」へのページャー

これもまず、直書きしたHTML をチェックしてみましょう。

index.php – ページャーの HTML
  1. <!-- pager -->
  2. <div class="navigation">
  3.      <div class="alignleft"><a href="#">« PREV</a></div>
  4.      <div class="alignright"><a href="#">NEXT »</a></div>
  5. </div>
  6. <!-- /pager -->

今回は大きく <div> で囲んで、中にふたつの <div> を入れ子にした状態でマークアップしてみました。それではいつものように、テンプレートタグを使って書き換えてみます。

index.php – ページャーの部分
  1. <!-- pager -->
  2. <?php if ( $wp_query -> max_num_pages > 1 ) : ?>
  3. <div class="navigation">
  4. 	<div class="alignleft"><?php next_posts_link('« PREV'); ?></div>
  5. 	<div class="alignright"><?php previous_posts_link('NEXT »'); ?></div>
  6. </div>
  7. <?php endif; ?>
  8. <!-- /pager -->

まず if文で大きく囲んでありますが、これは「もしページ数が 1ページより多かったら …」という意味の条件分岐です。ページが 1ページしかないなら、表示する必要がないので、今回はこんな条件を付けてみました。

チェックしたいテンプレートタグは以下のふたつです。

TEMPLATE TAG
  • next_posts_link … 前の（古い）ページへのリンクを表示します。
  • previous_posts_link … 次の（新しい）ページへのリンクを表示します。

これらのテンプレートタグを使えば、リンクである a要素を出力してくれます。また、() 内には、リンクで表示する文字を指定することもできます。

注意したいのが、next_posts_link の方が「前の（古い）ページ」で、previous_posts_link の方が「次の（新しい）ページ」になります。ちょっと逆のイメージで混乱しちゃいますね …。

Attention

また、これらのテンプレートタグは、WordPress ループの外に記述します。テンプレートタグには、WordPress ループの中で使うものと、ループの外で使うもの、どっちでも利用できるものがあるんです。はじめのうちは、このことに気付かないで、ループ内で使うべきものを、ループ外で使っちゃったりすることがよくあります。ループ内、ループ外などは、WordPress Codex を見ると掲載されているので、チェックしておきましょう。

ここまでで index.php はお終いです！

index.php のポイント
  • 記事の表示は WordPress ループが行っています。
  • WordPress ループの while文の中は、記事の数だけ繰り返されます。
  • 全部の記事に日付を表示したいなら、the_date じゃなくて echo get_the_date と書く。
  • ページャーは WordPress ループの外に書きましょう。

メインとなる index.php でのポイントは、やっぱり WordPress ループです。ループで繰り返される部分をキチンと把握すれば、それほど難しくないと思います！

初めてのWordPressテーマ 目次

6. サイドバーの部分 sidebar.php を編集しよう！

続いてサイドバーである sidebar.php を作っていきます。とはいえ、WordPress ではウィジットという便利なものがあるので、それを使ってサイドバーを作っていきたいと思います。

ウィジットは メニュー → 外観 → ウィジット から、好きなウィジットをドラッグするだけで利用できるようになりますよね！

ウィジットの追加

サイドバーにウィジットを追加

ウィジットはドラッグするだけで、簡単に追加できます。

さっそく管理画面から、ウィジットを追加してみることにします。そこで、今自作しているテーマの管理画面を見てみると …。

制作中のテーマの管理画面

ウィジットがない！

管理画面のメニューに、ウィジットがない … X(

メニューにあるはずのウィジットがありません … X( これは一体どういうことでしょう？実はウィジットは、テーマがウィジットに対応していないと、利用することができないんです …。

初めてのWordPressテーマ 目次

6.1. functions.php を作ろう！

functions.php

ここで新しいテンプレートファイル、functions.php というものを使用します。functions.php はテーマ内で利用する機能などを書いておける便利なファイル。さっそく functions.php という名前でファイルを作成し、テーマフォルダの中に保存します。

そして functions.php には、下記のように書き加えます。

functions.php
  1. <?php
  2. register_sidebar( array(
  3.  'name' => 'サイドバーウィジット-1',
  4.  'id' => 'sidebar-1',
  5.  'description' => 'サイドバーのウィジットエリアです。',
  6.  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  7.  'after_widget' => '</div>',
  8. ) );
  9. ?>

name には「サイドバーウィジット」とか「フッターウィジット」とか名前を付けておきます（ウィジットエリアは、サイドバーだけじゃなくてフッターなどにも作成できます。）。id には一意なものを付けておきましょう。今回は sidebar-1 という ID を付けました。また、description には説明書きを書き加えますが、必須ではありません。

それから下記の部分は、サイドバーでウィジットを実際に表示するときに関連する記述です。

  1. 'before_widget' => '<div id="%1$s" class="widget %2$s">',
  2. 'after_widget' => '</div>',

サイドバーなどにウィジットを表示するときに、どんなマークアップで囲むか？を記述します。今回は div タグで囲むことにしました。また、クラスには widget というクラスを指定しておきました。id="%1$s" などという記述もありますが、このように書いておくと、WordPress 側で自動で ID やクラスを付けてくれるので、必要なら記述しておきます。

ここまで記述すると、管理画面でウィジットを設定できるようになります！

作成したウィジットエリア

作成したウィジットエリア

管理画面でウィジットを選べるようになりました！

初めてのWordPressテーマ 目次

6.2. sidebar.php 側も編集が必要です！

functions.php に記述すれば、すぐにウィジットが利用できるかというと、そういう訳でもありません …。今度は実際に表示する側、今回は sidebar.php に、ウィジットを表示するコードを記述していきます。

sidebar.php
  1. <!-- sidebar -->
  2. <div id="sidebar">
  3. <?php if ( is_active_sidebar( 'sidebar-1' ) ) : 
  4. 	dynamic_sidebar( 'sidebar-1' );
  5. else: ?>
  6. <div class="widget">
  7.  <h2>No Widget</h2>
  8.  <p>ウィジットは設定されていません。</p>
  9. </div>
  10. <?php endif; ?>
  11. </div>
  12. <!-- /sidebar -->

dynamic_sidebar( 'sidebar-1' ) とすると、sidebar-1 に設定（管理画面で追加）してあるウィジットが表示されます。でも設定されてない場合も考慮して、if ( is_active_sidebar( 'sidebar-1' ) ) : という条件分岐を付けました。これで「もしウィジットが設定されてたら、ウィジットを表示する」という意味になり、ウィジットが設定されてないときは、else: ~ endif までの部分が表示されます！

これで sidebar.php はお終いです。ウィジットエリアは複数作ることもできるので、必要ならフッターやヘッダー、index.php の記事下などにも設置することが可能です！

sideber.php のまとめ
  • ウィジットは、テーマが対応してないと使えません。
  • functions.php で、ウィジットを使えるように設定します。
  • sidebar.php には、ウィジットを表示するコードを記述します。
初めてのWordPressテーマ 目次

7. フッターを表示する footer.php を編集しよう！

やっとフッターまで来ましたね …。でも footer.php はとっても簡単です！今回はサイト名を Copyright と一緒に表示しているだけなので、以下のように記述します。

フッターのデザイン

フッターのデザイン

デザインがシンプルだと、コードもシンプルになります！

footer.php
  1.   </div>
  2.   <!-- /container -->
  3.   <!-- footer -->
  4.   <div id="footer">
  5.     <p id="copyright" class="wrapper">© <?php bloginfo('name'); ?> All Rights Reserved.</p>
  6.   </div>
  7.   <?php wp_footer(); ?>
  8.  </body>
  9. code
  10. </html>

もう何度か登場した bloginfo でサイト名を表示します！

初めてのWordPressテーマ 目次

7.1. 忘れちゃいけない wp_footer

header.php では、wp_head を必ず記述するって書きました。同じようにfooter.php には必ず wp_footer という記述をします。これは wp_header と同じように機能して、WordPress がページの表示に必要なコードを出力します。例えばプラグインで利用する JavaScript ファイルなども、この記述がないと出力されません。なので </body> タグの前に、忘れずに記述しておきましょう！

footer.php のまとめ
  • wp_footer を必ず記述します。
初めてのWordPressテーマ 目次

8. 個別記事を表示する single.php を作ろう！

フッターまできたのでもう完成？と思ったら、実はまだ完成じゃないんです …。ちょっと再確認ということで、ここまで作ったテンプレートファイルを振り返ってみます。

  • header.php
  • sidebar.php
  • footer.php
  • searchform.php
  • index.php
  • functions.php

この中でページの核となるのは index.php だけですねー。他はみんな部品となるものばかりです。index.php さえあれば、ブログの個別記事ページや、固定ページを表示させることもできます。でもブログの個別記事ページでは、もらったコメントを一覧表示させたり、コメントを送信するためのフォームも必要です。また、固定ページはブログ記事とは違うので、カテゴリーなどは表示する必要がなかったりします。

そこでブログの個別記事を表示するテンプレートファイルと、固定ページを表示するためのテンプレートファイルを作っておくことにします。

初めてのWordPressテーマ 目次

8.1. single.phpを作ってヘッダーなどを読み込む

single.php

まずはブログの個別記事を表示するためのテンプレートファイル、single.php から取りかかります。はじめに作った HTML ファイル、single.html をコピーして、single.php という名前でテーマフォルダに保存します。そして index.php でもしたように、ファイルを分割します。

でもすでに header.php や sidebar.php、footer.php は作成ずみなので、single.php からは各部分を削除して、各インクルードタグを記述すれば OK ですね！最初の方で、「なんでわざわざ分割しておくんだろう？」って思った人もいるかと思いますが、このように「部品」にしておけば、複数のページ表示用のテンプレートファイルを使うときに、使い回しが効くからだったんですね！

各パーツを読み込むインクルードタグは、下記の通りでしたね！

各パーツを読み込むインクルードタグ（おさらい）
  • ヘッダー部分の読み込み … get_header
  • サイドバー部分の読み込み … get_sidebar
  • フッターの読み込み … get_footer
初めてのWordPressテーマ 目次

8.2. WordPress ループを書き込む

次に index.php と同じように、WordPress ループを記述します。これは既に作ってある index.php からコピーして、該当部分にペーストするのが簡単ですね！

ペーストする場所ですが、記事を表示する部分なので、div#main から、コメント欄までの間になります。index.php のときは、ページャーの前でしたが、single.php のときはページャーの位置に注意が必要です。これについては後述するので、下記のように WordPress ループを貼付けます。

single.php – WordPress ループ
  1. <?php get_header(); ?>
  2.    <!-- main -->
  3.    <div id="main">
  4.     <?php if (have_posts()) : // WordPress ループ
  5.      while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
  6.       <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  7.        <h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
  8.        <p class="post-meta">
  9.         <span class="post-date"><?php echo get_the_date(); ?></span>
  10.         <span class="category">Category - <?php the_category(', ') ?></span>
  11.         <span class="comment-num"><?php comments_popup_link('Comment : 0', 'Comment : 1', 'Comments : %'); ?></span>
  12.        </p>
  13.        <?php the_content(); ?>
  14.       </div>
  15.      <?php endwhile; // 繰り返し処理終了
  16.     else : // ここから記事が見つからなかった場合の処理 ?>
  17.       <div class="post">
  18.        <h2>記事はありません</h2>
  19.        <p>お探しの記事は見つかりませんでした。</p>
  20.       </div>
  21.     <?php endif; // WordPress ループ終了 ?>
  22.     <!-- comment area -->
  23.     <div id="comment-area">
  24. 	    ...省略...

ペーストするときに変更するのは一ヶ所だけです。index.php では下記のようになっていた部分を書き換えます。

  1. the_content('続きを読む »');
  1. the_content();

トップページなどでは「続きを読む」という記述が必要でしたけど、全文を表示する single.php では必要ありませんから、the_content() という風に、() 内を空っぽにしちゃいましょう。

これで single.php で、記事全文を表示させることができるようになりました！

初めてのWordPressテーマ 目次

8.3. タグと投稿者などを表示する

個別記事ページでは、記事の終わりにタグと投稿者名を表示してみます。もちろん記事下じゃなくて、記事のタイトルの下あたりでも構いませんが、今回はこんなレイアウトにしてみました。また、その下には、「前の記事」「次の記事」へのページャーも表示します。

記事の下の部分

タグや投稿者、ページャー

まずはタグの表示と投稿者の表示に挑戦してみます。HTML の直書きのときは、下記のように記述していました。

single.html – タグと投稿者の部分
  1. <p class="footer-post-meta">
  2. 	Tag : <a href="#">タルト</a>, <a href="#">フルーツ</a>
  3. 	<span class="post-author">作成者 : <a href="#">高橋 のり</a>
  4. </p>

これをテンプレートタグを使って書き直してみます。まずタグの表示です。

single.php – タグの部分
  1. <p class="footer-post-meta">
  2. <?php the_tags('Tag : ',', '); ?>
  3. </p>

記事に付けられたタグを表示するには、the_tags というテンプレートタグを記述します。()内に 'Tags : ' と ', ' という記述がありますが、「Tags :」の部分は実際に表示するタグの前につける文字で、「, 」は各タグを区切るときの文字です。お好きな文字に変更してください。また、the_tags は、タグが何もない場合は表示されません。

TEMPLATE TAG
  • the_tags … 記事のタグを表示します。
初めてのWordPressテーマ 目次

タグに続いて、投稿者を表示してみます。WordPress ループ内で投稿者の名前を表示するには、the_author というテンプレートタグを記述します。

TEMPLATE TAG
  • the_author … 投稿者の名前を表示します。

でもこの投稿者名をクリックしたら、その投稿者が今まで書いた記事のページ（投稿者アーカイブ）を表示するようにしたいので、下記のように記述します。

single.php – 投稿者の部分
  1. <span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
TEMPLATE TAG
  • get_author_posts_url … 投稿者ページの URL を取得します。
  • get_the_author_meta … いろいろな投稿者情報を取得します。

これで投稿者ページへのリンク付きで表示させることができました！

でもひとりきりで書いてるブログだったら、この投稿者の表示は必要ないかもしれません。そこで「複数の投稿者がいる場合」という条件をつけて表示するようにしておきます。さっきのコードを if ( is_multi_author() ): という条件分岐で囲んでしまえば OK です。

全部まとめて書くと下記のようになりました。記述場所は WordPress ループの中なので、そこにも注意してくださいね！

single.php
  1. <?php if (have_posts()) : // WordPress ループ
  2.  while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
  3.   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  4.    ...ここに記事のタイトルなど...省略...
  5.    <?php the_content(); ?>
  6.    <p class="footer-post-meta">
  7.     <?php the_tags('Tag : ',', '); ?>
  8.     <?php if ( is_multi_author() ): ?>
  9.     <span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
  10.     <?php endif; ?>
  11.    </p>
  12.   </div>
  13.  <?php endwhile; // ここまでが繰り返し処理
  14. else : ...省略...
初めてのWordPressテーマ 目次

8.4. 前の記事、次の記事へのリンクを表示する

index.php では、たくさん記事があるときに、「前のページ」「次のページ」というページャーを、WordPressループの外に設置しました。個別記事ページを表示する single.php では、「前の記事」「次の記事」というページャーを設置したいと思います。でも注意したいのは、記述する場所です。index.php のときは WordPress ループの外に書きました。でも single.php の場合は、前述した通り WordPress ループの中に記述しなくてはいけません。

使うテンプレートタグは下記の通りです。

TEMPLATE TAG
  • previous_post_link … ひとつ前の（古い）記事のリンクを表示します。
  • next_post_link … 次の（新しい）記事のリンクを表示します。

index.php のときに使ったテンプレートタグは、previous_posts_link というように、複数形になってました。今回は複数形になっていませんね！まったく別のテンプレートタグなので、注意してください。

さて、直書きした HTML では、ページャー部分は下記のようにマークアップしてあります。

single.php – ページャー部分の HTML
  1. <!-- post navigation -->
  2. <div class="navigation">
  3.  <div class="alignleft">
  4.   <a href="#">« Hello world!</a>
  5.  </div>
  6.  <div class="alignright">
  7.   <a href="#">生チョコレートケーキ »</a>
  8.  </div>
  9. </div>
  10. <!-- /post navigation -->

これをさっきのテンプレートタグを使って書き直すと …。

single.php – ページャー部分
  1. <!-- post navigation -->
  2. <div class="navigation">
  3. <?php if( get_previous_post() ): ?>
  4.    <div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
  5. <?php endif;
  6. if( get_next_post() ): ?>
  7.     <div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
  8. <?php endif; ?>
  9. </div>
  10. <!-- /post navigation -->

途中 if( get_previous_post() ): や if( get_next_post() ): と書いて、「もし前の記事があったら表示する」「もし次の記事があったら表示する」という条件も加えてありますが、previous_post_link と next_post_link を使って、「前の記事」「次の記事」へのリンクを表示しています。記述場所は、さっき書いたタグや投稿者名の次に記述します。

single.php（一部）
  1. <?php if (have_posts()) : // WordPress ループ
  2.  while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
  3.   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  4.    ...ここに記事のタイトルなど...省略 ...
  5.    <?php the_content(); ?>
  6.    <p class="footer-post-meta">
  7.     ...ここにタグ、投稿者名など...省略 ...
  8.    </p>
  9.   </div>
  10.   <!-- post navigation -->
  11.   <div class="navigation">
  12.    <?php if( get_previous_post() ): ?>
  13.     <div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
  14.    <?php endif;
  15.    if( get_next_post() ): ?>
  16.     <div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
  17.    <?php endif; ?>
  18.   </div>
  19.   <!-- /post navigation -->
  20.  <?php endwhile; // 繰り返し処理終了
  21. else : ...省略...

WordPress ループ内が index.php に比べるととても長くなりました。これも single.php の特徴ですね！

初めてのWordPressテーマ 目次

9. コメント部分を表示しよう！

ブログの個別記事には、通常コメントに関する部分を表示します。コメント一覧と、コメントを投稿するためのフォームです。まずはコメント一覧の表示の仕方から見ていきます。

9.1. コメント一覧の表示

まずはコメント一覧を表示していきます。コメント一覧の表示自体はとっても簡単です！というのも、wp_list_comments というテンプレートタグひとつ書くだけで、<li> タグでコメントをリスト表示してくれるんです！

コメント一覧

コメント一覧

もちろんアバターの表示/非表示の切り替えや、返信コメントをスレッド化（入れ子のリストで表示）などは、管理画面の 設定 → ディスカッション での設定が反映されます。それではコメント一覧を表示させてみます。今回は直書きの HTML は省略して、いきなりテンプレートタグを書いてみます。

WordPress Code
  1. <div id="comment-area">
  2. <?php if( have_comments() ): // コメントがあったら ?>
  3.   <h3 id="comments">Comment</h3>
  4.   <ol class="commets-list">
  5.   <?php wp_list_comments( 'avatar_size=55' ); ?>
  6.   </ol>
  7. <?php endif; ?>
  8. </div>

今回は全体を div#comment-area で囲んでみました。その中に、 if(have_comments()): という条件を加えました。これは「もしコメントがあったら表示する」という条件分岐です。そしてその中に、<h3> タグで見出しを付けました。

ここで注意したいのが、#comments という ID です。この #comments の部分は、トップページなどから #（ハッシュ）付きでリンクが貼られます。なので見出しなどに必ず #comments という ID を付けておきましょう。

上記のコードの中で、実際にコメントを表示しているのが下記の部分です。

  1. <ol class="commets-list">
  2. <?php wp_list_comments( 'avatar_size=55' ); ?>
  3. </ol>

wp_list_comments は、<li> 要素でコメントを表示してくれるので、<ol> 要素や <ul> 要素で囲んでおくのを忘れないようにしなくてはですね！また、wp_list_comments('avatar_size=55') としてあるのは、アバターを表示した場合の、アバター画像のサイズ（ピクセル）です。この場合 55px 四方でアバターが表示されます（ディスカッション設定でアバターを「表示」してる場合）。

comments.php

初めてのWordPressテーマ 目次
9.1.2. comments.php を作る

さて、これでコメント一覧の部分はできましたけど、single.php には記述しません。コメント一覧の部分は、部品化して comments.php という別ファイルにしておきます。comments.php という新しいテンプレートファイルを作って、上記のコードを書き込んだら、テーマフォルダ内に保存します。

そして実際にコメント一覧を表示する single.php から、この comments.php を読み込みます。comments.php の読み込みには comments_template というテンプレートタグを使います。記述するのはやっぱり WordPress ループの中です。さっき作った「前の記事」「次の記事」へのリンクの下に記述しましょう。

INCLUDE TAG
  • comments_template … comments.php を読み込む
single.php – WordPress ループ
  1. <?php if (have_posts()) : // WordPress ループ
  2.  while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
  3.   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  4.        ...タイトルやコンテンツなど（省略）...
  5.   <!-- post navigation -->
  6.   <div class="navigation">
  7.    ...「前の記事」「次の記事」へのリンク（省略）...
  8.   </div>
  9.   <!-- /post navigation -->
  10.   <?php comments_template(); ?>
  11.  <?php  endwhile; // 繰り返し処理終了
  12. else : ...省略...

これでコメント一覧を single.php で表示させることができました！single.php の終わりまで、あとちょっとです X(

初めてのWordPressテーマ 目次

9.2. コメントフォームを表示しよう！

コメント一覧の次は、コメントフォームを表示してみます。このコメントフォームも、さっきのコメント一覧と同じように、少しのコードで表示させることができるんです！

記述するのは、コメント一覧の下なので、comments.php に記述します。使うテンプレートタグは comment_form というタグです。

TEMPLATE TAG
  • comment_form … コメントフォームを表示します。
comments.php
  1. <?php comment_form(); ?>

たったこれだけで、コメントフォームを表示してくれます。でもちょっとだけ工夫して、今回は下記のように書いてみました。

  1. <?php $args = array(
  2.   'title_reply' => 'Leave a Reply',
  3.   'label_submit' => 'Submit Comment',
  4.  );
  5.  comment_form( $args ); ?>

title_reply の部分は、コメントフォームの見出しのテキストです。label_submit は送信ボタン内のテキストを指定できます。以下が実際の表示になります！

コメントフォームの表示

コメントフォーム

見出しや送信ボタンのテキストも、指定した通りに表示されました。

また、コメント一覧やコメントフォームは、管理画面の メニュー → 設定 → ディスカッション から、細かく設定することができます。

ディスカッション設定

ディスカッション設定

紹介したテンプレートタグ wp_list_comments や comment_form を使って表示したコメント欄は、ここでの設定がある程度反映されます（なんである程度かは後述します）。例えば「新しい投稿へのコメントを許可する」のチェックを外せば、新しく書いた記事にはコメントフォームが表示されません。

9.3. コメントフォームを移動させる comment-reply.js

前半、header.php のところで、下記のようなコードを記述したのを覚えていますか？

  1. <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

実はこのコードは、コメント欄に関係したものだったんです。WordPress のコメント欄では、「返信」というリンクをクリックすると、コメントフォームが、返信したいコメントのすぐ下に移動してきます。

返信をクリックすると、フォームがすぐ下に移動します

返信をクリックすると、フォームが移動する

この仕組みは、WordPress にはじめから組み込まれている、comment-reply.js という JavaScript で動いています。さっきのコードは、この comment-reply.js を読み込むための記述だったんですね！この JavaScript ファイルを読み込んでいないと、コメントフォームが移動しないので注意が必要です。

ここまで随分長くなってしまいました … 次で最後のテンプレートファイルです！ … まだあるの？って言わないでー X(

初めてのWordPressテーマ 目次

10. 固定ページを表示するメインテンプレートファイル page.php を作ろう！

page.php

ここまでトップページなどを表示する index.php と、ブログの個別記事を表示する single.php というメインテンプレート（部品じゃないファイル）を作成してきました。最後に固定ページを表示するための page.php を作成します。

作成とは言っても、index.php をちょっと変更するだけで OK なので、index.php をコピーして、 page.php という名前でテーマフォルダの中に保存しましょう！

固定ページの場合、カテゴリーの表示は必要ありませんし、ページの性格上、日付を表示する必要性も少ないと思います。なのでカテゴリーや日付を表示する部分を、丸ごと削除してしまいます。

また、index.php では、記事の「続きを読む」を表示していましたが、これも必要ありません。そして固定ページはブログのように時系列に並んだコンテンツではないので、「次のページ」「前のページ」というページャーも必要ありません。最終的には下記のようにスッキリした内容になりました。

page.php
  1. <?php get_header(); ?>
  2.    <!-- main -->
  3.    <div id="main">
  4.     <?php if (have_posts()) : // WordPress ループ
  5.      while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
  6.       <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  7.        <h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
  8.        ... ここにあったカテゴリーなどのコードは削除
  9.        <?php the_content(); ?>
  10.       </div>
  11.      <?php endwhile; // 繰り返し処理終了
  12.     else : // ここから記事が見つからなかった場合の処理 ?>
  13.       <div class="post">
  14.        <h2>記事はありません</h2>
  15.        <p>お探しの記事は見つかりませんでした。</p>
  16.       </div>
  17.     <?php endif; ?>
  18.      ... ここにあったページャーのコードは削除
  19.    </div>
  20.    <!-- /main -->
  21. <?php get_sidebar(); ?>
  22. <?php get_footer(); ?>

実際に表示するのは、ページのタイトルと、コンテンツとなる内容だけですね！もちろんコメントを受け付けるようにすることもできるので、その場合は WordPress ループ内に、インクルードタグ – comments_template を記述して、comments.php を読み込めば OK です！こんな風にコメント欄を部品化しておけば、いろんなテンプレートファイルで簡単に読み込むことができる … という事情で、comments.php を別ファイルとしていたんですね！

また、WordPress ループの中、div タグには post_class というテンプレートタグがついていますよね。これは WordPress が自動的にクラスを付けてくれるテンプレートタグでした。前述しましたが、ブログ記事の場合は post というクラスがつき、固定ページの場合は、page というクラスがつきます。

page.php のまとめ
  • index.php をコピーすれば楽ちん！
  • カテゴリーや日付など削除します。
  • ページャーも必要ないですね！
  • コメント欄を付けるなら、comments.php を読みこめば OK！
初めてのWordPressテーマ 目次

11. カスタムメニューを利用できるようにする

サイトのメインナビゲーション … 現状ではただ作った固定ページが並んでいるにすぎません。せっかくなので、カスタムメニューの機能を有効化しておきましょう。カスタムメニューというのは、管理画面の 外観 → メニュー から編集して、ナビゲーションメニューを編集する機能です。この機能もウィジットと同じように、テーマ側である程度設定してあげないといけません。

カスタムメニュー

ナビゲーションを好きにカスタマイズできるのが「カスタムメニュー」！

これを利用するには、functions.php に下記を追加します！

functions.php
  1. <?php
  2. // カスタムメニューを有効化
  3. add_theme_support( 'menus' );
  4. // カスタムメニューの「場所」を設定するコード
  5. register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
  6. ?>

add_theme_support( 'menus' ) と記述すると、とりあえずカスタムメニューの機能が使えるようになります。でも次のコードの「カスタムメニューの場所」というのはなんでしょう？ここでは「 'header-navi', 'ヘッダーのナビゲーション' 」という風になっています。

実はこれがテーマ側とカスタムメニューを紐付けるものです。ここでもう一度 header.php を見てみてください。header.php のナビゲーションを表示する部分には、下記のように「header-navi」と記述してありました。

header.php
  1. wp_nav_menu( array ( 'theme_location' => 'header-navi' ) );

つまり管理画面の「テーマの場所」で、「ヘッダーのナビゲーション（header-navi）」に設定カスタムメニューを反映させる … という意味になります。ちょっとややこしいかもしれませんが、カスタムメニューは複数作ることができるので、フッターなどに配置することも可能です。それを区別するために、「テーマの場所」が必要なんですね。

カスタムメニューを複数作る場合は、functons.php に下記のように複数書き加えます。

functions.php
  1. // カスタムメニューの「場所」を設定するコード
  2. register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
  3. register_nav_menu( 'footer-navi', 'フッターのナビゲーション' );
MEMO

header-navi、footer-navi は任意の ID ですので、好きに書き換えてしまって OK です。

フッター用のナビ

その上でフッターのナビゲーションを表示したい箇所には、下記のように記述します。

footer.php
  1. wp_nav_menu( array ( 'theme_location' => 'footer-navi' ) );

今回はヘッダーのナビゲーションだけ設定しています。表示を確認してみると …。

カスタムメニューによる表示

カスタムメニューによる表示

カスタムメニューで作成したメニューが表示されました！

ここでちょっとだけ注意事項があります。前半、固定ページのナビゲーションのときは、<div> タグに対して .menu というクラスがついてました。でもカスタムメニューを使うと、<div> ではなく <ul> に .menu という同じクラスがつくので、スタイルシートに書くときに、少し注意が必要です …。統一してくれればいいのになー … X(

随分かかりましたけど、これでひとまずテーマとしては完成ですー！ここまで作成したテンプレートファイルは以下の 9つです!

作成したテンプレートファイル
  • header.php … ヘッダー部分
  • sidebar.php … サイドバー部分
  • footer.php … フッター部分
  • searchform.php … 検索フォーム
  • comments.php … コメント部分
  • index.php … メインのテンプレートファイル
  • single.php … 個別記事用
  • page.php … 固定ページ用
  • functions.php … テーマ設定用

随分たくさん作りましたね！お疲れさまでした ;D

初めてのWordPressテーマ 目次

12. 最後に Theme Check プラグインでチェック

ここまで苦労して作ってきたオリジナルテーマ。間違いはない … と思いますが、最後に Theme Check というプラグインを使って、テーマに不具合がないかどうかを確認してみましょう！Theme Check プラグインは、テーマ内のコードをチェックしてくれて、非推奨タグなども検知してくれるので、とっても便利なプラグインです。

管理画面の プラグイン → 新規追加 から、Theme-Check をダウンロードして有効化します。すると メニュー → 外観 に、Theme Check という項目が追加されるはずです。

Theme Check の画面

テーマチェック！

ボタンを押す前に、デバッグモードをオンにする必要があるので注意！

この画面でテーマのチェックを行いますが、その前に WordPress の設定で、デバッグモードをオンにしておく必要があります。デバッグモードをオンにするには、WordPress をインストールしたディレクトリにある、wp-config.php をエディタで開きます。

すると wp-config.php 内に、下記のような記述があると思います。

wp-config.php
  1. define('WP_DEBUG', false);

デバッグモードをオンにするには、これを true にします。

  1. define('WP_DEBUG', true);

Attention

これは WordPress のデバッグモードなので、テーマ開発が終ったら、false に戻すのを忘れないようにしてください！

デバッグモードを有効にしたら、Theme Check プラグインでテーマのチェックを行います！テストにパスすると、下記のように表示されます。でもスクロールしていくと、「こうした方がいいよ！」といったアドバイスも書かれていますので、最後まで読んでみましょう。

検査結果

チェック結果

また、テストにパスしても、「必須項目が抜けてますよ！」と注意される箇所もあるので、合わせてチェックします。今回は下記の必須項目もれで怒られてしまいました …。

必須項目抜けの注意

必須項目

必須項目 … と言っていますが、公式テーマに登録する場合を基準にしているので、個人のテーマなら、必ず必要 … というわけでもありません。

それでは上から順番に見ていって、悪い？ところを直していくことにします。初めてテーマ作りをしたときに、よく見落としがちなポイントばっかりです。

初めてのWordPressテーマ 目次

12.1. 必須: コンテンツ幅が設定されていません。

これは functions.php で、サイトのメインカラムのコンテンツ幅を指定しておくコードです。今回のテーマは、メインカラムのコンテンツ幅が 600px なので、下記のように functions.php に書き加えます。

functions.php
  1. if ( ! isset( $content_width ) ) $content_width = 600;

12.2. 必須: このテーマにはコメントページネーションのコードがありません。

これはコメント一覧を複数ページに分けたときに必要な「ページャー」のこと。もうちょっと詳しく説明すると、設定 → ディスカッション には、下記のような設定がありますよね。

1ページあたり n件のコメントを含む複数ページに分割

これにチェックを入れて有効にした場合は、ページャーがないと困ります。そこで comments.php のコメント一覧の下などに、下記のコードを追加しておきましょう。

comments.php
  1. <div class="comment-page-link">
  2.     <?php paginate_comments_links();  ?>
  3. </div>
コメント一覧のページャー

コメントのページャー

<a> タグ、<span> タグでマークアップされたページャーが表示されます。

初めてのWordPressテーマ 目次

12.3. 必須: wp_link_pages が見つかりませんでした。

これもページャーに関するものですねー。WordPress はひとつの記事を複数のページに分けることができますよね！

投稿画面で <!–nextpage–> と書く

<!--nextpage-->

投稿画面で <!--nextpage--> と書くと、その部分でページが分割されます。なのでそこにページャーが必要になる … という訳なんですね！

記事を分割したときのページャー

記事を分割したときのページャー

このページャーを表示するには、WordPress ループ内に下記のように記述します。

single.php
  1. <?php $args = array(
  2. 	'before' => '<div class="page-link">',
  3. 	'after' => '</div>',
  4. 	'link_before' => '<span>',
  5. 	'link_after' => '</span>',
  6. );
  7. wp_link_pages($args); ?>

こうすると、<a> タグと <span> タグでマークアップされたページャーが表示されます。

12.4. 必須: language_attributes が見つかりませんでした。

これは <html> の開始タグに付ける lang 属性を出力するテンプレートタグです。

<html lang="ja"> と直書きしていましたが、下記のように書きましょう！という注意です。

  1. <html <?php language_attributes(); ?>>

これは公式テーマとして登録する際には必須となりますが、個人のテーマなら気にすることはないので、今回はそのままにしておきます。

初めてのWordPressテーマ 目次

12.5. 必須: body_class call in body tag が見つかりませんでした。

これは post_class と似たテンプレートタグで、ページごとに <body> タグに自動的にクラスを付けてくれるテンプレートタグです。CSS でスタイリングするときに便利なので、ぜひ付けておきたいですね！header.php の 開始タグを下記のように書き換えました。

header.php
  1. <body <?php body_class(); ?>>
初めてのWordPressテーマ 目次

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

これを忘れたら大変でした X( これは <head> 内に RSS2 のフィードリンクを表示してくれるもの。functions.php に書き加えておきましょう。

functions.php
  1. add_theme_support( 'automatic-feed-links' );

この他にも、WordPress 独特のクラスが style.css に記述されていません … 的な注意を受けることもあると思います。記事内の画像の部分で、alignleft とか alignright というクラスについてちょっとだけ触れました。もちろん他にもいくつか WordPress が自動で付けるクラスがあって、レイアウトに関わるものも多少あります。

WordPress でのテーマ作りに慣れてくると、そういったクラスもピンとくるようになります（例えば、画像にキャプションを付けたときに、キャプションに対してクラスがつくなど）。はじめのうちは分からないクラスもあるかもしれませんが、テーマ内でレイアウト崩れなどが起きない限り、大きな問題ではないですね！

これでテーマチェックもひと通りクリアすることができました。

DOWNLOAD

DOWNLOAD(zip)

今回作成したテーマをダウンロードすることができます。ライセンスは WordPress 同様、GPL にしてあるので自由に使っていただいて構いません。

初めてのWordPressテーマ 目次

13. 最後に …

今回作成したテーマは、特に機能も付けていません。デフォルトテーマでは、カスタムヘッダーやカスタム背景、アイキャッチ画像、投稿フォーマットなど、たくさんの機能がはじめからついています。これらの機能を付けるためには、さらにテーマにいろいろ記述していく必要があります。

そういったものを少しずつでも自分のテーマに設置していくのも、WordPress のテーマ作りの楽しいところですね！

また、WordPress のテンプレートタグは PHP で作られているので、やっぱり PHP の基礎知識は必要かもしれません。PHP も合わせて勉強すると、自分だけのオリジナルテーマ作りも、もっと楽しくなると思います！

また、今回作ったテンプレートファイルは全部で 9つでした。でももっとカスタマイズしていくと、いろんなテンプレートファイルが必要になってきます。過去記事でその辺りを書いたことがあるので、合わせて読んでいただけると嬉しいです。

初めてのWordPressテーマ 目次

13.1. おすすめ書籍

最近ではいろいろな WordPress の本があって、どれを読んだらいいか選ぶのも大変ですね …。私は下記の本を何度も読みました。ちょっと前の本（WordPress 3.1の頃 / 2011年 5月）なのですが、WordPress の基本的なことがしっかりと学べる素敵な本です。公式のテーマ Twenty Ten をベースに、各テンプレートタグなどを丁寧に解説している本です。

古い記述（非推奨タグ）に関しては、この記事で紹介した Theme Check プラグインで確認できるので、合わせて使ってみてください。非推奨タグを知るのも学習のうちだと思ってるので …。

WordPress 逆引きデザイン事典PLUS

WordPress 逆引きデザイン事典PLUS ［3.x対応］

2011年 5月の本ですけど、公式テーマをベースにしっかり学習できるので、テーマ作りにはお役立ちな一冊だと思います！

また、以前も紹介したのですが、PHP初心者さんには下記の本がおすすめです！易しい言葉で書かれてるので、安心しておすすめしています！

PHP プログラミングの教科書

PHPプログラミングの教科書

プログラミング初心者さんに向けた PHP の入門書。難しい言葉などは使われていないので、本当に PHP を初めて学習するにはもってこいの本だと思います。

とっても長くなってしまいましたが、最後まで読んでくれてありがとうございました ;D

Comments

Thank you for the comment.