WordPressのクラシックエディターを使用している際に、テキストエディタでコードを適切に整えても、ビジュアルエディタと切り替えるとコードが詰まってしまう現象が発生することがあります。これは、WordPressのエディターの仕様によるものですが、適切な設定やプラグインの活用で解決できます。本記事では、この問題の原因と具体的な対処法を解説します。
コードが詰まる原因
WordPressのクラシックエディターでは、ビジュアルエディタとテキストエディタを切り替えた際に、HTMLコードの整形が崩れることがあります。その主な原因は以下の通りです。
1. WordPressの自動整形機能（wpautop）
WordPressには「wpautop」という機能があり、コードを自動で整形する仕組みがあります。しかし、この機能が有効になっていると、余分な改行が削除されたり、意図しない改行が追加されることがあります。
2. クラシックエディターの仕様
クラシックエディターでは、ビジュアルエディタとテキストエディタを切り替えると、HTMLコードのフォーマットが変更されることがあります。特に、<p>タグや<br>タグが意図せず追加・削除されることがあります。
3. ブラウザの影響
ブラウザのキャッシュや拡張機能によって、エディタの動作が変わることがあります。特に、ブラウザの自動補完機能が影響するケースもあります。
コードが詰まる問題の解決策
以下の方法を試すことで、クラシックエディターのコード詰まりを防ぐことができます。
1. プラグインでwpautopを無効化する
wpautopの自動整形を無効化することで、コードの崩れを防ぐことができます。
おすすめのプラグイン：
- Toggle wpautop（wpautopを簡単に無効化）
- Disable wpautop（投稿やページで自動整形を無効化）
設定方法：
- プラグインをインストールして有効化する
- 「設定」→「投稿設定」から、自動整形を無効にするオプションを選択
- エディタでコードが詰まらないか確認
2. functions.phpにコードを追加してwpautopを無効化
プラグインを使用したくない場合は、functions.phpに以下のコードを追加することで、自動整形をオフにできます。
remove_filter('the_content', 'wpautop');ただし、テーマの更新で消える可能性があるため、子テーマを使用することを推奨します。
3. プラグイン「Classic Editor」を使用する
クラシックエディターの動作を安定させるために、公式プラグイン「Classic Editor」を使用するのも有効です。
設定方法：
- Classic Editorをインストールして有効化
- 「設定」→「投稿設定」→「ビジュアルエディターを無効化」を選択
- テキストエディタのみを使用することで、フォーマットの崩れを防ぐ
4. 別のコードエディタを使用する
WordPressの標準エディターではなく、コードのフォーマットを保持できるプラグインを導入すると、より安定した編集が可能です。
おすすめのプラグイン：
5. CSSでエディタのフォントを調整
エディタのフォントサイズを大きくすることで、コードの可読性を向上させることができます。
CSS例：
.wp-editor-area { font-size: 14px !important; }このCSSを適用することで、テキストエディタでの表示が改善されます。
まとめ
WordPressのクラシックエディターでコードが詰まる問題は、以下の方法で解決できます。
- 「Toggle wpautop」などのプラグインでwpautopを無効化
functions.phpにremove_filter('the_content', 'wpautop');を追加- 「Classic Editor」プラグインを使用し、ビジュアルエディタを無効化
- コードエディタ向けのプラグインを導入
- CSSでフォントサイズを調整し、可読性を向上
これらの対策を試すことで、WordPressのクラシックエディターをより快適に利用できるようになります。
コメント