【WordPress】ビジュアルエディタで文頭に全角スペースを入力すると消える場合の対処法

【WordPress】ビジュアルエディタで文頭に全角スペースを入力すると自動的に消える場合の対処法 WordPress
2023.10.22

WordPressのクラシックエディタ（ビジュアル）では、文章の先頭に全角スペースを入力しても、エディタ（TinyMCE）やブラウザの都合でスペースが自動的に消えてしまうことがあります。テキストエディタに切り替えれば入力できますが、ビジュアルのまま入れたい場合の対処法を解説します。

この記事でわかること

  • Advanced Editor Toolsで「パラグラフタグを保持」を有効にする（推奨）
  • プラグインなしでHTMLエンティティ（　）で入れる
  • クラシックエディタとブロックエディタ（Gutenberg）での挙動の違い
これはクラシックエディタ（TinyMCE）の問題
この現象はクラシックエディタのビジュアルモードで起きます。ブロックエディタ（Gutenberg）では挙動が異なり、段落ブロックの先頭スペースは扱いが変わります。使っているエディタがどちらかを確認してから対処してください（投稿タイプごとにエディターを切り替える方法）。
スポンサーリンク

方法1：Advanced Editor Tools で設定する（推奨）

もっとも簡単で確実なのが、プラグイン「Advanced Editor Tools」（旧 TinyMCE Advanced）を使う方法です。次の手順で設定します。

  1. 管理画面の「プラグイン」→「新規追加」を開く
  2. 検索バーに「Advanced Editor Tools」と入力する
  3. 表示されたら「今すぐインストール」をクリックする

Advanced Editor Toolsをインストール

インストールが完了したら「有効化」します。

プラグインを有効化

有効化すると「設定」メニューに「Advanced Editor Tools」が追加されるので、それを開いて設定画面に入ります。

Advanced Editor Toolsの設定を開く

「上級者向け設定」の中にある「クラシックブロックとクラシックエディター内のパラグラフタグを保持」にチェックを入れ、「変更を保存」をクリックします。

パラグラフタグを保持にチェック

設定後、ビジュアルエディタで文頭に全角スペースを入力してみます。

文頭に全角スペースを入力

入力した全角スペースが消えずにそのまま反映されるようになりました。

全角スペースが表示されている

方法2：プラグインなしでHTMLエンティティで入れる

プラグインを増やしたくない場合は、全角スペースをHTMLエンティティで書く方法があります。テキストエディタ（コードエディタ）モードに切り替え、先頭に 　（または  ）を入力します。

テキストエディタ：文頭に全角スペースを入れる
　ここから本文が始まります。
ビジュアルに戻すと消えることがある
この方法はテキスト（コード）エディタで入力してください。ビジュアルエディタに切り替えると、TinyMCEが再整形してエンティティが消える場合があります。また、「調べると出てくる functions.php でTinyMCEの設定を書き換える方法」は、WordPress・プラグインの更新で動かなくなりやすく安定しません。確実性を優先するなら方法1のプラグインが無難です。

ブロックエディタ（Gutenberg）を使っている場合

ブロックエディタでは、段落ブロックの先頭に全角スペースを入れてもクラシックエディタほど頑固には消えませんが、確実に入れたいときは同じくコードエディタ表示に切り替えて 　 を書くのが安全です。そもそもクラシックエディタで書きたい場合のエディター切り替えは特定の投稿タイプだけでエディター機能を無効化する方法（クラシックエディタとの使い分け）を参照してください。エディタにボタンや定型文を足すカスタマイズは投稿エディタに見出しテンプレートやショートコードをボタンで挿入する方法も便利です。

よくある質問（FAQ）

Q全角スペースが消える・別の文字に変換される原因は？
Aクラシックエディタのビジュアルモードは、内部のTinyMCEが入力を再整形する際に文頭の全角スペースを除去することがあります。Advanced Editor Toolsで「パラグラフタグを保持」を有効にするか、テキストエディタで 　 を書くと回避できます。
Q記事内で意図的に全角スペースを使うには？
AHTMLエンティティを使うのが確実です。全角スペースは 　 または   で表せます。テキスト（コード）エディタで入力し、ビジュアルに戻さずに保存すると消えにくくなります。
Qfunctions.phpでTinyMCEを設定する方法は使えますか？
A古い解説にはありますが、WordPressやTinyMCEの更新で動かなくなりやすく、現在は安定して動くものが少ないです。プラグイン（Advanced Editor Tools）か、HTMLエンティティでの入力をおすすめします。

まとめ

  • 原因：クラシックエディタのTinyMCEが文頭の全角スペースを除去する
  • 推奨：Advanced Editor Tools →「パラグラフタグを保持」にチェック
  • プラグインなし：テキストエディタで 　 を入力
  • 注意：functions.phpでのTinyMCE設定は更新で壊れやすい／使用中がクラシックかブロックかを確認

まずは Advanced Editor Tools の設定を試し、プラグインを避けたい場合は 　 での入力を使い分けましょう。