WordPress

【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

WordPress, 改行できない

WordPressのビジュアルエディタで記事作成中に「連続で改行できない」と詰まってしまう初心者の方は多いのではないでしょうか?

誰しもが一度は「あれ?」となってしまうWordPressの連続改行が反映されない問題。

そんなお悩みを解決するために、この記事ではWordPressで連続して改行ができない理由と改行タグを使ってとても簡単に解決する方法をご紹介します。

難しい説明はできるだけしないでシンプルに解説していきたいと思います!

WordPressで上手く改行できない理由

design 1 e1585200264587 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

WordPressで上手く改行できないのは、デフォルトで文章の自動整形機能(オートパラグラフ)が入っているからです。

ブログのスタイルとして空白行をたくさん使っている方もいるかと思いますが、この機能があると空白行をたくさんつけたつもりがプレビューしてみたら1行しか改行されていない、という事態になってしまいます。

他にもWordPressを使用した場合、自動整形機能によって以下のような事象が起こります。

・pタグの自動挿入
・不完全なタグの削除
・テキストエディタ→ビジュアルエディタに切り替えた際に改行などが消える etc.

特に普段テキストエディタを使用している方は、間違ってビジュアルエディタに切り替えると改行が消えてしまうので、元に戻すためには一つ一つ改行を入れ直さないといけません…笑

WordPressで改行できない時の解決方法

それでは、WordPressで上手に改行をするにはどうすればよいのでしょうか?

いくつか方法があると思いますが、僕の意見としては「TinyMCE Advanced」というプラグインで「テキストエディタ→ビジュアルエディタ」の変換時もタグを保持するように設定した上で、用途に応じて改行タグを使い分けるのが最も現実的で良いかなと思います。

他にも「functions.php」を編集して全エディタで自動整形機能を停止させる方法もありますが、そうするとビジュアルエディタが使用しにくくなったり、過去記事のレイアウトが崩れる可能性があるのであまりオススメはできません。

それに、このブログは初心者の方向けに書いているので最もシンプルな解決方法である改行タグの使い分けをご紹介したいと思います。

説明だけ読むとHTMLの知識が必要となり若干難しそうに見えるかもしれませんが、実際には本当に簡単ですし、ブログ運営に必要なものだけ覚えていくスタンスで読んでいただければと思います…!

TinyMCE Advanced の設定方法

それではここからは「TinyMCE Advanced」の設定と改行タグの説明をしていきたいと思います。

「TinyMCE Advanced」とは?

「TinyMCE Advanced」のメイン機能はビジュアルエディタに編集ボタンを追加する機能とエディタの自動整形を停止する機能です。

デフォルトのビジュアルエディターは編集ボタンが少ないのですが、このプラグインを有効にするだけで編集ボタンが追加され直感的に記事作成がしやすくなります。

【プラグイン導入前】
new line8 300x60 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

【プラグイン導入後】
new line9 300x72 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

エディタの自動整形停止の方法|設定には注意も必要!

ここからはエディタの自動整形機能を停止する方法をご説明します。

設定方法としては「TinyMCE Advanced」の設定画面で、高度なオプションの項目にある「Keep paragraph tags in the Classic block and the Classic Editor」にチェックをいれて保存するだけです。

new line10 300x211 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

ただし、もう既に記事をたくさん公開してしまっている場合は注意が必要です。

テキストエディタの自動整形を無効にしてしまうと、過去記事の自動整形まで無効になりレイアウトが崩れる場合があります。

過去記事の<p>タグや<br>タグが正確に入れられていなかったためにレイアウトが大幅に崩れてしまったというケースも多いようですね。

その場合は過去記事全部の改行コードを見直して修正しなければなりませんので、できれば事前にバックアップを取得してから設定してみてくださいね。

027 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!
【2019年最新】UpdraftPlusで超簡単にWordPressのバックアップを取得する方法こちらの記事ではWordPressプラグインの中で最も簡単にバックアップが取得できる『UpdraftPlus』の使い方を丁寧に紹介してい...

WordPressのビジュアルエディタで改行する場合

ここからは上記プラグインの設定をした上で、ビジュアルエディタで改行を使い分ける方法をご紹介していきます。

まず、WordPressのビジュアルエディタで1回だけ改行する場合は、<p>タグと<br>タグを使い分けていきましょう。<p>タグは正式には改段落で、<br>タグが一般的な改行です。

改行もしくは連続改行をする場合(Enter)

先程プラグインの設定を入れたため「Enter」で改行も連続改行も反映されるようになっています。(今までは自動整形機能により連続改行は補正されていました)

以下画像のとおり改行したい箇所で「Enter」キーを押すと<p>タグが挿入されます。

new line2 300x85 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

そうすると、改行されて更に1行空いたような見た目になります。

new line3 300x75 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

テキストエディタで確認すると<p>タグで囲まれているのがわかります。

new line4 300x28 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

一見改行と同じように見えるので一般的には改行と区別せず使われますが、HTMLのルールとしては段落としてまとめられ、改段落されたことになります。

このように、自動整形機能を停止したため「Enter」を入れた分だけ改行されるようになりました。

行間を空けずに改行する場合(Shift+Enter)

この場合は改行したい箇所で「Shift+Enter」キーを押します。

new line5 300x87 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

そうすると改行されますが、<p>タグとは違って行間に空白は作られません。

new line6 300x77 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

ソースを確認すると改行した箇所に<br>が作られています。

new line7 300x76 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

このように、段落内で文章を行間の隙間なく改行したい場合は「Shift + Enter」で<br>タグを挿入しましょう。

WordPressのテキストエディタで改行する場合

WordPressのテキストエディタで改行を作りたい場合は半角スペースを表示させる「&nbsp;」を使うのが最も簡単な方法です。

テキストエディタで<br>を複数使用しても1つの改行にまとめられてしまいますが、「&nbsp;」を挿入すると各行に半角スペースが挿入されるので複数改行したように見えるという仕組みを利用した方法です。

実際にビジュアルエディタで「&nbsp;」を挿入し、テキストエディタでタグを確認してみると「&nbsp;」が挿入されていることがわかります。

new line11 1 300x180 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

つまり、テキストエディタで2行以上連続で改行したい場合は「&nbsp;」もしくは「<p>&nbsp;</p>」を挿入すればOKです!

【ビジュアルエディタ】
new line13 300x163 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

【テキストエディタ】
new line12 1 300x180 - 【一番簡単!】WordPressで改行できない時は改行タグで解決しよう!

このように「ビジュアルエディタ⇔テキストエディタ」でタグを見てみると、どのように改行されているかが一目でわかりますね。

あとは「&nbsp;」と毎回打つのは少し大変なので、AddQuicktagに入れておけば完璧です!

【まとめ】WordPressで改行できない時の解決方法

この記事ではWordPressで上手く改行ができない理由、「TinyMCE Advanced」の設定方法、改行タグを使った解決方法をご紹介しました。

せっかくWordPressでブログを書くなら上手く改行できないことなどに悩まず記事を書くことに集中したいですよね…!

今回ご紹介した方法ではプラグインの設定を入れた状態で、

・ビジュアルエディタではそのまま「Enter」を押すだけ
・テキストエディタでは「&nbsp;」を挿入するだけ

というのは数ある解決方法の中でも特にシンプルでわかりやすい方法だと思いますので、是非活用していただけたら嬉しいです。

ブログ初心者の方こそつまづきやすい連続改行の仕組みを早めに理解して、どんどん記事作成に時間を割くようにしましょう!

 

PC1台で自由なライフスタイルを実現する無料メルマガ