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

WordPress
この記事は約4分で読めます。
スポンサーリンク

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

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

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
<?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 ファイルの最後に追記します。そうしないと、その後のコードの動作が反映されなくなる場合があります。

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

コメント

  1. TALO より:

    今回この記事を参考にさせていただきました。
    こちらのコードでWordPress自動整形無効化できなかったので何が原因か模索してました。

    他に考えられることありましたらご教授頂きたいです。

    宜しくお願い致します!

    • J. J. より:

      コメントありがとうございます。
      そちらの仕様と具体的な症状にもよると思いますのでなんとも言えませんが、もしかしてGutenbergを使用されてらっしゃるとかでしょうか?

  2. […] 引用元サイト https://se.ekaki-j.com/wp-code-disappearance/ […]

  3. […] なお、他に子テーマのfunctions.phpにコードを追記する方法もある。 https://se.ekaki-j.com/wp-code-disappearance/ […]

  4. D より:

    こんにちは。まさに私が実装したいことで大変参考になります。
    固定ページの自動整形に対しても同じ設定で対応可能でしょうか?

    • J. J. より:

      >Dさん
      コメントありがとうございます。
      お役に立てたとしたら、嬉しい限りです。
      投稿でも固定ページでも関係なく有効だと思います。

  5. しいな より:

    こんにちは
    コードをコピペして保存しようとしたら以下のエラーがでました

    wp-content/themes/cocoon-child-master/functions.php ファイルの8行目のエラーのため、PHP コードの変更をロールバックしました。修正し、もう一度保存してください。

    syntax error, unexpected ‘<', expecting end of file

    どうすれば良いのでしょうか?

    • J. J. より:

      >しいなさん

      コメントありがとうございます。
      エラー内容から、‘<'に対する終了の記述が無いということですね。 構文エラーなので、どこか記述が間違っているのだと思います。 コピペされたということですが、もしかして、 もコピペして、最初から記述していたものと重複していたりしていないでしょうか?
      functions.php ファイルの8行目を含むコピペ内容を拝見できれば、何か分かるかもしれません。
      よろしくお願いいたします。

      • しいな より:

        ご返信ありがとうございます
        私も長くテキストエディタのみで作業してビジュアルの方を急いで扱えるようになる事情で急いでいたのと、functions.phpについての知識が皆無だったため、取り急ぎ、他の方が公開しているコピペを使わせてもらうことにしました。
        せっかく返信頂いたのに申し訳ございません
        またこの構文が必要になったときには宜しくお願いします

        • しいな より:

          恥ずかしながらトピック違いですが質問させてください
          テキストエディタからビジュアルエディタに切り替えると毎回一番下が表示されてスクロールが面倒なのですが、これは仕様なのか設定で変えれるのでしょうか?
          今更ビジュアルエディタとテキストエディタについて解説しているサイトも少ないので、失礼ながら質問させて頂きました

          • J. J. より:

            >しいなさま

            それは、もしかして、テキストエディタの時点でマウスカーソルが一番下にある(フォーカスされている)のではないでしょうか?

  6. しいな より:

    基本的すぎて見落としていましたカーソルに連動してたんですね
    わざわざご返答いただきありがとうございました
    また小技記事などの更新楽しみにしています

タイトルとURLをコピーしました