ハミングバードで吹き出しショートコードを使う時の記述方法

ハミングバードの吹き出しショートコードがWordPress5.7でうまく出力されない現象

OPENCAGEのテーマ「ハミングバード」で吹き出しショートコードを使った際、pタグがうまく出力されていない現象が起きていたので、解決方法についてまとめておきます。

pタグが正常に出力されていない現象

吹き出しショートコードについては、ショートコードの使い方 | OPENCAGEを参考にして下さい。

ショートコードと同じ行に本文を入力(段落なし)

scofield

ショートコードと同じ行に本文を入力。

編集画面(エディター)で下記の様に記述してみます。

実際には下記のコードが出力されます。

この場合、ショートコード内の本文にpタグが挿入されません。

ショートコードと同じ行に本文を入力(段落あり)

scofield

ショートコード内の本文に段落を挿入。

ショートコード内の本文に段落を挿入。

ショートコード内の本文に段落を挿入。

編集画面(エディター)で下記の様に記述してみます。

実際には下記のコードが出力されます。

この場合、最初の段落の開始タグ<p>が抜けていますし、最後の段落の終了タグ</p>の位置がずれています。そのため、WordPress5.7ではレイアウトが崩れてしまいます。

ショートコードと本文の間に段落を入れる

OPENCAGEに問い合わせてみたところ、ショートコードと文章を分けて書いて下さいとのことです。

エディタで下記のようなショートコードの書き方をされている場合、文章部分がPタグで出力されず、余分なPタグが挿入されることがございます。

下記のように、ショートコードと文章を分けて書いていただければ、吹き出しの中に正しくPタグが出力されるようになるかと思います。

お手数ではございますが、エディタにてご確認をいただければと思います。

ショートコードと本文を段落分けすることで、全ての段落にpタグが挿入されるようになります。ビジュアルエディターは「Enter 1回」、テキストエディターは「Enter 2回」で段落を挿入できます。

最後に

実際は問題なく表示されているケースがほとんどなので、気づいていない方もいると思いますが、本文とショートコードの間に段落を入れずに使っている場合は、1行の文章ではpタグが挿入されず、段落分けしている文章はHTMLの文法ミスが起きている可能性があるので注意して下さい。

ちなみに、旧ストークでも同じ現象が起きていたので、OPENCAGEのテーマで吹き出しショートコードを使っている方は、一度ソースを確認してみることをおすすめします。

スポンサーリンク
スポンサーリンク