3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Wordpressでパンくずリストを実装(プラグインなし)

Last updated at Posted at 2022-12-19

私がサイト構築する際に、使用している「パンくずリスト」です。

プラグインで簡単に実装は出来るのですが、お客様のサーバ環境によって、PHPのバージョンが古くプラグインが実装できない場合に重宝しています。
テーマファイルの別ファイルとして保存しているので、テーマさえ適用できれば、すぐに実装できる手軽さもあります。

ファイルはテーマファイルフォルダ内にfnc-bredcrumb.phpとしてfncフォルダへ保存して、functions.phpget_template_part('fnc/fnc-bredcrumb');を記述し、パンくずリストを使うテーマファイルでoutput_breadcrumb();で呼び出します。
※汎用性の高いファイルは、fncフォルダへ別ファイルとして保存し、functions.phpで読み込んでいます。

このデータは、特殊なページを想定していないので、カスタム投稿やタームによって表示を変えたい場合は、elseifで追加してください。
デザインが合えば、「HOME」の部分をFont Awesomeのアイコンや画像にしても良いですね。

このファイルを実装したら、CSSを適用するのを忘れずに。
divで囲まなくても良いように、ul.breadcrumbを付与しているので、スタイルも当てやすいかと。
不要な場合は、下記コード内の3行目のechoclass="breadcrumb"を削除してください。

/////////////////////////////
//  パンくずリスト
/////////////////////////////
function output_breadcrumb() {
    $home = '<li><a href="' .get_bloginfo('url'). '">HOME</a></li>';
    echo '<ul class="breadcrumb">';

    //トップページの場合
    if(is_home() || is_front_page()) {
        //何も表示しない

    } elseif(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_title('<li>','</li>');

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

    } elseif(is_single()) {
         echo $home;

        $categories = get_the_category();
        if($categories) {
            echo '<li><a href="' . get_category_link( $categories[0]->term_id ) . '">' . $categories[0]->name . '</a><i class="fa-solid fa-arrow-right"></i></li>';
        }
        the_title('<li>','</li>');

    } elseif(is_page()) {
        global $post;
        $parent_id = $post->post_parent;
        $parent_title = get_post($parent_id)->post_title;

        if(is_page() && $post->post_parent) {
            echo $home;
            echo '<li><a href="' .get_permalink($parent_id). '">' .$parent_title.'</a></li>';
            echo the_title('<li>', '</li>');
        }else{
            echo $home;
            echo the_title('<li>', '</li>');
        }
    
    } elseif(is_search()) {
        echo $home;
        echo '<li>「' .get_search_query(). '」の検索結果</li>';
    
    } elseif(is_404()) {
        echo $home;
        echo '<li>404 ページが見つかりません</li>';
    }

    echo '</ul>';
}

簡単な条件分岐でできてしまうので、自分だけのパンくずリストを用意しておくのも良いかもしれません。

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?