wordpressのビジュアルエディタで改行できない時の4パターンの対処法

wordpressのビジュアルエディターで改行が上手くいかない!イライラする!

こういった経験をしたことがある人も、いらっしゃるのではないでしょうか?

そこで今回は、そのような改行のエラーなどを撲滅する方法を紹介していきます。

改行が消える?wordpressで改行されない原因

wordpress 589121 640 530x350 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

まず、wordpressのビジュアルの方で改行をしたのに、後々見たら反映されてない!

「公開」ボタンを押したら反映されてない!

実はこういう時は、wordpress側のシステムが問題になっていることが多いです。人によっては、brタグにすれば治るんじゃないかと思って、試した事が有る人もいるかもしません。

ですが、brタグも消える場合もあります。さらにbrタグで上手く行ったとしても、デフォルトでは改行幅が違ったりします。

これは、wordpressについている機能の自動整形機能が効いているのが原因です。改行だけでなく、段落やspan,aタグなども、自動的に削除されたりします。

これの解決方法は、自動整形を無効にする方法です。

WordPressの自動整形を無効にする方法

wordpress 1534299845 530x227 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

実は、wpautopという関数が、自動整形をしています。

ですので、改行されない時は、一旦自動整形をオフにしましょう。オフにするの自体は簡単で、このwpautopの機能を解除するコードを追記するだけです。

ただし、この機能を使うとwordpressのビジュアルエディタの「Enter」処理で改行する機能もオフになるため、brタグを入れる必要が出てきます。

ならば、その機能だけ復活させて…とやっていると、カスタマイズのし過ぎで良く分からなくなってしまいますので、プラグインを利用するのも一手です。

自動整形をプラグインを利用して解決する方法

4fd110cac170b1aa77cdacabb000926d 1024x668 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

TinyMCE Advanced」というプラグインを利用すると、比較的簡単に自動整形をオフにできます。

高度オプションの「段落タグの保持」にチェックを付けると、自動整形をオフにできます。

連続改行・空白行を利用する方法

逆に、「もっと改行をしたいのに、wordpressが消してくる!」という文句がある方も、いらっしゃるかもしれません。

これは、自動整形をオフにした上でbrタグを入れることでも対応できますが、実はもっと簡単に対応できます。

改行をした後にビジュアルエディタではなく、テキストエディタで確認すると「 」という表記があります。

05e23a41d84d9bc16c97f393406141c0 1024x411 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

これをコピーして貼り付けることで、改行の役割をしてくれます。ビジュエルエディタ上でも、Space→Enterを押していくことで、連続改行ができます。

※wordpressのテキストエディタは、デフォルトで1行ずつ間隔を空けて入力します。

エディタであえて行間を空けたくない時は?

70aa9fc240ecadd192f020fe50646a66 1024x540 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

wordpressは行間が結構広いため、こんなに行を空けたくない!(もっと上下に敷き詰めて文字を入れたい!)という場合があります。

そんな時は「Shift+Enter」で改行をしてください。これをテキストエディタで確認すると、行が間隔開けずに文字入力されているだけなので、テキストエディタで入力するのも一手です。

b53b62a38f48bbc3cd36d50c5a8db0f8 1024x524 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

上記のように改行されています。

WordPressのビジュアルエディタの改行の解決方法のまとめとおすすめの学び方

office 625892 640 530x352 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

以上、いかがでしたか?

WordPressの自動整形に関する対応方法をまとめますと、

  • brタグは基本使わない(頭が混乱するため)
  • 連続改行はテキストエディタに「 」を入れる
  • もしくは、「Space→Enter」を活用する
  • 改行幅を狭めたい時は「Shift+Enter」を使う

以上となります。ちなみに、WordPressについてもう少し詳しく学びたい方へおすすめの勉強法としては、プログラミングスクールのデザインコースの受講がおすすめです。

最初に基礎的なワードプレスの知識を学んでおけば、あとはその都度わからないところを自分で調べて対応することができるようになります。筆者の場合はTechAcademyのワードプレスコースを受講しました。

週2回メンタリングのTechAcademyの無料体験レッスン

techacademy 530x220 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法
上場企業が運営するTechAcademyでは、オンラインの自習スタイル(週2回メンターによるメンタリング付き)が可能です。与えられた課題をクリアすると次のレッスンに進めるスタイルです。

fa3417c80e23d5ead72ee25606703162 530x264 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

TechAcademyの場合は、週2回ほどオンラインで現役エンジニアメンターによるメンタリングがありますので、モチベーションを維持やすくなっています。また、こちらのオンラインのビデオチャットで、もろもろわからない点も質問することができます。

実際の学習ペースを掴みたい方などは、TechAcademyの無料体験レッスンの活用がおすすめです。ぜひ自分にあったやり方で、ワードプレスについて学んでみてください。

TechAcademyの口コミはこちら

TechAcademyの無料体験レッスンはこちら0 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法

オンラインマンツーマンのCodeCampの無料体験レッスン

codecamp 530x212 - wordpressのビジュアルエディタで改行できない時の4パターンの対処法
他にも、上場企業が運営するCodeCampでは、完全マンツーマンのオンラインレッスンを受講できるスタイル(講師を自分で選択可能)です。

講師は全員現役エンジニア講師で、自分で講師を選ぶことができますので、その点がTechAcademyとの違いです。また、TechAcademyは1ヶ月間から受講ができますが、CodeCampは2ヶ月で148,000円となっています。

TechAcademyよりも若干料金は高くなりますが、とにかくマンツーマンレッスンを受けてもう少しゆっくりしたペースで学びたい方には、CodeCampの方が向いています。CodeCampも毎日無料体験レッスンをやっていますので、それぞれ受講して比べてみるのも良いでしょう。

CodeCampの口コミはこちら

CodeCampの無料体験レッスンへ

最後まで読んでいただき、ありがとうございました。

おすすめの記事