【ワードプレス】Cocoonテーマで外部リンクでブログカードを使ったら、編集できなくなった場合の対処法

WordPressの無料テーマで大人気のCocoon。
わたしも、他サイトで使っていますが今回はエラーの対処法をご紹介します。

↑のような外部サイトや内部記事へのリンクを簡単にきれいにカード形式で表示できるのでとっても便利です♪

今回は、このブログカードを使ったときに、エラーが出てしまったときの対処法と解決策。正しい手順をご紹介します。

Cocoonでブログカードを挿入後、編集画面が開かなくなる現象

投稿や固定記事を、Gutenberg（グーテンベルク）編集モードで
編集しているとき起こります。

編集中に、ブログカードのブロックを挿入します。
そして、編集が終わったら「更新」ボタンをクリックして完了。

編集したページを通常モードで
確認していると、誤字脱字が。。。「あ！直さないと！」と思って
「投稿の編集」や「固定ページの編集」リンクをクリックします。

ですが、ページは真っ白のまま。しばらく経っても変わらず。

こんな現象が起こります。

焦りました。見えてはいるんですが、編集しようとしたらできない。
キャッシュを削除したり、Cocoon設定を何度も見直しましたが問題はない。。。

色々試した結果、

Cocoon設定のエディタ設定を変更すればいいことがわかりました。

ダッシュボード→Cocoon設定→エディタタブ→エディタ共通設定→Gutenberg設定→「Gutenbergエディターを有効にするのチェックを外す

クラシックエディターで画面が開きます！

とりあえず、この状態で、どこが悪いのか見てみます。

私の場合は、ブログカードに書いたURLが原因のようでした。
URL自体はあっているのですが、最後に[/](スラッシュ）を入れていなかったため
バグったようです。
URLはコピペするのが一番ですね。

ブログカード周辺の原因と思われる箇所を修正したら「更新」ボタンをクリック。

もし、原因がわからないようでしたら、一旦「ブログカード」を全部削除して
やり直したほうがいいと思います。

この後、先程、チェックボックスを外した場所を今度はオンにして元に戻します。

ダッシュボード→Cocoon設定→エディタタブ→エディタ共通設定→Gutenberg設定→「Gutenbergエディターを有効にするのチェックをオンにする。

以上で終わりです。
どうも、CocoonのテーマブロックはGutenbergだと動きが怪しいですね。。。
もし、今後もクラシックエディタでいいのなら、
無用なトラブルを避けるため、先程の手順の一番最後「チェックボックスを元に戻す」をやめてそのままにしておいてもいいと思います。

今日も同じ現象が起きたので
今回は、上記のやりかたでGutenbergのチェックを外したあとに
クラシックモード編集で、「テキスト」表示をしてソースコードを見てみました。

そこで、わかったのが

バグっているときは、ブログカードのブロックの中に、<a>　リンクタグが挿入されている。

ということです。

これで、自分の動作を思い返してみたのですが
ブロックカードを挿入したあとに、URLを書き込む際
ブロックのツールバーにある、URL挿入ボタンを使ってURLを挿入していたんです。

これがダメだったんですね。

つまり、正しい手順をまとめると

これだけです。

この、正しい手順がわかれば、もうGutenbergでもブログカードを
さくさく使えます！