ブログ運営

WordPress「JIN」のブログカードが表示されない意外な原因と対策

2019年8月16日

ナミアツ
こんにちは、ナミアツです。先日このようなツイートをしました。

 

 

ナミアツ
なぜ、404エラーを量産してしまったかというと、それはブログカードが表示されないトラブルにあったからです。幸いブログカードはうまく表示されたのですが、意外な理由で表示されませんでした。

 

 

 

 

この記事がおススメの人

  • WordPressテーマ「JIN」を利用している
  • ブログカードが表示されなくて困っている
  • ブログカードが表示されないのは昔の記事だけ
  • 一通り解決策を試してみた

 

 

ナミアツ
余白のチェック、パーマリンクのチェックをすでに行っている方は「3.【結論】Gutenbergを使用した時の記事がないかチェック」を参照してください

 

 

ブログカードとは

ブログカードとは、下記の「おすすめの記事」の様な別記事の内部リンクを表示することです。

ブログカードを設置することにより、ユーザーにとって関連性のある記事を紹介することができ、ユーザーの利便性が上がります。またブログの回遊率が上がります。

 

ブログカードはこのような表示のことを言います。

↓↓↓こちらだよ('ω')ノ↓↓↓

ブログ初心者におすすめな本(アイキャッチ)
【ブログ初心者向け】Webライティングにおすすめの本はこの3冊【多読の必要なし】

続きを見る

 

上記のようにうまく表示がされればよいのですが、不具合によって表示されないケースもあります。僕の場合はリンクのURLの文字だけ表示され、非常にカッコ悪い状態でした。

 

当ブログは2018年12月から2020年2月までWPテーマ「JIN」を採用していましたが、2020年3月より別のテーマに変更しております。)

 

ブログカードが表示されない場合の解決方法

解決方法は代表的なもので主に2種類あります。

  • 挿入するURL前後の余白が十分にあるか確認する
  • 特殊なパーマリンク(URL)や外部リンクではないか確認する

 

URLまわりの余白を十分とるように

これはJINの公式サイトでも記載されています。まずは、挿入するURLの前後を確認し余白を十分に取り、不要なコードも削除してみましょう。基本は公式サイトですね。まずは確認しましょう。

不要なコードといっても、僕の様なブログ初心者にはどれが不要なコードなのか分かりません。

 

とりあえず、下記のコードを消してみました。

  • <p></p>
  • <span></span>

 

 

パーマリンク設定がカスタマイズの時

基本的にパーマリンクをカスタマイズにしていてもブログカードは表示されますが、プラグインで編集した特殊なパーマリンクや外部リンクには未対応となっています。

こちらも公式サイトのマニュアルでしっかりと記載されています。

 

特殊なパーマリンクなってしまっている場合

パーマリンクをSEO上の利点からカスタマイズされている方も多いかと思います。

パーマリンクをカスタマイズしている場合は挿入するURLの末尾を記事ID(/?p=◯◯◯)に変更すればOKです。

 

  1. 「投稿」の記事一覧から挿入したい記事のURLをメモ
  2. ブログカードとして挿入するURLに記事のID番号を記載
  3. プレビュー画面でブログカードが表示されているかチェック

 

URLを使って具体的に説明すると・・・

(トップページはご自身のサイトのURLに変更してください)

 

  • カスタム時:https://jikorich.com/zerobyou
  • 記事挿入時:https://jikorich.com/?p=1234
  • URLの意味:https://トップページのURL/?p=記事ID

 

赤字の「?p=記事ID」の個所をブログカードにしたい記事のIDに変えてください。

 

ココに注意

パーマリンクはWordPressの「設定」から変更すると、すべての記事のパーマリンクが変更後の設定になってしまいます。すでにリンクを貼っている記事のURLにも影響を及ぼし、404エラーnot foundとなってしまいます。ある程度記事があるブログにとっては重大な機会損失となりますので注意が必要です。

 

ナミアツ
僕は安易にすべての記事の設定をデフォルトの記事IDにしてしまいました。そのため大量のリンクエラーに・・・本当に気をつけてくださいね・・・

 

編集するときはビジュアルエディタ→テキストエディタで

 

ナミアツ
僕もそうなんですが・・・テキストエディタよりもヴィジュアルエディタのほうが視覚的に使いやすいんですよね。でもここは我慢ですね。コードなどの修正はテキストエディタの方が不具合がでないみたいです

 

下記の編集を行う場合は、テキストエディタで編集するようにしましょう。これだけでもブログカードが表示されるようになったという方もいるようです。

 

  • URLまわりの余白を十分にとるとき
  • パーマリンクを記事IDに変更するとき

 

 

【結論】Gutenbergを使用した時の記事がないかチェック

この方法は下記の項目をチェックしてから確認するのがおススメです。

もうひとつ、前提条件はWordpressでGutenbergからClassic editorに変更した方が対象です。

ここから先は、すべてClassic editorを使用していることが前提です。

 

  • 挿入するURLの前後の余白を十分に空ける
  • 特殊なパーマリンクや外部リンクになっていないか

 

上記の方法をとってもブログカードが表示されない場合はこちらをチェックしてみてください。

特に「最近の投稿は問題なく表示されるけど、昔投稿した記事にブログカードを挿入しようとすると上手くいかない」という場合はおそらくGutenbergが原因です。

 

結論:Gutenberg特有のコードが挿入されてしまっている。

 

WordPressのデフォルトのエディタはGutenbergとなっていますが、使いづらいという方はClassicに変更しているのではないでしょうか。

最近投降した記事には問題ないけど、昔の記事だとエラーとなってしまう原因はここにあります。

 

過去にGutenbergを少しでも使用した場合は下記のコードが記事の中にないか確認してみましょう。

Gutenberg特有のコードを削除したところ、ブログカードが正常に表示されました。

 

Gutenberg特有のコード

  • <!--/wp:paragraph-->
  • <!--/wp:quote-->
  • <!--/wp:heading-->
  • <!--/wp:list-->

 

上記のようなコードが入っていたら怪しいです。この<!--/〇〇〇〇-->のタグがあったら気を付けましょう。

ちなみに上記のコードは僕のブログに入っていたコードとなります。この他にもGutenberg特有のコードがあるかもしれません。<!--/〇〇〇〇-->のタグには注意です。

 

コードを削除する前に

必ずWPのバックアップを取りましょう。ちなみにナミアツはWordpressの初心者なのでコードの変換による影響について想定の範囲外です。

自己責任でお願いします。ご了いただければと思います。

 

Gutenberg特有のコードを削除

Gutenberg特有のコードを削除する方法はこのようになります。

 

  1. WordPress 記事作成画面へ
  2. ヴィジュアルエディタからテキストエディタへ
  3. Winの場合はCtrl+Fで検索(macはcommand + F)
  4. 該当のコードを削除

 

 

この検索でブログカードが表示されない記事を確認したところ、なんと合計で64個のGutenberg特有のコードが含まれていました。

 

 

【参考】ブログカードが表示されるようになるまで

  1. 記事が積みあがってきたので、過去の記事にもブログカードを挿入したい
  2. いつもと変りなく、URLを挿入するだけ
  3. プレビューを確認。ブログカードが表示されない(少し焦る)
  4. 「JIN、ブログカード、表示されない」でGoogle先生にお聞きする
  5. 余白の設定、パーマリンクの修正を試みる
  6. ブログカード表示されず(やや焦る)
  7. WordPressの設定画面からパーマリンクの設定を一括変更
  8. 404リンクエラーを量産する(変な汗かく、パニック)
  9. ブログカードの表示は後回し、リンクエラーの修正
  10. 404エラーから回復(どっと疲れが出る)
  11. 再度ブログカードについて調べる(諦めかけている)
  12. Gutenbergによる不具合を知る
  13. Gutenberg特有のコードを削除してみる
  14. ブログカードが表示される(ガッツポーズ)
  15. 興奮してブログ書く(‘ω’)ノ

 

 

まとめ:過去の記事に挿入したブログカードが表示されない場合

  • 余白をチェック
  • パーマリンクをチェック
  • Gutenberg特有のコードがないかチェック

 

Gutenbergのエディタはほとんど使ってなく、まさかこれが原因だとは思いませんでした。意外な盲点でした。

もし、ブログカードがどうしても表示されないようであれば、一度Gutenberg特有のコードが含まれていなかチェックしてみてください。

 

ナミアツ
それでは今回は以上です。最後までお読みいただきありがとうございました!

-ブログ運営

© 2020 JIKORICH