web技術メモ PR

【WordPress】パンくずリストを「Breadcrumb NavXT」で簡単に設置!

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

Webサイトで複数ページを閲覧してもらうとき、どこの階層のページにいるのかをパッと理解できる「パンクズリスト」を設置していると親切です。

「WordPress」サイトで、パンくずリストを簡単に設置できるプラグイン「Breadcrumb NavXT」を使用してみました。
設置方法をメモします。

「Breadcrumb NavXT」設置手順

  1. プラグイン「Breadcrumb NavXT」を追加する
  2. page.phpなど、パンクズを表示したい部分にコードを追加
  3. cssで見た目を整える

1.プラグイン「Breadcrumb NavXT」を追加する

WordPressの管理画面から「Breadcrumb NavXT」で検索して、プラグインを追加します。

Breadcrumbの設定画面

ほとんどデフォルトの状態で大丈夫そうですが、私は「パンくずの区切り」の部分と「ホームページパンくず」の部分を少し変更しました。

【参考】BreadcrumbNavXTドキュメンテーション

2.page.phpなど、パンクズを表示したい部分にコードを追加

テンプレートによって、パンクズを表示したい部分のphpが違うかもしれません。私の場合は、page.phpに以下のコードを追加しました。

3.cssで見た目を整える

2番目の項目までの作業が終わったら、一旦FTPでアップしてブラウザ表示をしてみます。
それを確認してから、cssで見た目を整えます。

私の場合は、周囲の余白とフォントサイズを変更しました。
これが出来たら、パンクズリスト設置完了です!

ABOUT ME
Resound Web Lab
Resound Web Lab 代表。 福岡県北九州市で、Web制作サポート・運営指導、女性の起業支援、カウンセリングをしています。 お客さま「らしさ」を引き出し、人とひと・人とモノを繋げていきます。 このサイトでは、Webの技術的な情報や、ご自身で情報発信をされる方に向けて、記事を更新しています。