【WordPress】階層が2つ以下のサイトへ簡単にパンくずナビを自作する方法

こんにちは、けいすけです。

当サイトでは、最近までプラグインを使ってパンくずナビを実装していたのですが、自作のパンくずナビに変更したので、メモしておこうと思います。

完成したコード

最初に完成したコードを示しておきます。こちらをfunctions.phpに記載します。

    
// パンくずリスト
function breadcrumb() {
    if ( ! is_front_page() ) {
        echo '<ul>';
        echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
        if ( is_archive() ) {
            the_archive_title('<li>', '</li>');
        } else if ( is_single() ) {
            $category = get_the_category();
            $category_name = $category[0]->cat_name;
            $category_id = $category[0]->cat_ID;
            $category_link = get_category_link( $category_id );
            echo '<li><a href="'.$category_link.'">'.$category_name.'</a></li>';
            the_title('<li>', '</li>');
        } else if ( is_page() ) {
            the_title('<li>', '</li>');
        } else if ( is_search() ) {
            echo '<li>「'.get_search_query().'」の検索結果</li>';
        } else if ( is_404() ) {
            echo '<li>ページが見つかりません</li>';
        }
        echo '</ul>';
    }
}

// アーカイブタイトルの前に出力されるテキストを非表示
add_filter( 'get_the_archive_title', function($title) {
    if ( is_category() ) {
        $title = single_cat_title('', false);
    } else if ( is_tag() ) {
        $title = single_tag_title('', false);
    } else if ( is_month() ) {
        $title = single_month_title('', false);
    }
    return $title;
});
    

実装方法

実装の考え方は、次の通りです。

なお、今回は、親カテゴリがある場合については記載していません。現在、当サイトでは、すべてのページで階層が2階層までしかないため、最低限の実装で済んでしまうからです。

親カテゴリがある場合についての実装は、記事が増えてきて、カテゴリを細かく分ける必要が出てきたときに、行おうと思います。

ページの種類毎に表示方法を変える

パンくずナビは、トップページ以外で表示させます。

パンくずナビを表示する場合は、最初にトップページへのリンクを用意します。

続いて、それぞれのページの種類毎に表示の仕方が異なるので、条件分岐します。

ここで、それぞれの関数の簡単な説明は、以下の通りです。

    
function breadcrumb() {
    if ( ! is_front_page() ) {
        echo '<ul>';
        echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
        if ( is_archive() ) {
            // ここにアーカイブページの場合の処理を記載
        } else if ( is_single() ) {
            // ここに個別投稿ページの場合の処理を記載
        } else if ( is_page() ) {
            // ここに固定ページの場合の処理を記載
        } else if ( is_search() ) {
            // ここに検索ページの場合の処理を記載
        } else if ( is_404() ) {
            // ここに404 Not Foundページの場合の処理を記載
        }
        echo '</ul>';
    }
}
    

アーカイブページの場合

アーカイブページの場合は、アーカイブのタイトルを表示させます。

    
if ( is_archive() ) {
    the_archive_title('<li>', '</li>');
}
    

個別の投稿ページの場合

個別の投稿ページの場合は、カテゴリーを表示してからページタイトルを表示させます。

    
else if ( is_single() ) {
    $category = get_the_category();
    $category_name = $category[0]->cat_name;
    $category_id = $category[0]->cat_ID;
    $category_link = get_category_link( $category_id );
    echo '<li><a href="'.$category_link.'">'.$category_name.'</a></li>';
    the_title('<li>', '</li>');
}
    

固定ページの場合

固定ページの場合は、ページのタイトルを表示させます。

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

検索ページの場合

検索ページの場合は、何の検索結果か分かるような表示をさせます。

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

404 Not Foundページの場合

404 Not Foundページの場合は、ページが見つからないことを表示します。

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

アーカイブタイトルの前に表示されるテキストを非表示にする

このままだと、アーカイブタイトルの前にテキスト（「カテゴリー:」「タグ:」「月別:」）が表示されてしまうので、functions.phpに次のように記載して非表示化します。

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

パンくずナビを表示

最後に、パンくずナビを表示したいところへ、以下の通りに記載します。

    
<?php breadcrumb(); ?>
    

まとめ

お疲れさまでした。今回は、WordPressでパンくずナビを実装する方法について紹介しました。

パンくずナビは、ページの種類毎に表示方法が異なります。

また、今回扱いませんでしたが、親カテゴリがある場合については、さらに条件分岐が必要になるのでもっと複雑になります。