WordPressのテーマはJINを使っていました。
初心者ブロガーでも魅力的なサイトが簡単に作れるとても素晴らしいテーマです。
JINには様々な便利機能がありますが、中でも私がよく使うものがブログカード。
関連記事へのリンクを、読者が認識しやすいようなデザインで表示してくれるので、クリック率を高めてくれる効果などがあります。
このブログカードは、記事のURLを貼り付けるだけで作成されるはずなのですが、ある記事でブログカードが表示されないという現象が起きました。
これは、Gutenbergエディタで書いたことが原因だったのです。
JINは記事のURLを張るだけでブログカードが作られる
JINでは、このように編集画面で記事のURLを貼るだけで勝手にブログカードが作られます。
この編集画面を公開するとこのように表示されます。
ご覧のように、ブログカードが勝手に作られるのです。
とっても便利な機能なのでよく利用するのですが、ある記事を編集してURLを貼ったところ、ブログカードではなくURLがそのまま表示されてしまいました。
突然の現象にかなり困惑しました。
くみえ？何で急にできなくなったの？？
この表示されなくなった原因について調べることにしました。
ブログカードが表示されない原因をネットで検索して試してみる
ネットで原因を検索し、色々試してみました。
- 前後に十分な余白をとる
- プレーンテキストで貼り付けてみる
- パーマリンクをID表記に変えてみる＜https://〇〇〇/?p=記事のID＞
- 前後の<p></p>を外してみる
全て試してみましたが、URL表示のままでした。
試行錯誤して諦めかけていたところ、「Gutenbergエディタ」が関係しているという情報を見つけました。
Gutenbergエディタで編集してあるとブログカードが表示されない
私がWordPressでブログを始めたのは2019年7月です。
その頃は、標準エディタがGutenbergエディタでした。
私は最初、Classic Editorの存在を知らなかったので、Gutenbergエディタを使って記事を作成していました。
Gutenbergエディタをしばらく使っていたのですが…使いにくい！！
調べてみると、JINはClassic Editorを推奨していたので、途中からプラグインを使ってClassic Editorに変更したのです。
WordPress5.0から導入された「Gutenberg」への対応について
今回ブログカードが表示されなかった記事は、Classic Editorに変更する前の記事でした。
実は、Gutenbergエディタによる記事編集が原因だったのです。
どうやらGutenbergエディタを使うと、記事内にGutenberg特有の<!– /wp:〇〇〇 –>というコードが挿入されるようなのですが、そのコードがあることが原因のようでした。
くみそれが原因だったとは…
そこで、記事をテキストで見てみると…
記事の最初の文と最後の文2か所にありました！
この2か所をまるっと消してみます。
すると、ちゃんとブログカードが表示されました！！
この<!– /wp:〇〇〇 –>というコードは他の記事でも見つけました。
この記事に内部リンクを貼ってみると、先ほどと同じようにブログカードが表示されません。
そこで、先ほどと同様に<!– /wp:〇〇〇 –>というコードを全て消してみると、こちらの記事もブログカードが表示されされるようになりました。
このことから、今回のブログカードが表示されないという現象は、Gutenbergエディタで記事を書いた時に挿入される<!– /wp:〇〇〇 –>というコードが原因ということが判明しました。
まとめ：JINでブログカードが表示されない時はGutenbergエディタで編集されていないかチェック
ブログを始めた頃、標準のエディタになっていたからよく分からず使っていただけのGutenbergエディタ。
まさかそのせいで後にトラブルが発生するとは思ってもいませんでした。
Gutenbergエディタが現在推奨されていない理由がわかった気がします。
将来的にはJINもGutenbergエディタに完全対応するのかもしれませんが、しばらくはClassic Editorを使うのが良さそうですね。
「ブログカードが表示されない！！」と困っている方、まずは
- 前後に十分な余白をとる
- プレーンテキストで貼り付けてみる
- パーマリンクをID表記に変えてみる＜https://〇〇〇/?p=記事のID＞
- 前後の<p></p>を外してみる
などを試してみてください。
それでも解決できない時は、テキスト画面を確認し、<!– /wp:〇〇〇 –>というコードが入っているかどうかを確認してみてくださいね^^
