パンくずリスト問題解決法！STINGERシリーズ

2020年02月05日

目安時間：約 16分

今年の1月22日あたりから、Googleのサーチコンソールからパンくずリストに問題がありますと言う内容のが届きました。

これは、ブログの記事が検索されたときに、図のように、階層構造を表示するパンくずリストが表示されなくなるよという警告です。

「パンくずリストの問題を解決する」をクリックしてサーチコンソールに行くと

こんな感じでいっぱいエラーになってたんですね。

どういうことかというと

下の画像の黄色い部分がパンくずリストで、このように検索結果に階層構造になって表示されなくなるってことのようです。

比較的新しめのワードプレステーマはこのようなことは起こらないようなんですが、古めのテーマにこのような現象がみられるようです。

そして、テーマによっては作者が対応してくれてるのもありますし、未対応のままのもあります。

まぁ検索表示順位には関係なさそうですので、いいようなものの、気になるっちゃなりますよね。

私の使っているSTINGERシリーズは、未対応というか、バージョンSTINGER３→５→６．．．８というようにどんどん上がって行ったんですね。

私の使ってるのは、バージョン３があって現行としてはSTINGER８のようです。

こうなってくると、かなり違ったものになっている気がしたのでなかなかできませんでした。

で

この対処方法をいろいろ調べながら考えてみたんです。

パンくずリスト問題解決のための対処法！

対処法

パンくずリスト問題の解決法として私が考えた対処法は、大きく分けて下記の2通りです。

①現行バージョンにアップグレード

　→レイアウトが変わったりするなどの恐れがある

②バージョンはそのままでコードをいじる

　→コードをいじるので表示されなくなったり不具合の可能性がある

①現行バージョンにアップグレードの場合

バックアップ
STINGER８にバージョンアップ

私がテストした結果、現行のSTINGER８にバージョンアップした場合、パンくずリストの構造化エラーはなくなりました。

そのかわり、レイアウトが崩れてしまいました。

ただ、あまり詳しくない人はレイアウトが崩れてもこちらの方法が安全です。

STINGER8 ダウンロードページ

②バージョンはそのままでコードをいじる場合

バックアップ
子テーマ、functions.php、style.css　を作る
single.php、archive.php（category.php←STINGER PLLSの場合）　などの一部を書き換える
プラグイン：Schema　をインストールして有効化する

1.バックアップ

バックアップのとり方は調べてください。

2.子テーマ、functions.php、style.css　を作る

子テーマを作るのはカスタマイズが失敗しても元に戻しやすいからです。

下図で言えば、もともとのテーマが親テーマでParent、Childが子テーマになります。

子テーマで設定変更したものが、親テーマより優先されて、Chromeなどのブラウザの表示に反映されます。

なにか不具合があった場合でも、子テーマの設定を削除すればもとに戻せます。

では子テーマを作ることから。

Xサーバーで説明します。

Xサーバーにログインして、「ファイル管理」から

　ドメイン名/public_html/wp-content/themes/テーマ名　

に移動します。

「フォルダ作成」で

「テーマ名-child」と言う名前のフォルダを作成します。

次に　functions.php　と　style.css　を作成します。

functions.php　と　style.css　はテキストエディタで下記のように書いて

デスクトップとか適当なところに保存してください。

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

style.css

/*
Theme Name:親テーマ名-child
Template:mag_tcd036
Version:1.23
*/

先程作成した子テーマフォルダを開いて

先程作った、functions.php　と　style.css　をアップロードします。

今度はワードプレスにログインして、「外観」から「テーマを見ると」、子テーマができていますので有効化しましょう。

3.single.php、archive.php（category.php←STINGER PLLSの場合）　などの一部を書き換える

今度は各種PHPファイルを編集します。

一旦は親テーマからダウンロードして、子テーマにアップロードして編集します。

親テーマのフォルダを開きます。

single.php、archive.php（category.php←STINGER PLLSの場合）のリンクを

順番にクリックして一つずつダウンロードします。

※STINGER 3、5、6には category.php がありませんので、single.php、archive.phpのみでいいです。

今度は子テーマにPHPファイルをアップロードします。

子テーマのフォルダを開ます。

先程ダウンロードした、PHPファイルをアップロードします。

次にワードプレスで「外観」→「テーマの編集」から、子テーマを開きます。

※先程アップロードしたPHPファイルが反映されていなければ、「外観」→「テーマ」に戻って、一旦　親テーマを有効化してから子テーマを有効化すれば反映されます。

子テーマのテーマファイルのどこを修正するかというと

下の画像の黄色い部分です。

<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php
while(!$catid==0) {
$mycat = get_category($catid);
$catid = $mycat->parent;
array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> > </div>
<?php endforeach; ?>
</div>
</div>

上の青字の部分を下の赤字のように直していきます。

<div id="breadcrumb">
<div itemscope itemtype="http://schema.org/Breadcrumb">
<itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="<?php echo home_url(); ?>"> <span itemprop="name">ホーム</span>
</a> <meta itemprop="position" content="1" />> </div>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array( $catid ); ?>
<?php
while ( !$catid == 0 ) {
$mycat = get_category( $catid );
$catid = $mycat->parent;
array_push( $allcats, $catid );
}
array_pop( $allcats );
$allcats = array_reverse( $allcats );
?>
<?php foreach ( $allcats as $catid ): ?>
<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemprop="item" href="<?php echo get_category_link( $catid ); ?>" > <span itemprop="name">
<?php echo esc_html( get_cat_name( $catid ) ); ?></span> </a><meta itemprop="position" content="2" /> > </div>
<?php endforeach; ?>