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

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

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

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

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

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

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

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

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

ビジュアルエディターの自動整形を無効にするコード

お使いのテーマ内にある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タグの自動挿入を無効化できます。

参考ページ:

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら