WordPressのAMPページにパンくずを表示する方法を紹介します。
AMPに対応するプラグインとしてAMP for WPを使っていて、パンくずを出すプラグインとしてBreadcrumb NavXTを使っている場合をメインに紹介しています。function.phpなどを編集しますので、中級者以上向けです。

2017/9/6追記:AMP for WPの0.9.60から、Breadcrumbが追加されました。こんな面倒な事は今後は不要になります。外観→AMPにて設定できます。

AMPページにパンくずを表示

AMP for WPを使っている場合

function.phpへのコード追加

function.phpに以下のコードを追加すれば、AMPページのヘッダー下にパンくずが出るようになります。

function add_amp_breadcrumbs() {
  ?>
  <div class="breadcrumbs" typeof="BreadcrumbList" vocab ="https://schema.org/">
      <?php if(function_exists('bcn_display'))
      {
          bcn_display();
      }?>
  </div>
  <?php
}
add_filter('ampforwp_after_header','add_amp_breadcrumbs');

補足:vocabの後に半角スペースが入っているのは、AMPプラグインのバグのため、ここにスペース入れないとAMPページでその後のコードが表示されなくなってしまうためです。処理には影響ありませんが、気持ち悪い場合はスペースを削除して下さい。

これによって、このような位置にパンくずが出るようになります。

AMP for WPのフィルターフックを利用してBreadcrumb NavXTのためのコードを入れているだけで、通常のページに設置するのとパンくず自体の表示のさせ方は同じです。

その他の場所に出したい場合は、こちらのAMP for WPのフックリストを参考にしてみて下さい。

注意:子テーマのfunction.phpを編集するようにして、編集する前には必ずバックアップを取るようにしましょう。

CSSの調整

パンくずが出ることが確認できたら、必要に応じてCSSを調整します。

参考:当サイトの場合、以下のようなCSSを設定しています。高さをheightで固定して、overflow: hiddenとすることで、3行以上になってしまう場合に表示が省略されるようにしています。

.breadcrumbs {
    font-size: 14px;
    line-height: 18px;
    padding: 12px 10px 0 10px;
    height: 36px;
    overflow: hidden;
}

パンくずのプラグインにBreadcrumb NavXT以外を使っている場合

基本的には、同じような方法で追加ができるのですが、プラグインによってはAMPとの相性が悪く、AMPのエラーになってしまう場合があります。
試しに表示した上で、The AMP Validatorでエラーが起きないかチェックする事をおすすめします。

通常ページにパンくずを出す時のよくある間違い(おまけ)

AMPページに限らず、Breadcrumb NavXTでパンくずを出す場合は、表示したい箇所に以下のコードを追加します。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab ="https://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

これは、Breadcrum NavXTのプラグインのサイトに載っているコードなのですが、なぜか日本語の解説サイトが間違っているものが多く、

typeof="BreadcrumbList" vocab ="https://schema.org/"

が抜けている事がよくあります。
これが抜けていると構造化データとして認識されず、非常にもったいないので、AMPに対応しない人も一度チェックした方が良いでしょう。

Pocket

スポンサーリンク


スポンサーリンク


関連記事

WordPressをプラグインで簡単にAMP対応。サイトを超高速化させる方法... モバイルページを「超」高速化できるAMP(Accelerated Mobile Pages)に、WordPressのプラグインを使って、簡単に対応するための方法...
WordPressのAMPページでTable of Contents Plusをキレイに表示する方法... AMPに対応した時に、Table of Contents Plusで作成される目次をきれいにするための方法です。 目次を作成するためのプラグインとして、Tab...
AMPプラグインで致命的なエラー。WordPressのプラグインのアップデート前には必ずバックアップを... WordPressのAMPプラグインのバージョン0.5にアップデートしたところ致命的なエラーが出てしまい、サイト全体どころか、管理画面までエラーになる、というト...
エックスサーバーの設定を変えてWordPressをたった5分で高速化... エックスサーバーはサーバーパネルから色々な設定を変更したりできますが、その一部の設定を変更するだけでサイトをいきなり高速化する事ができます。たった5分で出来てし...
PV数の報告はAdSenseの利用規約違反?他には何がダメなの?... PV数の報告はダメ、という事をたまに目をしますが、何でダメと言われているのでしょうか?根拠を探してみたので、他のAdSenseでNGとされている事項も合わせて、...
WordPressのバックアップはUpdraftPlusがオススメ!そのバックアップは簡単に復元できますか?... WordPressのバックアップのためのプラグインはBackWPupよりもUpdraftPlusをオススメします。オススメする一番の理由は、復元が非常に簡単な事...

ブログランキング参加中(クリックお願いします)

にほんブログ村 株ブログ インデックス投資へ

スポンサーリンク