WordPress｜パンくずリストを自作する方法

ここでは、テーマを自作したりカスタマイズしている方に向けて、パンくずリストの作り方をご紹介します。正直な話、このページ長いです。だから、結論だけ知りたい方は、ココをクリックしてソースコード見てみて下さいね。

コンテンツ [hide]

パンくずリストを自作する方法

まずは、大まかな手順を見てみましょう。

「関数名()」という形でパンくずリストの関数を作成し、これをfunctions.phpに追加
作成した関数を<?php 関数名(); ?>という形で任意のテンプレートに貼り付けて表示

とても大まかですが、以上の手順でパンくずリストを作成します。

パンくずリストと一口に言っても、表示させるページによっていろんなパターンが考えられます。とりあえず、一般的に使用されているページでの表示例をまとめてみました。

表示するページ	パンくずリスト
トップページ	表示しない
カテゴリページ	HOME（リンク付） > カテゴリ名
月別アーカイブページ	HOME（リンク付） > 日時
タグページ	HOME（リンク付） > タグ名
投稿ページ	HOME（リンク付） > カテゴリ名（リンク付） > ページタイトル
固定ページ	HOME（リンク付） > ページタイトル
検索ページ	HOME（リンク付） > 「キーワード」の検索結果
404ページ	HOME（リンク付） > お探しのページは見つかりません。

これらのパターンをそれぞれページに合わせて条件分岐させて表示させます。

パンくずの各項目を表示させるためのコード

下記の表は、それぞれのページ情報（タイトル名やそのURL）を表示させるためのコードです。

ページ	PHPコード	表示されるもの
ホーム	home_url();	URL
カテゴリ	the_category();	テキストリンク
カテゴリ	the_archive_title();	テキスト
日時		テキスト
タグ名		テキスト
記事タイトル	the_title();	テキスト
固定ページタイトル	the_title();	テキスト

条件分岐させるときのコード

下記は、パンくずリストを条件分岐で表示させるときのphpのif文

if ( 条件 ) {
  // 条件がtrueのときに実行する内容
}

の「条件」のところに入れるコード一覧です。

ページ	条件分岐タグ
トップページの場合	is_front_page()
カテゴリページの場合	is_category()
月別アーカイブページの場合	is_archive()
タグページの場合	is_archive()
投稿ページの場合	is_single()
固定ページの場合	is_page()
検索ページの場合	is_search()
404ページの場合	is_404()

上記の表で分かるように「月別アーカイブページ」と「タグページ」は同じ条件分岐になりますので、まとめてパンくずリストのコードを作ることになります。

区切り文字の設定

パンくずリストの区切り文字（>）は、スタイルシートの疑似要素を使って表示させたいと思います。下記がそのサンプルです。

ボタンで表示を切り替えてご覧ください。

つまり、今回のパンくずリストはliタグで作成します。

骨組みとなるphpコード

上記までの情報をもとに骨組みとなるソースコードを作ってみました。ここでは、パンくずリストを表示させる関数名を「breadcrumb」とします。

function breadcrumb() {
    $home = '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
 
    echo '<ul>';
    if ( is_front_page() ) {
    // トップページの場合
    }
    else if ( is_category() ) {
    // カテゴリページの場合
    }
    else if ( is_archive() ) {
    // 月別アーカイブ・タグページの場合
    }
    else if ( is_single() ) {
    // 投稿ページの場合
    }
    else if( is_page() ) {
    // 固定ページの場合
    }
    else if( is_search() ) {
    // 検索ページの場合
    }
    else if( is_404() ) {
    // 404ページの場合
    }
    echo "</ul>";
}

パンくずリストの一番左に表示させる「HOME」というテキストリンクは共通で表示させるものなので、変数にしました。

phpで変数を定義するときは、

$変数名 = '値';

という形になります。

今回は、「home」という変数名を使って下記のようにしました。

$home = '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';

これでecho $home;とすると「HOME」というテキストリンクが表示されます。

それでは、順番にパンくずリストの作り方を見ていきましょう。

トップページ

最初はトップページです。トップページではパンくずリストを表示させませんので、条件分岐のところには何も書きません。

if ( is_front_page() ) {
  // ここは空にする
}

以上でトップページはおわりです。

カテゴリページ

カテゴリページでパンくずリストを表示させるには、下記の２つのパターンについて考える必要があります。

親カテゴリがない場合
ホーム > カテゴリ
親カテゴリがある場合
ホーム > 親カテゴリ > 子カテゴリ

親カテゴリがない場合は、単純にthe_archive_title()で表示中のカテゴリ名を出力しておしまいです。でも、親カテゴリがある場合もあるので、その情報も取得する必要があります。そこで使うのがget_queried_object()という関数です。

get_queried_object()

get_queried_object()は、現在、表示中のページ情報が取得できる関数です。カテゴリアーカイブを表示中の場合は、カテゴリーに関する情報が取得できるので、これを使って親カテゴリの情報を取得します。

具体的には、

$cat = get_queried_object();

で現在、表示中のカテゴリアーカイブのオブジェクトを取得して、

$cat_id = $cat->parent;

で親カテゴリのカテゴリIDを取得します。

get_category()

get_category()は、カッコの中にカテゴリIDを入れることで、そのカテゴリの情報が取得できる関数です。

get_category_link()

この関数は、get_category_link(カテゴリID)という形で指定したカテゴリIDのURLを取得するために使用します。

array_unshift()

array_unshift()は配列の先頭に要素（ここではリストタグ）を入れるための関数です。ここでは、「子カテゴリ」から「親カテゴリ」の順番でリストが作られるので、このままだとパンくずリストの順番が逆になってしまいます。そのため、この関数を使って後から作られた親カテゴリのリストを先頭にもってきます。

foreach文

foreach文は配列の値（ここではカテゴリのリストタグ）を展開したいときに使います。

foreach(展開したい配列変数 as $value){
    echo $value;
}

このように使うと、配列の値が出力されます。

以上の関数を使って作成したコードがこちらです。

else if ( is_category() ) {
    $cat = get_queried_object();
    $cat_id = $cat->parent;
    $cat_list = array();
    while ($cat_id != 0){
        $cat = get_category( $cat_id );
        $cat_link = get_category_link( $cat_id );
        array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
        $cat_id = $cat->parent;
    }
    echo $home;
    foreach($cat_list as $value){
        echo $value;
    }
    the_archive_title('<li>', '</li>');
}

月別アーカイブ・タグページ

月別アーカイブページとタグページは一緒に扱います。

else if ( is_archive() ) {
    echo $home;
    the_archive_title('<li>', '</li>');
}

このようにすれば、リストタグで月別アーカイブ・タグページのタイトルが表示されます。

投稿ページ

投稿ページで表示させたいのは、

HOME > カテゴリ名 > ページタイトル

というパンくずリストでしたね。
でも、もし登録されているカテゴリに親カテゴリがある場合は、

HOME > 親カテゴリ名 > 子カテゴリ名 > ページタイトル

という形で表示させたいところです。そこで使うのがget_the_category()です。

get_the_category()

get_the_category()は、表示中の記事が登録されているカテゴリ情報を取得するための関数です。この関数を使うと、[0], [1], [2], …という形で記事に登録されたカテゴリが順番に格納された配列にアクセスできます。それを利用して記事が登録されているカテゴリIDを取得します。

その後、

カテゴリIDからURLを取得
カテゴリ名を取得
リストタグにして配列に追加
カテゴリIDから親カテゴリを取得
配列をリストタグとして出力

という手順でパンくずリストを作成します。

具体的な手順としては最初に

$cat = get_the_category();

という形で、get_the_category();を変数に代入します。

その後、その記事に最初に登録されているカテゴリ（つまり[0]）のカテゴリIDを変数に代入して取得します。

$cat_id = $cat[0]->cat_ID;

get_the_category関数の詳しい使い方については下記をご参照ください。

2018.07.22

WordPress｜get_the_category()を理解したい

この記事では、ずばりget_the_category()を理解したい方のための情報を網羅しようと思っています。 get_the_category()とは？ get_the_category()というのは記事が属しているあらゆるカテゴリ情報が取得でき...

isset()

isset関数は、isset(変数)という形で変数に値が入っているかを確認するための関数です。

if( isset(変数) ){
  TRUEの場合;
} else{
  FALSEの場合;
}

上記のようにif文と一緒に使われます。ここでは、最初に記事にカテゴリが登録されているかどうかを確認するためにisset関数を使います。

以上の関数を使って作成したのが下記のコードです。

else if ( is_single() ) {
    $cat = get_the_category();
    if( isset($cat[0]->cat_ID) ) $cat_id = $cat[0]->cat_ID;
    $cat_list = array();
    while ($cat_id != 0){
        $cat = get_category( $cat_id );
        $cat_link = get_category_link( $cat_id );
        array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
        $cat_id = $cat->parent;
    }
    foreach($cat_list as $value){
        echo $value;
    }
    the_title('<li>', '</li>');
}

固定ページ

固定ページは「HOME > ページタイトル」だけなので簡単です。

else if( is_page() ) {
    echo $home;
    the_title('<li>', '</li>');
}

検索ページ

検索キーワードを表示させるにはget_search_query()を使います。
「キーワード」の検索結果と表示させるためには下記のようにします。

else if( is_search() ) {
　echo $home;
  echo '<li>「'.get_search_query().'」の検索結果</li>';
}

404ページ

404ページは任意のテキストを表示させるだけなので簡単ですね。

else if( is_404() ) {
　echo $home;
　echo '<li>ページが見つかりません</li>';
}

アーカイブの余計なタイトルを削除する

最後に、パンくずリストを作成したときに、「カテゴリー:」「タグ:」「月別:」などアーカイブ名の前に表示される余計なタイトルを削除します。下記のコードをパンくずリストと一緒にfunctions.phpに追加しましょう。

add_filter( 'get_the_archive_title', function ($title) {
  if ( is_category() ) {
    $title = single_cat_title( '', false );
  } elseif ( is_tag() ) {
    $title = single_tag_title( '', false );
  } elseif ( is_month() ) {
    $title = single_month_title( '', false );
  }
  return $title;
});

パンくずリストを自作する方法まとめ

以上の手順をもって完成したコードが下記です。

// パンくずリスト
function breadcrumb() {
    $home = '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
  
    echo '<ul>';
    if ( is_front_page() ) {
        // トップページの場合
    }
    else if ( is_category() ) {
        // カテゴリページの場合
        $cat = get_queried_object();
        $cat_id = $cat->parent;
        $cat_list = array();
        while ($cat_id != 0){
            $cat = get_category( $cat_id );
            $cat_link = get_category_link( $cat_id );
            array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
            $cat_id = $cat->parent;
        }
        echo $home;
        foreach($cat_list as $value){
            echo $value;
        }
        the_archive_title('<li>', '</li>'); 
    }
    else if ( is_archive() ) {
    // 月別アーカイブ・タグページの場合
    echo $home;
    the_archive_title('<li>', '</li>');
    }
    else if ( is_single() ) {
    // 投稿ページの場合
    $cat = get_the_category();
        if( isset($cat[0]->cat_ID) ) $cat_id = $cat[0]->cat_ID;
        $cat_list = array();
        while ($cat_id != 0){
            $cat = get_category( $cat_id );
            $cat_link = get_category_link( $cat_id );
            array_unshift( $cat_list, '<li><a href="'.$cat_link.'">'.$cat->name.'</a></li>' );
            $cat_id = $cat->parent;
        }
        foreach($cat_list as $value){
            echo $value;
        }
        the_title('<li>', '</li>');
    }
    else if( is_page() ) {
    // 固定ページの場合
    echo $home;
    the_title('<li>', '</li>');
    }
    else if( is_search() ) {
    // 検索ページの場合
    echo $home;
    echo '<li>「'.get_search_query().'」の検索結果</li>';
    }
    else if( is_404() ) {
    // 404ページの場合
    echo $home;
    echo '<li>ページが見つかりません</li>';
    }
    echo "</ul>";
}
 
// アーカイブの余計なタイトルを削除
add_filter( 'get_the_archive_title', function ($title) {
    if ( is_category() ) {
        $title = single_cat_title( '', false );
    } elseif ( is_tag() ) {
        $title = single_tag_title( '', false );
    } elseif ( is_month() ) {
        $title = single_month_title( '', false );
    }
    return $title;
});

このコードをテーマのための関数 (functions.php)に追加した後、パンくずリストを表示させたい場所に下記のコードを入れれば完成です。

<?php breadcrumb(); ?>

最後までお疲れ様でした。

WordPressとデザインが学べるWebメディア