WordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法

2018.03.11 2018.05.03WordPress
WordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法

僕はWordPressに投稿する場合、基本的にテキストエディターを使ってHTMLタグも手で打ったりAddquicktagに登録したものを使ったりしているので、ショートコードとは無縁のWPライフを送ってきました。

しかし、最近ブロガーさんやWebメディア運営に力を入れている会社さんからの制作依頼が増え、それに伴い「ビジュアルエディターで、より快適に記事を書く」ことを考えるようになりました。

ビジュアルエディターではHTMLタグを直打ちはできませんので、ショートコードを利用して環境を整える必要があります。

いらんところにpタグやbrタグが入ってしまう!

非常に便利なショートコードですが、一つ問題がありました。

それは、意図しないところでpタグ(段落)やbrタグ(改行)が挿入されてしまうこと。

これが原因で、変なところにスペースが空いてしまったり表示が崩れたりということが起きてしまいます。

ということで、今回はWordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法を見つけましたので、ご紹介します。

pタグやbrタグを挿入しない方法アレコレ

軽くネットをさらってみると、WordPressの投稿にpタグやbrタグを挿入しない方法はいろいろと出てきます。

たとえばテーマのfunctions.phpに以下のよう書くと、投稿本文にpタグ&brタグが自動で入るのを解除することができます。

remove_filter('the_content', 'wpautop');

しかしこれをやってしまうと、ショートコード以外の部分でもすべてpタグやbrタグが挿入されなくなります。

WordPressでは通常、編集画面でEnterを押すと改行されたり段落になったりという動作をします。この仕様自体はとても便利ですので、これをナシにしてしまうのはもったいないですよね。

次に試してみたのは、自動整形(勝手にpやbrを入れる機能)のタイミングをずらす方法。

テーマのfunctions.phpに以下のように書くと自動整形の実行順を遅らせることができます。

//自動整形の実行順を変更
remove_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'wpautop' , 12);

投稿本文(the_content)に対して自動整形(wpautop)が実行されるのを遅らせることで、ショートコードが出力された後に自動整形されるようになります。

これならショートコードで出力されるHTMLソースの中に勝手にpタグが入るのを防ぐことはできますが、自動整形のタイミングがずれることで他の部分に影響するおそれがあります。

僕の場合も、ショートコードは無事に出力されましたが、他の部分で意図しない箇所に自動整形が効いてしまいました。

自動整形された後にソースを書き換える方法

で、最終的に落ち着いたのはこの方法。

自動整形された後に、ショートコードの前後に挿入されたpタグとbrタグを削除する方法です。テーマ内のfunctions.phpに追記してください。

//ショートコード周りの自動整形を解除
function shortcode_p_fix($content) {
$array = array (
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'shortcode_p_fix');

ショートコード周りに自動整形が効いた場合、ソースは以下のようになります。

<p>[shortcode]</p>
[shortcode]<br />

ですので、この “<p>[” “]</p>” “]<br />”を、”[“と”]”に書き換えてしまうわけですね。

ショートコード以外でも効くので注意

ただ、この方法も完全にショートコードのみに効くという訳ではありません。

投稿の文章が”[“で始まる、または”]”で終わる場合には、その前後にpタグやbrタグが挿入されません。

そのため、本来なら段落にしたい・改行したいという箇所でも、その文章が”[“で始まっていたり”]”で終わっていたりすると自動整形してくれないので注意が必要です。

まとめ

以上、WordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法でした。

このWordPressの自動整形機能については、苦しめられている人もたくさんいるようで、ネット上にもいろいろな情報が出ています。

僕も「何とかしてくれ……」と思ってしまうこともありますが、開発側から見ればたしかにショートコードだけ判別して自動整形を効かさないようにするのは難しいですし、HTMLを知らない人からすれば自動整形は便利な機能なはずなので悩ましいところです。

将来的に何か対策されるかもしれませんが、それまではケースバイケースで対応するしかなさそうです。

柴田竹思

柴田竹思

ベトナム在住Web系フリーランス。有名企業から個人事業まで、いろんなウェブサイトを制作してます。これまで400弱くらい作りました。一年中WordPressばっかりいじってます。

プロフィールはこちら