WordPressの無料テーマで大人気の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をカードの余白にコピペする。
これだけです。
この、正しい手順がわかれば、もうGutenbergでもブログカードを
さくさく使えます!