ブログ

JIN内部リンクカード 表示されないを解決した方法!!【WordPress】

JIN内部リンクカード 表示されない・・

記事の中で内部リンクカードを作ろと思ったのですが、プレビューで見てもURLのままで、リンクカードになりませんでした。。
そんな時の対処法についてメモしていきます!

  • JINのテンプレートを使用
  • WordPressでGutenbergからClassic editorに切り替えて、Classic editorを利用していた
  • うまく内部リンクカードが表示される時とされない時があった

JINの公式で書いてあることは試した!

JINのマニュアルでブログカードが上手く作成できない時の対処法を確認しました↓↓

ブログカードの作り方|JIN MANUAL

  • ブログカードの前後に十分な余白
  • プラグインで編集した特殊なパーマリンクは反映されない
  • 外部リンクはリンクカードにできない

しかしながら、↑の対処をしましたがブログカードは表示されませんでした。
別の原因であることが想定できました。。

ちなみに結論としては、プラグインでパーマリンクをリダイレクトしたURLでも最終的には上手くブログカードを作ることができました。

パーマリンクを編集するプラグインによって、挙動が変わると思います。
参考までに私が利用していたプラグインはRedirectionでした。

また、他の方法でリダイレクトしたURLを記事ID番号に変える方法も試しましたがダメでした。わざわざ記事のIDを指定したURLにする必要はなかったです。

結論、Gutenbergのコードが諸悪の根源だった・・

結論、↓のような<!–/wp:○○–>で表されるGutenbergのコードがあることによって、内部リンクが表示されませんでした。
そのため、対処としては<!–/wp:○○–>のようなコードを記事から削除すれば内部リンクは無事に表示されました。

<!--/wp:○○-->

文字列、画像など

<!--/wp:○○-->

原因の洗い出し(新規記事で内部リンクができるかの確認)

URL貼り付けただけで見やすいブログカードが作成できるのはJINのメリットですよね〜
まずは新規の記事に通常通りURLを貼り付けただけでブログカードが作られるのかどうかを確認します。

※いろいろなURLを貼り付けていますが、プラグインでパーマリンクをいじったURLや記事のIDにしたURLなどを切り分け的な意味で試しております。

↓↓いろんな形でURLを貼り付けてみて、ブログカードが表示されるのかを確認してみる!

↓↓おお、上手くブログカードが表示されました!!!

原因の洗い出し(Gutenbergのコードが入っているとどうなるかの検証)

↓↓切り分けの意味で、Gutenbergのコードをいれてみると見事にリンクカードの作成に失敗しました!

↓↓ん、Gutenbergのコードを入れて、プレビューで確認してみるとブログカードが上手く作成されずにURLのままになってしまっていますね。。

↓↓そして、Gutenbergのコードを消すと、内部リンクカードが無事に作成されるので、諸悪の根源がGutenbergのコードと判明しました。
ので、このGutenbergのコードを記事から削除すれば、内部リンクカードが表示されることになります。

削除すべきGutenbergのコード

Gutenbergのコードの例

  • <!–/wp:paragraph–>
  • <!–/wp:heading–>
  • <!–/wp:list–>
  • <!–/wp:image–> など

<!–/wp:○○–>のコードがGutenbergのコード
このコードが「」のようにコンテンツを挟んでいるので、その「」を削除してください。

「Search Regex」という検索・置換のプラグインを使って、大量にあるやつをまず置換。
その後、記事ごとに個別に<!–/wp:○○–>のコードを検索して、削除しました!!!

JINで快適に使うためにはClassic editorに変更しよう!

JINはGutenbergに対応できていないです。
JINをテンプレートして使用している方はまずはWordpressでGutenbergからClassic editorに変更しましょう。
JINの公式でもClassic editorが推奨されています。
Classic editorへの切り替えは↓↓

Classic editorに変更した後でもたまにGutenbergのコードが入っていても内部リンクカードが表示されることもあったり、挙動が不安定になることはあります。
だからこそ、この内部リンクが表示されない問題を後回しにしていたのですが、最近は全然内部リンクカードが作成されなかったので、やっとの思いで対処できました!!

まとめ

  • JINはGutenbergに対応できていない
  • JINを使用しているなら、WordpressでGutenbergからClassic editorに変えるべき
  • GutenbergのコードとJINの相性がよくないため、JINの挙動がおかしくなっていた
ABOUT ME
のこのこ
26歳フリーランスのネットワークエンジニア 文系第2新卒からSESに入社、2年目にフリーランスに転職 有益な資格試験の情報を主に提供していきます! ●保持資格 CCNP,LPIC level3,F5101,TOEIC820,AWSクラウドプラクティショナー ●目指す資格 ネットワークスペシャリスト,F5 201,AWSアソシエイトなど