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

目安時間:約 16分

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

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

 

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

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

 

 

どういうことかというと

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

 

 

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

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

 

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

 

私の使っているSTINGERシリーズは、未対応というか、バージョンSTINGER3→5→6...8というようにどんどん上がって行ったんですね。

 

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

 

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

 

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

 

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

対処法

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

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

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

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

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

 

①現行バージョンにアップグレードの場合
  1. バックアップ
  2. STINGER8にバージョンアップ

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

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

 

 

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

STINGER8 ダウンロードページ

②バージョンはそのままでコードをいじる場合
  1. バックアップ
  2. 子テーマ、functions.php、style.css を作る
  3. single.php、archive.php(category.php←STINGER PLLSの場合) などの一部を書き換える
  4. プラグイン: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> &gt; </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> &gt; </div>
<?php endforeach; ?>
</div>
</div>

<!--/kuzu-->

 

 

 

 

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

 

 

<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" />&gt; </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" /> &gt; </div>
<?php endforeach; ?>

</div>

<!--/kuzu-->

 

 

 

 

 

 

 

 

 

アップロードした他のPHPファイルも同じように修正していきます。

 

 

4.プラグイン:Schema をインストールして有効化する

 

ワードプレスで「プラグイン」→「新規追加」から「Schema」を検索してインストール後、有効化します。

 

 

 

 

 

次はSchemaのセッティングです。

「Schema」→「Settings」→「General」で

Site  Tipe を 「Blog or Personal」にして

Publisher Logo で「Upload File」を押して、何かロゴになりそうな画像を選択します。

「変更を保存」を押して設定を保存します。

 

 

 

 

次に「Knouledge Graph」で

Thisu Website Represent を 「Person」に

Person Name を自分のブログ名にして

「変更を保存」で保存します。

 

 

 

ここまで済んだら、

Google 構造化データ テストツールでエラーになっている記事のアドレスを入力して確認します。

 

テストした結果

エラーが無くなりました。

 

以上が、STINGERシリーズのパンくず問題解決法ですが、コードをいじりますので不具合が出る危険性があります。

あくまで自己責任で行ってください。

 

 

この記事に関連する記事一覧

プロフィール

かわやす

副業アドバイザー:かわやす
詳しいプロフィール

最近の投稿
よく読まれている記事
アーカイブ
カテゴリー
メタ情報
↓ランキングクリックよろしくお願いします
Analytics