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

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


開発

WordPressで、パンくずリストを自作しました。

このテーマでも実装していますが、「構造化データ」に準拠した形式で、

<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 data-type="link" href="https://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 data-type="link" href="https://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 data-type="link" href="https://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>

と出力していました。
パンくずリストの最後は現在のページタイトルのみ表示して、リンクはクリックの必要性が無いので除いていました。

しかしながら、「構造化データ テスト ツール」で検証してみると、エラーが発生しました。

どうやら表示しているパンくずリストのすべてにリンクが必要であるようです。

そうすると、パンくずリストの

  • 投稿表示時
  • タクソノミー表示時
  • 年/月/日表示時
  • 投稿アーカイブ表示時
  • 検索ページ表示時
  • 404ページ表示時

に個別にリンクを指定しなくてはなりません。

最初は get_the_permalink()等書いてましたが、アーカイブの時のリンクってどうやって取得するんだろう?とか考えていたら面倒になって。

さてどうしよう・・・。

答えは簡単でした。
パンくずリストの最後は現在の表示ページになるので、わざわざWordPressの関数を使わなくとも

$current_url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

で、現在の表示URLをPHPで取得すれば全て共通の変数で当てはめる事ができます。

最終的にはこうなりました。

<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 data-type="link" href="https://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 data-type="link" href="https://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 data-type="link" href="https://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="https://monoxa.net/2018/09/****"
            itemprop="item" class="disabled"><span itemprop="name">パンくずリストでは現在のページURLが必須</span></a>
        <meta itemprop="position" content="4" />
    </li>
</ol>

でも、リンクは無効にしたいので、別途以下のように.disabledクラスを追加しています。

a.disabled{
  pointer-events: none;
  opacity: 0.65;
}
今日はここまで
パンくずリストでは現在のページURLが必須

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


開発

WordPressで、パンくずリストを自作しました。 このテーマでも実装していますが、「構造化データ」に準拠した形式で、 <ol itemscope itemtype="http://schema.org…


関連する記事



こちらはいかが?


[WordPress] パーマリンクを自動翻訳してくれるプラグイン
[WordPress] パーマリンクを自動翻訳してくれるプラグイン

パーマリンクを英語にした方が、SEO的に良いよ、という事です。 であれば翻訳API使って、自動翻訳してくれるようにすれば良くないかい?と思い、調べてみたらGoogle翻訳APIを使って同様なことを実装しているという記事。…

WordPressのギャラリーデフォルト値を変更する方法
WordPressのギャラリーデフォルト値を変更する方法

WordPressのギャラリー設定のデフォルト値は、 のように、 リンク先:「添付ファイルのページ」 カラム:「3」 サイズ:「サムネイル」 のようになっています。 このデフォルト値を リンク先:「メディアファイル」 カ…

コメントを残す