wordpressのビジュアルエディターとテキストエディターの切り替え

wordpressの投稿画面にはビジュアルとテキストの二つの編集モードが用意されています。 ビジュアルはTinyMCEというライブラリーが使われHTMLやCSSといったホームページ編集の知識がなくても簡単にページが作成できるように、ワードのような作成を補助する機能が、アイコンなどでわかりやすく用意されています。一方テキストはHTMLのソースコードをそのまま入力できより複雑で本格的なページを作成することができます。

それぞれ用途や編集能力によって使い分けができとても便利なのですが、ビジュアル・テキストで切り替えた場合TinyMCEとwordpressの自動整形で意図してない形に変換され崩れてしまいます。ビジュアルエディターの機能を外すことも出るのですが、クライアントは当然HTMLやCSSに不慣れな方が多いので好ましくありません。なので自動整形機能の一部を無効化します。

function override_mce_options( $editex_array ) {
    global $allowedposttags;

    $editex_array['valid_elements']          = '*[*]';
    $editex_array['ç'] = '*[*]';
    $editex_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
    $editex_array['indent']                  = true;
    $editex_array['wpautop']                 = false;
    $editex_array['force_p_newlines']        = false;

    return $editex_array;
}

add_filter( 'tiny_mce_before_init', 'override_mce_options' );

「valid_elements」「extended_valid_elements」で不正なコードとして削除されないものを設定します。上のコードでは*で全て保存されるようにしています。「valid_children」は親要素と要素の関係性を制御します。通常インライン要素の中にはブロックレベル要素を配置しないと言うルールがあるのですが、インライン要素であるaタグの中にブロックレベル要素を配置することがあります、この場合タグがブロックレベル要素の内側に配置し直されるのですが、これをしないようするように書いています。「wpautop」、「force_p_newlines」で段落の制御を無効に設定しています。これで影響は少なくなります。ただ完璧ではないので、切り替えを行う場合には気をつけてください。