こんにちは、SAKIです。
WordPressでブログをやっているとこだわりたくなってくる部分が出てきますよね。
ユーザ目線で考えると、、、
自分がホームページを見てる時にもこんな経験ありませんか？
あるページを見ていて、前のページに戻りたい時、ついつい矢印の戻るボタンを押しがちですが、
これは本当は良くないんです！
ユーザーのためにも、ブログのSEO対策のためにも、しっかりと戻るボタンを作ることが大事なんです！
そこで今回は「戻るボタン」 = パンくずリストの設置方法を解説したいと思います。
パンくずリストを上部に設定する方法のほかに、JINのテーマで簡単に設定できる方法も紹介します。
JINのパンくずリスト
私の使用しているWordPressの有料テーマ「JIN」では簡単にパンくずリストを設定することができます。
パンくずリストの設定方法
JINでは、パンくずリストの設定がとても簡単にできます。
「外観」→「カスタマイズ」→「その他設定」→「パンくずリストの表示」の「表示」にチェックを入れる
JINでのパンくずリストの設定の注意点
上記の通り、JINでパンくずリストの設定はとっても簡単です。
ですが、この設定方法だと、記事の下にしかパンくずリストが設定されないんです。
もちろん、記事下にパンくずリストを設定することも大事です。
と言うことで、ここからは、パンくずリストをブログ上の上部に設定する方法を解説していきます。
パンくずリストを上部に設定する方法
それでは早速、WordPressでパンくずリストを上部に設定する方法を説明していきます。
-
STEP1プラグインのインストール
-
STEP2プラグインの設定
-
STEP3ウィジェットに追加
ひとつずつ見ていきます。
STEP1 プラグインのインストール
プラグイン「Breadcrumb NavXT」をインストールします。
「プラグイン」→「新規追加」→「プラグインの検索」窓に「Breadcrumb NavXT」と入力して検索。
「Breadcrumb NavXT」の「今すぐインストール」をクリック。
「有効化」をクリックして、有効化する。
STEP2 プラグインの設定
次に有効化した「Breadcrumb NavXT」の設定をしていきます。
「プラグイン」→「インストール済みプラグイン」→「Breadcrumb NavXT」の設定をクリック。
区切り文字を変更する
「一般」タブの「パンくずの区切り」でリストの区切り文字を変更する。
区切りというのは画像のようなページの名前部分の区切りの記号のことです。自分の好きな記号を入れましょう。「/」や「<」が一般的です。
パンくずリスト先頭のタイトルをブログ名から任意の文字に変更する
「一般」タブの「ホームページテンプレート」及び「ホームページテンプレート(リンクなし)」の「%htitle%」を任意の文字に変更する。
<span property=”itemListElement” typeof=”ListItem”>
<a property=”item” typeof=”WebPage” title=”%title%へ移動” href=”%link%” class=”%type%”>
<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%”>
<span property=”name”>Home</span></a>
<meta property=”position” content=”%position%”></span>>
「Home」「ホーム」などにするのが一般的です。
ホームページのリンクなしの方も同じように修正します。
パンくずリストの階層化の方法を変更する
個別記事に表示されるパンくずリストは、デフォルトでは記事に設定されている「カテゴリー」を使って階層化して表示されています。
カテゴリーの他にも、日付やタグなどで表示することも可能です。
「投稿タイプ」タブ→「投稿階層」で任意の表示方法を選択する
カテゴリーを使って階層化した場合の設定
上記で階層化をカテゴリーにした場合には次の設定をします。
なお、初期設定のままでOKです。
カテゴリー名の部分に装飾をしたい場合のみ設定してください。
「タクソノミー」タブの「カテゴリーテンプレート」及び「カテゴリーテンプレート(リンクなし)」
私はカテゴリー名の前にアイコンをつける装飾をしています。
カテゴリー名の前にアイコンをつけたい場合は以下のコードを挿入してください。
<i class=”jic jin-ifont-folder”></i>
STEP3 ウィジェットに追加
次にウィジェットで記事上部にパンくずリストが表示されるように設定していきます。
「外観」→「ウィジェット」をクリック
「Breadcrumb NavXT」、「記事上部」を選択し、「ウィジェットを追加」をクリック
- 「パンくずの前に表示するテキスト」に設定したいアイコンを追加
- 「トップページではリストを表示しない」にチェック
上記を設定して「保存」をクリック
アイコンを追加すると、ホームなどの文字列の前にアイコンが表示されます。
ウィジェットに追加が完了すると、以下のように記事上部にパンくずリストが表示されるようになります。
無事にウィジェット追加で、パンくずリストが記事上部に表示できましたが、ウィジェットだとどうしてもデザイン性がないです。
その場合はPHPファイルを修正して表示させることも可能です。
次は、PHPファイルでの設定を解説します。
PHPファイルにコード追加
「Breadcrumb NavXT」」プラグインを利用してパンくずリストを表示する場合、リストを表示したい位置にコードを記述する必要があります。
もし、header.phpがない場合はこちらの記事をご覧ください。
「外観」→「テーマの編集」→ヘッダー (header.php)に以下コードを追加→「ファイルを更新」をクリック
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
タイトル名を非表示にする場合の設定
パンくずリストにタイトル名を含めない設定もできます。
パンくずリストにタイトル名があると、投稿記事のタイトル名のすぐ上に同じタイトル名が並ぶので少し鬱陶しくなります。
以下のコードを記述します。
「外観」→「テーマの編集」→hunctions.phpに以下コードを追加→「ファイルを更新」をクリック
function foo_pop($trail)
{
{
array_shift($trail->trail);
}
}
add_action(‘bcn_after_fill’, ‘foo_pop’);
コードで追加すると以下のように表示されるようになりました。
私はプラグインの設定画面で、ホーム名とカテゴリー名の前にアイコンを設定しています。
まとめ
今回はWordPressでパンくずリストの設置方法を説明しました。
JINのテーマを使用している場合、記事下部の設置であれば簡単に設定することができます。
パンくずリストを上部に設置する場合はプラグインをインストールし、設定したのち、2パターンの設置方法があります。お好みの方で設定してください。
- ウィジェットでの追加
- コードでの追加
このブログでは他にもWordPressでの設定方法を紹介していますので、よかったらご覧ください。
