【発見】WordPressの投稿画面で改行が消える件を一瞬で解決する

WordPressはじめて、よっしゃ書くぞー!

となっている皆さん、エディタで改行が消えて苦しんでいませんか。僕もどうやったら改行が消えないのかいろいろ調べたり、試行錯誤しました。




結論


スペースを1つ入力してから改行する」ことで解消します。詳しく知りたい方は続きをどうぞ。

プロローグ:「消える」とはどういうことか?


とりあえず、ここまでをエディタで見てみましょう。

画像はPCのエディタですが、こんな感じですね。

エディタの右上には「ビジュアル」「テキスト」の2つのタブがありますが

「テキスト」タブをクリックすると。。

はい、htmlエディタっぽい画面が表示されます。htmlタグを追加できるボタンも並んでいますね。

htmlなら、ちょっと文章をゆったりさせたいときに「brタグで改行させよう」と思いますよね。そこで試しに入れてみましょう。

こんな感じで。しかし、一旦「ビジュアル」タブに切り替えて「テキスト」タブに戻ると、、


ありゃ、brタグが消えてしまいました。これがWordpressのエディタの標準的な動きなのですね。
では、改行を保つにはどうすれば良いのでしょうか。

試行錯誤1:「TinyMCE Advanced」プラグインを使う


ネット上で調べてみたところ、この件で困っている人が相当多いみたいで、たくさんの方が「TinyMCE Advancedプラグインをインストールすれば解消する」と紹介されていました。

「TinyMCE Advanced」プラグインで改行を保つ場合、プラグインを有効化すると使える設定画面で「高度なオプション > 段落タグの保持」をチェックオンにします。

末尾には「複数の<br />タグは使用しないでください」とありますね。brタグを連続で置くのはhtmlの文法的に良くないためだそうです。

とりあえず、僕もこの方法で解消できることを確認しました。

ただ、動きを見ていて2つ気づいたことがありました。それは

  • brタグが連続で入れられるわけではない
  • プラグインなしでも改行を保てる

ということです。どういうことでしょうか。

試行錯誤2:「TinyMCE Advanced」プラグインの動作検証


「TinyMCE Advanced」プラグインを有効にしてbrタグを複数入れるとどうなるのでしょうか。試してみました。

brタグを入れた上の行にpタグが現れたのが気になりますが、「ビジュアル」タブに切り替えた後「テキスト」タブに戻ると、、、

あれ?

pタグと「&nbsp;」に変わった。。で、また「ビジュアル」に戻ると、改行は1つだけ。brタグを入れたので5回改行されるのかと思いきや。。。

そこで、pタグと「&nbsp;」をたくさん入れてみました。

すると、今度は「ビジュアル」タブに切り替えても改行が保たれ、「テキスト」に戻ってもpタグと「&nbsp;」はそのままでした。

さて、検証結果をまとめてみましょう。

  • WordPressはbrタグを使った空白行がNG
  • 「pタグと&nbsp;」の空白行はOK
  • TinyMCE Advancedプラグインはbrタグを「pタグと&nbsp;」に変換する
  • WordPressのエディタはpタグを付加するが隠す場合がある

htmlを知っている方ならご存知と思いますが、「&nbsp;」はスペースを意味します。

試行錯誤3:プラグインなしで改行を保つには


はい、もうお気づきですね。

標準の状態でスペースを一つだけ入力すると「テキスト」タブでは「&nbsp;」だけとなります。しかしこのとき「隠されたpタグ」で囲われて、内部的には「<p>&nbsp;< /p>」となっているのです。

というわけで、スペースを1つ入力してから改行すれば、改行を保てます。お困りの皆さんはぜひ試してくださいね。

WordPressやプラグインのバージョンによっては動きが異なるかもしれないので、うまくいかない人はプラグインを使ってみてください。

それではまた!