[chat face=”sh-naku.png” name=”シオリ(嫁)” align=”left” border=”red” bg=”red”] なんか知らないけど改行タグや文章タグが消えちゃった [/chat]
[chat face=”wanpoint2.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] wordpressの仕様によるものだね。大丈夫、解決できるよ [/chat]
こんにちは、フリーランスWEBディレクターの夫婦ブロガートカッチです。
wordpressで記事を書くときに「テキストエディタ → ビジュアルエディタ → テキストエディタ」と切り替えたタイミングで改行タグや文章タグが消えてしまうことがあります。これはwordpressの親切仕様によるものなのですが、意図せずに変更されると困っちゃいますよね。
wordpressの初期設定は、
- 改行をHTMLの <br />へ置き換える
- 2連続の改行を<p>～</p>へ書き換える
っていうことを自動的にしちゃいます。
ってことで、今回はこのwordpressの困ったを解決するために解決策をいくつか書いておこうと思います。自分のwordpres構築設定に合わせて解決策をお選びください。
どうぞよろしくお願いします。
改行タグや文章タグが消えてしまう現象の詳細
「テキストエディタ → ビジュアルエディタ → テキストエディタ」と切り替えたタイミングで改行タグや文章タグが消えてしまうと書きましたが文章だけだとわかりずらいので画面キャプチャをとってみました。
まずサンプルとして「テキストエディタ」で改行タグや段落タグを直接入力していきます。brタグが改行、pタグが段落を表現するhtmlコードです。
「テキストエディタ」から「ビジュアルエディタ」に切り替えると、改行タグや段落は反映されています。打ち込んだ改行タグや段落タグは見えなくなっているだけで意図した結果になっていますね。
で、再び「テキストエディタ」に戻すと打ち込んだはずの改行タグや段落タグが消えてしまっています。
実際のHTMLコードを確認していると余分な段落pタグが増えていることがわかります。文章と画像だけしか使わないブログ運営程度であれば問題ないのですが、HTMLやCSS、javascriptを使ってゴリゴリにコーディングするときは困っちゃうんですよね。
わたしも初めてこのケースに遭遇した時は意味が分からず困っちゃいました。どうやっても完璧なはずのコーディングが崩れちゃんですよね。
[chat face=”batsunigawarai.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] 知らないと意味わかりませんよね [/chat]
わたしはいつもfunction.phpにコードを書いて解決する
まず最初にfunction.phpにコードを書いて解決する方法をお伝えします。
wordpressの記事投稿すべてに反映させる場合
|
1 2 3 4 5 |
// 記事の自動整形を無効にする remove_filter('the_content', 'wpautop'); // 抜粋の自動整形を無効にする remove_filter('the_excerpt', 'wpautop'); |
function.phpに上記コードを書くだけで解決することができます。コードを書く場所はfunction.phpのどこでも良いのですが、わかりやすい1番下がいいかもしれません。
口述するプラグインでの解決方法もあるのですが、可能な限りプラグインを使わない解決策を探すようにしてます。プラグインを使いすぎると表示が遅くなったりしますからね。
投稿記事タイプによって適応するのを決める場合
上記コードはsingle.phpもpage.phpも同じように自動挿入タグを反映さえないようにするようにしています。でもsingle.phpは自動挿入はOKだけど、page.phpはダメっていうケースもあると思います。
ブログ投稿みたいに文章と画像だけが中心となる場合は自動挿入は便利なので残しておきたいというケースもあると思います。わたしが請け負ったクライアントでも、クライアントが更新する用のsingle.phpは自動挿入を残しておいて、わたしがbrタグやpタグなどの細かなHTMLコードを書く場合は自動挿入をNGとする設定なども必要になるかと思います。
|
1 2 |
// <?php the_content(); ?>の前に入れる <?php remove_filter ('the_content', 'wpautop'); ?> |
page.phpなど自動改行したくない場合は上記コードを書けば大丈夫です。
また、function.phpで制御する方法もあるので合わせて紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_filter('the_content', 'wpautop_filter', 9); function wpautop_filter($content) { global $post; $remove_filter = false; $arr_types = array('page'); //自動整形を無効にする投稿タイプを記述 $post_type = get_post_type( $post->ID ); if (in_array($post_type, $arr_types)) $remove_filter = true; if ( $remove_filter ) { remove_filter('the_content', 'wpautop'); remove_filter('the_excerpt', 'wpautop'); } return $content; } |
どちらかお好みで使い分けてください。
プラグインで簡単に解決することもできる
[chat face=”sh-nazo.png” name=”シオリ(嫁)” align=”left” border=”red” bg=”red”] function.phpを編集するのちょっと怖いなー [/chat]
[chat face=”gattsu1.png” name=”トカッチ(夫)” align=”left” border=”blue” bg=”blue”] プラグインでも解決できるよ！ [/chat]
function.phpを編集しなくても、TinyMCE Advancedというプラグインで解決することができます。プラグインで簡単に解決したいという場合はコチラを選ぶと良いと思います。
TinyMCE Advancedは多くの人が使っているので安心のプラグインです。
TinyMCE Advancedプラグインとは
自動整形による改行brタグや段落pタグが消されるのを防ぐプラグインです。多くのサイトでも紹介されており、割と有名なプラグインです。
インストール方法は以下の通りです。
- プラグイン新規追加で「TinyMCE Advanced」を検索する。
- インストールボタンを押す
- 有効化する
- wordpress左メニューの「設定」から「TinyMCE Advanced」をクリック
- 行動なオプションの段落タグの保持にチェックを入れる
- 保存する
で完了です。
高度なオプションは上記のような画面です。段落タグの保持にチェックを入れて保存するだけでOKです。
プラグインを使った解決法のほうが簡単ですね。
まとめ
改行brタグや段落pタグを自動的に最適化してくれるwordpressは便利なのですが、自動で整形されるので意図しない動きをする場合もあります。
そんな時は上記コードやプラグインを使って解決してみてください。
最後に余談になりますが、既存サイトに記事がある場合にfunction.phpやプラグインを使うと既存ページにも適応されてしまいレイアウトが崩れてしまうかもしれません。反映後は目視でチェックすることを忘れないようにしてくださいね。
トカッチでした！
コメント