Cocoonでブログカードが表示されない時に確認すべきこと

Cocoonのブロックエディタを使っていて、エディタ上ではブログカードとして認識されているのに、公開するとURLがそのまま表示されたことはないでしょうか？

クラシックエディタを使っていた時はなかったのに、ブロックエディタを使い始めてから結構な頻度でそれが起こるようになりました。

URLを空ブロックにコピペしたらブログカードブロックに変換してほしい。。。

この記事では、Cocoonのブログカードブロックを使用した時に、ブログカードが表示されない原因と、正しく表示されるための手順をご紹介しています。この記事を読むことで、Cocoonのブロックエディタ使用時に安定してブログカードを表示させることができます。

ブログカードがURLのまま表示される原因

書式有でURLを張り付けた時のブログカードの実際のコード

書式有でブログカードにURLを張り付けると、

• <a>タグで囲まれる
• <p>タグの前後に空白ができる

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p> <a href="https://xxxx/</a> </p>


</div>

この状態だと、URLがそのまま表示されてしまいます。

期待通りに表示される時のブログカードの実際のコード

期待通り表示されるには、

• <a>タグで囲まれる
• <p>タグの前後に空白がない

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p><a href="https://xxxx/</a></p>


</div>

ブログカードが必ず表示される貼り付け方

<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p>https://xxxx/</p>


</div>

プレーンテキストで張り付けると、<a>タグが入らないので、<p>タグに余計なスペースも入らなくなります。

ブログカードが表示されない時の確認方法

何かおかしいと思ったら、HTMLコードを確認しましょう。

まとめ

Cocoonのブロックエディタはとても便利で多機能なので、覚えるまでが大変です。トラブルが起きない方法を見つけて、手順を固定化していくと不思議な動きに悩まされることもないかと思います。