勝手に閉じるWordPressのPタグをねじ伏せる5つの呪文

WordPressで自動改行処理をするwpautopの条件と対処方法、また無効にする方法についてまとめました。

勝手に閉じるWordPressのPタグをねじ伏せる5つの呪文

WordPressのパラグラフ処理は、少し癖がありますね。

頼まれもしないのに勝手にPタグくっつけておきながら、いざ自分で装飾に使おうとすると、ちょっとしたことでブチブチ切れてしまうので困ってる方も多いんじゃないでしょうか。

…ということで傾向と対策について考えてみました。

WordPressの改行タグが閉じる条件

WordPressでは基本的に2連続の改行、つまりテキストの前後に空行が1行以上入ると<P>タグで囲まれるようになっています。

この処理は wpautop() という関数がおこなっており、他にもいくつかの条件でパラグラフを認識しています。

  • 改行コード2連続
  • 行頭のURL
  • Pタグの中にDIVタグを入れる

傾向1: 改行コード2連続でPタグが閉じる

前述の通りWordPressの基本仕様です。

改行は一定のまとまりを示すために挿入するものです。だからこそPタグが設定されるのは理解します。

ただ、CSSで特殊な装飾を施したいような時は改行含めてひとまとまりで扱いたい場合もあるんですよね…。(´・_・`)

傾向2:行頭のURLで勝手にPタグが閉じる

WordPressは標準で様々な埋め込みコンテンツに対応しています。

YouTube動画などを初めとして、各種の埋め込み処理を自動で行ってくれる便利機能です。しかしテキストとしてURLを表示しようとしたいだけでも独立した段落で囲われてしまって困ることも。

具体例として、一つの段落に「テキスト<br>行頭のURL」という形でデータを流し込んでみます。

【DEMO】
<p class="define">
【Pタグの中にURLを書いた場合】
http://www.example.com/
</p>

Pタグには色を付けるスタイルを施しており、処理的には「テキストとURLが1つの色つきボックスに収まる」ことを期待しています。しかし実際のHTML出力は次のようになります。

独立するPタグ

コンソールで見ると、完全にPタグが分離していることが判ります。

取り立てて<P>タグに装飾を施してない場合は気にならないのですが、特別なスタイルを設定しようとすると気付かないうちに表示が崩れていたりします。

傾向3: Pタグの中にDIVタグを入れると勝手に閉じる

PタグにDIVを入れると分離するのはHTML側の理由です。

HTMLの仕様においてPタグで扱えるのはインライン要素のみであり、DIVのようなブロック要素を内包することは出来ません。

もしPタグに特定のスタイルを与えていて、その中にどうしてもDIVを入れたいときは外側もDIVにしてください。そしてPタグに与えていたクラスなどのスタイルをDIVに差し替えればOKです。

WordPressのPタグを勝手に閉じないようにする対策

実際にPタグを制御するための対策を考えます。

  • スペースを挟む
  • NBSPを挟む
  • ZWSPを挟む
  • <wbr>を挟む
  • wpautop関数を無効にする

対策1: 余分なスペースを入れる

2改行を埋めるため、余分な全角スペースを入れるととりあえず空行判定を回避することが出来ます。

【HTML】
<p>
 http://www.example.com/
</p>

【サンプル】
 http://www.example.com/

最も原始的かつ簡単な方法で判りやすいのですが、コピペすると全角スペースが見えちゃうのでちょっとカッコ悪いかも。でも手軽なんですよね。

対策2: NBSP(non-breaking space)を入れる

NBSP(non-breaking space: &nbsp; )とは、英語圏で使われる改行制御文字です。

【HTML】
<p>
&nbsp;http://www.example.com/
</p>

【サンプル】
 http://www.example.com/

その名の通り「改行をさせないスペース」です。単なる半角スペース代わりに使われがちな &nbsp; ですが、ハイフネーションなどとも関係が深い記号です。

対策3: ZWSP (Zero-width space)を入れる

ZWSP( ゼロ幅スペース: &#8203; )とは、「印字されないが処理上はスペースを与える」という意味の特殊文字です。

【HTML】
<p>
&#8203;http://www.example.com/
</p>

【サンプル】
​http://www.example.com/

NBSPに比べると地味ですが、見た目に現れないので使い勝手が良いです。

対策4: <wbr> 改行制御タグを入れる

NBSPなどと逆の発想で、どこでも改行できる制御コード<wbr>を挟んでみます。

【HTML】
<p>
<wbr>http://www.example.com/
</p>

【サンプル】
http://www.example.com/

行頭に入れた場合は特に何も起こらないし、余計なスペースも付かないし、コード見たときも実体参照よりスッキリしているので仕上がりは綺麗だと思います。

ただし元々 Netscape Navigator の拡張コードだったので、ごく一部のブラウザで表示が揃わない場合があります。モダンブラウザなら多分大丈夫だと思いますが。

対策5: そもそもPタグをつけない

自動挿入のPタグが嫌で嫌でたまらない場合は、Pタグを付ける関数 wpautop() そのものを無効にしてしまうという大技もあります。(^^;

自分が書いたコードをそのまま出したい!余計なお節介は一切不要!という場合は次のコードを function.php に書き込めば綺麗さっぱりです。

【function.php】
// 自動挿入のPタグBRタグ削除
remove_filter('the_content', 'wpautop');

おわりに

以上、WordPressのPタグをどうにかするTips5種でした。

WordPressいろいろ便利にやってくれるんですけど、たまに趣味が合わないことをしでかしてくれますね。

癖を理解して上手く付き合っていきましょう~。それではまた。(・∀・)/

【 更新履歴等 】

2014/03/31 初稿発表
2016/05/30 説明が足らなかった部分を大幅に書き足しました。
1851 / 旧URL /2014/03/31/tips_for_wpautop/