テキストエディタ内でHTMLタグを書いてページを作成する時に、非常に邪魔になるのがビジュアルエディタの自動変換機能です。以下の様な変換を勝手にしてくれます。
- 改行コードを勝手に<br>タグに変換
- ショートコーが<p>で囲われる
- 2連続で改行が入ると勝手に空の<p>～</p>を挿入
- 特定の記号を勝手に変換
このため、制作サイドとしては意図しないマークアップとなりレイアウト崩れの原因となり、クレームへとつながります。
この勝手に変換機能はエディタをビジュアルに切り替えた瞬間に発動するので、ビジュアルに切り替えなければ起こりません。しかし、業務案件になるとクライアントに「ビジュアルに切り替えるな」とも言えませんので、ビジュアルに切り替えられてもこの自動変換を停止しておく必要があります。
このページのコンテンツ
自動変換機能の停止方法
ショートコードにつく不必要なものを停止
functions.phpに下記コードを追記してください。
ショートコード自体が<p>～</p>で囲われても問題ない場合もありますが、場合によっては<div>や<section>などを<p>～</p>で囲ってしまう場合がありますので停止推奨。
function shortcode_empty_paragraph_fix($content) {
$array = array (
'<p>[' => '[',
']</p>' => ']',
']<br />' => ']'
);
$content = strtr($content, $array);
return $content;
}
add_filter('the_content', 'shortcode_empty_paragraph_fix');
<p>タグの自動挿入停止
functions.phpに下記コードを追記してください。
プラグインAdvanced Custom Fields（ACF）のWysiwygエディタにも、自動変換機能が働きますので、同様に停止させたい場合は下記コードの3行目の追加が必要です。
ACFでの注意点ですが、カスタムフィールドの出力部分をテンプレート化して、includeなどで別ファイルとして読み込む場合はインクルードするファイル内に下記コードの記述が必要です。functions.phpに書いた記述だけではACF側の自動変換は止まりません。
ちなみに、ACFのWysiwygエディタは設定時に「ビジュアルエディタ」の切り替え自体を無効にする事が可能です。（Pro版のみの機能かも？）
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
remove_filter('acf_the_content', 'wpautop');
記号の自動変換を停止
//the_contentの記号自動変換を無効化
remove_filter( 'the_content', 'wptexturize' );
//the_titleの記号自動変換を無効化
remove_filter('the_title', 'wptexturize');
その他、エディタに関する変換や出力の有効化/無効化
function my_customize_mce_options( $init ) {
global $allowedposttags;
$init['valid_elements'] = '*[*]';//空のタグの自動消去を無効化
$init['extended_valid_elements'] = '*[*]';//空のタグの自動消去を無効化
$init['valid_children'] = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';//aタグ内で全てのタグを使用可能にする
$init['indent'] = true;
$init['wpautop'] = false;//pタグの自動挿入を無効化
$init['force_p_newlines'] = false;//pタグの自動挿入を無効化
$init['force_br_newlines'] = true;//brタグの自動挿入を無効化
$init['forced_root_block'] = '';//pタグの自動挿入を無効化
return $init;
}
add_filter( 'tiny_mce_before_init', 'my_customize_mce_options' );
まとめ
ACFの自動変換だけが停止できなくてしばらくハマった経験があります。
各コード、重複した部分があると思いますが、管理人は大体の案件で上記コードを全て記述してます。今のところ何の問題もなく、意図した通りの挙動で動作しております。
この記事を書いた人管理人
SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。
