JIN内部リンクカード 表示されない・・
記事の中で内部リンクカードを作ろと思ったのですが、プレビューで見てもURLのままで、リンクカードになりませんでした。。
そんな時の対処法についてメモしていきます！
- JINのテンプレートを使用
- WordPressでGutenbergからClassic editorに切り替えて、Classic editorを利用していた
- うまく内部リンクカードが表示される時とされない時があった
JINの公式で書いてあることは試した!
JINのマニュアルでブログカードが上手く作成できない時の対処法を確認しました↓↓
- ブログカードの前後に十分な余白
- プラグインで編集した特殊なパーマリンクは反映されない
- 外部リンクはリンクカードにできない
しかしながら、↑の対処をしましたがブログカードは表示されませんでした。
別の原因であることが想定できました。。
ちなみに結論としては、プラグインでパーマリンクをリダイレクトしたURLでも最終的には上手くブログカードを作ることができました。
パーマリンクを編集するプラグインによって、挙動が変わると思います。
参考までに私が利用していたプラグインはRedirectionでした。
また、他の方法でリダイレクトしたURLを記事ID番号に変える方法も試しましたがダメでした。わざわざ記事のIDを指定したURLにする必要はなかったです。
結論、Gutenbergのコードが諸悪の根源だった・・
結論、↓のような<!–/wp:○○–>で表されるGutenbergのコードがあることによって、内部リンクが表示されませんでした。
そのため、対処としては<!–/wp:○○–>のようなコードを記事から削除すれば内部リンクは無事に表示されました。
<!--/wp:○○-->
文字列、画像など
<!--/wp:○○-->原因の洗い出し（新規記事で内部リンクができるかの確認）
URL貼り付けただけで見やすいブログカードが作成できるのはJINのメリットですよね〜
まずは新規の記事に通常通りURLを貼り付けただけでブログカードが作られるのかどうかを確認します。
※いろいろなURLを貼り付けていますが、プラグインでパーマリンクをいじったURLや記事のIDにしたURLなどを切り分け的な意味で試しております。
↓↓いろんな形でURLを貼り付けてみて、ブログカードが表示されるのかを確認してみる！
↓↓おお、上手くブログカードが表示されました！！！
原因の洗い出し（Gutenbergのコードが入っているとどうなるかの検証）
↓↓切り分けの意味で、Gutenbergのコードをいれてみると見事にリンクカードの作成に失敗しました！
↓↓そして、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の挙動がおかしくなっていた
