WordPress

【WordPress(ワードプレス)】「パンくずナビ」(Bread Crumb)でページ階層を表示する方法

2021年1月8日

 

こんにちは、イケゾーです。

WEBサイトを徘徊していると、いま自分がどの階層にいるのか分からなくなることはありませんか?

ページ数が増えると、サイト構成は複雑になりがちです。ユーザにページ階層を表示して分かりやすくする方法として「パンくずナビ」があります。

今回は、パンくずなびとは何か?から実際に設置するまでの手順を解説します。

 

この記事はこんな人におすすめ!

  • WordPressのパンくずナビって何?
  • WordPressのパンくずナビを設置したい

 

【WordPress(ワードプレス)】「パンくずナビ」(Bread Crumb)でページ階層を表示する方法

この記事では、ソースコードを実際に掲載して解説していきます。

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

「パンくずナビ」とは

WEBサイトは、以下図のように階層化して構成されています。

ユーザに対して、現在閲覧しているページの位置を表示するとともに、上位の階層へ移動することも可能にします。「パンくずリスト」とも呼ばれます。

ホームページ構成図

「パンくずナビ」とは、現在閲覧しているページの位置を階層化して表示、上位階層への移動を可能にするもの。

 

「パンくずナビ」(Bread Crumb)でページ階層を表示する方法

では、早速やっていきましょう。

 

この記事を読んでできること

  • トップページ以外にパンくずナビを表示します

 

プラグイン「Prime Strategy Bread Crumb」を有効化する

管理画面から「Prime Strategy Bread Crumb」をインストールし、有効化してください。

手順が不安な方はこちらの記事をご確認ください。

初めての「プラグインのインストール」
【WordPress(ワードプレス)】プラグインのインストール方法|初心者向けに丁寧解説

続きを見る

 

テンプレートを編集

次に、テンプレートを編集します。
パンくずナビを表示したいテンプレート、僕の場合は「header.php」を編集していきます。

front-page.php
<?php
if ( function_exists('bread_crumb') ):
  bread_crumb();
endif;
?>;

 

function_exists()

引数にしている関数が定義されているか確認するためのものです。プラグインが有効化されているかを確認します。

bread_crumb()

プラグインで定義されている関数です。この記述だけで、パンくずナビを自動生成されます。

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

 

まとめ

以上で、パンくずナビの設定ができました。ユーザのためにも必須の機能ですね。

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-WordPress

© 2021 IkezoooBlog