WordPress – 自動整形を無効化してエディタのビジュアル/テキスト切替時のコード消滅を防ぐ！

WordPress

2021.01.12 2020.01.22

この記事は約4分で読めます。

WordPressの本文入力エディタにはビジュアルエディタとテキストエディタの2種類があります。
前者は実際の表示がプレビューされているような感じで、テキスト入力後、アイコンのクリック操作で見出しにしたり書式を変更したり、簡易的に操作できます。
私は専ら後者のテキストエディタを仕様していますが、こちらはhtmlタグを入力していく古典的なモードです。ビジュアルエディタでは入力できないタグや手の込んだデザインを制作する場合にはテキストエディタが必要となってきます。しかしクライアントに引き渡す案件などの場合は、HTMLやCSSの知識のない他のユーザーが操作することを考えて、簡単で分かりやすいビジュアルエディタを勧める場合が多いです。
しかし、テキストエディタからビジュアルエディタに切り替えた場合に、テキストエディタで入力していたコードが消えてしまうことがあります。これは WordPress の仕様である自動整形機能のせいで、空の spanタグ、pタグや brタグなどが消滅します。

これを回避するためには、下記コードをテーマ（子テーマが望ましい）の functions.php に追記します。
特に他社に引き渡す案件の場合は、私は必須だと思っています。

<?php
//エディタのビジュアル/テキスト切替でコード消滅を防止（自動整形無効化）
function my_tiny_mce_before_init( $init_array ) {
    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';
    return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );
?>

他にも、pタグの自動挿入を無効にしたり、aタグ内に入れられるタグの制限（aタグ内にpタグやdivタグを入れられない）を解除することが可能です（aタグは特殊で親要素のコンテンツモデルを継承しますので、親要素により、中に入れることのできる要素が変わってきます）。

以下、コードですが、私は上記の自動整形無効化とpタグ自動挿入無効化を主に常用しています。

<?php
function my_tiny_mce_before_init( $init_array ) {
    //グローバル変数の宣言
    global $allowedposttags;
    //エディタのビジュアル/テキスト切替でコード消滅を防止（自動整形無効化）
    $init_array['valid_elements']          = '*[*]';
    $init_array['extended_valid_elements'] = '*[*]';
    //aタグ内ですべてのタグを仕様可能に
    $init_array['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
    $init_array['indent']                  = true;
    //pタグの自動挿入を無効化
    $init_array['wpautop']                 = false;
    $init_array['force_p_newlines']        = false;
    //改行をbrタグに置き換える
    $init_array['force_br_newlines']       = true;
    $init_array['forced_root_block']       = '';
    return $init_array;
}
add_filter( 'tiny_mce_before_init' , 'my_tiny_mce_before_init' );
?>

なお、このコードは、必ず functions.php ファイルの最後に追記します。そうしないと、その後のコードの動作が反映されなくなる場合があります。

以上、ご参考になれば幸いです。