Help us understand the problem. What is going on with this article?

WordPressの自動整形(ビジュアルエディタ含む)を無効にする方法

More than 3 years have passed since last update.

WordPressで既存サイトのテーマ化などを行った際、胃が痛いのがWordPressの自動整形の問題だと思う。

これはWordPress内部に定義されている wpautop という関数が行っている処理なのだけど、この関数が結構やっかいで、

  • 改行コードを <br> タグに変換
  • インラインタグまたは文章には <p> タグを適用
  • 改行が2回続いたら <p> タグを適用

といった処理を自動的に行ってしまうのである。

wpautop関数

通常、ブログ用のテーマを使っているのであれば大きな問題にはならず、逆にタグを正規化してくれるので便利な関数なのだけど、通常のウェブサイトにまでこれが適用されてしまうと、単純に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の出力関数にはさらにフィルターが組み込まれていて、特定の記号のならびを別の文字に変換したり、ダブルクォートやシングルクォートを実体参照に変換したりしている。

wptexturize関数

これが便利なようで逆に不便で、たとえばコード中の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> タグで囲われることを防ぐ

これでビジュアルエディターを使ったときにも、タグが無くなったり変換されてしまうことを最小限に抑えられると思う。

jyokyoku
インスパイアデザインの取締役兼、エンジニア。WordPressのテーマ・プラグイン開発を年間100件以上、独自のフレームワークを用いて開発をしています。
http://inspire-tech.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした