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

WordPressで投稿を編集している時、勝手に空白が削除されたり空のタグが消えてしまったという経験はありませんか？

それはビジュアルエディタで自動整形機能が働いているからです。

自動整形機能は全てが無駄という訳ではないですが、勝手に空白とかが削除されてしまうのは少し厄介ですよね。

そこでここではビジュアルエディタの余計な自動整形機能を停止させる方法についてやり方を説明していきます。

自動整形で困ること

最初に書いたようにビジュアルエディタには自動整形機能が備わっています。

その機能の例をいくつか挙げると次の通り

• pタグの自動挿入
  連続する２行以上の改行があるとその前の文章がpタグで自動的に囲まれる
• 空のタグの削除
  中身のないspanタグやdivタグをテキストエディタに書いてビジュアルエディタに戻ると削除されている
• aタグ内に入れられるタグの制限
  特定のタグはaタグ内で使用不可。例えばpタグやdivタグはリンク内に含めることはできない

これは一例ですがビジュアルエディタにはこういう自動整形機能が働いています。

もしビジュアルエディタでほとんどの作業するならこの機能は無駄ではありません。

むしろ余計な作業が減るので結構役に立ちます。

ただ次のような編集スタイルの場合はこの機能が邪魔になってくるんですよね。

• テキストエディタでの作業が中心
• HTMLタグを全て手打ちで入力している
• 自分でpタグを使って段落を作りたい
• もっと自由度の高い編集がしたい

自動整形というのはビジュアルエディタ向けの機能なのでテキストエディタでごりごり編集する人にとっては相性がよくありません。

自動整形機能を無効化する方法

ではこの自動整形機能を無効化する方法について紹介します。

便利なプラグインがあればよかったのですが、残念ながら見つかりませんでした。なのでテーマのファイルを編集することで１つ１つの機能を無効化していきます。

その手順は次の通り

まず今使っているテーマの「functions.php」というファイルを開きましょう。

ただし公式で配布されているテーマだと更新で編集内容が消えてしまうので、プラグインなどで子テーマを作成してから編集することをおすすめします。

またこれは重要なファイルなので編集を行う前に必ず functions.php のバックアップを取って慎重に作業を行ってください。

では functions.php を開いたら Tiny MCE から自動整形を無効化するためにファイルの最後に次の内容を追加しましょう。

function my_customize_mce_options( $init ) {
  global $allowedposttags;

  $init['valid_elements']          = '*[*]';
  $init['extended_valid_elements'] = '*[*]';
  $init['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';
  $init['indent']                  = true;
  $init['wpautop']                 = false;
  $init['force_p_newlines'] = false;
  $init['force_br_newlines'] = true;
  $init['forced_root_block'] = '';

  return $init;
}

add_filter( 'tiny_mce_before_init', 'my_customize_mce_options' );

このコードはWordPressの自動整形を無効にする方法から参考にさせていただきました。

上の内容を追加して保存すればpタグの自動挿入やからタグが自動的に削除されなくなるはずです。

ちなみにこのコードについて何をしているか詳しく説明すると次の通り

• 空のタグの自動消去を無効化

  ４～５行目の次のコード

  $init['valid_elements']          = '*[*]'; 
  $init['extended_valid_elements'] = '*[*]';

  これで空のspanタグでもdivタグでも好きなように書くことが可能

• aタグ内で全てのタグを使用可能にする

  ６行目の次のコード

  $init['valid_children']          = '+a[' . implode( '|', array_keys( $allowedposttags ) ) . ']';

• pタグの自動挿入を無効化

  ８～１１行目までの次のコード

  $init['wpautop']                 = false;
  $init['force_p_newlines'] = false;
  $init['force_br_newlines'] = true;
  $init['forced_root_block'] = '';

  pタグが無効化される代わりに改行がbrタグで置き換えされる

ざっと大まかに説明するとこのような設定をしています。

そのままコピペして貼り付ければいいだけなので設定も難しくありません。

もし自動整形機能で困ることがあれば試してみることをおすすめします。

その他の自動整形機能を無効化するには・・・

ここまででビジュアルエディタの自動整形を無効化する手順を解説しました。

これに加え、WordPressでは次のような自動整形機能も働いています。

• 記事内での記号などの自動置換
• 投稿保存時のpタグやbrタグの自動挿入

こういうのも自分でタグ打ちしたい場合だとお節介な機能なんですよね。

そこでこの２つの無効化手順についても次記事で解説しました。

WordPressで記事内の記号が自動変換されるのを防ぐ方法

WordPressには'...' (ドット３つ) を … (３点リーダー)などに置き換わるなど記号を別のものに置き換える機能があります。ここではその記号の自動置換機能を無効化する方法について紹介します。

fukuro-press.com

2019-06-17 16:19

WordPressで文章がpタグやbrタグで自動整形されるのを防ぐ方法

WordPressでは文章が勝手にpタグにbrタグが挿入されて自動整形されるのはwpautop機能のせいです。ここではその自動整形機能を停止する方法について詳しく紹介していきます。

fukuro-press.com

2019-06-17 16:19

テーマファイルを少し編集またはプラグインを利用すれば簡単に無効化できるので是非お試しください。

まとめ

以上ビジュアルエディタで自動整形機能を無効化する手順について紹介しました。

もしテキストエディタ中心に編集するなら自動整形は余計な機能なのでここで説明した手順を是非試してみてください。