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

2018.03.11 2020.10.24 WordPress

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

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

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

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

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

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

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

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

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

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

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

functions.php

remove_filter('the_content', 'wpautop');

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

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

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

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

functions.php

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

参考ページ: WordPress the_content で本文が展開される前または後にフィルターをかけるには – Qiita

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

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

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

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

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

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

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');