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

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が苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

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

プロフィールはこちら