2019年8月16日スポンサーリンクナミアツこんにちは、ナミアツです。先日このようなツイートをしました。2019ナミアツなぜ、404エラーを量産してしまったかというと、それはブログカードが表示されないトラブルにあったからです。ブログカードはうまく表示されたのですが、意外な理由で表示されませんでした。【参考】ブログカードが表示されるようになるまでまとめ:過去の記事に挿入したブログカードが表示されない場合ブログカードとはブログカードとは、下記の「おすすめの記事」の様な別記事の内部リンクを表示することです。ブログカードを設置することにより、ユーザーにとって関連性のある記事を紹介することができ、ユーザーの利便性が上がります。ブログの回遊率が上がります。ブログカードはこのような表示のことを言います。↓↓↓こちらだよ(‘ω’)ノ↓↓↓ブログ初心者が一日かけてプロフィールを作成してみました。ここでは、「ナミアツ@週一会社員のノマドワーカー」の自己紹介をさせて頂きます。これは僕...上記のようにうまく表示がされればよいのですが、不具合によって表示されないケースもあります。僕の場合はリンクのURLの文字だけ表示され、非常にカッコ悪い状態でした。解決方法は代表的なもので主に2種類あります。挿入するURL前後の余白が十分にあるか確認する特殊なパーマリンク(URL)や外部リンクではないか確認するURLまわりの余白を十分とるようにこれはJINの公式サイトでも記載されています。挿入するURLの前後を確認し余白を十分に取り、不要なコードも削除してみましょう。基本は公式サイトですね。不要なコードといっても、僕の様なブログ初心者にはどれが不要なコードなのか分かりません。下記のコードを消してみました。基本的にパーマリンクをカスタマイズにしていてもブログカードは表示されますが、プラグインで編集した特殊なパーマリンクや外部リンクには未対応となっています。こちらも公式サイトのマニュアルでしっかりと記載されています。特殊なパーマリンクなってしまっている場合パーマリンクをSEO上の利点からカスタマイズされている方も多いかと思います。パーマリンクをカスタマイズしている場合は挿入するURLの末尾を記事ID(/?p=◯◯◯)に変更すればOKです。「投稿」の記事一覧から挿入したい記事のURLをメモブログカードとして挿入するURLに記事のID番号を記載プレビュー画面でブログカードが表示されているかチェックURLを使って具体的に説明すると・・・(トップページはご自身のサイトのURLに変更してください)カスタム時:https://jikorich.com/zerobyou記事挿入時:https://jikorich.com/?p=1234URLの意味:https://トップページのURL/?p=記事ID赤字の「?p=記事ID」の個所をブログカードにしたい記事のIDに変えてください。パーマリンクはWordPressの「設定」から変更すると、すべての記事のパーマリンクが変更後の設定になってしまいます。foundとなってしまいます。ある程度記事があるブログにとっては重大な機会損失となりますので注意が必要です。ナミアツ僕は安易にすべての記事の設定をデフォルトの記事IDにしてしまいました。編集するときはビジュアルエディタ→テキストエディタでナミアツ僕もそうなんですが・・・テキストエディタよりもヴィジュアルエディタのほうが視覚的に使いやすいんですよね。コードなどの修正はテキストエディタの方が不具合がでないみたいです下記の編集を行う場合は、テキストエディタで編集するようにしましょう。これだけでもブログカードが表示されるようになったという方もいるようです。URLまわりの余白を十分にとるときパーマリンクを記事IDに変更するとき【結論】Gutenbergを使用した時の記事がないかチェックこの方法は下記の項目をチェックしてから確認するのがおススメです。editorに変更した方が対象です。editorを使用していることが前提です。挿入するURLの前後の余白を十分に空ける特殊なパーマリンクや外部リンクになっていないか上記の方法をとってもブログカードが表示されない場合はこちらをチェックしてみてください。「最近の投稿は問題なく表示されるけど、昔投稿した記事にブログカードを挿入しようとすると上手くいかない」という場合はおそらくGutenbergが原因です。結論:Gutenberg特有のコードが挿入されてしまっている。WordPressのデフォルトのエディタはGutenbergとなっていますが、使いづらいという方はClassicに変更しているのではないでしょうか。最近投降した記事には問題ないけど、昔の記事だとエラーとなってしまう原因はここにあります。過去にGutenbergを少しでも使用した場合は下記のコードが記事の中にないか確認してみましょう。僕のブログもこれが原因でした。Gutenberg特有のコードを削除したところ、ブログカードが正常に表示されました。Gutenberg特有のコード<!–/wp:paragraph–><!–/wp:quote–><!–/wp:heading–><!–/wp:list–>このようなコードが入っていたら怪しいです。この<!–/〇〇〇〇–>のタグがあったら気を付けましょう。ちなみに上記のコードは僕のブログに入っていたコードとなります。この他にもGutenberg特有のコードがあるかもしれません。<!–/〇〇〇〇–>のタグには注意です。コードを削除する前に必ずWPのバックアップを取りましょう。ちなみにナミアツはWordpressの初心者なのでコードの変換による影響について想定の範囲外です。自己責任でお願いします。ご了いただければと思います。ナミアツ申し訳ないです・・・。Gutenberg特有のコードを削除Gutenberg特有のコードを削除する方法はこのようになります。F)該当のコードを削除この検索でブログカードが表示されない記事を確認したところ、なんと合計で64個のGutenberg特有のコードが含まれていました。【参考】ブログカードが表示されるようになるまでナミアツどーでも良いかもしれませんが、ブログカードが表示されないトラブルから解決までの一連の経緯です記事が積みあがってきたので、過去の記事にもブログカードを挿入したいいつもと変りなく、URLを挿入するだけプレビューを確認。余白をチェックパーマリンクをチェックGutenberg特有のコードがないかチェックGutenbergのエディタはほとんど使ってなく、まさかこれが原因だとは思いませんでした。ブログカードがどうしても表示されないようであれば、一度Gutenberg特有のコードが含まれていなかチェックしてみてください。パーマリンク設定で404エラーが出た場合、簡単に復旧させる方法こんにちは、ナミアツ(@_JIKORICH)です。先日、このようなツイートをしました。ブログの運営に猛反省しているナミアツでございます。今回は、ブログの記事ネタを見つける方法をご紹介します。...パーマリンク設定で404エラーが出た場合、簡単に復旧させる方法あおり運転への対策と対処の仕方|ドライブレコーダーによる記録のすすめ週一会社員ノマドワーカーナミアツ週一会社員のノマドワーカー。給与とブログとアフィリで生計を立てる30代。一人でチョコミントを食べながらPCをカタカタしている時間が好き。現在、ブログをゆる~く更新中。