WordPressを使っていると誰しも1度は躓くであろう連続改行が反映されない問題。

原因はWordPressにデフォルトで備わっている自動整形機能が原因です。

htmlにおいて、改行や段落は<p>タグや<div>タグ、<br />などで行います。

これらのタグを入れないと改行や段落は反映されません。

投稿画面で書いている覚えがないが改行や段落が反映されているという方もいるかと思いますが、WordPressが自動的に整形してくれているからですね。

<p>タグや<div>タグ、<br />などタグをいちいち手打ちしなくていいので、とてもありがたい機能なのですが・・・

意図しない動きをすることもあり、これが躓くポイントです。

連続改行ができない


そうです。

WordPressデフォルトの自動整形機能は連続改行を許してくれません。

英語など他の言語は分かりませんが、日本語ではあえて改行をたくさんして間を取る書き方もありますよね。

私が好きな人を公開します！

それは・・・










ダラララララララララ～♪










～～～ダンッ！

カオルさんです！

みたいな感じです。

なんとかする方法はいくつかあります


ネットで調べるとこの問題の解決策としていくつか出てきます。

  1. 半角スペースのエスケープ「&nbsp;」を入れる
  2. スペースをあけたいところにCSSで指定する
  3. WordPressの自動整形を停止し、タグを手打ちする

など有名な話ですね。

でも正直しっくりこないと思いませんか？

1つ目の＜半角スペースのエスケープ「&nbsp;」を入れる＞ですが、結局は自動整形されるので1文字分の空白ではなく、段落の空白などが合わさりちょうどいいスペースが取れないこともあります。

2つ目の＜スペースをあけたいところにCSSで指定する＞これは現実的な方法だと思いますが、手間にはなりそうです。

3つ目の＜WordPressの自動整形を停止し、タグを手打ちする＞ですが、普通に自動整形を停止するのにはPHPを使うので、初心者さんにはリスクの覚悟が必要ですし、タグを手打ちするなんて面倒です。

などなど。

連続改行さえ普通に反映されればこんなに悩まないのに・・・

連続改行さえ普通に反映されれば・・・！！

連続改行できるプラグインあります


連続改行の悩みを解決するために、WordPressで連続改行できるようになるプラグイン作りました。

その名も「TIJAJI formatting」です。

詳しくは以下のページで確認できます。

TIJAJI formatting


WordPress公式に登録もできたので管理画面から「TIJAJI」「TIJAJI formatting」などで検索すれば出てきます。

TIJAJI formattingをインストール＆有効化するとどうなる？


まず有効化するだけで

  • 記事ページ、固定ページで自動整形を停止
  • 記事ページ、固定ページで改行に<br />を自動挿入

をするようになり、連続改行ができるようになります。

htmlタグには大きく分けて

  • インライン要素
  • ブロック要素

の2種類があるのをご存じでしょうか。

インライン要素は、<span>や<img>、<a>タグなどです。

ブロック要素は、<p>や<div>、<table>タグなどです。

両者の違いの１つとしてタグの終りで折り返すか折り返さないかがあります。

TIJAJI formattingではそれを自動的に判別し、インライン要素の終りに改行があった場合に<br />を追加し、ブロック要素の終りに改行があっても<br />を追加しないようになっています。

他にも<script>や<style>、<textarea>など、開始タグと終了タグの改行は<br />を入れてしまうと崩れるのでこれも自動判別し、回避するようになっています。

例えば以下のような文章だとすると、

<div class="tijaji">改行をする方法　その１</div>

<img src="tijaji.png">

改行をするのは気合です。
気合で何とかしましょう。



<div class="tijaji">改行をする方法　その２</div>

<a href="#">気合とは</a>



▼ここをクリックしてコピー
<textarea>
ndsfhw820apdjpf
nidashailce37q2
cnaoidcn76rwquj
</textarea>

これを「TIJAJI formatting」を使うと以下のように整形します。

（※自動整形を停止、改行に<br />自動挿入を有効にしている場合。）

<div class="tijaji">改行をする方法　その１</div>
<br />
<img src="tijaji.png"><br />
<br />
改行をするのは気合です。<br />
気合で何とかしましょう。<br />
<br />
<br />
<br />
<div class="tijaji">改行をする方法　その２</div>
<br />
<a href="#">気合とは</a><br />
<br />
<br />
<br />
▼ここをクリックしてコピー<br />
<textarea>
ndsfhw820apdjpf
nidashailce37q2
cnaoidcn76rwquj
</textarea>

ここで記号自動変換についてもふれておきます


WordPressが記事に対して行っているのは<p>タグや<br />などの自動整形だけではありません。

特定の記号も自動的に変換してくれます。

例えば、

  • ‘　→　&#8216;
  • “　→　&#039;
  • &　→　&#038;

といった具合です。

変換といってもhtmlソースでの話で、見た目としては全く変わらないので基本的には問題ではありません。

しかし、場合によってはこの記号変換のせいで、意図せず表示が崩れる可能性もあります。

ということで頭の片隅でも置いておくと、表示崩れの時に記号自動変換を疑うこともできます。

ちなみに、TIJAJI formattingではこの記号の自動変換も設定で無効にすることが可能です。

WordPressが自動整形や記号自動変換をするのは記事だけではありません


テキストウィジェットも自動整形や記号自動変換がなされます。

これもなかなか厄介で、テキストウィジェットで思い通りの表現ができなかった系意見がある人は少なくないでしょう。

WordPress4.8になると「カスタムHTML」なるウィジェットが追加されました。

この「カスタムHTML」なら自動整形や記号自動変換は行われないのでテキストウィジェットより使いやすくはなりました。

しかし、改行をはじめとする各タグは手打ちする必要があるんですよね。

前は「自動的に段落を追加する」なんてチェック項目もあったのですが・・・

TIJAJI formattingはウィジェットも設定できます


TIJAJI formattingの文章整形機能は記事だけではありません。

設定をすれば、ウィジェットにも適用できます。

テキストウィジェットは、自動整形・記号変換を停止することもできます。

更に「テキストウィジェット」「カスタムHTML」のどちらにも改行に<br />を自動挿入することも可能です。

<br />だらけになっちゃうけどいいの？


厳密にいえば正しい使い方ではないという人もいます。

もちろん、その人が言っていることが間違っているとは言いません。

しかし、<br />を連続してもいいのではないでしょうか？

SEO的にマイナスになることはありませんし、文法的にはエラーはおろか、警告にすらなりません。

<br />だらけになるのがいけないというのは、具体的に何がいけないのでしょうか。

私はデザインにおいても空の<div>タグをよく使ったりしています。

これもよく議論されていることですが、なんだかんだ言ってよく使われています。

連続<br />もなんだかんだ言って使っている人は多いと思います。

あとがき


最終的に何が言いたいのかまとめると、

WordPressの改行で悩んでいたらTIJAJI formattingを試してみてね

ということです。

  • 公式にも登録されているから管理画面から楽々インストール
  • しかも無料
  • プラグインだから気に入らなかったり、テーマとの相性が悪かったらいつでも停止できる

などなど、プラグインならではの利点もあります。

フィードバックはお気軽に


お気付きの点や、「あそこが○○だったらもっと使いやすいのに」「○○が使いづらい」など何かありましたらお気軽にご連絡ください。

お問い合わせフォームでもWordPressのプラグインページからでも構いません。

それともしよかったらWordPressのプラグインページの方では評価もしてくれると嬉しいです。

TIJAJI formatting

関連記事