WordPressにはHTMLなしで記事の編集ができる「ビジュアルエディター」と、HTMLタグを手打ちできる「テキストエディター」の2種類があります。

ビジュアルエディターではeditor-style.cssを利用することで実際の見た目に近い状態で記事を確認しながら編集ができるため、クライアントに納品する場合などには重宝します。

ビジュアルエディターの自動整形が表示崩れの原因に

大変便利なビジュアルエディターですが、自動整形が原因で表示が崩れてしまうことが多々あります。

自動整形はHTMLタグなしで記事を編集することを想定して実装されている機能で、文章を改行した箇所に改行タグ(br)が挿入されたり、段落をpタグで囲んだり、spanタグなどを削除したりという処理をしてくれるものです。

とはいえこの自動整形機能が原因で予期せぬ箇所にタグが挿入されたり、また削除されたりして表示崩れが起きやすくなっているのも事実です。

今回は、このWordPressのビジュアルエディターに実装されている自動整形機能を無効化する方法についてのメモです。

【WordPress】ビジュアルエディタの自動整形機能を無効化する方法

お使いのテーマ内にあるfunctions.phpに追記してください。

functions.php

/* ビジュアルエディタがタグを勝手に削除するのを阻止
---------------------------------------------------------- */
function custom_tiny_mce_before_init( $init_array ) {
  global $allowedposttags;

  $init_array['valid_elements'] = '*[*]'; //すべてのタグを許可(削除されないように)
  $init_array['extended_valid_elements'] = '*[*]'; //すべてのタグを許可(削除されないように)
  $init_array['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']'; //aタグ内にすべてのタグを入れられるように
  $init_array['indent'] = true; //インデントを有効に
  $init_array['wpautop'] = false; //テキストやインライン要素を自動的にpタグで囲む機能を無効に
  $init_array['force_p_newlines'] = false; //改行したらpタグを挿入する機能を無効に

  return $init_array;
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_before_init' );

tiny_mce_before_initというフィルターを使って自動整形機能をカスタマイズします。

valid_elementsは、エディターが記事を保存する際に削除しないタグを指定できます。

ここでは「*[*]」としていますが、これは「すべて」という意味です。

extended_valid_elementsはvalid_elementsとよく似ていますが、独自にvalid_elementsとして追加するためのオプションです。

valid_elementsですべてを許可していれば指定する必要はないかも？　と思いましたが、検証しきれないので書いておきます。

valid_childrenは、あるタグの中に入れられるタグを指定できます。

ここではaタグの中ですべてのタグを使えるようにしています。

indentはそのままの意味で、trueにすることで文章の先頭にインデント(字下げ)を入れられるようにしています。

wpautopとforce_p_newlinesはpタグの自動挿入に関する設定をするオプションで、falseにすることでpタグの自動挿入を無効化できます。