WordPressのビジュアルエディタでエンターキーを押して改行させる方法

こんにちは、@Manabu です。

WordPressでブログを書いている人にとって、管理画面で操作するエディタの操作ひとつで作業の効率は大きく変わります。

中でもビジュアルエディタは投稿やページのコンテンツを直感的に作成・編集できるため、Wordpressを使用している皆さんが一番使用しているエディタになると思います。

ビジュアルエディタを使用している時、こう思ったことはないでしょうか？

ビジュアルエディタでエンターキーを押した時に改行をしてほしい！

今回はそんな方向けに、WordPressで使用するビジュアルエディタでエンターキーを押した時に改行する方法を紹介したいと思います。

記事通りに対応するだけで問題が解消すると思いますので、ぜひ参考にして下さい！

きっかけ

WordPressを使用してコンテンツを公開されている方から相談があり、調査することになりました。

ビジュアルエディタの基本的な動作としては以下のようになっています。

対応

WordPressはデフォルトでTinyMCEというオープンソースのリッチテキストエディタを使用しています。TinyMCEは多くのウェブアプリケーションで使われており、その拡張性とカスタマイズ性の高さが特徴です。

今回は、このTinyMCEに対しての設定を変更することで対応しています。

よくある対応

ネットで検索した時に一番多かった対応について紹介します。

以下のソースをテーマ配下のfunctions.phpに記載します。

functionmy_custom_tinymce_settings($settings) {
  // forced_root_blockをfalseに設定
  $settings['forced_root_block'] = false;

  return $settings;
}
add_filter('tiny_mce_before_init','my_custom_tinymce_settings');

今回の対応

先ほどのコードに設定を追加した、以下のソースをfunctions.phpに追加します。

function my_custom_tinymce_settings($settings) {
  // forced_root_block を false に設定
  $settings['forced_root_block'] = false;

  // setup オプションにカスタムJavaScriptを追加
  $settings['setup'] = 'function(editor) {
    editor.on("keydown", function(e) {
      // コンテンツが空の場合は <p> タグを追加
      if (editor.getContent() === "") {
        editor.setContent("<p><br></p>");
      }
    });
  }';

  return $settings;
}
add_filter('tiny_mce_before_init', 'my_custom_tinymce_settings');

文字揃えなどが動作しないのは、設定を追加するためのpタグがコンテンツに存在していないことが原因になります。

その問題を解決するために、JavaScriptでエディタの中に何もない場合、pタグを追加することを行っています。

これによって、文字揃えなどpタグに対して設定を追加するものについて対応することができます。

まとめ

WordPressのビジュアルエディタでエンターキーを押したときに改行させる方法について解説しました。

functions.phpファイルに簡単なコードを追加するだけで、希望通りの動作を実現できます。ぜひ試してみてください！

P.S.
こちらの記事に続き、Advanced Custom Fieldsで使用するビジュアルエディタのエンターキーでの改行方法についても記事にしました。