ブログ運営

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

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

 

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

 

この記事がおススメな人

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

 

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

ブログカードとは

ブログカードとは、下記の「おすすめの記事」の様な別記事の内部リンクを表示することです。ブログカードを設置することにより、ユーザーにとって関連性のある記事を紹介することができ、ユーザーの利便性が上がります。またブログの回遊率が上がります。

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

↓↓↓こちらだよ(‘ω’)ノ↓↓↓

profile アイキャッチ
ブログ初心者が一日かけてプロフィールを作成してみました。 ここでは、「ナミアツ@週一会社員のノマドワーカー」の自己紹介をさせて頂きます。 週一会社員のノマドワーカー これは僕...

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

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

解決方法は代表的なもので主に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特有のコードを削除する方法はこのようになります。

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

 

この検索でブログカードが表示されない記事を確認したところ、なんと合計で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. 興奮してブログ書く(‘ω’)ノ

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

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

Gutenbergのエディタはほとんど使ってなく、まさかこれが原因だとは思いませんでした。意外な盲点でした。もし、ブログカードがどうしても表示されないようであれば、一度Gutenberg特有のコードが含まれていなかチェックしてみてください。

パーマリンク設定で404エラーが出た場合、簡単に復旧させる方法こんにちは、ナミアツ(@_JIKORICH)です。 先日、このようなツイートをしました。 なっ∑(゚Д゚) ワードプレスの設定...