WordPress Salient パンくずリストの導入

パンくずリスト、好きですか？

ウェブサイトによくある
「TOP > すごいカテゴリー > イケてる記事」
みたいな階層構造を示しているあれです。便利ですね。

僕は特に好きでも嫌いでもないです。

人が見て記事のカテゴリーなどがわかりやすいだけでなく、検索エンジンがサイトをクローリングするときにも都合がよくてSEO的にも良いらしいです。

WordPressサイトにパンくずリストを入れたときの業務メモみたいなものを記事にしました。

プラグイン選定

パンくずリストを実現するプラグインは、「breadcrumb」で検索すると無数に出てきます。

今回の扱うWordPressサイトは、テーマに「Salient」を使っていたのですが、導入してもテーマとの相性が悪く動かない（表示されない）プラグインなどもありました。

プラグインの設定画面ぽちぽちするだけで使えそうな良さげなやつとして、「Yoast SEO」というものを見つけました。

懸念があったので恐る恐るインストール→有効化したのですが、案の定「All In One SEO」と競合している旨の通知がぴょこぴょこと出てきました。
ファイルの編集を行うことなく自動的にパンくずリストを出してくれるため、大変便利なプラグインでしたが、SEO関連で意図しない誤動作や面倒な副作用が発生すると困るため、やむなく不採用となりました。

仕方がないので、人気の高い別のプラグインである「Breadcrumb NavXT」を使うことにしました。

後述する理由から、ショートコードやスニペットを埋め込む形式はメンテナンス面でかなり面倒な気配がするので避けたかったのですが……仕方ないということにします。

プラグインの設定

「Breadcrumb NavXT」は、WordPressのheader.phpにスニペットを追記して使うものでしたが、記載しても画面内に良い感じにパンくずリストは出ませんでした。

Yoastの設定解説を見ると、single.phpやpage.phpにスニペットを書き込むことでパンくずリストを表示できそうなことが書いてあります。
（不採用のプラグインでもリファレンスは活用していく）

パンくずの区切り文字を変更

デフォルトは「＆ｇｔ；」（全角で書いていますが実際は半角です）でしたが、間隔を自由に調整したいので下記のように変更しました。

<span style="margin: 0px 7px 0px 7px">></span>

テンプレートの編集

デフォルトではサイトタイトルなどが出たり、マウスオーバーでツールチップが表示されたりするので調整。

ホームページテンプレート
- %htitle% → TOP に表示を変更
- ツールチップの「Go to ~~」が不要だったのでtitle要素を削除
他のテンプレート
- ツールチップの「Go to ~~」が不要だったのでtitle要素を削除
カテゴリー・タグのテンプレート
- ツールチップの文言を適当な日本語に調整

テンプレートの変更内容詳細は記事の最後に記載しました。長いので。

テーマのファイルを編集

Salient: single.php

「投稿」用です。

nectar_hook_before_content(); の前にスニペットを追記しました。

（略）
<div class="row">

	<?php

	nectar_hook_before_content();
（略）

（略）
<div class="row">

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

	<?php

	nectar_hook_before_content();
（略）

Salient: page.php

「固定ページ」用です。

nectar_hook_before_content(); の前にスニペットを追記しました。
TOPではパンくずリスト部分を出したくないため、スニペットに少し手を加えました。

（略）
<div class="row">

	<?php

	nectar_hook_before_content();
（略）

（略）
<div class="row">
	
	<?php

	if(!is_front_page()) {
		echo '<p class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/" style="padding-top:20px">'; 
	    if(function_exists('bcn_display')) { bcn_display(); }
		echo '</p>'; 
	}

	nectar_hook_before_content();
（略）

こんな感じでとりあえず「投稿」と「固定ページ」にパンくずリストを表示できました。

single.phpやpage.phpの編集ではうまくいかない場合

表示位置が意図した場所にならず困ってしまう場合があります。
今回は固定ページで発生したので、解決法も記載しておきます。

メンテコストとかの話でまた後々面倒くさくなりそうですが、下記の記事を参考に対処しました。
参考: パンくずリストプラグイン【Breadcrumb NavXT】をショートコードで呼び出す方法 | WordPressカスタマイズ事例【100ウェブ】

Salient: functions.php

末尾に下記のように追記しました。

/**
 * For Breadcrumb NavXT. (2021/06/24 niwa)
 */
if (!function_exists('display_breadcrumb')) {
    function display_breadcrumb() {
        $html = '<div class="breadcrumbs">'. bcn_display(true). '</div>';
        return $html;
    }
    add_shortcode('display_breadcrumb', 'display_breadcrumb');
}

各固定ページ

上記の変更により、[display_breadcrumb]というショートコードでパンくずリストの表示ができるようになりました。
固定ページを編集して、テキストブロックを追加してショートコードを記述。任意の位置に設置するだけでパンくずリストが表示されます。

ゴリ押し感～～

🧍‍♀️今回はここまで🧍‍♀️

付録: Breadcrumb NavXT 設定 – テンプレートの変更内容詳細

HTML特殊記号の類（>とか’とか）をエスケープして記載しているのですが、普通に記号に変換されて表示されている様子……

一般 – ホームページテンプレート

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="%link%" class="%type%" bcn-aria-current><span property="name">TOP</span></a><meta property="position" content="%position%"></span>

投稿タイプ – 投稿テンプレート, 固定ページページテンプレート, メディアテンプレート

※3項目とも同じ内容

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

タクソノミー – カテゴリーテンプレート

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to the %title% category archives." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="カテゴリー: %title%" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

タクソノミー – タグテンプレート

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to the %title% tag archives." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="タグ: %title%" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

タクソノミー – 投稿フォーマットテンプレート

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to the %title% archives." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="投稿: %title%" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

その他 – 投稿者テンプレート

<span property="itemListElement" typeof="ListItem"><span property="name"><a title="Go to the first page of posts by %title%" href="%link%" class="%type%" bcn-aria-current>%htitle%</a> の記事</span><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><span property="name"><a title="%title% の記事" href="%link%" class="%type%" bcn-aria-current>%htitle%</a> の記事</span><meta property="position" content="%position%"></span>

その他 – 日付テンプレート

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to the %title% archives." href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%" href="%link%" class="%type%" bcn-aria-current><span property="name">%htitle%</span></a><meta property="position" content="%position%"></span>

その他 – 検索テンプレート

<span property="itemListElement" typeof="ListItem"><span property="name">Search results for '<a property="item" typeof="WebPage" title="Go to the first page of search results for %title%." href="%link%" class="%type%" bcn-aria-current>%htitle%</a>'</span><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><span property="name">'<a property="item" typeof="WebPage" title="%title% の検索結果" href="%link%" class="%type%" bcn-aria-current>%htitle%</a>' の検索結果</span><meta property="position" content="%position%"></span>

WordPress Salient パンくずリストの導入

プラグイン選定

プラグインの設定

パンくずの区切り文字を変更

テンプレートの編集

テーマのファイルを編集

Salient: single.php

Salient: page.php

single.phpやpage.phpの編集ではうまくいかない場合

Salient: functions.php

各固定ページ

付録: Breadcrumb NavXT 設定 – テンプレートの変更内容詳細

いいね:

関連

コメントを残すコメントをキャンセル

プラグイン選定

プラグインの設定

パンくずの区切り文字を変更

テンプレートの編集

テーマのファイルを編集

Salient: single.php

Salient: page.php

single.phpやpage.phpの編集ではうまくいかない場合

Salient: functions.php

各固定ページ

付録: Breadcrumb NavXT 設定 – テンプレートの変更内容詳細

共有:

いいね:

関連

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル