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タグと「 」に変わった。。で、また「ビジュアル」に戻ると、改行は1つだけ。brタグを入れたので5回改行されるのかと思いきや。。。
そこで、pタグと「 」をたくさん入れてみました。
すると、今度は「ビジュアル」タブに切り替えても改行が保たれ、「テキスト」に戻ってもpタグと「 」はそのままでした。
さて、検証結果をまとめてみましょう。
- WordPressはbrタグを使った空白行がNG
- 「pタグと 」の空白行はOK
- TinyMCE Advancedプラグインはbrタグを「pタグと 」に変換する
- WordPressのエディタはpタグを付加するが隠す場合がある
htmlを知っている方ならご存知と思いますが、「 」はスペースを意味します。
試行錯誤3:プラグインなしで改行を保つには
はい、もうお気づきですね。
標準の状態でスペースを一つだけ入力すると「テキスト」タブでは「 」だけとなります。しかしこのとき「隠されたpタグ」で囲われて、内部的には「<p> < /p>」となっているのです。
というわけで、スペースを1つ入力してから改行すれば、改行を保てます。お困りの皆さんはぜひ試してくださいね。
WordPressやプラグインのバージョンによっては動きが異なるかもしれないので、うまくいかない人はプラグインを使ってみてください。
それではまた!