WordPressの改行が消える問題を解決するプラグイン「TinyMCE Advanced」

努力が水の泡

WordPressは標準仕様のままだと、記事の中で改行やスペースを連続で入れる事が出来ないんですよ。

でも日々ブログを書いていたら、改行を繰り返してスペースを広く取ったりしたくなるじゃないですか。

行間の詰まった文章は読みづらいですし。読みづらい記事は読者の読む気を削いでしまいますから。

そんな、改行やスペースを連続で入れる事が出来ない問題を解決する一番簡単な方法が、
プラグイン「TinyMCE Advanced」のインストールです。

自動整形機能が余計なお世話

WordPressは記事投稿画面で執筆された文章を自動的に適切なHTMLタグで整形して保存・投稿する機能を持っています。

自動整形機能と言われていますけど、この機能のおかげで特にHTMLに詳しくない人でも整った文章をブログ記事として投稿することが出来るんですね。

基本的にはとても便利な機能であるはずの自動整形機能なんですが、この機能が文章構造、HTML的に「正しい」体裁に整えようとするため

  • 2回以上続く改行は1回にまとめる
  • 行頭、行末のスペースは削除する

といった処理をしてしまうおかげで、入れたはずの改行やスペースなどが勝手に削られてしまい、元々作っていた記事のレイアウトを崩してしまうことがあるんです。

こういうのを「ありがた迷惑」とか「余計なお世話」とかいいますよね。

ちなみに内部的な話をすると、この自動整形処理はwpautopという関数が担っていて

  • 改行は<br />タグに変換
  • 段落には<p>タグを適用
  • 改行<br />が2回続いたら段落<p>に変換
  • 2回以上続く段落<p>は1回にまとめる
  • 行頭、行末のスペースは削除する

といった処理を行っています。

このありがた迷惑な「自動整形機能」をどうにかもっと使いやすい仕様にしたい。

改行やスペースを繰り返したい。

記事のレイアウトを勝手に変えてほしくない。

そんな悩みを解決する一番簡単で手っ取り早くて確実な方法。

それが「TinyMCE Advanced」というプラグインをインストールする方法です。

TinyMCE Advancedで自動整形処理を制御する

TinyMCEadvanced検索

TinyMCE AdvancedはWordPressの投稿画面であるビジュアルエディタの機能を拡張するプラグインです。

とても高機能で、ビジュアルエディタを使って記事を投稿するならインストール必須レベルのド定番プラグインなのですが、実はこのTinyMCE Advancedが自動整形処理をいい感じに制御してくれる機能を持っているんです。

しかもその使い方がとても簡単。

TinyMCE Advancedの設定画面の下の「高度なオプション」という項目にある
段落タグの保持
のチェックをオンにするだけです。

TinyMCEadvanced高度なオプション

たったこれだけで、自動整形処理をいい感じに制御して、改行やスペースを自由に入れることが出来、勝手にレイアウトを崩すようなことをしなくなります。

※プラグインのインストール方法については
WordPressプラグインのインストール方法
を参考にしてください

ちなみに、改行の注意点

TinyMCE Advancedの「高度なオプション」をオンにするだけで改行を自由に何回でも出来るようになる訳ですが、細かい話をすると、複数回改行を重ねられるのは「段落」を示す<p>タグに限ります。

WordPressのビジュアルエディタ上での操作で言えば
Enterキーを押して改行を重ねることが出来るようになる。
ということです。

※※※※※※※※※※

以下はHTMLの話になります。知らなくても全く問題ないですが興味ある人は読んでください。

正確に言うと、HTML的には2種類の改行があります。

  • <p>~</p>タグで囲んで文章の塊であることを示す「段落」
  • 文章の塊の中で「改行」を行う<br />タグ

WordPressでも当然

  • Enterキー:段落(<p>~</p>タグで囲む)
  • Shift+Enterキー:改行(<br />タグ)

と区別して扱えます。

このうち<br />タグを打つ改行は、WordPress標準の動作と変わらず、何度<br />タグを重ねても(Shift+Enterキーを連打しても)保存すると1つの<p>タグに置き換わって1つの段落にまとまってしまいます。

一方のEnterキーで<p>~</p>タグを挿入する「段落」が、繰り返しただけ改行することができます。
HTMLコード的には
<p>&nbsp;</p>
という空白(ノンブレイクスペース)を持った段落を重ねて改行を表現しています。

ビジュアルエディタ テキストエディタ 投稿 ソースコード
 改行サンプル-ビジュアルエディタ 改行サンプル-テキストエディタ 改行サンプル-投稿  改行サンプル-ソースコード
上の改行は
Shift+Enterで挿入
下の改行は
Enterで挿入
上の改行は<br />タグ
下の改行は
<p>&nbsp;</p>
で表現されている
投稿すると上の改行が削られてしまったのが観察できる  <br />タグが<p>タグ1つに置き換えられて改行が削られたことがわかる

TinyMCE Advanced「段落タグの保持」をオン。
それだけ。

解説すると長くなってしまいましたが、要は

TinyMCE Advanced「段落タグの保持」をオン。

これだけで改行が消える問題はすっきり解決です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする