Wordpressでbrやpタグが消えてしまわない様にする方法

テキストエディタに入れた改行タグや段落タグが、消える事がたまにあります。

もともとエディタ上の改行や段落位置は、brやpタグとしてHTMLソースに反映される様になっています。

Advanced Editor Toolsプラグイン等を使えば、設置したbrやpタグを維持でき、エディタ上の改行や段落をタグ表示してくれるようになります。

書いた改行タグや段落タグが消えてしまう

テキストエディタへのhtmlソース掲載

Wordpressのクラシックエディタには、ビジュアルエディタとテキストエディタの2種類があります。

ビジュアルエディタはタグをあまり考えずWordの様に文章を掲載する時に使っていました。

それに対しテキストエディタには、htmlタグをそのまま入れる事ができます。

Wordpressでは、テキストエディタに直接htmlタグを入れて作るのが普通です。

brタグやpタグが消えている

この時テキストエディタ上に張り付けていたタグが、後で消えてしまう事があります。

消えるのは改行タグのbr、段落タグであるp等です。

これはテキストエディタからビジュアルエディタに一度切り替えし、再度テキストエディタに戻した場合に発生します。

タグが入った状態

ビジュアルエディタに切り替えて戻ってきた状態

上記の様に入れたタグが消えていますね。

これはWordpressの「自動挿入」機能が働いているためです。

改行・段落タグが消える理由

エディタの改行・段落機能

WordpressはWord等と同じように、エディタ上で改行したり段落を入れるとそれが反映される様になっています。

例えばEnterキーを1回押すと文章が改行され、2回押すとそこまでが一つの段落になります。

エディタ上での改行や段付けの通りに、実際のソースコード上にbrタグやpタグが自動で入る様になっているのです。

実際に出力したWEBページのソースコードを確認するとわかります。

それ以外のhtmlタグはそのままですが、brやpに関しては入れなくても実際に改行したり2段の改行をつける事で自動挿入される訳です。

タグの二重反映を防ぐ

この機能が働いているのに記述されえたbrやpタグまで反映させてしまうと、余計な空白やタグの連続並びが発生してしまいます。

<p><p>の様に連続でタグが並ぶ場合ですね。

このタグの重複を防止するため、エディタ上の改行タグや段落タグが消える訳です。

つまり消えてはいますが、改行や段落があればbrやpタグはきちんと反映される事になります。

制作工程上brやpを省くことはしない

Wordpressで制作する場合、まずは元ファイルである「HTMLページ」で形作り、それを固定ページに流し込むのが基本でしょう。

その際にbrやpタグを、わざわざ一度省いたりしませんよね。

大抵はヘッダーやフッター部分以外のコンテンツ部分を丸ごと流し込むはずです。

手元のHTML通りであって欲しい

ここでもし改行タグや段落タグが消えてしまうと、少なくともHTMLの元ファイルとは違うものになってしまいます。

仮にビジュアルエディタに切り替えても、タグの状態は変わらず維持したい訳です。

そこで、改行タグ・段落タグを消さない様にする2つの方法をご紹介していきます。

Advanced Editor Toolsプラグインを使う

まずはプラグインを使う方法です。

ズバリ、Advanced Editor Tools（旧TinyMCE Advanced）プラグインを入れる事でこの問題を解消する事ができます。

Advanced Editor Toolsはエディタに装飾機能を追加するためのプラグインですが、この設定を使えば改行タグ・段落タグを保持できます。

まずはAdvanced Editor Toolsプラグインをインストール・有効化しましょう。

Advanced Editor Toolsの設定変更

管理画面の「設定」からAdvanced Editor Tools（TinyMCE Advanced）へと進みましょう。

表示されている「ブロックエディタ （TicyMCE）」タブの隣にある「旧エディタ (TinyMCE)」の方を開きます。

上級者向け設定

ツールバーの項目などがたくさん並んでいますが、今回は無視して下にスクロールしましょう。

「上級者向け設定」の欄へ進みます。

項目にある「クラシックブロックとクラシックエディター内のパラグラフタグを保持」へチェックを入れます。

一番右下にある「変更を保存」をクリックして終了です。すぐに済みますね。

予想できない振る舞いが出る

以下がチェックマークを付けた項目の注意書きです。

クラッシックエディターで<p>と<br>タグが除去されるのを停止し、テキストタブにこれらのタグを表示します。テキストエディターの自動補完を停止し、より高度なコーディングが可能です。しかし、まれに予想できない振る舞いをするため、常用前に充分テストを行ってください。テキストエディター内での改行は出力に含まれます。このため空の行やHTMLタグ内の改行、複数の<br>タグは使用しないでください。

この様に予想できない振る舞いがあるとされていますので、操作時は注意しましょう。

テキストエディタ上のタグが維持される

改行・段落タグが消えなくなる

では効果のほどを確認してみましょう。一旦ビジュアルエディタへ切り替えて再度テキストエディタへ戻してみます。

設置したbrやpタグが、そのまま保持されているのがわかりますね。

これで改行や段落タグが消える事はなくなりました。

エディタ上にタグが自動で表示される

では次にbrタグやpタグを全く入れずに2段の文章を並べた状態で、ビジュアルエディタを経由してみました。

すると、テキストエディタに戻った時にbrやpタグが自動で挿入されているのがわかります。

※ちなみにテキストエディタで<br>と入れ、ビジュアルエディタを経由して戻ってくると、<br />に変わります。

つまりbrやpタグを直接入れた場合は自動挿入機能はOFFになり、ビジュアルエディタを経由しても維持されます。

逆にタグを入れていない場合は自動挿入機能がONになり、保存・経由時にタグ挿入・維持される様になります。

出力ソースとの関係

これは元々から反映されていたタグが、エディタ画面に出るようになっただけと言えます。

出力されるHTMLソースは元々、エディタ上で改行や段落タグがある・無いにかかわらず、改行位置・段落位置通りに反映されていました。

エディタ上の状態がHTMLソース出力時に反映されるのは変わりません。

応用編

以下の様にpタグで囲った文章を縦に2つ並べ、その間に一段の段落を空けた場合はどうなるでしょう。

エディタ上の表示

HTMLソース（空白段が消去された状態）

結果、WEBページのソース上ではpタグ間の空白が何段あっても認識はされず、pタグに変換されたりはしない様です。

この時テキストエディタ上でも空白の段が自動で消えたりする場合がありました。先程の予想できない振る舞いの一つかも知れません。

プラグインを使わずに設定する方法

次はプラグインではなく、functions.phpに直接コントロールを記載する方法です。

functions.phpに追記する

functions.phpコード

add_action('init', function() { remove_filter('the_title', 'wptexturize'); remove_filter('the_content', 'wptexturize'); remove_filter('the_excerpt', 'wptexturize'); remove_filter('the_title', 'wpautop'); remove_filter('the_content', 'wpautop'); remove_filter('the_excerpt', 'wpautop'); remove_filter('the_editor_content', 'wp_richedit_pre'); }); add_filter('tiny_mce_before_init', function($init) { $init['wpautop'] = false; $init['apply_source_formatting'] = ture; return $init; });

これでプラグインと同じような挙動をする事になりますが、プラグインの方が簡単だと思います。

pなどの自動挿入をOFFにする方法

HTMLソースを丸ごと固定ページに流し込んだ際、逆に自動でbrタグやpタグが追加される場合があります。

追加で入ってしまうとレイアウトが崩れる原因になるので、追加挿入されるのは避けたいですよね。

wpautopの記述

そんな時は自動挿入機能のみをOFFにする事もできます。

functions.php追記

functions.phpに以下を追記すれば、すべての投稿において自動挿入機能がOFFになります。

remove_filter('the_content', 'wpautop');

page.phpへの追記

固定ページのみOFFにしたい場合は、page.phpの最上部に上記コードを入れましょう。

<?php remove_filter ('the_content', 'wpautop'); ?>

この設定の場合自動でpタグが挿入されることが無いので、段落を作りたい場合は必ず手入力でタグを入れる必要があります。

同様にエディタ上で改行をしていてもそこに自動でbrタグが入らないので、出力ページ上では改行がされません。

詳細は別記事をご覧ください。

まとめ

今回紹介したプラグインや設定をすると、設置したpタグやbrタグはエディタ上の記載通りに維持されます。

ビジュアルエディタを経由しても消えたりする事がありませんので、安心ですね。

仮に改行や段落タグを入れていなくても、エディタ上の改行や段落は、brやpタグに自動で補完されます。

仮にタグを入れてなくてもエディタ上で改行や段落になっていれば、そこがbr・pタグになってしまう訳ですね。

このようなルール付けが必要ですね。

一押し人気コーナー紹介