テーマ | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com いわゆる自由帳ってところです。 Mon, 17 Mar 2025 12:40:00 +0000 ja hourly 1 https://wordpress.org/?v=6.6 https://blog.takeho.com/wp-content/uploads/2024/08/icon-150x150.png テーマ | takeHo（たけほ）のへなちょこ台帳 https://blog.takeho.com 32 32 オリジナルテーマを初めて作る人のための完全ガイド ～基礎から学ぶ制作フロー＆サンプル付き～ https://blog.takeho.com/startup-wordpress/ https://blog.takeho.com/startup-wordpress/#respond Sat, 15 Mar 2025 12:36:31 +0000 https://blog.takeho.com/?p=752 WordPress で初めてオリジナルテーマを作ろうと思ったとき、まず参考にしたくなるのが公式のデフォルトテーマではないでしょうか。しかし、最近のデフォルトテーマは機能が豊富で、その分構造も複雑になっています。

そこで今回は、オリジナルテーマを初めて作成する方向けに、シンプルなテーマをベースに制作の流れをまとめました。サンプルも用意しているので、ぜひダウンロードして活用してください。

WordPress はバージョンアップを重ね、現在では 6.7 になっています。それに伴い、デフォルトのテーマも新たに TwentyTwelve へと変更されました（2013年1月）。オリジナルテーマを初めて作成しようと考えたとき、まず参考にしたくなるのがデフォルトテーマ。しかし、最近のデフォルトテーマは構造が複雑で、少しとっつきにくいと感じることもあるかもしれません。

私が WordPress を始めた頃のデフォルトテーマは、その名の通り「Default」というシンプルなものでした（現在は更新が停止）。当時は WordPress について深く理解していなくても、このテーマを参考にしながらオリジナルテーマを作成できたと感じています。

そこで今回は、WordPress で初めてオリジナルテーマを作る方向けに、シンプルなテーマを用いて作成の流れをまとめました。テーマ自体は、WordPress の基本となるブログ向けのものを採用しています。

  1. HTML + CSS で、サイトのレイアウトを設計しよう
        1. デザインに入れておきたいもの
      1. トップページのデザイン
      2. 記事ページのデザイン
      3. 固定ページのデザイン
  2. 作成したデザインを WordPress のテーマファイルに変換
    1. WordPress の Themes フォルダに移してみよう！
    2.  テーマを有効化して、サイトを確認してみよう！
    3. WordPress のテンプレートタグ
  3. WordPress の構造に合わせてテンプレートを分割しよう
    1. ヘッダー部分を分割
    2. サイドバー部分を分割
    3.  フッター部分を分割しよう
    4. WordPress のテンプレートファイルいろいろ
        1. ここまでのまとめ
  4. header.php をカスタマイズしてヘッダーを整える
    1. サイト名と紹介文の部分
    2. 検索フォーム
    3.  ナビゲーション部分
    4. <head>内を作ろう！
          1. ページのタイトル | サイト名
    5. <head> 内に書いておきたい大事なもの
        1. header.php のまとめ
  5. メインのコンテンツを管理する index.php を調整
    1. WordPress ループ
    2. ちょっと寄り道 – 日付を表示する the_date
    3. 記事を投稿して表示を確認
    4. ちょっと寄り道 – WordPress が自動で付けてくれるクラス
      1. 画像につくクラス
    5. 次のページ、前のページへのページャーを付けよう！
        1. Attention
        2. index.php のポイント
  6. サイトのフッターを footer.php でデザインしよう
    1. 忘れちゃいけない wp_footer
        1. footer.php のまとめ
  7. 記事ごとの表示レイアウトを管理する single.php を作成
    1. single.phpを作ってヘッダーなどを読み込む
    2. WordPress ループを書き込む
    3.  タグと投稿者などを表示する
    4. 前の記事、次の記事へのリンクを表示する
  8. コメント機能を追加し、ユーザーの声を反映しよう
    1. コメント一覧の表示
      1. comments.php を作る
    2. コメントフォームを表示しよう！
      1. ディスカッション設定
    3. コメントフォームを移動させる comment-reply.js
  9. 固定ページ専用の page.php を作成し、個別ページを整理
        1. page.php のまとめ
  10. カスタムメニューを導入し、柔軟なナビゲーションを実現
        1. 作成したテンプレートファイル
  11. 仕上げに Theme Check プラグインで最終確認
        1. Attention
    1. 必須: コンテンツ幅が設定されていません。
    2. 必須: このテーマにはコメントページネーションのコードがありません。
    3. 必須: wp_link_pages が見つかりませんでした。
    4. 必須: language_attributes が見つかりませんでした。
    5. 必須: body_class call in body tag が見つかりませんでした。
    6. 必須:add_theme_support( ‘automatic-feed-links’ ) が見つかりませんでした。
  12. 最後に …

HTML + CSS で、サイトのレイアウトを設計しよう

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

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

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

HTML + CSS サンプル
  • トップページ … index.html
  • 記事ページ … single.html
  • 固定ページ … page.html
Download

一応ダウンロードできるようにしてありますので、興味のある方はぜひ参考にしてみてください。 また、HTML + CSS を使ってサイトを作成する際は、レイアウトやページの機能を考慮し、以下の要素を最初からデザインに組み込んでおくと、WordPress のテーマ化がスムーズに進みます。

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

言葉だけでは分かりにくいかもしれませんので、以下の画像を参考にしてください。これはサンプルのトップページのデザインです。

トップページのデザイン

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

レイアウトは、シンプルな 2 カラム構成です。ヘッダーの下にはナビゲーションを配置し、例として「HOME」と「ABOUT」を設けました。 また、ヘッダーやサイドバーには検索フォームも追加しておきます。

メインカラムには、記事のサンプルを 2 つほど用意しておきましょう。ブログ形式なので、「古い記事」「新しい記事」へ移動できる ページネーション も忘れずに設置します。

サイドバーには、カテゴリーや最新記事のリストを仮置きしておくと、後々の調整がスムーズになります。

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

記事ページのデザイン

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

個別記事ページでは、記事の下にタグや投稿者情報を表示するようにしました。さらに、「次の記事」「前の記事」へ移動できるリンクも設置しています。

その下には、コメント一覧を表示し、訪問者がコメントを投稿できるフォームも用意しました。

なお、ヘッダー、サイドバー、フッターはトップページと共通のデザインを使用しています。

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

固定ページのデザイン

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

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

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

これから WordPress のテーマを作成していきますが、上記のデザインを元にした WordPress テーマも用意しました。HTML 版と比較しながら確認してみてください。

なお、このテーマのライセンスは GPL ですので、自由にご利用いただけます。

Download

作成したデザインを WordPress のテーマファイルに変換

それでは、作成した 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 と設定します。

その他の項目は任意ですが、テーマを配布する場合は ライセンス情報 なども記載しておくと良いでしょう。

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

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

その後、WordPress の管理画面 で 「外観」→「テーマ」 を開いてみましょう…。

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

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

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

画像が表示されました

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

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

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

CSSが効いてない … X(

この状態では、スタイルシートが適用されておらず、画像も表示されていません…。

実は、WordPress では基本的に相対パスが使用できません（※ただし、CSS 内のパス指定は例外です）。そのため、CSS や画像のパスを正しく指定するには、WordPress 特有の記述方法 を使う必要があります。

次に、その適切なパスの指定方法について解説していきます。

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 を取得します。

WordPress Code

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が反映された状態

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

WordPress のテーマ作成とは、静的な HTML コードを WordPress のテンプレートタグを使って書き換えていく作業 と言えます。

先ほどは テーマディレクトリやスタイルシートの URL を取得するテンプレートタグ を紹介しましたが、WordPress には 他にも多くのテンプレートタグ が用意されています。

すべてを暗記する必要はありませんが、何度もテーマを作成していくうちに自然と覚えていく でしょう！

WordPress の構造に合わせてテンプレートを分割しよう

次に、WordPress サイトの特徴のひとつでもある「index.php の分割」 を行います。「index.php を分割する」とは、ヘッダーやサイドバー、フッターなどを個別のファイルに分けて管理する方法 です。こうすることで、各パーツを再利用しやすくなり、効率的にサイトを構築できます。

この仕組みを 図を使って説明 していきます。

WordPress サイトの構造

大きな画像ばかりで申し訳ないです… こんな感じで、レイアウトの各パーツごとにファイルが分割 されています。

このように、デザインの各パーツごとに別々のファイルに分割 されています。HTML ではあまり馴染みがないかもしれませんが、PHP では一般的な手法です。

この方法に従い、index.php を 4 つのパーツに分割 していきます。

ヘッダー部分を分割

まずは、ヘッダー部分を「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

サイドバー部分を分割

先ほど 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>

 フッター部分を分割しよう

最後にフッター部分を分割します。同じように 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(); ?>

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

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 側は、各インクルードタグで読み込む。

header.php をカスタマイズしてヘッダーを整える

前半では <head> 内のファビコンと CSS ファイルへのリンクを、テンプレートタグを用いて編集しました。しかし、これで header.php が完成したわけではありません。ロゴや検索フォームなどの部分も、WordPress のテーマとして適切な形に作り替えていく必要があります。

作業を進める際は、デザインと照らし合わせながら確認すると分かりやすいでしょう。そこで、ヘッダーのデザインを改めてチェックしてみましょう。

ヘッダーのデザイン

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

サイト名と紹介文の部分

ヘッダー部分はとてもシンプルです。サイト名とちょっとした紹介文があり、検索フォームとナビゲーションがあります。サイト名部分には、トップページへのリンクを貼ることにします。まずは直書きした 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 というテンプレートタグを使います。ここで表示するサイト名や紹介文は、管理ページの 設定 → 一般 からいつでも変更することができます。

設定 → 一般

検索フォーム

続いて検索フォーム部分です。同じように直書きした 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' になっていますが、'search' に変更しても問題ありません。

書き換える必要があるのは、action 属性の送信先 URL です。これはトップページの URL で問題ないため、先ほどと同様に 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(); ?>

 ナビゲーション部分

続いてナビゲーションの部分です。まずは基本となる 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 というテンプレートタグについては、後ほど詳しく説明しますが、この一行を記述するだけで、先ほどのように <div> で囲まれた <ul>・<li> のマークアップが生成され、ナビゲーションが表示されます。

まずは固定ページを1つか2つ作成し、サイトの表示を確認してみましょう。

固定ページを作成

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

ナビゲーション

こんな風に、作った固定ページがナビゲーションとして表示されます。出力される 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
テンプレートタグ/wp nav menu

<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
テンプレートタグ/wp title

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

ここで、<head> 内に追加しておきたい重要な要素が2つあります。まず1つ目は、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 を忘れずに！

メインのコンテンツを管理する 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 ループ」について確認しておきましょう。

「このコードをどこに書くのか？」はひとまず置いておき、まずはその概要を見ていきますね。

WordPress ループ

まず、WordPress では投稿画面で記事を作成しますよね？ そして、記事が存在すれば表示できますが、何も投稿されていなければ当然表示するものがありません。

そこで、まず ①「表示すべき記事があるか？」 をチェックし、記事があれば ② 記事を表示する処理 を実行します。逆に記事がなければ ③「表示する記事がありません」という処理 を実行する流れになります。これは PHP の基本構文である if 文を使い、記事の有無に応じて処理を分岐させているわけですね。

特に重要なのが ②の部分 です。トップページなどでは通常、複数の記事が表示されます。例えば、記事を2つ書けば2つ、3つ書けば3つ表示されるため、この部分は 繰り返し処理 になります。この仕組みを理解しておくと、WordPress の動作がより分かりやすくなります。

この一連の処理を 「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 ループの後に記述し、後ほどテンプレートタグを使って実装します。

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

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
テンプレートタグ/the title
テンプレートタグ/the permalink
テンプレートタグ/the date
テンプレートタグ/the category
テンプレートタグ/comments popup link
テンプレートタグ/the content

ちょっと寄り道 – 日付を表示する 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
テンプレートタグ/get the date

記事を投稿して表示を確認

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

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

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

トップページの表示

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

ちょっと寄り道 – 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
the_IDテンプレートタグ/post class

画像につくクラス

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

メディアの挿入

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

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

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

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

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

少しクラスの話に寄り道しましたが、記事の表示部分が完了したので、次は 「次のページ」「前のページ」 のリンクを追加していきます。これは、記事が増えて 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
テンプレートタグ/next posts link
Function Reference/previous posts link

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

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

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

サイトのフッターを 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 でサイト名を表示します！

忘れちゃいけない wp_footer

header.php では wp_head() を必ず記述する必要がありましたが、同様に footer.php には必ず wp_footer() を記述 します。この関数は wp_head() と同じように、WordPress がページの表示に必要なコードを出力する役割を持っています。

例えば、プラグインで使用する JavaScript ファイル なども、この記述がないと適切に読み込まれません。そのため、 タグの直前に 忘れずに wp_footer() を追加 しておきましょう！

footer.php のまとめ
  • wp_footer を必ず記述します。

記事ごとの表示レイアウトを管理する single.php を作成

フッターまで作成したので「もう完成？」と思うかもしれませんが、実は まだ終わりではありません…。

ここで一度、これまで作成したテンプレートファイルを振り返り、再確認 してみましょう。

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

この中で ページの核となるのは index.php だけ ですね。他のファイルはすべて 部品 となるものばかりです。実際、index.php さえあれば、ブログの 個別記事ページ や 固定ページ も表示できます。

しかし、個別記事ページ では コメント一覧やコメントフォーム が必要になりますし、固定ページ はブログ記事とは異なり、カテゴリーなどを表示しない ことが一般的です。

そこで、個別記事を表示するテンプレートファイル と 固定ページを表示するテンプレートファイル を作成しておきましょう。

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

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

ただし、すでに header.php、sidebar.php、footer.php は作成済みなので、single.php ではこれらの部分を削除し、インクルードタグで読み込むだけでOK です。

最初のうちは 「なぜファイルを分割するの？」 と思うかもしれませんが、このように 共通部分を「部品」として管理 しておけば、複数のテンプレートファイルを作成するときに 効率よく使い回せる からなんですね！

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

各パーツを読み込むインクルードタグ（おさらい）

  • ヘッダー部分の読み込み … get_header
  • サイドバー部分の読み込み … get_sidebar
  • フッターの読み込み … get_footer

WordPress ループを書き込む

次に、index.php と同じように WordPress ループ を記述します。すでに index.php で作成済みなので、該当部分を コピーして single.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() の () 内は空にしておきましょう。

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

別記事ページでは、記事の終わりに タグと投稿者名 を表示してみましょう。もちろん、記事下ではなく タイトルの下 に配置しても問題ありませんが、今回はこのレイアウトで実装します。

さらに、その下には 「前の記事」「次の記事」 への ページャー も追加します。

記事の下の部分

まずはタグの表示と投稿者の表示に挑戦してみます。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 : ‘ と ‘, ‘ という記述がありますが、前者は実際に表示されるタグの前に付ける文字で、後者は各タグを区切るための文字です。これらの部分は自由に変更できるので、好みに合わせてカスタマイズしてください。また、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
テンプレートタグ/the tags
テンプレートタグ/the author
Function Reference/get author posts url
テンプレートタグ/the author meta

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

index.php では、記事が多くなったときに 「前のページ」「次のページ」 というページャーを WordPress ループの外 に設置しました。

一方、single.php では 「前の記事」「次の記事」 というページャーを追加します。ただし、注意すべきポイントがあります。index.php のときは ループの外 に記述しましたが、single.php では ループの中に記述する必要がある という点です。

この違いを理解したうえで、適切な場所に記述しましょう。使用するテンプレートタグは以下の通りです。

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

index.php で使用したテンプレートタグは previous_posts_link() のように 複数形 でしたが、今回の single.php では 複数形ではない ことに注意してください。これはまったく別のテンプレートタグなので、混同しないようにしましょう。

さて、直書きした 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
テンプレートタグ/previous post link
テンプレートタグ/next post link

コメント機能を追加し、ユーザーの声を反映しよう

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

コメント一覧の表示

まずは コメント一覧 を表示していきましょう。コメントの一覧を表示するのはとても簡単です！

wp_list_comments() というテンプレートタグを 1行追加するだけ で、 タグを使ってコメントをリスト表示してくれます。

コメント一覧

もちろん、アバターの表示・非表示の切り替えや、返信コメントのスレッド化（入れ子リストでの表示）などは、管理画面の「設定 → ディスカッション」 の設定が反映されます。

それでは、実際にコメント一覧を表示させてみましょう。今回は、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 です。これは、トップページなどから #（ハッシュ）付きのリンク でコメントセクションに直接移動できるようにするためのものです。そのため、見出しなどに 必ず id=”comments” を設定 しておきましょう。

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

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

wp_list_comments() は、<li>要素を使ってコメントを表示するため、<ul> や <ol> で囲むのを忘れないようにしましょう。これを忘れると、適切なリスト構造にならず、デザインが崩れる可能性があります。

また、wp_list_comments(‘avatar_size=55’) と記述すると、アバターのサイズを指定 できます。この場合、アバター画像は 55px × 55px の大きさで表示されます。ただし、これは 管理画面の「ディスカッション設定」でアバターを「表示」にしている場合のみ有効 です。

comments.php を作る

これで コメント一覧の部分は完成 しましたが、single.php には直接記述しません。コメント一覧は部品化 して、comments.php という別のテンプレートファイルとして管理します。

まず、新しく comments.php を作成し、先ほどのコードを書き込んだら、テーマフォルダ内に保存 しましょう。

次に、single.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 の完成まで、あと少しです。

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

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

記述するのは、コメント一覧の下なので、comments.php に記述します。使うテンプレートタ次は コメントフォーム を表示してみましょう。コメントフォームも コメント一覧と同じく、少しのコードで簡単に表示 できます。

記述する場所は コメント一覧の下 なので、comments.php に追加します。使用するテンプレートタグは comment_form() です。グは 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() を使って表示されたコメント欄は、管理画面の設定がある程度反映されます（”ある程度” の理由については後ほど説明します）。

例えば、「新しい投稿へのコメントを許可する」 のチェックを外すと、新しく作成した記事には コメントフォームが表示されなくなります。

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

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

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

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

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

この仕組みは、WordPress に はじめから組み込まれている comment-reply.js という JavaScript によって動作しています。

先ほどのコードは、この comment-reply.js を 適切に読み込むための記述 だったんですね！

この JavaScript ファイルが読み込まれていないと、コメントフォームが正しく移動しない ので、注意が必要です。

ここまでかなり長くなってしまいましたが、次が最後のテンプレートファイルです！

…「まだあるの？」なんて言わないでくださいねー！

固定ページ専用の 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！

カスタムメニューを導入し、柔軟なナビゲーションを実現

サイトのメインナビゲーション ですが、現状では 作成した固定ページがただ並んでいるだけ です。せっかくなので、カスタムメニューの機能を有効化 しておきましょう。

カスタムメニューとは、管理画面の「外観 → メニュー」から編集できるナビゲーションメニュー のことです。これを使えば、ページの並び順を自由に変更したり、外部リンクを追加したり できます。

ただし、この機能も ウィジェットと同様に、テーマ側で適切な設定をしておく必要があります。

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

これを利用するには、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）」に設定したカスタムメニューを反映させる という意味になります。

少しややこしく感じるかもしれませんが、カスタムメニューは複数作成できる ため、フッターにも配置可能 です。そのため、どのメニューをどこに表示するかを区別するために 「テーマの場所」 が必要になるわけです。

カスタムメニューを 複数作成する 場合は、functions.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 クラスが付いていましたが、カスタムメニューを使用すると <ul> タグに .menu クラスが適用されます。そのため、スタイルシートを記述する際に気をつける必要があります。統一されていればもっと楽なのに…

時間はかかりましたが、これでひとまずテーマの完成です！今回作成したテンプレートファイルは、以下の9つです。

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

かなりの数を作り込みましたね！本当にお疲れさまでした！

仕上げに Theme Check プラグインで最終確認

ここまで苦労して作り上げたオリジナルテーマ。問題はないはず…ですが、念のため 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 プラグイン を使ってテーマのチェックを実施しましょう！
テストに合格すると、以下のようなメッセージが表示されます。ただし、スクロールしていくと 「こうするともっと良くなるよ！」 というアドバイスも記載されているので、最後までしっかり確認しておきましょう。

検査結果

また、テストに合格しても 「必須項目が不足しています！」 と指摘されることがあります。こうした注意点もしっかり確認し、必要な修正を加えましょう。

今回も、以下の必須項目が不足していると警告されてしまいました。

必須項目抜けの注意

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

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

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

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

今回のテーマでは、メインカラムのコンテンツ幅を 600px に設定するため、functions.php に次のコードを追加します。

functions.php

if ( ! isset( $content_width ) ) $content_width = 600;

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

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

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

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

comments.php

<div class="comment-page-link">
<?php paginate_comments_links(); ?>
</div>

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

必須: 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>タグでマークアップされたページャーが表示されます。

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

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

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

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

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

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

これは post_class と似たテンプレートタグで、各ページごとに タグへ自動的にクラスを追加 してくれるものです。
CSS でのスタイリングがしやすくなるため、ぜひ活用したいですね！

そこで、header.php の タグを、次のように書き換えました。

header.php

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

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

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

functions.php

add_theme_support( 'automatic-feed-links' );

このほかにも、「WordPress 独自のクラスが style.css に記述されていません」 という注意を受けることがあるかもしれません。
記事内の画像のクラス alignleft や alignright について触れましたが、実は WordPress には他にも 自動で追加されるクラス があり、レイアウトに影響を与えるものもいくつか存在します。

WordPress のテーマ作りに慣れてくると、こうしたクラスの使い方が自然と分かるようになります（例えば、画像にキャプションをつけると、キャプションに対して特定のクラスが適用される など）。
最初は知らないクラスがあっても問題ありません。テーマのレイアウトが崩れなければ、大きな影響はないでしょう。

これで テーマチェック も無事クリアできました！

ダウンロード

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

Download

最後に …

今回作成したテーマは、特に追加の機能を付けていません。一方で、デフォルトテーマには カスタムヘッダー、カスタム背景、アイキャッチ画像、投稿フォーマット など、便利な機能が最初から組み込まれています。
こうした機能をテーマに追加するには、さらにコードを記述していく必要があります。

少しずつ機能を追加しながら、自分だけのテーマを作り上げていくのも WordPress テーマ開発の醍醐味 ですね！

また、WordPress のテンプレートタグは PHP で動作 しているため、PHP の基礎知識があると理解が深まります。
PHP を学びながらカスタマイズすれば、より自由度の高いオリジナルテーマ作り を楽しめるでしょう！

]]> https://blog.takeho.com/startup-wordpress/feed/ 0