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

Cocoon

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

ブログカード
Cocoonのブログカードは、簡単に他サイトや自サイトへのカードタイプのリンクを作成できます。

外部サイトへリンク
外部サイトへのリンクカード

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

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

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

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

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

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

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

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

Cocoonのブログカードが原因で編集画面が開かない対処法

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

色々試した結果、

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

Cocoon設定を変更する

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

エディタ設定

該当ページの編集をクリック

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

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

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

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

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

Cocoonのエディタ設定を元に戻す

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


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

まとめ

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

追記:バグっってしまう原因と正しいブログカードの書き方

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

そこで、わかったのが

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

ということです。

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

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

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

  • ブロックカードを挿入する。
  • URLをカードの余白にコピペする。

これだけです。

ブログカード 1
私が迷ってしまったのは、ブログカードを挿入したあとに
・ツールバーが現れたことと
・本来URLを書くべきところをクリックしても、カーソルが表示されなかったこと
が理由です。

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