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

2019年8月16日2020年3月24日

当ページのリンクには広告が含まれています。

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

娘がぐっすり寝ている間に
キーボードをたたく💻
起こさないように、そ〜っと😳

何とかブログ更新出来ました😅

パーマリンクをいじったせいで
404エラーを量産した時の復旧方法です👍

簡単すぎて申し訳ないですが、 #ブログ初心者の助けになれば幸いです🙇‍♂️
https://t.co/HDew5cP7as

— ナミアツ@週一会社員のノマドワーカー (@_JIKORICH) August 14, 2019

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

この記事がおススメの人

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

[st-kaiwa1]余白のチェック、パーマリンクのチェックをすでに行っている方は「３.【結論】Gutenbergを使用した時の記事がないかチェック」を参照してください[/st-kaiwa1]

タップできる目次

ブログカードとは

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

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

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

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

[st-card myclass=”” id=6135 label=”” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[st-minihukidashi fontawesome=”fa-check-circle” fontsize=”90″ fontweight=”bold” bgcolor=”#ef5350″ color=”#fff” margin=”0 0 0 0″]ココに注意[/st-minihukidashi] [st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#ffebee” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]パーマリンクはWordPressの「設定」から変更すると、すべての記事のパーマリンクが変更後の設定になってしまいます。すでにリンクを貼っている記事のURLにも影響を及ぼし、404エラーnot foundとなってしまいます。ある程度記事があるブログにとっては重大な機会損失となりますので注意が必要です。[/st-mybox]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[st-minihukidashi fontawesome=”fa-check-circle” fontsize=”90″ fontweight=”bold” bgcolor=”#3F51B5″ color=”#fff” margin=”0 0 0 0″]Gutenberg特有のコード[/st-minihukidashi] [st-mybox title=”” fontawesome=”” color=”#757575″ bordercolor=”” bgcolor=”#E8EAF6″ borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=””]

<!–/wp:paragraph–>
<!–/wp:quote–>
<!–/wp:heading–>
<!–/wp:list–>

[/st-mybox]

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

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