ページトップエリア、タイトル下に表示されるパンくずリストを作ります。
1.Breadcrumb NavXTを追加
パンくずリストは「Breadcrumb NavXT」というプラグインで作ります。
管理画面 > プラグイン > 新規追加の画面を開きます。 右上の検索窓に「Breadcrumb NavXT」と入力してプラグインを検索し、インストール＆有効化を行ってください。
Breadcrumb NavXT公式ページによるとBreadcrumb NavXTのインクルードタグはbcn_display() もしくは bcn_display_list()と紹介されています。
今回はbcn_display() で呼び出してみましょう。
下記のコードを、パンくずリストの<ol>タグの中に書いてください。
<?php
if (function_exists('bcn_display')) :
bcn_display();
endif;
?>
index.php
ブラウザで表示を確認してみます。
「マイ・ポートフォリオ」という文字が出ました。
※表示されたテキストは管理画面の設定>一般設定ページで“サイトのタイトル”欄に登録されているものです。初期設定によって異なる場合があります。
2.Breadcrumb NavXTの設定
出力されたパンくずリストに、Bootstrapのクラスを追加しましょう。 前回のページネーションとは違い「Breadcrumb NavXT」はプラグインの設定ページで出力するタグの設定が出来ます。cssを書くことを考えたら便利ですね！
では、管理画面の左メニューから設定>Breadcrumb NavXTを開いてください。 少しスクロールダウンすると下図のように出力の設定箇所があります。
※メニューが表示されない方は後記の【補足】をご確認ください。
この記述の冒頭と末尾に、htmlを組んだ時に使った<li class="breadcrumb-item"> と </li>を加えましょう。
フロントページはサイトタイトルではなく「HOME」にしたいので、その部分も変更します。
ページ最下部にある「変更を保存」ボタンをクリックして保存。 ブラウザで表示を確認してみます。
cssが適応されたことで字間があき、HOMEと表示されるようになりました。
図のように表示されたら、index.phpに書いていた<li>タグ部分は削除してください。
↓
他のページでも同様に表示されるよう、「一般」以外のタブも設定しましょう。
それぞれ、冒頭と末尾に<li class="breadcrumb-item"> と </li>を入れてください。
index.phpは現在フロントページとして扱われていますので、パンくずリストがの二階層目以降の表示は分かりません。 CSSが効いているかは、後程、別のページを作った時に確認します。
【補足】
2021年12月19日に行われたアップデートで、「Breadcrumb NavXTの管理画面が開けなくなる（アクセス権がつかなくなる）」という問題が報告されています。
functions.phpに以下のコードを貼り付けることで、対応できます。 開発者が修正するとコメントされているので、functions.phpの追記に不安がある方は、パンくずリストの設定をスキップして進めていただいても構いません。
/* --------------------------------
/ Breadcrumb NavXTの設定画面を開く
-------------------------------- */
function add_bcn_manage_options_to_admin() {
// gets the administrator role
$role = get_role( 'administrator' );
// would allow the administrator to manage breadcrumbs. Fix needed due the conflict in Breadcrumb NavXT version 7 with some other plugin.
$role->add_cap( 'bcn_manage_options' );
}
add_action( 'admin_init', 'add_bcn_manage_options_to_admin');
確認用ファイルについて
ここまでのレッスン作成分までが入ったテーマディレクトリを「レッスン素材一覧」にアップロードしています。
画像フォルダは含まれておりませんので、WordPressでカテゴリーや記事を作成するのレッスンでダウンロードしたimgフォルダを移してご利用ください。