MENU

    WordPressオリジナルテーマ制作手順⑦（パンくずリスト編）

    広告
    WEB制作

    今回はWordPressオリジナルテーマの「パンくずリスト」の制作手順を解説します。
    これまでに以下の作業を行いました。

    本記事では制作手順だけではなく、パンくずリストの基礎知識も解説しています。
    「運営しているWebサイトにパンくずリストを設置したい」と考えている方は最後までご覧ください。

    目次

    そもそもパンくずリストとは何？

    最初にパンくずリストの基礎知識を解説します。

    パンくずリストとは、Webサイトに訪問した人が開いているページを表示する仕組みです。
    以下のようにブログ記事を開いている場合では、以下のようにヘッダー下辺りに表示される場合が大半です。

    パンくずリストは内部SEOに有効ですし、Webサイト訪問者にとってもパンくずリストは有効です。
    Webサイトで記事コンテンツなどを発信している場合では、基本的にWebサイト訪問者は下層ページコンテンツからWebサイトに入ってくる傾向が見られます。

    その時に「自分は今Webサイトのどこにいるのか」が把握しやすくなるだけではなく、カテゴリーから他のコンテンツに誘導できて、Webサイトの回遊性が向上します。

    どんなパンくずリストを作りたいか？

    パンくずリストの制作手順を解説する前に、やっておきたいことがあります。
    それは「どんなパンくずリストを作りたいか？」です。

    以下にパンくずリスト考察例をまとめました。

    • 検索ページは「HOME > 検索 :（検索ワード）」と表示させたい
    • トップページにはパンくずリストは不要
    • タグページは「HOME >（タグ名）」と表示させる
    • 月別アーカイブページは「HOME >（日時）」と表示させる
    • 投稿記事ページは「HOME >（カテゴリー名）>（記事タイトル）」と表示させたい
    • カテゴリーページは「HOME>（カテゴリー名）」と表示させる
    • 404ページは「HOME> ページが見つかりません」と表示させる
    • 添付ファイルページは「HOME>（記事タイトル）>（ファイルの名前）」と表示させる
    • 固定ページは「HOME>（固定ページタイトル）」と表示させたい

    これらはあくまでも一例です。
    Webサイトの開発者やWebサイトを訪問する方の属性などでも変わってくると思います。

    そうしたことも踏まえて、Webサイト訪問者がストレスを感じないようなパンくずリストを制作することが重要なのです。

    パンくずリストの制作手順

    ここからは、パンくずリストの制作手順を解説していきます。

    mytheme_breadcrumb()関数をfunctions.php内に制作

    functions.php内にパンくずリストを呼び出す「mytheme_breadcrumb()」関数を作って、それぞれのページから読み込む方法に設定します。

    トップページにパンくずリストを表示させたくない場合では、「if ( !is_front_page() && !is_home() )」 と記述すれば大丈夫です。

    functions.php
function mytheme_breadcrumb() {
if ( !is_front_page() && !is_home() ) :
endif;
}

    このように記述すると、トップページからパンくずリストを呼んだ場合に表示されません。
    しかしながら、「トップページから呼び出さなければいい」考えもあるかもしれません。

    その場合には、条件分岐を使うか使わないかは任意です。

    トップページへのリンクと区切り文字指定

    続いては、トップページへのリンクとそれぞれのページの区切り文字指定の制作です。
    「$sep」には区切り文字に使いたい文字を代入しましょう。

    $sep = ‘>’;
echo ‘<a href=”‘.get_bloginfo(‘url’).'” >ホーム</a>’;
echo $sep;

    この状態で実行すると、以下のように表示されます。

    固定ページ・投稿記事ページ・添付ファイルページの記述

    固定ページや投稿記事ページ、添付ファイルページタイトルは、「the_title();」で取得出力できます。
    そのため、まとめて記述して問題ありません。

    全カテゴリーを取得

    最初に全カテゴリーを取得します。

    if( is_singular() ) {
if ( is_single() ) {
the_category(‘, ‘);
echo $sep;
}
the_title();
}

    それぞれのコードを詳しく解説します。

    1行目の「is_singular()」は閲覧しているページが投稿記事ページや固定ページ、添付ファイルページだった場合の条件分岐に使います。

    2行目〜5行目で閲覧ページが投稿記事ページだった場合に、カテゴリー名と区切り文字を表示するコードです。

    6行目で閲覧ページタイトルを表示して、投稿記事ページの場合だけはカテゴリー名を表示します。
    ※固定ページの場合はタイトルだけ。

    区切り文字とトップページリンクは制作したので、それらと合わせて実行すると以下のように表示されます。
    ※投稿記事ページで実行した場合

    この方法が一番簡単ですが、この方法は記事が属するカテゴリーが全表示されてしまいます。

    get_the_category

    「get_category_parents()」は、簡単にパンくずリストが制作できて便利です。
    しかしながら、自由なタグが生成されず不便な部分もあります。

    そのため、「get_the_category()」を使う方法を解説します。

    function mytheme_breadcrumb() {
$sep = ‘>’;
echo ‘<li><a href=”‘.get_bloginfo(‘url’).'” >HOME</a></li>’;
echo $sep;
if( is_singular() ) {
if ( is_single() ) {
$cats = get_the_category();
if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
$cat_list = array();
while ($cat_id != 0){
$cat = get_category( $cat_id );
$cat_link = get_category_link( $cat_id );
array_unshift( $cat_list, ‘<a href=”‘.$cat_link.'”>’.$cat->name.'</a>’ );
$cat_id = $cat->parent;
}
foreach($cat_list as $value){
echo ‘<li>’.$value.'</li>’;
echo $sep;
}
}
the_title(‘<li>’, ‘</li>’);
}
}

    それぞれのコードを詳しく解説します。

    7行目でget_the_category()を使って、投稿記事ページのカテゴリーを取得しています。
    8行目は「isset()」を使って、「$cats[0]->term_id」がNULLでない場合に「$cat_id」に「$cats[0]->term_id」を代入します。

    9行目はループに入る前に配列を使う宣言をしています。
    10行目は「$cat_id」が0でない場合(カテゴリーが存在する)場合にループを実行しています。

    11行目は「get_category( $cat_id )」で、カテゴリーIDからカテゴリー情報を取得しています。
    12行目は「get_category_link( $cat_id )」で、カテゴリーIDからカテゴリーページリンクを取得しています。

    13行目は「array_unshift()」を使って、ループ前に宣言した配列の一番前にカテゴリーページへのリンクを入れています。
    14行目は親カテゴリーIDを$cat_idに代入しています。

    16行目〜19行目で配列に入れたリンクをliタグ付きで出力しています。

    以下が生成されたコードです。

    <li><a href=”http://url.local” >HOME</a></li>
>
<li><a href=”http://url.local/category/親カテゴリー/”>プログラミング・Web</a></li>
>
<li><a href=”http://url.local/category/親カテゴリー/子カテゴリー/”>WordPress</a></li>
>
<li>記事タイトル</li>

    この記述の効果でliタグ付きが生成されました。
    ※この場合は「olタグ」「ulタグ」から呼び出す必要があります。

    get_category_parents

    この方法は親子関係がしっかりと表示されます。
    以下のコードは投稿記事ページで実行した場合です。

    if( is_singular() ) {
if ( is_single() ) {
$cat = get_the_category();
echo get_category_parents($cat[0], true, $sep);
}
the_title();
}

    上記のコードを記述すると、以下のように表示されます。

    以下は生成されるコードをまとめました。

    <a href=”http://url.com” >HOME</a>
>
<a href=”http://url.com/category/親カテゴリー/”>親カテゴリー名</a>
>
<a href=”http://url.com/category/親カテゴリー/子カテゴリー/”>子カテゴリー名</a>
>
記事タイトル

    それぞれのカテゴリーが「aタグ」に入っています。

    get_queried_object

    「get_queried_object()」を使って、現在のカテゴリー情報取得後に親IDを取得します。

    現在のカテゴリーからの情報取得、または現在の親カテゴリーから情報取得する方法があります。
    ちなみに、投稿記事ページで制作したコードとほぼ同じです。

    function mytheme_breadcrumb() {
$sep = ‘>’;
echo ‘<li><a href=”‘.get_bloginfo(‘url’).'” >HOME</a></li>’;
echo $sep;
if ( is_category() ) {
$cats = get_queried_object();
$cat_id = $cats->parent;
$cat_list = array();
while ($cat_id != 0){
$cat = get_category( $cat_id );
$cat_link = get_category_link( $cat_id );
array_unshift( $cat_list, ‘<a href=”‘.$cat_link.'”>’.$cat->name.'</a>’ );
$cat_id = $cat->parent;
}
foreach($cat_list as $value){
echo ‘<li>’.$value.'</li>’;
echo $sep;
}
}
if ( is_archive() ) the_archive_title(‘<li>’, ‘</li>’);
}

    404ページ

    ページが見つからなかった場合の表示です。

    if( is_404() ) echo 'ページが見つかりません';

    検索ページ

    検索ページのパンくずリストは以下のように記述しましょう。

    f( is_search() ) echo '検索 : '.get_search_query();

    この記述で検索ワードが出力される仕組みです。

    まとめ

    今回はWordPressオリジナルテーマのパンくずリストの制作手順を解説しました。

    パンくずリストは「Breadcrumb NavXT」というプラグインでも設置できます。
    ただ、今回解説したような自作のパンくずリストは、カスタマイズ性に優れています。

    今回解説した内容を参考にしながら、パンくずリストを自作してはいかがでしょうか？

    次回は、Wordpressオリジナルテーマの「個別記事ページ」の制作手順を解説します。

    WEB制作
    WordPress WordPressオリジナルテーマ制作手順 ワードプレス
    よかったらシェアしてね！
    • URLをコピーしました！
    • URLをコピーしました！
    目次