WordPressでパンくずリストを自作!コピペでOK

WordPressでパンくずリストを自作!コピペでOK

これまでWordPressのオリジナルテーマを作成したが、パンくずリストを自作したので作成方法について解説する。

プラグインを使用しないのは余計な処理を読み込んでサイトスピードに影響を及ぼすことを考慮してのことだが、よくわからないロジックを組み込むのは単純に気持ち悪いと考えてのことだ。

この記事は、プラグインを使用せずパンくずリストを作成したいという人向けの解説記事である。

パンくずリスト作成プログラム(コピペOK)

プログラムはPHPのメイン処理、表示用HTML、デザインのCSVという形で分けて紹介する。

パンくずリスト作成するメインロジックはfunction.phpに作成する。

// パンくずリスト
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;
        if (get_query_var('monthnum') > 0) {
            echo '<li>' . get_query_var('year') . '年' . get_query_var('monthnum') . '月' . '</li>';
        } else {
            echo '<li>' . get_query_var('year') . '年' . '</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;
        }
        echo $home;
        foreach ($cat_list as $value) {
            echo $value;
        }
    } 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>";
}

パンくずリストを出力したい箇所には下記ロジックを埋め込んで、function.phpで作成した関数を呼び出してリスト表示をする。

    <div class="n-style-breadcrumb">
        <?php breadcrumb(); ?>
    </div>

デザインはこちら。区切り文字「content: “>”」で指定しているので任意で変更するとよい。

/* パンくずリスト設定 */
.n-style-breadcrumb ul {
    list-style: none;
    margin-bottom: 5px;
    padding-left: 0px;
}
.n-style-breadcrumb li {
    display: inline;
}
.n-style-breadcrumb li a {
    color: inherit;
    text-decoration: none;
}
.n-style-breadcrumb li+li:before {
    content: ">";
    margin-right: .3em;
}

パンくずリストの画面分岐パターン

ページの種類毎に表示するパターンが異なるためIF文で分岐している。この辺は作成したオリジナルテーマの画面構成で変更すると良いだろう。

プログラム例の分岐パターンはトップ、カテゴリ、アーカイブ、単一投稿ページ、検索結果ページ、404エラーページ6パターンに分岐する処理にしてある。作成したサイト構成によって処理を削っても良いだろう。

パンくずリスト作成におけるWordPress関数

使用している主なWordPress関数について説明する。多いので以下羅列するが必要な所だけ見てもらえば良いし、深く理解が不要なら読まなくてもよい。

  • get_bloginfo(‘url’): この関数は、指定した情報タイプに関連するサイト情報を取得します。ここでは、’url’ を指定しているため、サイトのホームURLを取得している。
  • is_front_page(): この関数は、現在のページがフロントページ(通常はサイトのトップページ)である場合にtrueを返却する。
  • is_category(): この関数は、現在のページがカテゴリーアーカイブページである場合にtrueを返却する。
  • get_queried_object(): この関数は、現在のページのメインオブジェクトを取得する。カテゴリーアーカイブページの場合、カテゴリーオブジェクトが返却される。
  • get_category(): この関数は、指定されたカテゴリーIDに関連するカテゴリーオブジェクトを取得する。
  • get_category_link(): この関数は、指定されたカテゴリーIDに関連するカテゴリーアーカイブページのURLを取得する。
  • the_archive_title(): この関数は、現在のアーカイブページのタイトルを出力する。ここでは、開始タグと終了タグを指定して、アーカイブタイトルをリスト要素の中に出力している。
  • is_archive(): この関数は、現在のページがアーカイブページ(カテゴリーアーカイブ、タグアーカイブ、月別アーカイブなど)である場合にtrueを返す。
  • get_query_var(): この関数は、指定されたクエリ変数の値を取得します。ここでは、’year’ と ‘monthnum’ を取得して、年と月の情報を利用する。
  • is_single(): この関数は、現在のページが投稿ページである場合にtrueを返却する。
  • get_the_category(): この関数は、現在の投稿のカテゴリーオブジェクトの配列を取得する。
  • is_page(): この関数は、現在のページが固定ページである場合にtrueを返する
  • the_title(): この関数は、現在の投稿または固定ページのタイトルを出力します。ここでは、開始タグと終了タグを指定して、タイトルをリスト要素の中に出力する。
  • is_search(): この関数は、現在のページが検索結果ページである場合にtrueを返却する。
  • get_search_query(): この関数は、検索フォームで入力された検索クエリを取得する。
  • is_404(): この関数は、現在のページが404エラーページ(存在しないページにアクセスされた場合のエラーページ)である場合にtrueを返却する。

パンくずリストとは

パンくずリストとは、現在のページの位置をサイト内の階層構造で指名したものである。サイト内のユーザーの利便性向上のためつけるものであるが、ブログサイトの場合はサイト内の他記事を読んでもらいPV向上には欠かせないアイテムだ。

そのためたいていのWebページにはたいてい備わった機能なので、WordPressでオリジナルテーマを作成する場合は付けておくことをオススメする。

パンくずリストはわざわざ自作せずともプラグインで簡単に設定することも可能だが、プラグインはどんな処理をしているか分からない気持ち悪さと、余計なファイル読み込みが発生する可能性があるため、オリジナルテーマを作成する場合はパンくずリストもDIYしてしまうのが良い。

パンくずリスト自作まとめ

パンくずリスト作成方法について紹介した。基本的にコピペで動かしてみてから独自のカスタマイズを加えてみることをオススメする。

コピペだけじゃ何も面白くも無いので是非やってみて欲しい。結局は自分で考えて作るのが良い。

パンくずリスト自作も結局はやるやつはやるし、やらないやつはやらない。