LoginSignup
2
5

More than 5 years have passed since last update.

Wordpressでプラグインを使わずにパンくずリストを構造化マークアップする

Last updated at Posted at 2016-11-20

パンくずリストを作成する場合、構造化マークアップとして、data-vocabulary.orgを利用していましたが、その際にitemtypeとして指定してた http://data-vocabulary.org/Breadcrumb が404エラーとなっていたので、書き換えを行いました。

wordpressでパンくずリストの出力を行う場合は、以下のような関数で対応出来るかと思います。

functions.php
function data_bread_crumbs(){
    $html = "";
    $html .= '<ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">';
    if(!is_front_page()){
        $html .= '<li class="home" itemprop="itemListElement" itemscope  itemtype="https://schema.org/ListItem">';
        $html .= '<a href="'.get_bloginfo('url').'" itemprop="item">';
        $html .= '<span class="title" itemprop="name">HOME</span>';
        $html .= '<meta itemprop="position" content="1">';
      $html .= '</a> &gt; </li>';
    }
    $postcat = get_the_category();
    $catid = $postcat[0]->cat_ID;
    $html .= '<li itemscope itemprop="itemListElement" itemscope  itemtype="https://schema.org/ListItem">';
    if(!is_category()){
        $html .= '<a href="'.get_category_link($catid).'" itemprop="item" title="'.get_cat_name($catid).'">';
    }
    $html .= '<span class="title" itemprop="name">'.get_cat_name($catid).'</span>';
    if(!is_category()){
    $html .= '</a> &gt; ';
    }
    $html .= '<meta itemprop="position" content="2">';
    $html .= '</li>';
    if(!is_category()){
        $html .= '<li class="title" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><span itemprop="name">'.get_the_title().'</span>';
        $html .= '<meta itemprop="position" content="3"></li>';
    }
    $html .= '</ul>';
    echo $html;
}

でfunctions.phpに登録して、

if(function_exists('data_bread_crumbs')){
    data_bread_crumbs();
}

のような感じで呼び出します。
タクソノミーとか検索とかのページがある場合は別途記述が必要です。

httpsとしてますけど、httpでもどっちでも構わないらしいです。
https://www.suzukikenichi.com/blog/which-to-use-http-or-https-when-you-mark-up-schema-org/

設定したら、一応各階層URLをGoogleの構造化チェックツールで確認した方が良いです。
https://search.google.com/structured-data/testing-tool/u/0/?hl=ja

構造化マークアップは以下の記事を参考にしました。
http://qiita.com/ryotanatsume/items/91d16968a4677443a6e7

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5