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

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

記事の中で内部リンクカードを作ろと思ったのですが、プレビューで見てもURLのままで、リンクカードになりませんでした。。

今回はその解決方法をメモとして残しておきます！

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

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

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

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

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

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

結論、<!–/wp:○○–>で表されるGutenbergのコードがあることによって、内部リンクが表示されませんでした。

そのため、対処としては<!–/wp:○○–>のようなコードを記事から削除すれば内部リンクが表示されました！！

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

文字列、画像など

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

まずは新規の記事に通常通りURLを貼り付けただけでブログカードが作られるのかどうかを確認します。

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

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

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

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

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

↓↓そして、Gutenbergのコードを消すと、内部リンクカードが無事に作成されるので、諸悪の根源がGutenbergのコードと判明しました。

ので、このGutenbergのコードを記事から削除すれば、内部リンクカードが表示されることになります!

Gutenbergのコードの例は以下となります！

<!–/wp:○○–>のコードがGutenbergのコードになります。

このコードが「」のようにコンテンツを挟んでいるので、その「」を削除してください。

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

JINはGutenbergに対応できていないです。

JINをテンプレートして使用している方はまずはWordpressでGutenbergからClassic editorに変更しましょう。

JINの公式でもClassic editorが推奨されています。
Classic editorへの切り替えは↓↓

WordPress5.0で旧エディター（Classic Editor）を使う方法

Classic editorに変更した後でもたまにGutenbergのコードが入っていても内部リンクカードが表示されることもあったり、挙動が不安定になることはあります。

だからこそ、この内部リンクが表示されない問題を後回しにしていたのですが、最近は全然内部リンクカードが作成されなかったので、やっとの思いで対処できました！！

スポンサーリンク

スポンサーリンク

本気でAWSエンジニアになるなら！

AWSに特化したコースがあるエンジニアリングスクールはまだまだ少ないです。
ですが、Raisetech（レイズテック）は現場レベルのAWSスキルを身につけられる実践的なエンジニアリングスクールとしておすすめできます！！

筆者自身も実際にAWSフルコースを4ヶ月間完走しており、エンジニアとしてスキルアップできました！

Raisetech（レイズテック）の紹介記事はこちら！