【BusinessPressカスタマイズ】投稿記事にパンくずリストを設置する（Breadcrumb NavXTプラグイン使用）

ワードプレスの無料テーマ「BusinessPress」を使っていて、投稿記事のタイトルの上にカテゴリーが表示されるのですが、今回はこの部分をカスタマイズしたいと思います。

Contents

「BusinessPress」にはパンくずリストが無い

「BusinessPress」で投稿個別記事を表示させると以下のようになります。

これを

こうしたい。

「BusinessPress」にはパンくずリストがついておらず、代わりにカテゴリーが表示されるようになっております。でもこれが何となくパンくずリストっぽくて紛らわしいですよね。

そこでこのカテゴリー表示の上にパンくずリストを設置して、カテゴリー部分は背景の装飾を付けてわかりやすいようにカスタマイズしようと思います。

Breadcrumb NavXTプラグインのインストール

ダッシュボード「プラグイン」＞「新規追加」で、「Breadcrumb NavXT」と入力・検索して「今すぐインストール」、「有効化」をクリックしてください。

次は「BusinessPress」のテーマファイルを編集していきます。

今回は、ブログの個別ページにパンくずリストを設置したいので、

「外観」＞「テーマエディタ―」から、「template-parts」＞「content-single.php」を選んでください（事前にバックアップするか子テーマ化しておいた方が安全です）。

こちらのプラグインを使えば「content-single.php」も子テーマにコピーできます。

子テーマを作成するプラグイン「Child Theme Configurator」使い方・header.php、footer.phpなどもコピー可能

「content-single.php」の10行目くらいの

<header class="entry-header">

と

	<?php businesspress_category(); ?>

の間に以下のコードを挿入します。

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

追加CSSで見た目を修正

今度は、追加CSSで文字サイズの調整をします。

ダッシュボード「外観」＞「カスタマイズ」をクリックして、「追加CSS」をクリックします。

以下のコードを記述します。

.breadcrumbs{
	font-size:14px;
}

後はパンくずリストの下のカテゴリーの見た目を変えます。

.cat-links a{
	background: #3582C4;
	color: #fff;
	padding:3px 10px;
	border-radius:14px;
	font-size:14px;
}

以上でパンくずリストとカテゴリー表示がこのようになりました。

まとめ

ワードプレスの無料テーマ「BusinessPress」は、大変よくできているのですが、パンくずリストが設置されておりません。

パンくずリストを設置することによって、「自分が今ホームページ内のどこにいるのか」や「サイト構造」を認識しやすくなり、結果としてユーザビリティーを高めることができます。

また、Googleの検索エンジンのクローラーがパンくずリストによって効率的にそのサイト内のカテゴリーをたどることができるようになるため、サイトの全体像が把握しやすくなり、効率的なクローリングを期待することができますので、SEO対策としてもおすすめです。