WordPressの囲み型ショートコードは、以下のようにショートコードで囲んだ範囲に何かをするという機能を持つショートコードで、以下が基本的なプログラムの作成パターンです(簡易的なものです)。
function sample_shortcode($content = null){
.........
$output = '<div>'.$content.'</div>';
return $output;
}
add_shortcode('sample-sc','sample_shortcode');
そして上記のプログラムの場合は、以下のようにショートコードを使うことで中身を表示することができます。
[sample-sc]
中身のコンテンツ
[/sample-sc]
でもこのショートコードには、ちょっと問題があります。
それは、中身のコンテンツの前後に「p(段落)」タグが勝手に自動で挿入されることです。
例えばショートコードの中身をグループ化して、背景色などを付けるとこの不具合が分かります。

上下に背景色のない部分がありますね。
これをデベロッパーツールで見てみると、以下のようになっています。

ショートコードのプログラムの中にはこんなタグ挿入していないのに、確かに出力されています。
ただ、これをソースコードで見ると様相が異なり、こんな風に出力されています(コードは整形しなおしています)。
<div class="ha-accordion">
<div class="ha-accordion-button"><span>クリックすると開閉します(アコーディオン表示ショートコード)</span></div>
<div class="ha-accordion-detail">
</p>
<p>アコーディオンの中身</p>
<figure class="wp-block-image size-large">...</figure>
<p>
</div>
</div>
分かりやすいように先ほどのアコーディオン表示をさせている部分にしていますが、中身のコンテンツの前に「</p>」という終了タグのみが、後ろに「<p>」という開始タグのみが挿入されています。
つまり、これをWordPressがHTMLとして出力する際に「ここ終了(開始)タグがないな..」と判断して、それぞれ終了タグと開始タグを補完しているため、デベロッパーツールで表示した時(上の画像)のように空のpタグが挿入されているという風になっているのです。
これは、単独のショートコードでは発生しないことから、囲み型ショートコードのみで発生するものと限定していいと思われます。
例では空のpタグが挿入されていますが、brタグが挿入されてしまうケースもあるようです。
前置きが長くなりました。
今回は、囲み型ショートコードのコンテンツ前後に挿入される、謎の?pタグやbrタグを削除する方法を2つ紹介します。
なお、コード自体は他のページで掲載されているもので、そのままこのページへ転載することを避けるため、コードの説明と該当の参考ページへのリンクを掲載する形にとどめておきます。
囲みショートコードのコンテンツ前後に入るpタグを削除する方法
ショートコードが含まれるページで余分なpタグやbrタグを削除する
コードが掲載されているページ:WordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法
コード自体は上記のページを参照ください。
参考ページにも書いてある通り、意図したショートコード以外でも動作してしまい、目的のショートコードでない部分にも影響が出る可能性がありますのでご注意ください
なお、参考ページでは、ショートコードが含まれるすべてのページで機能が効いてしまうので、コードを以下のよううに特定のショートコードがあるページは..とすることで、影響を最小限にできると思います(ただし、そのショートコードが挿入されているページ本文内のすべてに効くのでこれでも不都合があるかも知れません)。
function ユーザー定義関数名(){
if ( has_shortcode( $content, 'ショートコード名' ) ) {
array(.....
}
}
add_filter('the_content','ユーザー定義関数名');
コンテンツ出力前に整形しなおして余分なpタグやbrタグを削除する
コードが掲載されているページ:remove empty tags from wordpress shortcodes via a php functon
コード自体は上記のページ内の「This is an old question, but I solved this today and thought I’d share…」回答を参照ください。
機能としては、pタグとbrタグを削除するフィルターを用意して、ショートコードプログラム内でこのフィルターをコンテンツ部分に引っ掛けるという方法で、そのショートコードだけに限定できるのが前述のコードよりも使いやすい点でしょう。
ただしこのコードでは、コンテンツ($content)の中にあるpやbrタグをすべて削除してしまうので、中身に正当に挿入された段落ブロックや改行タグも削除されてしまう点に留意する必要があります
どちらも一長一短があるので一概にこちらで!とは言えないところではありますが、個人的には後者を使った上で段落ブロックを$content内に配置した場合に、何かの設定(色とか文字の大きさとか)を指定して単純な段落ブロック(pタグのみではない)と判断させるようにするといいのでは?と感じます。
コメントを残す