【WordPress】input要素の前に改行（br）が強制的に挿入される

Tweet

Category WordPress 2012/01/18

問題

WordPressで、Javascriptの動くデモなどを記事の中に書こうとしたら、inputタグの付近で改行が入ってくる。

普通に横に並んで欲しいんだけどな。。。

答え

現状ちょっと対応が厄介だが、自作のプラグインで何とかできる。

原因

WordPressのデフォルトの機能で、記事投稿画面で改行を入れたら <br /> を入れる、改行改行を入れたら段落とみなして <p>～</p> で囲む、といったことをしてくれる機能がある。通常の記事を書いているぶんには、まあ便利な機能である。

この働きは、wp-includes/default-filters.php に書かれているため、デフォルトで有効となっている。記事の内容を表示するときに、wpautopというフィルタを通す設定である。

add_filter( 'the_content', 'wpautop'            );

wpautopは、wp-includes/formatting.php に書かれている関数で、正規表現や置換を繰り返して、テキストやHTMLを表示に適したよい形に直してる。

そのwpautop()の処理の中でも、最初の方にある記述の以下の部分で、さっそくinput要素の前に改行が挿入されている。

	$allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|option|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary)';
	$pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', "\n$1", $pee);

HTMLの要素の一覧らしき $allblocks がハードコーディングされているので、対策しようにも手を出しづらい。

対策

以下のコードを、テーマファイルのfunctions.phpに追記するか、自作のプラグインとして設置する。

//適当に競合しないであろう名前をつけた。いい名前があったら変更してください。
function XXXInput($x) {
	return str_replace('<input', '<xxxinput', $x);
}
function deXXXInput($x) {
	return str_replace('<xxxinput', '<input', $x);
}
add_filter( 'the_content', 'XXXInput', 5);
add_filter( 'the_content', 'deXXXInput', 999);

WordPress本体に手を加えるのは避けるべきなので、対策として上記のように、wpautopフィルタが入る前と後にフィルタを追加する方法を取った。

inputタグを一時的にinputタグに見えないようにして、wpautopしてもらってから、元に戻している。

add_filter()の第3引数は優先順位で、wpautopはデフォルトの10なので、追加のフィルタの優先順位は、それより上と下に調整するために指定している。

なぜinput要素がブロック要素の仲間に入っているのか不明であるが、それなりの理由があるのだろうか。