WordPressテーマの作り方 » パンくずリストを設置する

1. 条件分岐タグを使ってパンくずリストを作成する

パンくずリストとは？

Wikipediaによれば、

パンくずリストは、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。

です。このサイトでも利用しており、ページの上下に表示させるようにしています。

パンくずリストの例

パンくずリストを設計する

パンくずリストを設計します。最初に、自分のサイト構造を確認しておきます。ここでは、次のような前提条件の元でサイト構築されているとします。

前提条件

フロントページ（トップページ）は、「最新の投稿」表示を選択する
個別投稿ページは、階層的な複数のカテゴリを利用しており、パンくずリストのツリー構造に反映させる

ページ毎のパンくずリスト出力形式を決める

各ページの種類のパンくずリストの出力形式を決めます。今回は、下記表のような形式でパンくずリストを出力することにします。ちなみに青字は、ページの内容に応じて表示タイトルが変わる部分です。（例えば、”親カテゴリ”には、実際のカテゴリ名が入るようにする）

条件分岐タグを確認する

どのような順番で種類分けしていくか、使用する条件分岐タグを確認します。このコードはサイトのどのページを開いても実行することになるので、アクセス数が多いページがなるべく上に来るようにすると良いと思います。ここでは、下表の上から下に向かって条件分岐させることにします。上から順に、意図通りに分岐されるかどうかを確かめておきます。

ページの種類	条件分岐タグ	パンくずリスト
フロントページ	is_home()	ホーム ›
個別投稿ページ	is_singular(‘post’)	ホーム › 親カテゴリ › 子カテゴリ… › 記事タイトル
個別カスタム投稿 (websites)ページ	is_singular(‘websites’)	ホーム › カスタム投稿アーカイブ › 記事タイトル
その他の個別ページ	is_singular()	ホーム › 記事タイトル ›
カテゴリーページ	is_category()	ホーム › 親カテゴリ › 子カテゴリ… ›
タグページ	is_tag()	ホーム › タグ ›
タクソノミーページ	is_tax()	ホーム › タクソノミー ›
カスタム投稿アーカイブページ	is_post_type_archive()	ホーム › カスタム投稿アーカイブ ›
その他のアーカイブページ	is_archive()	ホーム › アーカイブ
検索結果ページ	is_search()	ホーム › 検索結果
404ページ	is_404()	ホーム › ページが見つかりません
その他のページ	else	ホーム ›

最初に前提条件を確認しておくことが大切！

これらの条件分岐タグが狙い通りに動くかどうかは、（１）最初に示した前提条件と、（２）表の上から下に向かって順に処理する　の２つに依存しています。

上手く行かない具体例として、フロントページに「固定ページ」を選択した場合を考えます（前提条件の1に反する）。この場合は、フロントページをis_home()でヒットさせることが出来なくなります。

2. テーマをカスタマイズする

前項の表で示したパンくずリストを出力するコードを実装します。

各ファイルの役割

今回は、３つのファイルを編集 or 新規作成します。

breadcrumb.php （ファイル名は自由）	パンくずリストのHTMLコードを作成するパーツ。今回のメインファイル。
functions.php	breadcrumb.php内で使用する関数を定義する。
index.php	パンくずリストを出力する箇所に、breadcrumb.phpのインクルードタグを挿入する。
style.css	パンくずリストのスタイルを指定する。

breadcrumb.phpを作成する

パンくずリストを出力するコードです。

色分けルール ※大雑把でスミマセン

PHP関数名＆制御文字列（ただし、ドット"."や括弧"{}"などの記号を除く）
WordPress関数＆プロパティ
このサンプル内で定義した関数＆無名関数

breadcrumb.php

 <?php
    // クエリをリセットしておく
    wp_reset_query();

    // リンク作成用の無名関数を定義しておく
    $get_link_html = function ($url, $title) {
        return '<a href="'.$url.'">'.$title.'</a>';
    };

    // トップページへのリンクと、区切り文字を作成しておく
    $del_str = " &rsaquo; ";

    // パンくずリスト用変数
    $out = $get_link_html(home_url(), 'ホーム') . $del_str;

    if (is_home()) {
        // そのまま出力
    } elseif ( is_singular('post') ) {
        // 記事に紐づいたカテゴリIDを親カテゴリ->子カテゴリに並べ替える
        $cat_tree = get_categories_tree();
        foreach ($cat_tree as $cat_id) {
            $out .= $get_link_html(get_category_link($cat_id), get_cat_name($cat_id)) . $del_str;
        }
        $out .= $get_link_html(get_permalink(), get_the_title())
              . $del_str;
    } elseif ( is_singular('websites') ) {
        $posttype = 'websites';
        $out .= $get_link_html(get_post_type_archive_link($posttype), get_post_type_object($posttype)->label)
              . $del_str
              . $get_link_html(get_permalink(), get_the_title())
              . $del_str;
    } elseif ( is_singular() ) {
        $out .= $get_link_html(get_permalink(), get_the_title());
    } elseif ( is_category() ) {
        $cat_obj = get_queried_object();
        $out .= get_category_parents($cat_obj->term_id, false, $del_str);
    } elseif ( is_tag() ) {
        $tag_obj = get_queried_object();
        $out .= $get_link_html(get_tag_link($tag_obj->term_id), $tag_obj->name).$del_str;
    } elseif ( is_tax() ) {
        $tax_obj = get_queried_object();
        $out .= $get_link_html(get_term_link($tax_obj), $tax_obj->name).$del_str;
    } elseif ( is_post_type_archive() ) {
        $posttype = get_post_type();
        $out .= $get_link_html(get_post_type_archive_link($posttype), post_type_archive_title('None', false))
              . $del_str;
    } elseif ( is_archive() ) {
        $out .= 'アーカイブ';
    } elseif ( is_search() ) {
        $out .= '検索結果';
    } elseif ( is_404() ) {
        $out .= 'ページが見つかりません';
    } else {
        // そのまま出力
    }
    echo $out;

    // クエリをリセットしておく
    wp_reset_query();

様々な関数が登場していますよね。パンくずリスト実装には、主に次のような種類のWordPressタグ＆PHP関数が必要になります。

条件分岐タグ
ページの名前を取得するタグ
URLを取得するタグ
文字列操作に関するPHP関数

またパンくずリスト出力プログラムには、似たようなコードが繰り返されることが多いです。そこで、適宜関数や無名関数を使って重複する処理をまとめます。

＞＞無名関数についてはこちらに記事をかきました

それでは、いくつかのポイントについて説明したいと思います。

コード全体の流れ

パンくずリストの処理に入る前に、クエリをリセットしておきます。

wp_reset_query();

パンくずリスト作成で頻出する、リンクタグを生成するコードを無名関数として定義しておきます。

$get_link_html = function ($url, $title) {
        return '<a href="'.$url.'">'.$title.'</a>';
};

区切り文字を、後々のメンテナンス性を考えて、変数に入れておきます。

$del_str = " &rsaquo; ";

パンくずリスト出力文字列を格納する変数$outを定義します。今回作成するパンくずリストは、全て”ホーム >”から始まっているので、初期値として与えておきます。（早速、先ほど定義した無名関数を使いました！）

$out = $get_link_html(home_url(), 'ホーム') . $del_str;

条件分岐タグを使って、ページの種類毎に分岐させて、$outに結果を格納します。

if (is_home()) {
... 途中省略 ...
} else {}

$outを画面に出力します。

echo $out;

クエリを再度リセットしておきます。

wp_reset_query();

個別投稿ページのパンくずリスト

個別投稿ページのパンくずリストが少々複雑なので取り上げます。まずはアウトプットを確認しておきます。

ホーム > 親カテゴリ > 子カテゴリ > ... > 記事タイトル

このように、記事に紐づいたカテゴリを階層順に並べて、それぞれのカテゴリページを階層順に表示したいのです。しかしカテゴリを階層順に並べるのは、少々面倒な作業になります。そこで、カテゴリIDを階層順に並べる処理を切り出したものを、functions.phpに関数として定義することにしました。

$cat_tree = get_categories_tree();

関数の戻り値はarray()です。関数の具体的な中身はfunctions.phpの項で紹介します。

次にget_categories_tree()を使って得られた、階層順に並んだカテゴリIDの配列を、親カテゴリ→子カテゴリの順にループ処理します。カテゴリページのURLと名前を、それぞれget_category_link()とget_cat_name()のWordPress関数で取得してリンクを生成し、区切り文字を添えて$outに連結させます。

foreach ($cat_tree as $cat_id) {
        $out .= $get_link_html(get_category_link($cat_id), get_cat_name($cat_id)) . $del_str;
}

最後に、投稿記事へのリンクを$outに連結させます。

$out .= $get_link_html(get_permalink(), get_the_title()) . $del_str;

カテゴリページのパンくずリスト

まず、カテゴリのオブジェクトを入手します。

$cat_obj = get_queried_object();

get_queried_object()は、現在のクエリに関連したオブジェクトを返すWordPress関数です。

個別投稿ページなら、投稿オブジェクトが返ってきます。
カテゴリページなら、カテゴリオブジェクトが返ってきます。
タクソノミーページなら、タクソノミーオブジェクトが返ってきます。

この例では、条件分岐タグでカテゴリページで実行しているので、返り値はカテゴリオブジェクトになります。

次に、カテゴリを階層順に並べたリンクを連結します。

$out .= get_category_parents($cat_obj->term_id, true, $del_str);

第１引数でカテゴリIDを指定します。IDは、先ほど入手したカテゴリオブジェクトのプロパティ”term_id”で参照できます。第２引数はその場でHTML出力するかどうか、第3引数では区切り文字を指定します。

functions.phpを編集する

breadcrumb.phpの個別投稿ページで利用した関数 get_categories_tree() をfunctions.phpに定義します。これは、記事に紐づいたカテゴリIDを、階層順に並べ替える処理です。

以前に公開しましたので、具体的なコードはこちらの記事（カテゴリIDを階層順に並べた配列をつくる）を参照してください。

index.phpを編集する

パンくずリストの出力場所に対応したところに、インクルードタグを挿入します。今回はサイト上部に設置します。

index.php

<?php get_header(); ?>
<div id="content">
<div id="breadcrumb">
    <?php get_template_part('breadcrumb'); ?>
</div>
<?php
    while( have_posts() ) {
         the_post();
         get_template_part('content');
         if (is_singular('post')) {
             comments_template();
         }
    } ?>
</div>
<?php
get_sidebar();
get_footer();

style.cssをカスタマイズする

パンくずリストのデザインを指定します。

style.css（追記）

#breadcrumb {
    font-size: 12px;
    margin-left: 1em;
}

以上で、今回のテーマカスタマイズは完了です。

動作を確認する

設計通りに動作するかを確認します。これは、個別投稿ページの表示結果です。

個別投稿ページ_出力結果

パンくずリスト出力に対応したソースを確認します。

出力結果（HTML）

<div id="breadcrumb">
    <a href="http://localtest.net">ホーム</a> &rsaquo; 
    <a href="http://localtest.net/category/diary/">日記</a> &rsaquo; 
    <a href="http://localtest.net/category/diary/short-diary/">１行日記</a> &rsaquo; 
    <a href="http://localtest.net/%ef%bc%91%e4%bb%b6%e7%9b%ae%e3%81%ae%e6%8a%95%e7%a8%bf/">１件目の投稿</a> &rsaquo; 
</div>

次の記事：index.phpをカスタマイズするー第１４回抜粋を表示する
前の記事：index.phpをカスタマイズするー第１２回ページの種類で分岐処理する

WordPress Codex

条件分岐タグ

パンくずリストを設置する

目次