開発

パンくずリストでは現在のページ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を楽しんでいます。

⬅ 前の記事
キャッシュが効いてるWordPressサイトでアクセス数を更新する方法

次の記事 ➡
ページ内スクロールアンカーリンクにデータ属性を使う

コメントをどうぞ

メールアドレスが公開されることはありません。
コメント欄にURLは入力できません。
このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。

パンくずリストでは現在のページURLが必須

関連投稿

コメントをどうぞ