Cocoonの商品リンクショートコードでHTMLを含む場合はカスタムHTMLブロックを使う

Cocoon WordPress
この記事は約3分で読めます。

WordPressテーマ「Cocoon」を使用していますが、便利なショートコードがいろいろあります。

特に、Amazonアソシエイトや楽天アフィリエイトの商品リンク広告用ショートコードはとても便利でよく利用しています。
このショートコードは、HTMLタグでリンクも挿入できる仕様になっていますが、Gutenbergのブロックエディタのショートコードブロックを使用すると、うまく表示されずに崩れてしまいます。
そういう場合は、「カスタムHTML」ブロックを使用すればいいみたいです。

なお、今回のバージョンは以下の通りです。

  • WordPress 5.1
  • Cocoon 1.6.2
スポンサーリンク

CocoonのAmazon商品リンクショートコード

CocoonのAmazon商品リンクを挿入するショートコードの構文はこちら。

[amazon asin="B07969N2W9" kw="Samsung SSD 500GB 860EVO"]

ショートコードのパラメータ「btn1_tag」「btn2_tag」を使うと、HTMLタグで独自のリンクを前後に挿入できます。

[amazon asin="B07969N2W9" kw="Samsung SSD 500GB 860EVO"
btn1_tag='<a href="https://www.samsung.com/semiconductor/minisite/jp/ssd/consumer/860evo/">公式サイト</a>'
btn2_tag='<a href="https://www.samsung.com/semiconductor/minisite/jp/ssd/consumer/860evo/">公式サイト</a>']

しかし、ショートコードブロックで独自のリンクを記述した方は、うまく表示されません。。
ショートコードブロックでこのように記述したものが、

Cocoon 商品リンクショートコード

画面上、このように表示されてしまいます。

Cocoon 商品リンクショートコード

HTMLを含むショートコードは「カスタムHTML」ブロックを使用する

Cocoon 商品リンクショートコード

投稿編集ページを開き直してブロックエディタを見ると、「このブロックには想定されていないか無効なコンテンツが含まれています。」と出ています。
ショートコードブロック内にHTMLタグを記述することは想定されていないようです。

Cocoon 商品リンクショートコード

なので、「HTMLに変換」ボタンで「カスタムHTML」ブロックに変換します。
念のため、変換されたものが変に特殊文字とかに変わっていないかは確認しておいた方が良さそうです。

Cocoon 商品リンクショートコード

もしくは、ショートコードにHTMLを含む場合は初めから「カスタムHTML」ブロックで記述しましょう。

そうすれば、このようにショートコードも解釈されて正しく表示されます。

以上です。

スポンサーリンク
スポンサーリンク
WordPress
えふめん

業務系SE・社内SEの仕事を通じて学んだことや調べたことを書いています。

えふめんをフォローする
\よかったらシェアしてね/
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました