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を知らない人からすれば自動整形は便利な機能なはずなので悩ましいところです。

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

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら