WordPressの改行と段落について（Pタグの自動挿入をデフォルト機能で回避する）

WordPressを利用して情報発信を行っている方に質問です。

 

記事を書く際は、ビジュアルモードですか？それともテキストモードで行っていますか？

 

僕はビジュアルモードで記事を書いているのですが、ENTERで改行するとPタグ（<p></p>）でくくられてしまう処理にものすごい不快感を持っていました。

 

これをなんとか解消できないかと対応方法を探ったのですが、どれも僕のイメージにマッチしなかったので、諦めてPタグでくくられてしまう仕様を許容して運用していました。

 

ところが最近、別の件で調べ物をしていたらなんとWordPressの基本的な機能で解消できることがわかりました！

 

そこで本日は結論に至るまでの経緯と合わせて、対応方法について述べてみたいと思います。

 

改行するとPタグで段落分けされてしまう

ます問題として挙げている、

 

ビジュアルモードにてENTERで改行すると文章がPタグ(<p></p>）でくくられてしまう

 

という状態を確認しましょう。

 

HTMLを利用してコーディングした経験のある方には説明不要ですが、HTMLには文書情報・構造を表現するタグがいくつかあり、その中で「テキストを段落（文章中の内容的なまとまり）を示す」ときにはPタグ（<p></p>）を利用します。

 

例えば、以下の様なテキストがあった場合、ソース上では、単純に文章を改行したい場合箇所は<br>を入れ、段落としてまとめたい文章の最初に<p>、最後に</p>でくくります。

 

（ちなみに例文は「Webディレクターの定義」についての要約です。コチラの記事で紹介していますので興味のある方はご覧ください）

 

ところが、ビジュアルモードで改行したい箇所でENTERを1回押下すると、直前の文章が勝手にPタグ（<p></p>）でくくられてしまいます。
さらに、ENTERを2回押下すると「<p>＆nbsp;</p>」という空白（半角スペース）をPタグでくくられたソースが出力されてしまうのです。

 

 

ENTER1回、2回押下のどちらの場合も見た目上は、改行と段落がわかるので、閲覧するユーザが困ることはありません。

 

UXの視点で言えば、サイトを訪れるユーザは目的の情報が参照できればよいので、読みやすく改行と段落わけがなされていれば、ソースがどうなっていようと問題はありません。
ところがSEO視点で考えると軽視できません。

 

といいますのも、検索エンジン（クローラー）はソースで内容を判断するため、改行や段落が<br />や<p></p>で最適化されていないと、せっかくいい記事を書いても評価をされにくくなります。

 

僕はあまりSEO対策をあまり重要視していないところがあるのですが、このブログの記事は多くの人に読んで欲しいと思います。

なので、SEO視点ではなく、以下のとおりUXの解釈をちょっと広義に捉えることで自然とSEO効果を得られるようにしています。

 

 

言葉遊びかもしれませんが、自分を納得させたかっただけなので、「へぇ〜」くらいに思っていただければと思います。

 

解消する方法

このENTERでPタグ（<p></p>）でくくられる問題を解消する方法としては、意図しない箇所でPタグが自動で入らないようにすれば解決されます。

 

調べた結果、Pタグが自動で入らないようにする方法としては以下のとおりです。

• フィルターフックを利用する
• プラグインを使って自動挿入されるPタグをなくす
  

 

それぞれについて説明していきます。

 

フィルターフックを利用する

WordPressのフィルターフックを利用して、記事本文にPタグを除去することで実現できます。

具体的には以下の記述をすればOKです。

 

ただ、注意事項としてfunction.phpなど全ページで参照されるテンプレートファイルに記述すると、すべてのページでPタグ除去されてしまいます。

記事詳細ページのみに対応させたいなどピンポイントで決まっている場合は、テンプレートファイル（例えばsingle.php）に記述すればOKです。

 

プラグインを使って自動挿入されるPタグをなくす

「TinyMCE Advanced」というプラグインを利用します。

このプラグインは、記事投稿における編集ボタンの種類を増やすことで、HTMLコーディングの知識がない人でも幅広い表現を可能にしてくれるものですが、オプション機能として、Pタグの自動挿入を停止する機能があります。

 

TinyMCE Advancedの設定画面下ある「高度なオプション」から「段落タグの保持」にチェックを入れて、記事を書くだけです。

 

設定後に記事投稿画面でENTERを改行した記事を保存し、ソースを見ると該当箇所が<br />タグで改行されているのがわかると思います。

 

なお、ちょっと前までは、Pタグ問題を解消するプラグインとして「PS Disable Auto Formatting」を利用するのが主流でした。ところが、WordPress4.3以降で導入するとビジュアルモードで記事編集ができなくなる不具合が発生しているため、僕は使っていません。

 

それでも解消できない問題

僕が諦めた理由になるのですが、上記で説明した解消方法は、自動で入力されたPタグ（<p></p>）や<br />だけではなく、自分が意図的にテキストモードで入力したPタグ（<p></p>）や<br />も消えてしまいます。

 

うぉぉ〜、思い通りにいかないぜ！

 

ビジュアルモードで使えるタグの範囲でCSS調整しているので、Pタグ（<p></p>）や<br />を使いたいケースはほとんどないのですが、特定の記事などちょっとしたところでやっぱりあります。

 

ちょっと悩みましたが、そこで僕は「すべてテキストモードで書く」ということにしました。

 

具体的にはまず、記事を書き上げ、テキストモードでPタグ（<p></p>）や<br />使って文章構造の最適化を含めたコーディングを行い、記事をプレビュー確認し、問題なければ公開という流れです。

 

最初は、太字にしたり文字色変えたりの自由度が高くて良かったのですが、ブログを書けば書くほど、このコーディング作業が手間になり、

 

やっぱり全部ビジュアルモードで完結できるようにしよう

 

となりました。。。

 

自分自身コーダーとしてのプライドがあるので、見た目もソースもこだわりたい気持ちはありました。

ですが、目的を持って始めたブログが、保守性の低さで三日坊主になってしまうのは本意ではありません。

 

僕はサラリーマン時代、クライアントと直接やり取りする立場だったりするので「運用の負荷を下げる」といった運用改善タスクは、気軽に優先度を下げてしまっていました。

 

改めて、保守・運用タスクって大変なんだなと感じた瞬間でもあります。

 

最終的にどうしたか

実は最近、この問題をTinyMCE Advancedで「改行」できれば解決するかもと思って調べたところ、デフォルト機能で改行・段落を使い分けられる操作があることがありました。

 

それは、

• 改行(<br />)　：SHIFT + ENTERを押下する
• 段落分け(<p></p>)：ENTERを押下する

 

です。

 

これにより、僕がイメージした通りの改行・段落分けがビジュアルモードで実現できるようになりました。

 

いや〜、WordPressは詳しいつもりでしたが、まだまだ未熟ですね。
このようないつも当たり前に使っている機能でも記事にするあたり調べて見ると新しい気づきがあるのは楽しいと感じる今日このごろです。