プラグインは使わない!WordPressサイトに高品質なパンくずナビをコピペで設置する方法
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. プラグインは使わない!WordPressサイトに高品質なパンくずナビをコピペで設置する方法

最近の作業実績

  • 2022年10月18日不要になっていたコンテンツをサイト内から除去いたしました。
  • 2022年10月17日サイト内の画像が表示されない不具合を修正いたしました。
  • 2022年10月16日サイト内で発生した大量の404エラーを修正いたしました。
  • 2022年10月15日既存サイトの各所を簡単に更新できる機能を追加いたしました。
  • 2022年10月14日過去記事を定期的に自動ツイートする機能をテーマに実装いたしました。
  • 2022年10月13日サイト内の広告を一括管理できる機能をテーマに実装いたしました。
  • 2022年10月12日既存サイトのトップページを再構築いたしました。
  • 2022年10月11日クラシックエディターで管理されていたコンテンツをブロックエディターで再構築いたしました。
  • 2022年10月10日複数のサイトの更新情報を一括表示させる機能をテーマに実装いたしました。
  • 2022年10月09日WordPressの管理画面にオリジナルの管理ページを実装いたしました。
  • 2022年10月08日コンタクトフォーム7で構築されたフォームに確認画面とサンクスページを導入いたしました。
  • 2022年10月07日既存サイトのサーバー移管を担当いたしました。
  • 2022年10月06日フッターのレイアウトを再設計いたしました。
  • 2022年10月05日既存サイトのカラーを一括管理できる機能をテーマに実装いたしました。
  • 2022年10月04日新規ページを5ページ作成いたしました(デザイン込み)。
  • 2022年10月03日訪問者に閲覧履歴を表示する機能をテーマに実装いたしました。
  • 2022年10月02日ログインできなくなったWordPressを復旧いたしました。
  • 2022年10月01日オリジナルテーマの制作を担当いたしました。
  • 2022年09月30日破損していたテーマを修正いたしました。
  • 2022年09月29日アフィリエイト審査用のサイト立ち上げを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

プラグインは使わない!WordPressサイトに高品質なパンくずナビをコピペで設置する方法

この投稿は2022/07/21に加筆修正いたしました。

プラグインを使わずにWordPressサイトに高品質なパンくずナビをコピペで設置する方法をご紹介します。設置はコピペだけで実装可能です。興味のある方は3分間だけコンテンツを確認してみてください。

この記事は約 22 分で読めます。

今回はプラグインを使わず、高品質なパンくずナビを実装する方法をご紹介します。

WordPressのサイトにパンくずナビを設置しようとする場合、プラグインを使うことが多いかと思います。例えば、【Breadcrumb NavXT】がパッと思いつくのではないでしょうか?

私も【Breadcrumb NavXT】を使っていた時期がありました。
でも、今は使っていません。

とある案件でプラグインを使わずパンくずナビを実装してからは、プラグインを使うことはなくなりました。

パンくずナビは、プラグインを使わなくても簡単なコピペだけで実装可能です。
プラグインを使わずパンくずナビを実装したい方は、続きをご覧ください。

プラグインを使わずパンくずナビを実装する方法

プラグインを使わずパンくずナビを実装する方法をご紹介します。
実際にこのサイトでもこれから紹介する方法でパンくずナビを実装しています。

  • functions.phpにコードを追記する。
  • パンくずナビを設置する。
  • CSSでデザインを整える。

詳しく見ていきましょう。

手順1:functions.phpにコードを追記する

functions.phpに以下のコードをコピペしてください。
以下のコードは、2019/02/19にアップデートいたしました。

/* パンくずナビ */
function get_breadcrumb_list($include_category = 1, $include_tag = 1, $include_taxonomy = 1)
{
// ベースパンくず(サイト名など)
$base_breadcrumb = '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_home_url().'" itemprop="url"><span itemprop="title">HOME</span></a></li>';
$top_url = get_home_url(null,'/');
// ループ外対応
global $query_string;
global $post;
query_posts($query_string);
if (have_posts()) : while(have_posts()) : the_post();
endwhile; endif;
// クエリリセットする
wp_reset_query();

// ページ数を取得(ページ数(0の場合は1ページ目なので1に変更する))
if(get_query_var('paged') == 0): $page = 1; else: $page = get_query_var('paged') ; endif;

// 投稿・固定ページかつアタッチメントページ以外の場合
if(is_singular() && !is_attachment())
{
// 記事についているカテゴリを全て取得する
$categories = get_the_category();
// カテゴリがある場合に実行する
if(!empty($categories))
{
$category_count = count($categories);
$loop = 1;
$category_list = '';
foreach($categories as $category)
{
// 値が1だったら、URLにカテゴリーのタクソノミーを含めて変数に格納する。
if($include_category === 1)
{
$category_list .= '<a href="'.$top_url.esc_html($category->taxonomy).'/'.esc_html($category->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($category->name).'</span></a>';
}
// 値が指定されていないか1以外だったら、URLにカテゴリーのタクソノミーを含めないで変数に格納する。
else
{
$category_list .= '<a href="'.$top_url.esc_html($category->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($category->name).'</span></a>';
}
// ループの最後でない場合のみスラッシュ追加(複数カテゴリ対応)
if($loop != $category_count)
{
$category_list .= ' / ';
}
++$loop;
}
}
// カテゴリがない場合はNULLを格納する
else
{
$category_list = null;
}
// 記事についているタグを全て取得する
$tags = get_the_tags();
// タグがあれば実行する
if(!empty($tags))
{
$tags_count = count($tags);
$loop=1;
$tag_list = '';
foreach($tags as $tag)
{
// 値が1だったら、URLにタグのタクソノミーを含めて変数に格納する。
if($include_tag === 1)
{
$tag_list .= '<a href="'.$top_url.esc_html($tag->taxonomy).'/'.esc_html($tag->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($tag->name).'</span></a>';
}
// 値が指定されていないか1以外だったら、URLにタグのタクソノミーを含めないで変数に格納する。
else
{
$tag_list .= '<a href="'.$top_url.esc_html($tag->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($tag->name).'</span></a>';
}
// ループの最後でない場合のみスラッシュ追加(複数タグ対応)
if($loop !== $tags_count)
{
$tag_list .= ' / ';
}
++$loop;
}
}
// タグがない場合はNULLを格納する
else
{
$tag_list = null;
}
// タクソノミーを全て取得する
$taxonomies = get_the_taxonomies();
// タクソノミーがある場合に実行する
if(!empty($taxonomies))
{
$term_list = '';
$taxonomies_count = count($taxonomies);
$taxonomies_loop = 1;
foreach(array_keys($taxonomies) as $key)
{
// タームを取得
$terms = get_the_terms($post->ID, $key);
$terms_count = count($terms);
$loop = 1;
foreach($terms as $term)
{
// 値が1だったら、URLにタクソノミーを含めて変数に格納する。
if($include_taxonomy === 1)
{
$term_list .= '<a href="'.$top_url.esc_html($term->taxonomy).'/'.esc_html($term->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($term->name).'</span></a>';
}
// 値が指定されていないか1以外だったらURLにタクソノミーを含めないで変数に格納する。
else
{
$term_list .= '<a href="'.$top_url.esc_html($term->slug).'/" itemprop="url"><span itemprop="title">'.esc_html($term->name).'</span></a>';
}
// ループの最後でない場合のみスラッシュ追加(複数ターム対応)
if($loop != $terms_count)
{
$term_list .= ' / ';
}
++$loop;
}
// ループの最後でない場合のみスラッシュ追加(複数タクソノミー対応)
if($taxonomies_loop != $taxonomies_count)
{
$term_list .= ' / ';
}
++$taxonomies_loop;
}
}
// タクソノミーがない場合はNULLを格納する
else
{
$term_list = null;
}
}
// 基本パンくずリストを変数に格納する。
$breadcrumb_lists = $base_breadcrumb;
// ホームの場合
if(is_home())
{
}
// カスタム投稿タイプアーカイブの場合
elseif(is_post_type_archive())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_post_type_object( get_post_type() )->label).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_post_type_object( get_post_type() )->label).'の記事一覧</li>';
}
}
// カスタム投稿タイプ以外のアーカイブの場合
elseif(is_archive())
{
// 年アーカイブの場合
if(is_year())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年")).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年")).'の記事一覧</li>';
}
}
// 月アーカイブの場合
elseif(is_month())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年m月")).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年m月")).'の記事一覧</li>';
}
}
// 日アーカイブの場合
elseif(is_day())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年m月d日")).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_time("Y年m月d日")).'の記事一覧</li>';
}
}
// カテゴリの場合
elseif(is_category())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_cat_title('',false)).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_cat_title('',false)).'の記事一覧</li>';
}
}
// タグの場合
elseif(is_tag())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_tag_title('',false)).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_tag_title('',false)).'の記事一覧</li>';
}
}
// タクソノミー(カスタム分類)の場合
elseif(is_tax())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_term_title('',false)).'の記事一覧('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(single_term_title('',false)).'の記事一覧</li>';
}
}
}
// 投稿ページ
elseif(is_single())
{
// ページ数を取得(ページ数(0の場合は1ページ目なので1に変更する))
if(get_query_var('page') == 0): $page = 1; else: $page = get_query_var('page') ; endif;
// 通常投稿の場合
if(get_post_type() === 'post')
{
// カスタムフィールドの値を取得
$seo_title = esc_html(get_post_meta($post->ID, 'seo_title', true));

// カテゴリがある場合のみ追加
if(!empty($category_list))
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.$category_list.'</li>';
}

// 2ページ目以降の場合
if($page > 1)
{
// カスタムフィールドに値があったらその値を格納する
if(!empty($seo_title))
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.$seo_title.'</li>';
}
// カスタムフィールドに値がなかった場合
else
{
// ページが分割されている場合のタイトル取得
if(function_exists('get_current_split_string'))
{
$split_title = esc_html(get_current_split_string($page));
}
else
{
$split_title = null;
}
// ページが分割されている場合のタイトルがあった場合はそれを加える
if(!empty($split_title))
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_title()).'【'.$split_title.'】</li>';
}
// それ以外は(○ページ目)を加える
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_title()).'('.$page.'ページ目)</li>';
}
}
}
// 1ページ目の場合
else
{
// カスタムフィールドに値があったらその値を格納する
if(!empty($seo_title))
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.$seo_title.'</li>';
}
// カスタムフィールドに値がなかった場合
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_title()).'</li>';
}
}
}
// カスタム投稿の場合
else
{
// カスタム投稿名を取得
$custom_title = esc_html(get_post_type_object(get_post_type())->label );
// カスタム投稿のスラッグ名を取得
$custom_name = esc_html(get_post_type_object(get_post_type())->name);
// タームがある場合のみ追加
if(!empty($term_list))
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.$term_list.'</li>';
}
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_home_url().'/'.$custom_name.'" itemprop="url">'.$custom_title.'</a></li><li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">'.esc_html(get_the_title()).'</li>';
}
}
// 固定ページ
elseif(is_page())
{
if(is_page() && $post->post_parent){//子ページなら
$parent_id = $post->post_parent;
$parent_title = get_post($parent_id)->post_title;
$parent_url = get_page_link($post->post_parent);
$breadcrumb_lists .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$parent_url.'"><span itemprop="name">'.$parent_title.'</span></a><meta itemprop="position" content="2" /><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">'.esc_html(get_the_title()).'</span><meta itemprop="position" content="3" /></li>';
}
else{
$breadcrumb_lists .= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">'.esc_html(get_the_title()).'</span><meta itemprop="position" content="2" /></li>';
}
}
// 検索結果
elseif(is_search())
{
// ページ数が1より大きい場合(○ページ目)を追加して格納する
if($page > 1)
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">「'.esc_html(get_search_query()).'」で検索した結果('.$page.'ページ目)</li>';
}
// ページ数が1の場合は(○ページ目)はなしで格納する
else
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">「'.esc_html(get_search_query()).'」で検索した結果</li>';
}
}
// 404ページの場合
elseif(is_404())
{
$breadcrumb_lists .= '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">お探しのページは見つかりませんでした</li>';
}
else
{
$breadcrumb_lists = $base_breadcrumb;
}
// パンくずリスト成形
if(!empty($breadcrumb_lists))
{
$breadcrumb_lists = '<ul>'.$breadcrumb_lists.'</ul>';
}
return $breadcrumb_lists;
}

上記のコードは、「WordPressでプラグインを使わずにパンくずリストを実装する」で紹介されているコードをGoogleリッチスニペットに対応させたものです。

上記のコードは、サイトごとに修正する必要はありません。
そのままで、使用することができます。

手順2:パンくずナビを設置する

パンくずナビを設置したい箇所に以下のコードを記述してください。

<?php echo get_breadcrumb_list(); ?>

このコードを記述した箇所にパンくずナビが表示されます。

当サイトでは装飾の関係上、以下のように記述しています。

<div id="pan_out">
<div id="pan">
<?php echo get_breadcrumb_list(); ?>
</div>
</div>

コードを囲う要素は、自由に変更してかまいません。

手順3:CSSでデザインを整える

最後にCSSでパンくずナビのデザインを整えます。
ここでは、私のサイトで使っているCSSをそのままご紹介します。

当サイトでは、パンくずナビを以下のように設置しています。

<div id="pan_out">
<div id="pan">
<?php echo get_breadcrumb_list(); ?>
</div>
</div>

その上で、以下のようにCSSで装飾を行っています。

#pan_out {
width: 100%;
background: #ffffff;
margin-bottom: 50px;
border-bottom: 1px solid #dedede;
}
#pan {
width: 1100px;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}
#pan ul {
list-style-type: none;
overflow: hidden;
}
#pan ul li {
height: 50px;
line-height: 50px;
float: left;
}
#pan ul li:before {
content: ">";
margin: 0 10px;
}
#pan ul li:first-child:before {
content: none;
}

装飾はサイトデザインに合わせて変更してください。

まとめ

WordPressサイトに高品質なパンくずナビをコピペで設置する方法をご紹介しました。

もうプラグインを使う必要はありません。
コピペだけで高品質なパンくずナビを実装することができます。

プラグインを減らしたい方は試してみてください。

Wordpressのカスタマイズや不具合など
何かお困りのことはありませんか?

Wordpressに関連するあなたのお悩み、解決いたします。
次のような方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトに不具合が発生したが、直し方が分からない。不具合の修正経験が豊富な人に任せたい。
  • 既存サイトにWordPressを導入したいが、やり方が複雑で自分ではできそうにもない。経験が豊富な人に任せたい。
  • WordPressがハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA