「Twenty Seventeen」にパンくずリストをプラグインで設置します。
プラグインをインストール
プラグイン「Breadcrumb NavXT」をインストールし、有効化する。
phpファイルにコードを記述
パンくずリストを表示したいページのphpファイルにコードを記述する。
投稿ページに設置したい場合は、single.php
固定ページに設置したい場合は、page.php
子テーマに上記のphpファイルがない場合には、レンタルサーバーのファイル管理画面にアクセスし、自分のドメイン名＞wp-content＞themes＞「twentyseventeen」のフォルダから、必要なphpファイルを「twentyseventeen-child」ファルダにコピーする。
外観＞テーマエディター＞テーマの編集 右側のタブで「個別投稿ページ（page.php）＝固定ページ」または「投稿ページ（single.php）」を選択し、リストを表示したい位置に以下のコード（2020年11月の最新コード）をコピペする。
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>このサイトでは、ページタイトル、投稿日の上に表示させたかったので
固定ページは23行目
<?php
while ( have_posts() ) :
の上に設置
投稿ページは18行目
<?php
// Start the Loop.
while ( have_posts() ) :
の上に設置
最新のコードは「Breadcrumb NavXT」の「6.Basic Usage」
Breadcrumb NavXT 設定
設定＞一番下の「Breadcrumb NavXT」を選択
（プラグイン＞インストール済みプラグイン＞「Breadcrumb NavXT」の設定をクリックでも同じ）
ホームページをサイト名からHomeに変更
「一般」タブから「ホームページのテンプレート（ホームを示すパンくず用テンプレート）」のコードを修正する。
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current>
<span property="name">Home</span></a><meta property="position" content="%position%"></span><span property=”name”>%htitle%</span> サイト名になっている
<span property=”name”>Home</span> Homeに変更
<span property=”name”><i class=”fas fa-home”></i> Home</span> 家マーク付き
※家マークをつけるには「アイコンフォント」を利用する。
アイコンフォントの利用方法はこちら
下までスクロールし、左下の「変更を保存」をクリックし、反映させる。
ホームページ（Home）の下の階層に、フォルダのアイコンをつける
「投稿タイプ」タブから「投稿テンプレート」と「固定ページテンプレート」それぞれコードを以下のように修正する。
<span property=”name”>%htitle%</span> 部分にアイコンフォントのコードを加える。
<span property=”name”><i class=”fas fa-folder-open”></i>%htitle%</span>
投稿テンプレートの例 ↓ 開いたフォルダのアイコンを入れた。
<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name"><i class="fas fa-folder-open"></i>%htitle%</span></a><meta property="position" content="%position%"></span>下までスクロールして左下の「変更を保存」をクリックし、反映させる。
パンくずリストの表示位置調整
CSSでデザイン調整
パンくずリストと下の投稿日の間が狭いので間隔を15px開ける。
外観＞テーマエディター＞テーマの編集画面、右側のタブで「スタイルシート」を選択。
以下のコードを貼り付ける。
/* パンくずリストの表示位置調整 */
div.breadcrumbs {
margin-bottom: 15px;
}表示中の記事タイトルをパンくずリスト末尾から削除
パンくずリストに現在表示中の記事タイトルが表示されるのは、重複感がある。
また、トップ記事の場合はHomeだけが表示されて違和感があるので、これらを非表示にする。
外観＞テーマエディター＞テーマの編集画面、右側のタブで「テーマの関数（functions.php）」を選択。
以下のコードを貼り付ける（ ?> の前に）。
function foo_pop($trail)
{
{
if ( is_single() || is_page() || is_front_page()) {
array_shift($trail->trail);
if (count($trail->trail) < 2) {
array_shift($trail->trail);
return;
}
}
}
}
add_action('bcn_after_fill', 'foo_pop');
以上です。
Other Contents
1-01 小テーマ の作成
1-02 基本構造とデフォルトのカスタマイズについて
1-03 ホームページ設定やテーマオプションが表示されない
2-01 フッター に自分のコピーライトを表記する
2-02 アドセンス審査コードの貼り付け
2-03 スマホ表示でハンバーガーメニューを上部固定
2-04 スマホ表示でハンバーガーメニューの文字を消す
2-05 フロントページのセクション数を変更
2-06 特定のブロックにだけ背景色をつける
2-07 「モデレートしてください」メールを止める
2-08 見出しのデザイン変更する
2-09 パンくずリストを設置
2-10 アイコンフォントを利用する
2-11 任意の画像にのみ枠線をつける