パンくずリストでは現在のページURLが必須
作成日：
2018年9月10日
WordPressで、パンくずリストを自作しました。
このテーマでも実装していますが、「 構造化データ 」に準拠した形式で、
HTML
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb f-sm m-0 rounded-0">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net"
itemprop="item"><span itemprop="name"><i class="fa fa-home mr-1"></i><span class="d-none">ホーム</span></span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net/blog"
itemprop="item"><span itemprop="name">ブログ</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net/category/development/"
itemprop="item"><span itemprop="name">開発</span></a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item active">
<span itemprop="name">パンくずリストでは現在のページURLが必須</span>
<meta itemprop="position" content="4" />
</li>
</ol>と出力していました。
パンくずリストの最後は現在のページタイトルのみ表示して、リンクはクリックの必要性が無いので除いていました。
しかしながら、「構造化データ テスト ツール」で検証してみると、エラーが発生しました。
構造化データ テストツール
https://search.google.com/structured-data/testing-tool
どうやら表示しているパンくずリストのすべてにリンクが必要であるようです。
そうすると、パンくずリストの
- 投稿表示時
- タクソノミー表示時
- 年/月/日表示時
- 投稿アーカイブ表示時
- 検索ページ表示時
- 404ページ表示時
に個別にリンクを指定しなくてはなりません。
最初は get_the_permalink()等書いてましたが、アーカイブの時のリンクってどうやって取得するんだろう？わからないわ。
さて
どうしよう・・・。
答えは簡単でした。
パンくずリストの最後は現在の表示ページになるので、わざわざWordPressの関数を使わなくとも
PHP
$current_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];で、現在の表示URLをPHPで取得すれば全て共通の変数で当てはめる事ができます。
最終的にはこうなりました。
HTML
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb f-sm m-0 rounded-0">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net"
itemprop="item"><span itemprop="name"><i class="fa fa-home mr-1"></i><span class="d-none">ホーム</span></span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net/blog"
itemprop="item"><span itemprop="name">ブログ</span></a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item"><a href="http://monoxa.net/category/development/"
itemprop="item"><span itemprop="name">開発</span></a>
<meta itemprop="position" content="3" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb-item active"><a
href="http://monoxa.net/2018/09/****"
itemprop="item" class="disabled"><span itemprop="name">パンくずリストでは現在のページURLが必須</span></a>
<meta itemprop="position" content="4" />
</li>
</ol>でも、リンクは無効にしたいので、別途以下のように.disabledクラスを追加しています。
CSS
a.disabled{
pointer-events: none;
opacity: 0.65;
}
物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
コメントをどうぞ