MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


MENTAでメンタリング受付中！


TimesTicketでZoomオンライン指導！(HTML/CSS/WordPress/SEO対策)

Breadcrumb NavXTでパンくずリストを導入！構造化データ・リッチスニペットにも対応！

投稿日投稿者root-013コメントをどうぞ

階層の深いWEBサイトはパンくずリスト・パンくずナビを表示すると回遊性・利便性が高まります。
Breadcrumb NavXTプラグインは構造化データ・リッチスニペットにも対応しているため、googleの検索結果にもパンくずリストを表示させることができます。

icons-google

記事の階層が分かりやすい！

サイトの回遊性が高まる！

検索結果にもパンくずを表示！

BreadcrumbNavXT_03

Breadcrumb NavXTの投稿記事への導入と設定、CSSのカスタマイズについてまとめたいと思います。

Breadcrumb NavXT プラグイン

プラグイン名
Breadcrumb NavXT 5.2.0
配布元
[browser-shot width=”600″ url=”https://wordpress.org/plugins/breadcrumb-navxt/”]

プラグイン＞新規追加＞Breadcrumb NavXT　の検索で候補にあがります。

Breadcrumb NavXT 5.2の注意点

PHP Requirements
Breadcrumb NavXT 5.2 and newer require PHP5.3 Breadcrumb NavXT 5.1.1 and older require PHP5.2

という注意点がプラグインページにあります。
つまり、
5.2（2015.01.11時点で最新）以降のバージョンでは、PHPのバージョンが5.3より新しいことが求められます。

最近このプラグインを利用していなかったのですが、もしかしたらバージョンアップで
『あなたの設定はもうサポートされていません。 すぐに移行する。』
という画面が表示されるかもしれません。

BreadcrumbNavXT_09

未検証ですが、「すぐに移行する。」のリンクをクリックすると、それまでの設定が上書きされてしまうかもしれませんのでご注意下さい。
※PHPのバージョンアップも、プラグインのバージョンアップも、どんな影響があるか把握できない場合は慎重に行うようにしましょう。（もちろん自己責任でね！！）

リッチスニペットってなに？？

構造化データのタイプ

https://support.google.com/webmasters/answer/2650907?hl=ja&ref_topic=4589289

構造化データを利用することで、検索結果に「タイトル」「本文」以外のものを表示できるようになります。
見たことがある方も多いと思います。

BreadcrumbNavXT_03

例えば著者を表示したり、レビューの星マークを表示したり、この記事の「パンくずリスト」を表示したりできます。
ユーザーの目を引くことも出来ますし、SEO的にも検索エンジンに「この部分は著者を意味していますよ」「この部分はパンくずですよ」と、正確な情報を伝えることができるというわけですね。

——————

2015.05.28 構造化データのマークアップに関する記事を追加しました！
構造化データ（microformats.org hAtom）をテンプレートに組み込んでマークアップしたお話。

——————

リッチスニペット-パンくずリスト

https://support.google.com/webmasters/answer/185417?hl=ja

適切なマークアップをすることで実現できます。

構造化データ テスト ツール

もちろん自分でマークアップすることも可能ですが、間違いがあると表示されなかったり、間違った情報を検索エンジンに伝えることになってしまいます。

ウェブマスターツールには構造化データテストツール
というものもありますので、リッチスニペット導入の際は是非利用してみましょう！
http://www.google.com/webmasters/tools/richsnippets

Breadcrumb NavXTの設定

BreadcrumbNavXT_06

設定＞Breadcrumb NavXT というメニューが追加されていますので、こちらから管理画面に行くことができます。

今回は投稿記事にのみ導入する形で行きたいと思います。

一般

BreadcrumbNavXT_18

パンくず区切り文字の変更や、ホーム・ブログ・マルチサイトでの表示設定を変更できます。

パンくずをリスト形式で表示するときは区切り文字は出ないので気をつけましょう。

カレントページ（現在のページ）では記事リンクを作りたくなかったので、
『現在のページを示す項目にリンクを張る』のチェックは外しました。

BreadcrumbNavXT_15

デフォルトではホームページ用テンプレートは

<span typeof="v:Breadcrumb">
  <a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%">
    %htitle%
  </a>
</span>

となっています。

typeof属性、rel属性、property属性にリッチスニペットのマークアップがされているのでこの辺を変更しないようにしましょう。
マークアップエラーになってしまいます。

title属性・アンカーテキストのみ変更したいと思います。
他のテンプレートにも言えることですが、
title属性は全て『Go to ○○.』になっているのでちょっと日本のサイトには合いませんからね＾＾；

アンカーテキストは%htitle%で投稿名、ページ名が表示され、ホームにおいては
一般設定＞サイトのタイトル
が反映されます。

『HOMEでいいや』という場合は%htitle%ではなくHOMEにしてしまえばOKです。

<span typeof="v:Breadcrumb">
  <a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%">
    HOME
  </a>
</span>

SEO的には%title%の方が良いのかもしれませんが、タイトルが長いと幅も取ってしまいますからね。
視認性を優先したいと思います。

さらに、WEBアイコンにしたい！というときはTwenty Fourteenならgenericons がデフォルトで使えるので

<span typeof="v:Breadcrumb">
  <a rel="v:url" property="v:title" title="%title%" href="%link%" class="%type%">
    <!-- ここにGenericonsのホームアイコン -->
    <span class="genericon genericon-home"></span>
  </a>
</span>

という形にすることも可能です。（見やすいように改行・コメント入れてます。）

Genericonsについては過去の記事をご覧下さい！

Twenty Fourteen のカテゴリのリンクにGenericonsを表示した記事

Twenty Ten や他のテーマでGenericonsを導入した記事

投稿タイプ

投稿(post)や、固定ページ(page)でどのように表示させるかを設定できます。
カスタム投稿を追加している場合は、その項目も自動的に追加されます。

デフォルトでは現在のページの記事名・リンクがきて、更にentry-titleが表示されます。
ちょっとというかかなりウザイ。

ここもGenericonsのロケーションアイコンにしてみました。

<span class="genericon genericon-location"></span>

BreadcrumbNavXT_27

タクソノミー

カテゴリー、タグでの表示設定を変更できます。

BreadcrumbNavXT_46

投稿階層で『カテゴリー』を選択している場合、このテンプレートが使用されるようなので、
title部分は

title="%title%カテゴリ一覧"

にしています。

その他

著者、日付、404等のアーカイブでの表示設定や、タイトル表示文字数を変更できます。

文字抜粋については
Deprecated・・・非推奨
としていますね。
そして

text-overflow: ellipsis;

についてのリンクや記述例が掲載されています。
https://mtekk.us/archives/guides/trimming-breadcrumb-title-lengths-with-css/

これがどういう意味での「非推奨」なのか・・・（英語に弱くて申し訳ないです）

恐らくは

文字数設定する・・・ソース上も文字が切れる

text-overflow・・・ソース上は文字が切れていない

ことと、SEOの関連性を考慮してのことだと思います。

投稿にパンくずリストを表示

こちらは、Breadcrumb NavXT管理画面でヘルプ（表示オプションの部分）をクリックすると「お手軽設定」という項目があるので、
そのままコピペしたいと思います。

BreadcrumbNavXT_30

階層については、パーマリンク設定にカテゴリを使用しているので「カテゴリ」を選択しました。

お手軽設定

パンくずを区切り文字で区切る
<div class="breadcrumbs">
	<?php if(function_exists('bcn_display'))
	{
		bcn_display();
	}?>
</div>

パンくずをリスト形式にする
<ol class="breadcrumbs">
	<?php if(function_exists('bcn_display_list'))
	{
		bcn_display_list();
	}?>
</ol>

お手軽設定はbreadcrumbsクラスが割り当てられているので、このクラスをカスタマイズに利用していきたいと思います。
もちろん、任意のものに変更することも可能です。

今回（Twenty Fourteen）はcontent.php のheader entry-headerの直下に記述してみました。
テーマや表示させたい箇所によって記述場所は変わります。
content.phpでさらにアーカイブと記述が混在しているケースもあると思います。
そのため、一応is_single関数で個別記事のみ表示させるようにしてみました。

<header class="entry-header">
  <?php if ( is_single() ) : ?>
    <div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
      bcn_display();
    }?>
    </div>
  <?php endif; ?>
//以下略

はい、表示はOKですが、残念な感じに仕上がりましたね。

BreadcrumbNavXT_35

（ちなみに、この時点では区切り文字にもGenericonsを検討していました。）

CSSでパンくずリストの見た目をカスタマイズ

アイコンがちょっとずれているんですよね。
これはgenericonsクラスにCSSが効いている影響もあります。

/**
 * All Genericons
 */

.genericon {
	display: inline-block;
	width: 16px;
	height: 16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	line-height: 1;
	font-family: 'Genericons';
	text-decoration: inherit;
	font-weight: normal;
	font-style: normal;
	vertical-align: top;
}

これを上書きしつつ、見た目を整えたいと思います。

あとは、区切り文字も擬似クラスを利用したものに変更しようかと思います。
レスポンシブで区切り文字部分が変に改行してしまうのが気になりました。

区切り文字＋リンクのワンセットで折り返して欲しいですね！

というわけで

区切り文字は削除

BreadcrumbNavXT_43

CSSを下記にしました。

.breadcrumbs {
  /* 全体のCSS */
  /* display:none; */
  margin-bottom: 20px;
  font-weight:normal;
  line-height: 1;
  color: #888;
}

.breadcrumbs .genericon {
  /* .breadcrumbs 内の.genericon 上書き */
  width: auto;
  height: auto;
  font-size: 1.5em;
  vertical-align: middle;
}

.breadcrumbs > span {
  /* 各リンクやテキストのCSS */
  display:inline-block;

}

.breadcrumbs > span:before {
  /* 各リンクの前に擬似クラスで区切り文字を追加 */
  content: '\f104';
  display:inline-block;
  font-family: Genericons;
  font-size: 12px;
  margin: 0 5px;
}

.breadcrumbs > span:first-child:before {
  /* HOMEアイコン前の矢印だけを非表示 */
  display:none;
}

完成！
BreadcrumbNavXT_49

まとめ

日本語にも対応しいますし、非常に便利なプラグインです。
当ブログは記事タイトルを長めに取っているので、上記のような設定にしましたが、コーポレートサイト構築にはきちんと記事タイトルを表示した方がいい場合もあるでしょうね。

これで、しばらく様子をみて行こうと思います！

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA