Blogブログ

リッキー | 2023.5.2

コピペでOK！WordPressのプラグインを使わずにパンくずリストを表示させる実装方法

  • PHP
  • wordpress
  • コピペ
コピペでOK！WordPressのプラグインを使わずにパンくずリストを表示させる実装方法

今回は、WordPressのプラグインを使わずにfunction.phpから呼び出してパンくずリストを表示させる実装方法をご紹介していきます！

パンくずリストとは？

パンくずリストは、現在閲覧しているWebサイトのページの位置を、階層構造に準じたリンクのリストを記述したものです。

HOME＞記事タイトル

こんな感じで、ヘッダーの下あたりに表示されていることが多いです。

パンくずリストがあることで、検索エンジンのクローラーが、サイトの全体構造を把握しやすくなり、効率的なクローリングを期待できます。

パンくずリストの仕様

今回作成するパンくずリストの仕様は下記になります。

ページパンくずリスト
トップページ表示しない
固定ページHOME＞ページタイトル
投稿ページHOME＞カテゴリ名＞ページタイトル
カテゴリーページHOME＞カテゴリ名
アーカイブページHOME＞日時
タグページHOME＞タグ名
404ページHOME＞お探しのページは見つかりません

このパターンで条件分岐させて表示させていきます。

パンくずリスト実装コード

さっそく結論からお話すると、下記コードをコピペすると、先ほどの仕様にあったパンくずリストを作成することができます。

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;
    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>');
    }
    // 404ページの場合
    else if( is_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;
});

CSS

/* パンくずリスト */
ul{
    list-style: none;
  }
  li{
    display: inline;
  }
  li a{
    color: inherit;
    text-decoration: none;
  }
  li + li:before{
    content: ">";
    margin:.5em;
  }

表示させたい位置にテンプレートを追加

<?php breadcrumb(); ?>

あとは、スタイルシートでサイトデザインに合わせて、変更してみてください！

コードの解説

条件分岐コード

下記のコードに、パンくずリストを条件分岐で表示させるPHPのif文を書いていきます。

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

（条件）部分に下記の表の条件分岐タグを入れています。

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

上記の表の内容を基に作成した大枠のソースコードが下記になります。

パンくずを表示させる関数は「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() ) {
   
    }
// 404ページ
    else if( is_404() ) {
    
    }
    echo "</ul>";
}

区切り文字

パンくずリストの区切り文字（＞）は、スタイルシートの擬似要素を使って表示させています。

li + li:before{
	content: ">";
	margin:.5em;
  }

まとめ

今回は、WordPressのプラグインを使わずにfunction.phpから呼び出してパンくずリストを表示させる実装方法をご紹介していきました！

ページごとにパンくずリストを読み込む関数を追加するのも面倒だ！という方はheader.phpに追加することでヘッダーの関数を追加するだけなのでぜひ試してみてください！

以上、「コピペでOK！WordPressのプラグインを使わずにパンくずリストを表示させる実装方法」でした。

ありがとうございました！

この記事を書いた人

リッキー デザイナー

関連記事

ブログ一覧へ

Recommend愛されているブログ