Breadcrumb NavXTの使い方ーWordPressプラグイン【初心者向け】

WordPressプラグインの解説記事。WordPressのプラグインBreadcrumb NavXTを使用すると、サイト内での現在位置を表示するパンくずリストを追加することができます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

WordPressのプラグインの使い方を紹介する記事です。

WordPressの投稿や固定ページにパンくずリストを追加・表示してくれるプラグイン、Breadcrumb NavXTの使い方について解説していきます。

なお本記事は、TechAcademyのWordPressオンラインブートキャンプの内容をもとに紹介しています。

 

Breadcrumb NavXTとは

WordPressのプラグインBreadcrumb NavXTを使用すると、サイト内での現在位置を表示するパンくずリストを追加することができます。

SEO的にもどこに何のページがあるのか正確に伝えることができます。

 

インストールと設定

このプラグインは、管理画面から「プラグインを検索」してインストールもできますし、プラグイン公式サイトからダウンロードすることも可能です。

インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。

 

有効化したら、次に左メニューの「設定」「Breadcrumb NavXT」を選択します。

bcn_p_1

Breadcrumb NavXTの設定画面です。設定内容は設置後に変更しても反映されます。

bcn_p_2

「投稿タイプ」タブではパンくずリスト内にカテゴリーやタグなどを表示させるかを選択することができます。

bcn_p_3

 

[PR] WordPressで挫折しない学習方法を動画で公開中

「テーマの編集」を使用してパンくずリストを設置する

WordPress管理画面の「テーマの編集」から指定されたコードを挿入してパンくずリストをサイト内に追加する方法です。

左メニューの「外観」から「テーマの編集」を選択します。

bcn_p_4

以下のコードを、パンくずリストを表示させたい箇所に挿入します。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
  <?php if(function_exists('bcn_display'))
  {
   bcn_display();
  }?>
</div>

・このコードはwordpress.orgにあるBreadcrumb NavXTプラグインページの「インストール」の項目に表記されています。
・編集するファイルやコードを挿入する箇所は、各テーマによって異なります。
bcn_p_5

今回は各記事画面の上部にパンくずリストを表示するために単一記事の投稿 (single.php)を以下のように編集しています。
コードを追加したら一番下の「ファイルを更新」をクリックします。

※「テーマの編集」によってWordPressのサイトが表示されなくなったり、管理画面に入れなくなった場合はFTPクライアントを使用してテーマファイルを上書きすることで元の状態に戻すことができます。

bcn_p_6

記事の上部にパンくずリストが表示されました。

各項目をクリックすることでその場所に移動することができます。

bcn_p_8

 

ウィジェットを使用してパンくずリストを追加する

Breadcrumb NavXTはウィジェットを使用することでもパンくずリストをサイトに組み込むことができます。
「テーマの編集」でコードを追加するよりも簡単です。

今回はTwenty Fourteenテーマを使用します。

bcn_p_10

管理画面左メニューの「外観」から「ウィジェット」を選択します。

bcn_p_11

「Breadcrumb NavXT」の項目を表示させたい場所にドラッグ&ドロップで移動させます。ここではサイドバーの一番上に設置しています。

bcn_p_12

各項目を設定して「保存」をクリックします。

bcn_p_13

サイドバーにパンくずリストが表示されました。

リストの表示位置はウイジェットの項目を並び替えるだけでいつでも変更が可能です。

[お知らせ]TechAcademyでは、WordPressを使ってカスタマイズしたオリジナルサイトを構築できるWordPressオンラインブートキャンプを開催しています。期間中の8週間は現役エンジニアのメンターが毎日学習をサポートするので、独学よりも効率的に学ぶことができます。