WordPressテーマ「STORK」のパンくずリストを検索エンジンに反映させよう！

どもども！ブログ書いてますかー！？

先日、当ブログのテーマをSTORK(ストーク)にしたとみっちだよ。

検索エンジンに表示される、自分のブログを見て最近気がついたことがあったのだ。

パンくずリストが反映されていない！

これはいかんと思い修正したので紹介してみるよ。

STORKを使っている人は必見！

2016年11月17日にアップデートされたSTORK v1.0.6で修正されていました！
v1.0.6未満を使っている人はアップデートしてください。今回の記事で紹介しているコードの書き換え対応は不要です！！

「構造化テストツール(Google)」以降の記事を参考にしてください。

検索エンジンに表示されたURL

記事ページのパンくずは、日本語で設定している。

そんで、検索エンジンで「アクセラスポーツ」と検索して表示された際の結果がこんな感じ。

確認した段階では検索順位は6位。価格コムに挟まれているんだけど、キャプチャ画像で赤枠で囲った文字を見てほしい。

価格コムはパンくずリストが日本語で表示されているのに対して、ザサイベースのほうはURLが表示されている。。

thesaibase.com/car/axela-15c

これは、STORKのパンくずリストの構造化が間違っているに違いない！と踏んだわけ。

パンくずリストのリッチスニペットって大事？

パンくずなどのHTMLタグに構造化データマークアップを適用することで、検索画面に反映させる(=リッチスニペット)ことができる。

これまで、全然意識してこなかったんだけど、パンくずのリッチスニペットは2009年頃から反映されてきたんだとか。

リッチスニペットが適切に設定されていれば、検索結果を見た場合のクリック率が上がることもあるはず。その結果、検索順位の上昇が見込める…かもしれない。

STROKのパンくずリストを修正してみる

STORKのカスタマイズに伴う動作不良は当ブログでは責任をもてませんので、バックアップを取るなどして慎重におこなってくださいませ。

STORKのカスタマイズの前に、子テーマを導入しているだろうか？？

STORK本体にアップデートが発生した場合に備え、いじらないほうが賢明なので、是非子テーマを導入しようね。

導入方法は公式ページを参考にしてほしい。

子テーマのダウンロード・導入

まず、子テーマの「functions.php」のバックアップファイルもとっておこう。

場所は下記になるよ。

/wp-content/themes/jstork_custom/functions.php

「jstork_custom」の部分は自分でつけたフォルダ名になる。

次に、stork本体の「functions.php」をテキストエディタなどで開いてみよう。

/wp-content/themes/jstork/functions.php

このファイルを開くと、恐らく128行目付近に、


/*********************
パンくずナビ
*********************/
if (!function_exists('breadcrumb')) {
・
・
・
省略
・
・
・
}

/*********************
ページネーション
*********************/
・
・
・
省略
・
・
・

といった記述があるかと思う。

「パンくずナビ」の欄の記述を全てつかいまわしたいので、128行目から「ページネーション」の欄直前の206行目の「}」までコピーしよう。

今度は、子テーマのフォルダの中にある「functions.php」にペーストする。こだわりがなければ、貼り付ける場所は一番下の行でいいだろう。

もしもコピペして誤作動した場合は、コピペした記述をすぐに削除してくださいね。

修正方法

さて、修正する方法だけど、デフォルトの状態だと、


  $str.= '<ul itemscope itemtype="//data-vocabulary.org/Breadcrumb">';

と書かれている。

ulタグには書かずにliタグにそれぞれitemscopeとitemtypeを書いてあげる。

僕が子テーマの「functions.php」に追記したのは下記。


・
・
・
/*********************
パンくずナビ
*********************/
if (!function_exists('breadcrumb')) {
  function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "breadcrumb inner wrap cf")){
      global $post;
      $str ='';
      if(!get_option('side_options_pannavi')){
        if(!is_home()&&!is_front_page()&&!is_admin() ){
            $tagAttribute = '';
            foreach($divOption as $attrName => $attrValue){
                $tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
            }
            $str.= '<div'. $tagAttribute .'>';
            $str.= '<ul>';
            $str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. home_url() .'/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>';

            if(is_category()) {
                $cat = get_queried_object();
                if($cat -> parent != 0){
                    $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                    foreach($ancestors as $ancestor){
                        $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a></li>';
                    }
                }
                $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $cat -> name . '</span></li>';
            } elseif(is_single()){
                $categories = get_the_category($post->ID);
                $cat = $categories[0];
                if($cat -> parent != 0){
                    $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                    foreach($ancestors as $ancestor){
                        $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a></li>';
                    }
                }
                $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></li>';
                $str.= '<li>'. $post -> post_title .'</li>';
            } elseif(is_page()){
                if($post -> post_parent != 0 ){
                    $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                    foreach($ancestors as $ancestor){
                        $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></li>';
                    }
                }
                $str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
            } elseif(is_date()){
          if( is_year() ){
            $str.= '<li>' . get_the_time('Y') . '年</li>';
          } else if( is_month() ){
            $str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
            $str.= '<li>' . get_the_time('n') . '月</li>';
          } else if( is_day() ){
            $str.= '<li><a href="' . get_year_link(get_the_time('Y')) .'">' . get_the_time('Y') . '年</a></li>';
            $str.= '<li><a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('n') . '月</a></li>';
            $str.= '<li>' . get_the_time('j') . '日</li>';
          }
          if(is_year() && is_month() && is_day() ){
            $str.= '<li>' . wp_title('', false) . '</li>';
          }
            } elseif(is_search()) {
                $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">「'. get_search_query() .'」で検索した結果</span></li>';
            } elseif(is_author()){
                $str .='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</span></li>';
            } elseif(is_tag()){
                $str.='<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">タグ : '. single_tag_title( '' , false ). '</span></li>';
            } elseif(is_attachment()){
                $str.= '<li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><span itemprop="title">'. $post -> post_title .'</span></li>';
            } elseif(is_404()){
                $str.='<li>ページがみつかりません。</li>';
            } else{
                $str.='<li>'. wp_title('', true) .'</li>';
            }
            $str.='</ul>';
            $str.='</div>';
        }
    }
      echo $str;
  }
}

変更して、正しくブログのパンくずが表示されただろうか！？

ちょっと難しそうに思えるかもしれないけど、ここまでの変更を行うと、パンくずのHTMLが直すことができるよ。

修正結果

修正前のパンくずリスト部分のHTMLを確認するとこんな感じだった。


<ul itemscope itemtype="//data-vocabulary.org/Breadcrumb">
  <li><a href="https://sophiadigital.com/communication/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
  <li><a href="https://sophiadigital.com/communication/category/car" itemprop="url"><span itemprop="title">自動車</span></a></li>
  <li>【MAZDA】アクセラ AXELA スポーツ 15C を1日試乗運転した感想！</li>
</ul>

これが、先ほどの「functions.php」の変更を行うと、こんな感じに修正された。


<ul>
  <li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="https://sophiadigital.com/communication/" itemprop="url"><i class="fa fa-home"></i><span itemprop="title"> HOME</span></a></li>
  <li itemscope itemtype="//data-vocabulary.org/Breadcrumb"><a href="https://sophiadigital.com/communication/category/car" itemprop="url"><span itemprop="title">自動車</span></a></li>
  <li>【MAZDA】アクセラ AXELA スポーツ 15C を1日試乗運転した感想！</li>
</ul>