WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました(2013年 1月現在)。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか?
私が WordPress を始めた頃のデフォルトテーマは、名前もそのままの Default(現在はアップデートが止まっています)というシンプルなテーマでした。なのでまだ WordPress にそんなに詳しくない頃でも、このテーマを参考にしながらオリジナルテーマを作れたように思います。
今回は WordPress で初めてオリジナルテーマを作ってみたいという人向けに、シンプルなテーマを使って、オリジナルテーマの作り方の流れをまとめてみました。テーマ自体は WordPress の基本となるブログ向けのテーマです。
初めての WordPress テーマ – 目次
- HTML + CSS で、サイトのデザインを作ろう!
- HTML + CSS で作ったら、WordPress のテンプレートファイル化する
- WordPress に合わせて index.php を分割しよう!
- header.php を編集しよう!
- メインのテンプレートファイル index.php の編集に挑戦!
- サイドバーの部分 sidebar.php を編集しよう!
- フッターを表示する footer.php を編集しよう!
- 個別記事を表示する single.php を作ろう!
- コメント部分を表示しよう!
- 固定ページを表示するメインテンプレートファイル page.php を作ろう!
- カスタムメニューを利用できるようにする
- 最後に Theme Check プラグインでチェック
1. HTML + CSS で、サイトのデザインを作ろう!
まずは WordPress のことは置いておいて、HTML + CSS だけで Webサイトのデザインを作っていきます。慣れてくると HTML + CSS + WordPress の作業をいっぺんにやることも多いですけど、初めてのときは WordPress のページの構造を理解するためにも、まずはおおまかでいいので、HTML + CSS でデザインを完成させておくといいと思います。
純粋な HTML + CSS の Webサイトを基準にしておけば、WordPress ではどこを変更する必要があるのか … ということが分かりやすくなると思うので、初めてのときはこの方法がいいんじゃないかな?と思います。
今回は下記の 3ページを、まずは HTML + CSS で作ってみました。
一応ダウンロードできるようにしてあるので、興味のある方は参考にしてみていただけると嬉しいです。また、HTML + CSS で作るときは、レイアウト、ページの機能的に、以下のものを最初からデザインに含めておくと、WordPress のテーマにするときにすんなり行くと思います。
デザインに入れておきたいもの
- ヘッダー、サイドバー、フッター
- メインナビゲーション
- 検索フォーム
- ページ送り(ページャー、ページネーション)
- コメント一覧、コメントフォーム
ちょっと言葉だけだと分かり難いと思うので、下記の画像でチェックしてみてください。サンプルのトップページのデザインです。
トップページのデザイン
レイアウト自体は、オーソドックスな 2カラムレイアウトです。そしてヘッダー下部には、ナビゲーションを付けておきます。とりあえず内容は何でもいいので、ここでは HOME と ABOUT としておきました。それからヘッダー(またはサイドバーなど)には検索フォームも付けておきます。
メインカラム内には、記事見本をふたつぐらい作っておきます。また、ブログですから、「古い記事」「新しい記事」への移動のための「ページャー(ページネーション)」も必要ですね!
サイドバーには、カテゴリーや最近の記事などを、とりあえず設置しておきます。
続いてひとつひとつのブログ記事ページです。
記事ページのデザイン
個別記事ページでは、記事下にタグや記事を書いた人(投稿者)を表示するようにしてみました。また、「次の記事」「前の記事」に移動するためのリンクも必要ですね。
その下にはコメント一覧と、コメントを書き込むためのフォームを設置します。ヘッダーやサイドバー、フッターはトップページと共通です。
最後に固定ページのデザインです。
固定ページのデザイン
固定ページはブログの記事と違って、カテゴリーやタグの表示がありません。今回はページの性格上、日付の表示もなしにしています。また、ページャーやコメント一覧、コメント欄もなしにして、すっきりとしたレイアウトになってます。
サンプルテーマのダウンロード
これから WordPress のテーマを作成していきますが、上記のデザインで WordPress のテーマ化したものも用意しました。HTML のものと比較するのに使ってください。ライセンスは GPL にしてあるので自由に使っていただいて構いません。
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
/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/
テーマの名前は必須なので、必ずいれておきましょう。ここでは Simple Simple と入れることにします。あとはとりあえず任意なのですが、配布するテーマだったら、ライセンスなどは入れておきます。
2.1. WordPress の Themes フォルダに移してみよう!
ここまでできたら、WordPress の wp-content/themes フォルダに、作成した simplesimple フォルダを移動させてみます。
そして WordPress の管理画面、外観 → テーマ を見てみると …。
管理画面の 外観 → テーマ
こんな風にスクリーンショット画像は載ってないけど、WordPress のテーマとして認識されています!WordPress では、最低 index.php
一枚と、テーマ名などを記述(さっき書きましたね!)した style.css
という名前のスタイルシートがあれば、テーマとして認識してくれるんです!でもちょっと画像がないのがさみしいので、キャプチャを撮影しておきましょう。
キャプチャを撮影したら、screenshot.png
という名前で自分で作ったテーマフォルダ(今回は simplesimple フォルダ)に保存します。images
フォルダではないので注意してください。また、画像のサイズは 640 x 480px 以下が推奨されてます。
画像が表示されました
すると上記のように、スクリーンショットが表示されました!
2.2. テーマを有効化して、サイトを確認してみよう!
テーマとして認識されたので、ここで試しにテーマを有効化して、サイトの表示を確認してみることにします。すると …。
Webサイトの表示
すると上記のように、スタイルシートが効いてない状態で表示されてしまいました …。CSS だけでなく画像のパスも通っていません …。
実は WordPress では、基本的に各ファイルへのパスに、相対パスは使用できません(CSS内は除く)。そこで WordPress ならではのパスの書き方をしなくてはなりません …。
2.3. WordPress のテンプレートタグ
難しい説明は後にして、とりあえず index.php
の style.css
へのパスと、ファビコンへのパスを変更してみましょう。テキストエディタで index.php
を開きます。
index.php – <head>内の一部
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="style.css" media="screen">
上記のように相対パスで書かれてる部分を …
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<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
が推奨されてます。
テンプレートタグを使って書き直すと、実際には下記のように絶対パスで出力されるようになりました!
<link rel="shortcut icon" href="http://example.com/wp-content/themes/simplesimple/images/favicon.ico">
<link rel="stylesheet" href="http://example.com/wp-content/themes/simplesimple/style.css" media="screen">
これでとりあえずスタイルシートとファビコンへのパスが通りました!なのでキチンとスタイルシートが反映された状態で、Webサイトが表示されました。
CSSが反映された状態
WordPress のテーマ作りというのは、こんな感じで HTML で静的に書かれてるコードを、WordPress のテンプレートタグを使って書き直していく作業ということが言えそうです。さっきはテーマディレクトリやスタイルシートの URL を取得するテンプレートタグを紹介しましたが、このテンプレートタグにはたくさんの種類があるんです。
それらをひとつひとつ暗記する必要はないけれど、何度もテーマを作っていると、自然に覚えてくると思います!
3. WordPress に合わせて index.php を分割しよう!
次に WordPress サイトの特徴でもあるんですけど、index.php
を分割していきます。でも index.php
を分割ってどういうことでしょう?実は WordPress では、Webサイトのヘッダーやサイドバー、フッターなどを、別々のファイルに分割しておく … という方法が取られています。
少し図を使って説明すると …。
WordPress サイトの構造
こんな感じで、デザインのレイアウトの部品ごとに、別々のファイルになっています。html ファイルではあまり馴染みのない方法かもしれませんが、php ファイルではよくある方法ですね!これに習って、各パーツごとに index.php
を 4つに分割してみます。
3.1. ヘッダー部分を分割!
まずはヘッダー部分である header.php
を作ります。index.php
の 1行目から、ヘッダーの終わりまでを切り取って、header.php
という名前でテーマフォルダ内に保存します。
切り取った header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TOP PAGE</title>
... 省略 ...
</head>
<body>
<div id="container">
<!-- header -->
<div id="header" class="clearfix">
... 省略 ...
</div>
<!-- /header -->
header.php
を切り取ってしまったので、index.php
の方はヘッダー部分が丸ごとなくなってしまいました。そこで header.php
(つまりヘッダー部分)を読み込むようにしてあげます。header.php
を読み込むには、index.php
に下記のように記述します。
index.php のヘッダー部分
<?php get_header(); ?>
<!-- main -->
<div id="main">
… 以下省略 …
get_header
は、header.php
を読み込むテンプレートタグ(読み込みタグなので、インクルードタグって呼んだりもします)。こんな風にして header.php
を読み込んで、ヘッダー部分を表示します!
INCLUDE TAG
get_header
… header.php を読み込む
-
WordPress Codex
3.2. サイドバー部分を分割!
header.php
を切り取ったみたいに、今度はサイドバー部分を sidebar.php
として切り取ります。header.php
と同じようにテーマフォルダ内に保存しましょう!
切り取った sidebar.php
<!-- sidebar -->
<div id="sidebar">
<div class="widget">
<h2>Category</h2>
<ul>
<li><a href="#">ケーキ</a></li>
<li><a href="#">コーヒー</a></li>
</ul>
</div>
...省略...
</div>
<!-- /sidebar -->
そしてサイドバーがすっぽり欠けた index.php
には、get_sidebar
というテンプレートタグ(インクルードタグ)を記述します。
index.php のサイドバー部分
...省略...
<?php get_sidebar(); ?>
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
...省略...
</div>
<!-- /footer -->
</body>
</html>
INCLUDE TAG
get_sidebar
… sidebar.php を読み込む
3.3. フッター部分を分割しよう!
最後にフッター部分を分割します。同じように index.php
のフッター部分を切り取り、footer.php
という名前でテーマフォルダ内に保存します。
切り取った footer.php
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
<p id="copyright" class="wrapper">© Simple x Simple All Rights Reserved.</p>
</div>
<!-- /footer -->
</body>
</html>
すっぽりフッター部分が欠けた index.php
には、get_footer
というテンプレートタグ(インクルードタグ)を書き加えます。マークアップ的には、フッターはサイドバーの次に記述されていることが多いと思うので、下記のように get_sidebar
と get_footer
が並ぶことが多いと思います。
index.php のフッター部分
…省略...
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
これでページの分割ができました。なんでわざわざ分割するんだろう?と思う人もいるかもしれませんが、これはもうちょっと後で説明しますね!
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
側は、各インクルードタグで読み込む。
4. header.php を編集しよう!
前半部分で <head>
内のファビコンと CSS ファイルへのリンクを、テンプレートタグを使って編集しました。でもそれだけで header.php
が完成したわけではありません。ロゴの部分や検索フォームなどを、WordPress のテーマ向けに作り替えていきましょう。
作業はデザインと照らし合わせながら見ていくと分かりやすいと思うので、ヘッダー部分のデザインをもう一度確認してみます。
ヘッダーのデザイン
4.1. サイト名と紹介文の部分
ヘッダー部分はとてもシンプルです。サイト名とちょっとした紹介文があり、検索フォームとナビゲーションがあります。サイト名部分には、トップページへのリンクを貼ることにします。まずは直書きした HTML を確認してみます。
HTML – サイト名と紹介文の部分
<h1 id="logo">
<a href="#"><span>Simple x Simple</span></a>
</h1>
<p id="description">Just another WordPress site</p>
<h1>
タグと <p>
タグでマークアップされています。これを元に、サイト名やトップページへのリンク、紹介部分の部分をテンプレートタグを使って、書き直してしまいましょう。使うテンプレートタグは下記のものです。
TEMPLATE TAG
bloginfo('name')
… サイト名を表示するbloginfo('description')
… 紹介文を表示するhome_url()
… トップページの URL を取得する
header.php(一部)
<h1 id="logo">
<a href="<?php echo home_url('/'); ?>"><span><?php bloginfo('name'); ?></span></a>
</h1>
<p id="description"><?php bloginfo('description'); ?></p>
サイト名や紹介文には bloginfo
というテンプレートタグを使います。ここで表示するサイト名や紹介文は、管理ページの 設定 → 一般 からいつでも変更することができます。
設定 → 一般
4.2. 検索フォーム
続いて検索フォーム部分です。同じように直書きした HTML から見ていきましょう。
HTML – 検索フォーム
<form method="get" id="searchform" action="#">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>
<form>
内にテキストフィールドと送信ボタンがあります。テキストフィールドは type='text'
になってますけど、もちろん type='search'
でも構いません。
書き換える部分は、action
属性の中の送信先 URL です。これはトップページの URL で OK なので、さっきと同じように home_url
を使えば OK です。検索フォームで注意するのは、name
属性の値です。検索のキーワードは、s
というパラメータで渡されるので、必ず name='s'
としておきます。
header.php(検索フォームの部分)
<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<input type="text" placeholder="検索" name="s" id="s">
<input type="submit" id="searchsubmit" value="">
</form>
ここまでできたら、検索フォーム自体を部品化してしまいましょう!<form> ~ </form>
の部分を index.php
から切り取って、searchform.php
という名前でテーマフォルダ内に保存します。そして header.php
の方では、get_search_form()
と記述して読み込むようにします。
header.php(検索フォームの部分)
<?php get_search_form(); ?>
4.3. ナビゲーション部分
続いてナビゲーションの部分です。まずは基本となる HTML でのマークアップから見ていきます。
header.php – ナビゲーションの部分
<!-- Navigation -->
<div>
<ul class="menu">
<li class="current_page_item"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a>
<ul class="sub-menu">
<li><a href="#">CHILD#1</a></li>
<li><a href="#">CHILD#2</a></li>
<li><a href="#">CHILD#3</a></li>
</ul>
</li>
</ul>
</div>
<!-- /Navigation -->
<div>
で大きく囲んで、中に <ul>
タグと <li>
タグでマークアップしてあります。サブメニューもあるので、リストは入れ子になっていますね!この <div> ~ </div>
間は、どうやって記述するかというと …。とりあえず下記のように丸ごと置き換えてしまいます。
header.php – ナビゲーションの部分
<!-- Navigation -->
<?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
<!-- /Navigation -->
wp_nav_menu
というテンプレートタグについては、あとで詳しく説明しますが、この一行でさっきの HTML のように、<div>
で囲んだ ul
、li
でマークアップされたナビゲーションを表示してくれます。固定ページをひとつかふたつ作って、サイトの表示を確認してみましょう。
固定ページを作成
ナビゲーション
こんな風に、作った固定ページがナビゲーションとして表示されます。出力される HTML は下記のような感じです。
出力される HTML
<div class="menu">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
menu
というクラスのついた div
で囲まれて、ul
、li
要素で固定ページへのリンクが表示されます。ここでチェックしたいのは、div
タグに menu
というクラスがつく … ということです(なんで注意したいのかは、後述します!)。
TEMPLATE TAG
wp_nav_menu
… ナビゲーションを表示する
-
WordPress Codex
4.4. <head>内を作ろう!
さっきは <body>
以下のヘッダー部分を作りました。ちょっと前後しちゃいましたが、今度は <head>
内を作っていくことにします。現状ではファビコンとスタイルシートへのパスを、テンプレートタグで書き直しただけでした。
header.php – <head> 内のコード
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico">
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen">
</head>
書き換えたいのは <title>
タグの部分。タイトルはトップページ以下、色んなページで変わる部分ですよねー。まず、<title>
タグにはサイト名を必ず入れる … という前提で、下記のように書きます。
header.php(<title> 部)
<title><?php bloginfo('name'); ?></title>
bloginfo('name')
は、<h1>
タグのサイト名の部分でも使いましたね!これでとりあえず <title>
タグの中に、サイト名を表示させることができました。でもこのままでは、全部のページのタイトルがサイト名になってしまします。そこで wp_title
というテンプレートタグを合わせて使います。
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>
wp_title
は、各ページのタイトルを表示してくれる便利なテンプレートタグです。()
の中に '|'
となっていて、'right'
という記述があります。これはタイトルを下記のように表示するためです。
ページのタイトル | サイト名
ページタイトルの右側(right)に「|」という区切り文字を入れるっていう意味になってます。これで title タグの部分は完成です!
TEMPLATE TAG
wp_title
… ページのタイトルを出力
-
WordPress Codex
4.5. <head> 内に書いておきたい大事なもの
さて、ここで <head>
内に書いておきたい大事なものがふたつあります。まずひとつ目は、WordPress のコメント欄で必要になる JavaScript ファイルの読み込みのための記述です。どんな JavaScript ファイルかは後述しますが、<head>
内に下記のように書き加えます。
header.php(一部)
...省略...
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
</head>
さらにもうひとつ、絶対に書いておかなくちゃいけないものがあります。
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
<?php wp_head(); ?>
</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
を忘れずに!
5. メインのテンプレートファイル index.php の編集に挑戦!
index.php
は、WordPress サイトではなくてはならないメインのテンプレートファイルです。ファイルの分割のところで get_header
などを書き加えましたが、メインのコンテンツの部分は、まだ HTML を直書きしたままです。
index.php
<?php get_header(); ?>
<!-- main -->
<div id="main">
<!-- post -->
<div class="post">
<h2><a href="#">記事のタイトル</a></h2>
<p class="post-meta">
<span class="post-date">2012年12月23日</span>
<span class="category">Category - <a href="#">ケーキ</a>
<span class="comment-num"><a href="#">Comment : 0</a></span>
</p>
<p>... 記事の本文(画像を含む)...</p>
<p><a href="#" class="more-link">続きを読む »</a></p>
</div>
<!-- /post -->
...2つ目の記事(省略)...
<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
記事の部分(上記の青い部分)… div.post
の中に、いろいろなものが記述されています。ここで div
の中の「表示したいもの」を、ちょっと整理してみましょう。
- 記事のタイトル
- 日付
- カテゴリー
- コメント数
- コンテンツ(画像を含む)
この部分を HTML の直書きではなく、WordPress のテンプレートタグで書き換えてしまうのが次の作業です。でもその前に WordPress ループという大事な部分をチェックしておきます。このコードをどこに書くの?というのは置いておいて、コードの概要を先に見てみますね!
5.1. WordPress ループ
まず、WordPress は投稿画面で記事を書きますよね?そして記事があれば、それを表示します。でも記事が何もなければ、表示したくてもできません …。
そこで の部分で、まず「表示すべき記事があるかどうか?」をチェックします。そして記事があれば の部分を実行します。逆に記事がなければ の部分を実行します。if文という PHP の基本構文で、条件(記事の有無)によって処理を変更してるんですね!
肝心なのは の部分です。トップページなどでは、表示する記事が複数あるのでが普通です。ふたつ記事を書けばふたつ、3つ記事を書けば 3つ表示します。の部分は、その分だけ繰り返す … というのを頭にいれておいてください。
そしてこの一連のコードの部分を、WordPressループと呼んでます。ループというのは繰り返すっていう意味ですよね!
さて、index.php
に戻ってみましょう。さっきの WordPressループを index.php
に記述して、実際に書いた記事を表示させてみます。
index.php
<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) :
while (have_posts()) : the_post();
// この部分で記事を表示する処理をします。
endwhile; // 繰り返し処理終了
else : ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; ?>
<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?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>
でマークアップして、リンクで囲みたいなら下記のように記述します。
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
HTML タグと WordPress のテンプレートタグが混在していますが、落ち着いて整理してみれば、そんなに難しくないと思います。
それでは実際に、index.php
の WordPress ループの中にテンプレートタグを書き加えていきます。もともとの HTML と比較してみてくださいね!
もともとのHTML
テンプレートタグで書き直したもの
記事のタイトル、日付、カテゴリー、コメント数、それから記事本文であるコンテンツの部分を、テンプレートタグを使って書き直しました。これで矢印内の <div> ~ </div>
間が、記事の数だけ繰り返し処理されて表示されます!また、div タグに the_ID
などのテンプレートタグがついてますが、これは後述しますね。
こんな風に WordPress のテーマ作りでは、たくさんのテンプレートタグを使います。各テンプレートタグの使い方は、WordPress Codex にまとまっているので、知らないテンプレートタグは調べるクセを付けておくといいと思います。
-
WordPress Codex
5.2. ちょっと寄り道 – 日付を表示する the_date
日付を表示する the_date
の表示形式は、管理画面の一般設定から行うことができます!
設定 → 一般 から日付の設定
ただ the_date
は、同じ日付の記事が複数ある場合に、2つ目以降の日付が表示されない … という仕様です。ちょっと説明しにくいので、下記の図をみてください。
the_date での日付の表示
こんなレイアウトで、日付とタイトルを表示するときには、the_date
を使うとスッキリしていいかもしれませんね!でも一般的なブログのレイアウトだと、やっぱり全部の記事に日付を出したい … 。そんなときは、the_date
の代わりに、下記のように書けば OK です。
<?php echo get_the_date(); ?>
the_date
の代わりに、get_the_date
を使います!
-
WordPress Codex
5.3. 記事を投稿して表示を確認!
ここまでできたら管理画面からいくつか記事を投稿して、トップページの表示を確認してみます。
いくつか記事を投稿してみよう!
そしてトップページを確認してみると …。
トップページの表示
こんな風に投稿した記事が表示されました!
5.4. ちょっと寄り道 – WordPress が自動で付けてくれるクラス
さっきの WordPress ループの中、記事を囲む <div>
タグには、下記のようにいくつかテンプレートタグが記述されていました。
<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 Codex
5.4.1 画像につくクラス
また、記事内の画像にもクラスがつくのはご存知だと思います。中でも重要なのは、レイアウトに関するクラスです。
メディアの挿入
画像を貼付けるとき、配置から「左」「右」「中央」を選ぶと、下記のようなクラスが <img>
タグにつきます。
alignleft
… 左に配置alignright
… 右に配置aligncenter
… センターに配置
なので style.css
で、各レイアウトにあわせて、float
などを記述しておかないと、ちゃんとレイアウトできなくなっていまいますね!
5.6. 次のページ、前のページへのページャーを付けよう!
ちょっとクラスについて寄り道しちゃいました …。記事を表示する部分が終ったら、次は「次のページ」「前のページ」というリンクを表示させます。これは記事が増えていって、1ページでは表示しきれなくなったときに表示するものですね!
ページャーの書き方はいろいろな方法があるのですが、一番簡単なのが「次のページ」「前のページ」という表示方法です。
「次のページ」「前のページ」
これもまず、直書きしたHTML をチェックしてみましょう。
index.php – ページャーの HTML
<!-- pager -->
<div class="navigation">
<div class="alignleft"><a href="#">« PREV</a></div>
<div class="alignright"><a href="#">NEXT »</a></div>
</div>
<!-- /pager -->
今回は大きく <div>
で囲んで、中にふたつの <div>
を入れ子にした状態でマークアップしてみました。それではいつものように、テンプレートタグを使って書き換えてみます。
index.php – ページャーの部分
<!-- pager -->
<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« PREV'); ?></div>
<div class="alignright"><?php previous_posts_link('NEXT »'); ?></div>
</div>
<?php endif; ?>
<!-- /pager -->
まず if文で大きく囲んでありますが、これは「もしページ数が 1ページより多かったら …」という意味の条件分岐です。ページが 1ページしかないなら、表示する必要がないので、今回はこんな条件を付けてみました。
チェックしたいテンプレートタグは以下のふたつです。
TEMPLATE TAG
next_posts_link
… 前の(古い)ページへのリンクを表示します。previous_posts_link
… 次の(新しい)ページへのリンクを表示します。
これらのテンプレートタグを使えば、リンクである a要素を出力してくれます。また、()
内には、リンクで表示する文字を指定することもできます。
注意したいのが、next_posts_link
の方が「前の(古い)ページ」で、previous_posts_link
の方が「次の(新しい)ページ」になります。ちょっと逆のイメージで混乱しちゃいますね …。
Attention
また、これらのテンプレートタグは、WordPress ループの外に記述します。テンプレートタグには、WordPress ループの中で使うものと、ループの外で使うもの、どっちでも利用できるものがあるんです。はじめのうちは、このことに気付かないで、ループ内で使うべきものを、ループ外で使っちゃったりすることがよくあります。ループ内、ループ外などは、WordPress Codex を見ると掲載されているので、チェックしておきましょう。
-
WordPress Codex
ここまでで index.php はお終いです!
index.php のポイント
- 記事の表示は WordPress ループが行っています。
- WordPress ループの while文の中は、記事の数だけ繰り返されます。
- 全部の記事に日付を表示したいなら、
the_date
じゃなくてecho get_the_date
と書く。 - ページャーは WordPress ループの外に書きましょう。
メインとなる index.php
でのポイントは、やっぱり WordPress ループです。ループで繰り返される部分をキチンと把握すれば、それほど難しくないと思います!
6. サイドバーの部分 sidebar.php を編集しよう!
続いてサイドバーである sidebar.php
を作っていきます。とはいえ、WordPress ではウィジットという便利なものがあるので、それを使ってサイドバーを作っていきたいと思います。
ウィジットは メニュー → 外観 → ウィジット から、好きなウィジットをドラッグするだけで利用できるようになりますよね!
ウィジットの追加
さっそく管理画面から、ウィジットを追加してみることにします。そこで、今自作しているテーマの管理画面を見てみると …。
制作中のテーマの管理画面
メニューにあるはずのウィジットがありません … X( これは一体どういうことでしょう?実はウィジットは、テーマがウィジットに対応していないと、利用することができないんです …。
6.1. functions.php を作ろう!
ここで新しいテンプレートファイル、functions.php
というものを使用します。functions.php
はテーマ内で利用する機能などを書いておける便利なファイル。さっそく functions.php
という名前でファイルを作成し、テーマフォルダの中に保存します。
そして functions.php
には、下記のように書き加えます。
functions.php
<?php
register_sidebar( array(
'name' => 'サイドバーウィジット-1',
'id' => 'sidebar-1',
'description' => 'サイドバーのウィジットエリアです。',
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
) );
?>
name
には「サイドバーウィジット」とか「フッターウィジット」とか名前を付けておきます(ウィジットエリアは、サイドバーだけじゃなくてフッターなどにも作成できます。)。id
には一意なものを付けておきましょう。今回は sidebar-1
という ID を付けました。また、description
には説明書きを書き加えますが、必須ではありません。
それから下記の部分は、サイドバーでウィジットを実際に表示するときに関連する記述です。
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
サイドバーなどにウィジットを表示するときに、どんなマークアップで囲むか?を記述します。今回は div
タグで囲むことにしました。また、クラスには widget
というクラスを指定しておきました。id="%1$s"
などという記述もありますが、このように書いておくと、WordPress 側で自動で ID やクラスを付けてくれるので、必要なら記述しておきます。
ここまで記述すると、管理画面でウィジットを設定できるようになります!
作成したウィジットエリア
-
WordPress Codex
6.2. sidebar.php 側も編集が必要です!
functions.php
に記述すれば、すぐにウィジットが利用できるかというと、そういう訳でもありません …。今度は実際に表示する側、今回は sidebar.php
に、ウィジットを表示するコードを記述していきます。
sidebar.php
<!-- sidebar -->
<div id="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) :
dynamic_sidebar( 'sidebar-1' );
else: ?>
<div class="widget">
<h2>No Widget</h2>
<p>ウィジットは設定されていません。</p>
</div>
<?php endif; ?>
</div>
<!-- /sidebar -->
dynamic_sidebar( 'sidebar-1' )
とすると、sidebar-1
に設定(管理画面で追加)してあるウィジットが表示されます。でも設定されてない場合も考慮して、if ( is_active_sidebar( 'sidebar-1' ) ) :
という条件分岐を付けました。これで「もしウィジットが設定されてたら、ウィジットを表示する」という意味になり、ウィジットが設定されてないときは、else: ~ endif
までの部分が表示されます!
-
WordPress Codex
これで sidebar.php
はお終いです。ウィジットエリアは複数作ることもできるので、必要ならフッターやヘッダー、index.php
の記事下などにも設置することが可能です!
sideber.php のまとめ
- ウィジットは、テーマが対応してないと使えません。
functions.php
で、ウィジットを使えるように設定します。sidebar.php
には、ウィジットを表示するコードを記述します。
7. フッターを表示する footer.php を編集しよう!
やっとフッターまで来ましたね …。でも footer.php
はとっても簡単です!今回はサイト名を Copyright と一緒に表示しているだけなので、以下のように記述します。
フッターのデザイン
footer.php
</div>
<!-- /container -->
<!-- footer -->
<div id="footer">
<p id="copyright" class="wrapper">© <?php bloginfo('name'); ?> All Rights Reserved.</p>
</div>
<?php wp_footer(); ?>
</body>
code
</html>
もう何度か登場した bloginfo
でサイト名を表示します!
7.1. 忘れちゃいけない wp_footer
header.php
では、wp_head
を必ず記述するって書きました。同じようにfooter.php
には必ず wp_footer
という記述をします。これは wp_header
と同じように機能して、WordPress がページの表示に必要なコードを出力します。例えばプラグインで利用する JavaScript ファイルなども、この記述がないと出力されません。なので </body>
タグの前に、忘れずに記述しておきましょう!
footer.php のまとめ
wp_footer
を必ず記述します。
8. 個別記事を表示する single.php を作ろう!
フッターまできたのでもう完成?と思ったら、実はまだ完成じゃないんです …。ちょっと再確認ということで、ここまで作ったテンプレートファイルを振り返ってみます。
- header.php
- sidebar.php
- footer.php
- searchform.php
- index.php
- functions.php
この中でページの核となるのは index.php
だけですねー。他はみんな部品となるものばかりです。index.php
さえあれば、ブログの個別記事ページや、固定ページを表示させることもできます。でもブログの個別記事ページでは、もらったコメントを一覧表示させたり、コメントを送信するためのフォームも必要です。また、固定ページはブログ記事とは違うので、カテゴリーなどは表示する必要がなかったりします。
そこでブログの個別記事を表示するテンプレートファイルと、固定ページを表示するためのテンプレートファイルを作っておくことにします。
8.1. 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
8.2. WordPress ループを書き込む
次に index.php
と同じように、WordPress ループを記述します。これは既に作ってある index.php
からコピーして、該当部分にペーストするのが簡単ですね!
ペーストする場所ですが、記事を表示する部分なので、div#main
から、コメント欄までの間になります。index.php
のときは、ページャーの前でしたが、single.php
のときはページャーの位置に注意が必要です。これについては後述するので、下記のように WordPress ループを貼付けます。
single.php – WordPress ループ
<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
<p class="post-meta">
<span class="post-date"><?php echo get_the_date(); ?></span>
<span class="category">Category - <?php the_category(', ') ?></span>
<span class="comment-num"><?php comments_popup_link('Comment : 0', 'Comment : 1', 'Comments : %'); ?></span>
</p>
<?php the_content(); ?>
</div>
<?php endwhile; // 繰り返し処理終了
else : // ここから記事が見つからなかった場合の処理 ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; // WordPress ループ終了 ?>
<!-- comment area -->
<div id="comment-area">
...省略...
ペーストするときに変更するのは一ヶ所だけです。index.php
では下記のようになっていた部分を書き換えます。
the_content('続きを読む »');
the_content();
トップページなどでは「続きを読む」という記述が必要でしたけど、全文を表示する single.php
では必要ありませんから、the_content()
という風に、()
内を空っぽにしちゃいましょう。
これで single.php
で、記事全文を表示させることができるようになりました!
8.3. タグと投稿者などを表示する
個別記事ページでは、記事の終わりにタグと投稿者名を表示してみます。もちろん記事下じゃなくて、記事のタイトルの下あたりでも構いませんが、今回はこんなレイアウトにしてみました。また、その下には、「前の記事」「次の記事」へのページャーも表示します。
記事の下の部分
まずはタグの表示と投稿者の表示に挑戦してみます。HTML の直書きのときは、下記のように記述していました。
single.html – タグと投稿者の部分
<p class="footer-post-meta">
Tag : <a href="#">タルト</a>, <a href="#">フルーツ</a>
<span class="post-author">作成者 : <a href="#">高橋 のり</a>
</p>
これをテンプレートタグを使って書き直してみます。まずタグの表示です。
single.php – タグの部分
<p class="footer-post-meta">
<?php the_tags('Tag : ',', '); ?>
</p>
記事に付けられたタグを表示するには、the_tags
というテンプレートタグを記述します。()
内に 'Tags : '
と ', '
という記述がありますが、「Tags :」の部分は実際に表示するタグの前につける文字で、「, 」は各タグを区切るときの文字です。お好きな文字に変更してください。また、the_tags
は、タグが何もない場合は表示されません。
TEMPLATE TAG
the_tags
… 記事のタグを表示します。
タグに続いて、投稿者を表示してみます。WordPress ループ内で投稿者の名前を表示するには、the_author
というテンプレートタグを記述します。
TEMPLATE TAG
the_author
… 投稿者の名前を表示します。
でもこの投稿者名をクリックしたら、その投稿者が今まで書いた記事のページ(投稿者アーカイブ)を表示するようにしたいので、下記のように記述します。
single.php – 投稿者の部分
<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
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...ここに記事のタイトルなど...省略...
<?php the_content(); ?>
<p class="footer-post-meta">
<?php the_tags('Tag : ',', '); ?>
<?php if ( is_multi_author() ): ?>
<span class="post-author">作成者 : <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"><?php the_author(); ?></a></span>
<?php endif; ?>
</p>
</div>
<?php endwhile; // ここまでが繰り返し処理
else : ...省略...
-
WordPress Codex
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
<!-- post navigation -->
<div class="navigation">
<div class="alignleft">
<a href="#">« Hello world!</a>
</div>
<div class="alignright">
<a href="#">生チョコレートケーキ »</a>
</div>
</div>
<!-- /post navigation -->
これをさっきのテンプレートタグを使って書き直すと …。
single.php – ページャー部分
<!-- post navigation -->
<div class="navigation">
<?php if( get_previous_post() ): ?>
<div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
<?php endif;
if( get_next_post() ): ?>
<div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
<?php endif; ?>
</div>
<!-- /post navigation -->
途中 if( get_previous_post() ):
や if( get_next_post() ):
と書いて、「もし前の記事があったら表示する」「もし次の記事があったら表示する」という条件も加えてありますが、previous_post_link
と next_post_link
を使って、「前の記事」「次の記事」へのリンクを表示しています。記述場所は、さっき書いたタグや投稿者名の次に記述します。
single.php(一部)
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...ここに記事のタイトルなど...省略 ...
<?php the_content(); ?>
<p class="footer-post-meta">
...ここにタグ、投稿者名など...省略 ...
</p>
</div>
<!-- post navigation -->
<div class="navigation">
<?php if( get_previous_post() ): ?>
<div class="alignleft"><?php previous_post_link('%link', '« %title'); ?></div>
<?php endif;
if( get_next_post() ): ?>
<div class="alignright"><?php next_post_link('%link', '%title »'); ?></div>
<?php endif; ?>
</div>
<!-- /post navigation -->
<?php endwhile; // 繰り返し処理終了
else : ...省略...
WordPress ループ内が index.php
に比べるととても長くなりました。これも single.php
の特徴ですね!
-
WordPress Codex
9. コメント部分を表示しよう!
ブログの個別記事には、通常コメントに関する部分を表示します。コメント一覧と、コメントを投稿するためのフォームです。まずはコメント一覧の表示の仕方から見ていきます。
9.1. コメント一覧の表示
まずはコメント一覧を表示していきます。コメント一覧の表示自体はとっても簡単です!というのも、wp_list_comments
というテンプレートタグひとつ書くだけで、<li>
タグでコメントをリスト表示してくれるんです!
コメント一覧
もちろんアバターの表示/非表示の切り替えや、返信コメントをスレッド化(入れ子のリストで表示)などは、管理画面の 設定 → ディスカッション での設定が反映されます。それではコメント一覧を表示させてみます。今回は直書きの HTML は省略して、いきなりテンプレートタグを書いてみます。
WordPress Code
<div id="comment-area">
<?php if( have_comments() ): // コメントがあったら ?>
<h3 id="comments">Comment</h3>
<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>
<?php endif; ?>
</div>
今回は全体を div#comment-area
で囲んでみました。その中に、 if(have_comments()):
という条件を加えました。これは「もしコメントがあったら表示する」という条件分岐です。そしてその中に、<h3>
タグで見出しを付けました。
ここで注意したいのが、#comments
という ID です。この #comments
の部分は、トップページなどから #(ハッシュ)付きでリンクが貼られます。なので見出しなどに必ず #comments
という ID を付けておきましょう。
上記のコードの中で、実際にコメントを表示しているのが下記の部分です。
<ol class="commets-list">
<?php wp_list_comments( 'avatar_size=55' ); ?>
</ol>
wp_list_comments
は、<li>
要素でコメントを表示してくれるので、<ol>
要素や <ul>
要素で囲んでおくのを忘れないようにしなくてはですね!また、wp_list_comments('avatar_size=55')
としてあるのは、アバターを表示した場合の、アバター画像のサイズ(ピクセル)です。この場合 55px 四方でアバターが表示されます(ディスカッション設定でアバターを「表示」してる場合)。
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 ループ
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
...タイトルやコンテンツなど(省略)...
<!-- post navigation -->
<div class="navigation">
...「前の記事」「次の記事」へのリンク(省略)...
</div>
<!-- /post navigation -->
<?php comments_template(); ?>
<?php endwhile; // 繰り返し処理終了
else : ...省略...
これでコメント一覧を single.php
で表示させることができました!single.php
の終わりまで、あとちょっとです X(
9.2. コメントフォームを表示しよう!
コメント一覧の次は、コメントフォームを表示してみます。このコメントフォームも、さっきのコメント一覧と同じように、少しのコードで表示させることができるんです!
記述するのは、コメント一覧の下なので、comments.php
に記述します。使うテンプレートタグは comment_form
というタグです。
TEMPLATE TAG
comment_form
… コメントフォームを表示します。
comments.php
<?php comment_form(); ?>
たったこれだけで、コメントフォームを表示してくれます。でもちょっとだけ工夫して、今回は下記のように書いてみました。
<?php $args = array(
'title_reply' => 'Leave a Reply',
'label_submit' => 'Submit Comment',
);
comment_form( $args ); ?>
title_reply
の部分は、コメントフォームの見出しのテキストです。label_submit
は送信ボタン内のテキストを指定できます。以下が実際の表示になります!
コメントフォームの表示
また、コメント一覧やコメントフォームは、管理画面の メニュー → 設定 → ディスカッション から、細かく設定することができます。
ディスカッション設定
紹介したテンプレートタグ wp_list_comments
や comment_form
を使って表示したコメント欄は、ここでの設定がある程度反映されます(なんである程度かは後述します)。例えば「新しい投稿へのコメントを許可する」のチェックを外せば、新しく書いた記事にはコメントフォームが表示されません。
9.3. コメントフォームを移動させる comment-reply.js
前半、header.php のところで、下記のようなコードを記述したのを覚えていますか?
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
実はこのコードは、コメント欄に関係したものだったんです。WordPress のコメント欄では、「返信」というリンクをクリックすると、コメントフォームが、返信したいコメントのすぐ下に移動してきます。
返信をクリックすると、フォームがすぐ下に移動します
この仕組みは、WordPress にはじめから組み込まれている、comment-reply.js
という JavaScript で動いています。さっきのコードは、この comment-reply.js
を読み込むための記述だったんですね!この JavaScript ファイルを読み込んでいないと、コメントフォームが移動しないので注意が必要です。
ここまで随分長くなってしまいました … 次で最後のテンプレートファイルです! … まだあるの?って言わないでー X(
10. 固定ページを表示するメインテンプレートファイル page.php を作ろう!
ここまでトップページなどを表示する index.php
と、ブログの個別記事を表示する single.php
というメインテンプレート(部品じゃないファイル)を作成してきました。最後に固定ページを表示するための page.php
を作成します。
作成とは言っても、index.php
をちょっと変更するだけで OK なので、index.php
をコピーして、 page.php
という名前でテーマフォルダの中に保存しましょう!
固定ページの場合、カテゴリーの表示は必要ありませんし、ページの性格上、日付を表示する必要性も少ないと思います。なのでカテゴリーや日付を表示する部分を、丸ごと削除してしまいます。
また、index.php では、記事の「続きを読む」を表示していましたが、これも必要ありません。そして固定ページはブログのように時系列に並んだコンテンツではないので、「次のページ」「前のページ」というページャーも必要ありません。最終的には下記のようにスッキリした内容になりました。
page.php
<?php get_header(); ?>
<!-- main -->
<div id="main">
<?php if (have_posts()) : // WordPress ループ
while (have_posts()) : the_post(); // 繰り返し処理開始 ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a></h2>
... ここにあったカテゴリーなどのコードは削除
<?php the_content(); ?>
</div>
<?php endwhile; // 繰り返し処理終了
else : // ここから記事が見つからなかった場合の処理 ?>
<div class="post">
<h2>記事はありません</h2>
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; ?>
... ここにあったページャーのコードは削除
</div>
<!-- /main -->
<?php get_sidebar(); ?>
<?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!
11. カスタムメニューを利用できるようにする
サイトのメインナビゲーション … 現状ではただ作った固定ページが並んでいるにすぎません。せっかくなので、カスタムメニューの機能を有効化しておきましょう。カスタムメニューというのは、管理画面の 外観 → メニュー から編集して、ナビゲーションメニューを編集する機能です。この機能もウィジットと同じように、テーマ側である程度設定してあげないといけません。
これを利用するには、functions.php
に下記を追加します!
functions.php
<?php
// カスタムメニューを有効化
add_theme_support( 'menus' );
// カスタムメニューの「場所」を設定するコード
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
?>
add_theme_support( 'menus' )
と記述すると、とりあえずカスタムメニューの機能が使えるようになります。でも次のコードの「カスタムメニューの場所」というのはなんでしょう?ここでは「 'header-navi', 'ヘッダーのナビゲーション'
」という風になっています。
実はこれがテーマ側とカスタムメニューを紐付けるものです。ここでもう一度 header.php
を見てみてください。header.php
のナビゲーションを表示する部分には、下記のように「header-navi
」と記述してありました。
header.php
wp_nav_menu( array ( 'theme_location' => 'header-navi' ) );
つまり管理画面の「テーマの場所」で、「ヘッダーのナビゲーション(header-navi
)」に設定カスタムメニューを反映させる … という意味になります。ちょっとややこしいかもしれませんが、カスタムメニューは複数作ることができるので、フッターなどに配置することも可能です。それを区別するために、「テーマの場所」が必要なんですね。
カスタムメニューを複数作る場合は、functons.php
に下記のように複数書き加えます。
functions.php
// カスタムメニューの「場所」を設定するコード
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
register_nav_menu( 'footer-navi', 'フッターのナビゲーション' );
MEMO
header-navi
、footer-navi
は任意の ID ですので、好きに書き換えてしまって OK です。
その上でフッターのナビゲーションを表示したい箇所には、下記のように記述します。
footer.php
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
12. 最後に Theme Check プラグインでチェック
ここまで苦労して作ってきたオリジナルテーマ。間違いはない … と思いますが、最後に Theme Check というプラグインを使って、テーマに不具合がないかどうかを確認してみましょう!Theme Check プラグインは、テーマ内のコードをチェックしてくれて、非推奨タグなども検知してくれるので、とっても便利なプラグインです。
管理画面の プラグイン → 新規追加 から、Theme-Check をダウンロードして有効化します。すると メニュー → 外観 に、Theme Check という項目が追加されるはずです。
Theme Check の画面
この画面でテーマのチェックを行いますが、その前に WordPress の設定で、デバッグモードをオンにしておく必要があります。デバッグモードをオンにするには、WordPress をインストールしたディレクトリにある、wp-config.php
をエディタで開きます。
すると wp-config.php
内に、下記のような記述があると思います。
wp-config.php
define('WP_DEBUG', false);
デバッグモードをオンにするには、これを true
にします。
define('WP_DEBUG', true);
Attention
これは WordPress のデバッグモードなので、テーマ開発が終ったら、false
に戻すのを忘れないようにしてください!
デバッグモードを有効にしたら、Theme Check プラグインでテーマのチェックを行います!テストにパスすると、下記のように表示されます。でもスクロールしていくと、「こうした方がいいよ!」といったアドバイスも書かれていますので、最後まで読んでみましょう。
検査結果
また、テストにパスしても、「必須項目が抜けてますよ!」と注意される箇所もあるので、合わせてチェックします。今回は下記の必須項目もれで怒られてしまいました …。
必須項目抜けの注意
それでは上から順番に見ていって、悪い?ところを直していくことにします。初めてテーマ作りをしたときに、よく見落としがちなポイントばっかりです。
12.1. 必須: コンテンツ幅が設定されていません。
これは functions.php
で、サイトのメインカラムのコンテンツ幅を指定しておくコードです。今回のテーマは、メインカラムのコンテンツ幅が 600px なので、下記のように functions.php
に書き加えます。
functions.php
if ( ! isset( $content_width ) ) $content_width = 600;
12.2. 必須: このテーマにはコメントページネーションのコードがありません。
これはコメント一覧を複数ページに分けたときに必要な「ページャー」のこと。もうちょっと詳しく説明すると、設定 → ディスカッション には、下記のような設定がありますよね。
1ページあたり n件のコメントを含む複数ページに分割
これにチェックを入れて有効にした場合は、ページャーがないと困ります。そこで comments.php
のコメント一覧の下などに、下記のコードを追加しておきましょう。
comments.php
<div class="comment-page-link">
<?php paginate_comments_links(); ?>
</div>
コメント一覧のページャー
<a>
タグ、<span>
タグでマークアップされたページャーが表示されます。
12.3. 必須: wp_link_pages が見つかりませんでした。
これもページャーに関するものですねー。WordPress はひとつの記事を複数のページに分けることができますよね!
投稿画面で <!–nextpage–> と書く
投稿画面で <!--nextpage-->
と書くと、その部分でページが分割されます。なのでそこにページャーが必要になる … という訳なんですね!
記事を分割したときのページャー
このページャーを表示するには、WordPress ループ内に下記のように記述します。
single.php
<?php $args = array(
'before' => '<div class="page-link">',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
);
wp_link_pages($args); ?>
こうすると、<a>
タグと <span>
タグでマークアップされたページャーが表示されます。
12.4. 必須: language_attributes が見つかりませんでした。
これは <html>
の開始タグに付ける lang
属性を出力するテンプレートタグです。
<html lang="ja">
と直書きしていましたが、下記のように書きましょう!という注意です。
<html <?php language_attributes(); ?>>
これは公式テーマとして登録する際には必須となりますが、個人のテーマなら気にすることはないので、今回はそのままにしておきます。
12.5. 必須: body_class call in body tag が見つかりませんでした。
これは post_class
と似たテンプレートタグで、ページごとに <body>
タグに自動的にクラスを付けてくれるテンプレートタグです。CSS でスタイリングするときに便利なので、ぜひ付けておきたいですね!header.php
の
header.php
<body <?php body_class(); ?>>
12.6. 必須:add_theme_support( ‘automatic-feed-links’ ) が見つかりませんでした。
これを忘れたら大変でした X( これは <head>
内に RSS2 のフィードリンクを表示してくれるもの。functions.php
に書き加えておきましょう。
functions.php
add_theme_support( 'automatic-feed-links' );
この他にも、WordPress 独特のクラスが style.css
に記述されていません … 的な注意を受けることもあると思います。記事内の画像の部分で、alignleft
とか alignright
というクラスについてちょっとだけ触れました。もちろん他にもいくつか WordPress が自動で付けるクラスがあって、レイアウトに関わるものも多少あります。
WordPress でのテーマ作りに慣れてくると、そういったクラスもピンとくるようになります(例えば、画像にキャプションを付けたときに、キャプションに対してクラスがつくなど)。はじめのうちは分からないクラスもあるかもしれませんが、テーマ内でレイアウト崩れなどが起きない限り、大きな問題ではないですね!
これでテーマチェックもひと通りクリアすることができました。
13. 最後に …
今回作成したテーマは、特に機能も付けていません。デフォルトテーマでは、カスタムヘッダーやカスタム背景、アイキャッチ画像、投稿フォーマットなど、たくさんの機能がはじめからついています。これらの機能を付けるためには、さらにテーマにいろいろ記述していく必要があります。
そういったものを少しずつでも自分のテーマに設置していくのも、WordPress のテーマ作りの楽しいところですね!
また、WordPress のテンプレートタグは PHP で作られているので、やっぱり PHP の基礎知識は必要かもしれません。PHP も合わせて勉強すると、自分だけのオリジナルテーマ作りも、もっと楽しくなると思います!
また、今回作ったテンプレートファイルは全部で 9つでした。でももっとカスタマイズしていくと、いろんなテンプレートファイルが必要になってきます。過去記事でその辺りを書いたことがあるので、合わせて読んでいただけると嬉しいです。
13.1. おすすめ書籍
最近ではいろいろな WordPress の本があって、どれを読んだらいいか選ぶのも大変ですね …。私は下記の本を何度も読みました。ちょっと前の本(WordPress 3.1の頃 / 2011年 5月)なのですが、WordPress の基本的なことがしっかりと学べる素敵な本です。公式のテーマ Twenty Ten をベースに、各テンプレートタグなどを丁寧に解説している本です。
古い記述(非推奨タグ)に関しては、この記事で紹介した Theme Check プラグインで確認できるので、合わせて使ってみてください。非推奨タグを知るのも学習のうちだと思ってるので …。
また、以前も紹介したのですが、PHP初心者さんには下記の本がおすすめです!易しい言葉で書かれてるので、安心しておすすめしています!
とっても長くなってしまいましたが、最後まで読んでくれてありがとうございました ;D
Comments
Thank you for the comment.