WordPress のビジュアルエディタの自動整形機能(wpautop)の動作が、思わぬ弊害を生むことがあります。自動整形機能といい感じで付き合っていくための設定メモです。
目次
- テキストエディタからビジュアルエディタに切り替えたときに pタグ、brタグが消えないようにする
- 空の pタグが勝手に入り、意図しない余白ができるのを防ぐ
- 任意の記事だけ wpautop を無効にする
- ビジュアルエディタに切り替えると、空の span タグや i タグが消えてしまうのを防止
- (未解決)ビジュアルエディタに切り替えると data- 属性が消えるのを防止
- (解決不可)ビジュアルエディタに切り替えると、インデントや空白行が消える
1. テキストエディタからビジュアルエディタに切り替えたときに pタグ、brタグが消えないようにする
TinyMCE Advanced プラグインを使う。
"Keep paragraph tags (段落タグの保持)" にチェック。
投稿画面のエディタを簡単にカスタマイズして使いやすさをアップできるので、このプラグインの主機能も必須。
2. 空の pタグが勝手に入り意図しない余白ができるのを防ぐ
テキストエディタで pタグや空白行がある状態でビジュアルエディタに切り替えるとpタグが勝手に生成され、意図しないマージンができる。
解決策は次項 3 のコードで。
3. 任意の記事だけ wpautop を無効にする
一般ユーザーはビジュアルエディタで編集するため、通常は自動整形機能を有効にしておきたい。特定のページは、コーダーがHTMLタグで作り込むので wpautop を無効にしたい、と言ったケースで有用。
functions.php に以下を追記し、wpautop を無効にしたい記事は冒頭にコメント '<!--noautop-->' を入れる。
/**
* 投稿冒頭のコメントで autop を無効化
* @link https://elearn.jp/wpman/column/c20130813_01.html
*/
function noautop( $content ) {
if ( strpos( $content, '<!--noautop-->' ) !== false ) {
remove_filter( 'the_content', 'wpautop' );
$content = preg_replace( "/\s*\<!--noautop-->\s*(\r\n|\n|\r)?/u", "", $content );
}
return $content;
}
add_filter( 'the_content', 'noautop', 1 );
Toggle wpautop プラグインを使う方法もあるが、単純な処理なので直書きを選んだ。
4. ビジュアルエディタに切り替えると、空の span タグや i タグが消えてしまうのを防止
font-awesome の iタグを使う時などは必須。
functions.php に以下を記述
/**
* ビジュアルエディタに切り替えで、空の span タグや i タグが消されるのを防止
*/
if ( ! function_exists('tinymce_init') ) {
function tinymce_init( $init ) {
$init['verify_html'] = false; // 空タグや属性なしのタグを消させない
$initArray['valid_children'] = '+body[style], +div[div|span|a], +span[span]'; // 指定の子要素を消させない
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_init', 100 );
}
5. (未解決)ビジュアルエディタに切り替えると data- 属性が消えるのを防止
まだ解決できていない。
data- 属性を使う JavaScript を採用する場合は必須。
上記記事を参考に前段落のコードを修正してみたがうまくいかなかった。→ ★★要修正
<?php
/**
* ビジュアルエディタに切り替えで、空の span タグや i タグ、data- 属性が消されるのを防止
* @link https://www.the-triad.jp/blog/wordpressのエディタが独自拡張の属性値を消してしまう/
*/
if ( ! function_exists('tinymce_init') ) {
function tinymce_init( $init ) {
$init['verify_html'] = false; // 空タグ、属性なしのタグを消させない
$initArray['valid_children'] = '+body[style], +div[div|span|a], +span[span]'; // 指定の子要素を消させない
$init['extended_valid_elements'] = 'a[data-remodal-target]'; // data- 属性が消されるのを防止 ★効かない
// data- 属性が消されるのを防止
$ext_elements = '';
$target_attr = array('*');
$target_elements = array(
'a','b','base','big','blockquote','body','br','caption','dd','div','dl',
'dt','em','embed','font','form','h1','h2','h3','h4','h5','h6',
'head','hr','html','i','img','input','iframe',
'li','link','meta','nobr','noembed','object','ol','option','p','pre','s',
'script','select','small', 'span','strike','strong','sub','sup','table',
'tbody','td','textarea','tfoot','th','thead','title','tr','tt','u','ul',
);
$ext_elements = $target_elements[0];
foreach ( $target_elements as $target_element ) {
$ext_elements .= ',' . $target_element . '[' . implode( '|', $target_attr ) . ']';
}
if ( ! empty( $ext_elements ) ) {
if ( ! empty( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= $ext_elements;
} else {
$init['extended_valid_elements'] = trim( $ext_elements, ',' );
}
}
return $init;
}
add_filter( 'tiny_mce_before_init', 'tinymce_init', 100 );
}
?>
6. (解決不可)ビジュアルエディタに切り替えると、インデントや空白行が消える
これは解決策はない。こういうものだと思ってあきらめる。
インデントを付けたいときは、Sublime Test の HTML-CSS-JS Prettify パッケージや Best HTML Formatter and Beautifier 等で変換。
あとがき
gutenberg にいち早く移行したいと思って色々調べたけど懸念材料が多過ぎて断念。主流になるには、まだまだ時間がかかりそうと思われるので、しばらくは現状の投稿エディタと付き合うことになりそうです。