WordPressで既存サイトのテーマ化などを行った際、胃が痛いのがWordPressの自動整形の問題だと思う。
これはWordPress内部に定義されている wpautop という関数が行っている処理なのだけど、この関数が結構やっかいで、
- 改行コードを
<br>タグに変換 - インラインタグまたは文章には
<p>タグを適用 - 改行が2回続いたら
<p>タグを適用
といった処理を自動的に行ってしまうのである。
通常、ブログ用のテーマを使っているのであれば大きな問題にはならず、逆にタグを正規化してくれるので便利な関数なのだけど、通常のウェブサイトにまでこれが適用されてしまうと、単純に2回改行を入れたいだけなのに <p> タグを挿入されてレイアウトが崩れてしまったり、意図しないところに <p> タグが紛れ込むことでレイアウトが崩れてしまったりと、割と余計なお世話の関数だったりする。
また、この wpautop はビジュアルエディタであるTinyMCEにも組み込まれており、WordPressのエディタを切り替えたタイミングで実行され、やっぱり <p> タグや <br> タグを自動的に変換してしまうのである。
プラグインを利用して一括回避
これを簡単に回避出来るプラグインが PS Disable Auto Formatting である。
このプラグインを導入するだけで、ビジュアルエディタ上の変換機能を停止しさらに出力の変換も停止してくれるため、とにかく便利なプラグインだったのだけど・・・
2015年10月13日現在、WordPress 4.3.x 系でWordPress側のエディター切替スクリプトが大幅に修正された影響を受け、このプラグインを導入するとビジュアルエディタとテキストエディタの切替ができなくなってしまう。
そのため、WordPress 4.3.x 系ではこのプラグインを利用することが出来なくなってしまったのである。
プラグインを使わず手動で対応する
というわけで、プラグインを使わずに手動で対応する方法をまとめてみた。
出力側の変換機能を無効化する
出力の自動変換を回避するためには、functions.php に以下のコードを追加する。
remove_filter( 'the_content', 'wpautop' );
これで投稿本文においては、上記の wpautop による処理がされなくなるため、HTMLがそのまま出力される。
ただ逆に、改行の自動変換も効かなくなってしまうため <br> タグが挿入されていないと改行さえ無効になるので注意が必要。
さらに出力側の余計な変換機能を無効化する
WordPressの出力関数にはさらにフィルターが組み込まれていて、特定の記号のならびを別の文字に変換したり、ダブルクォートやシングルクォートを実体参照に変換したりしている。
これが便利なようで逆に不便で、たとえばコード中のHTMLコメントなんかも変換されてしまい、レイアウトが崩れたりしてしまう。
というわけで、以下のコードを用いてこのフィルターを解除しておくことで、さらにHTMLコードを忠実に出力することが出来る。
remove_filter( 'the_content', 'wptexturize' );
ビジュアルエディタの変換機能を無効化する
ビジュアルエディタ側の対応もそこまで難しくない。
functions.php に以下のコードを追加することで簡単に回避できる。
function override_mce_options( $init_array ) {
$init_array['indent'] = true;
$init_array['wpautop'] = false;
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'override_mce_options' );
さらにビジュアルエディタの余計な機能を無効化する
ついでにビジュアルエディタに備わっている余計なフィルターを無効化することで、さらに便利に利用することができる。
先ほどのコードを以下のように修正。
function override_mce_options( $init_array ) {
global $allowedposttags;
$init_array['valid_elements'] = '*[*]';
$init_array['extended_valid_elements'] = '*[*]';
$init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
$init_array['indent'] = true;
$init_array['wpautop'] = false;
$init_array['force_p_newlines'] = false;
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'override_mce_options' );
上記のコードは以下のようなことをしている。
- 全てのタグ・全ての属性を許可（空の
<span>タグや<div>タグなどが削除されるのを防ぐ） -
<a>タグに全てのタグを入れられるようにする - 自動的に
<p>タグで囲われることを防ぐ
これでビジュアルエディターを使ったときにも、タグが無くなったり変換されてしまうことを最小限に抑えられると思う。