ワードプレスの記事に自動で挿入されるpタグ、brタグを無効化する方法

ワードプレスの記事に自動で挿入されるpタグ、brタグを無効化する方法

ワードプレスには文章の改行を自動で挿入してくれたり段落にまとめてくれる機能があります。
実際にテキストエディタで書いた文章の終わりでEnterキーを押せば、投稿した記事もその位置で改行されてますよね?

こういった機能がワードプレスには標準装備されているのですが、場合によってはありがた迷惑というか意図しない動きを生むことがあります。

今回はこちらを無効化する事によってワードプレスの自由度を上げていこうと思います。

ワードプレスの自動整形機能とは?

運用上のメリット

上記でも触れましたが、ワードプレスはエディタ内での改行をうまくページに反映させてくれようとします。

例えばエディタで

このように記述してプレビューを確認してみましょう。
すると、

このような形で文章のまとまりをpタグで囲い、改行を入れたところにbrタグが自動で挿入されているのが分かるかと思います。

制作におけるデメリット

これだけであれば非常に優秀な機能なんですが、例えばエディタで2回改行を入れた場合

1つのタグの中でbrが2回入るのではなくpタグとして処理される事で意図しないCSSが適用されてしまう事があります。

他にも、
1、javascriptで後からコンテンツを読み込ませるために用意しておいた空のdivタグが、ビジュアルエディタ選択時に消えてしまう
2、aタグの中身をpタグで囲っているとそのタグが消されてしまう

といった動きが設定されています。

ブログとして運用するだけの場合は残していても特に問題はない機能なんですが、htmlで作成したコンテンツにも同様の動きをする為サイトの構成によっては崩れが生じる場合があります。

wpautop関数とは

上記の動きを司っているのが、ワードプレスのwpautop(うぇーぴーおーとぴー)という関数になります。

頭はいいけど融通が利かないというか遊びがないというか、優秀だけど大成しないタイプですね。(?)

この関数はページの「本文」と「抜粋」に自動適用されるようになっていますので、適用されないようにfunctions.phpに記述を追加してやることで、自動でpタグが挿入されたり、aタグの中身が消えるのを回避することが可能です。

wpautopを無効化する記述

wpautop関数の動きを止めたい場合はremove_filterを使って、読み込んでいるテンプレートタグでwpautopが働かないようにしてやります。

全ページに適用させる場合の記述


remove_filter('the_content', 'wpautop'); ← 記事本文でwpautopの動きを止める
remove_filter('the_excerpt', 'wpautop'); ← 記事の抜粋でwpautopの動きを止める

上記のようにfunctions.phpに記述を追加する事で改行の自動挿入も含め動きを止めることが可能です。

投稿タイプ毎に自動挿入を適用させる場合

投稿タイプで自動挿入を制御させる場合は、以下のようにfunctions.phpに記述を行います。
$arr_types = array(‘〇〇〇’); の部分に自動挿入させたくない投稿タイプを記述しておくことで、その投稿タイプの記事ではwpautopの動きを制御することが可能になります。


add_filter('the_content', 'wpautop_filter', 9);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
 
$arr_types = array('〇〇〇'); //自動整形を無効にする投稿タイプ
$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;
}

テンプレートファイルに記述する場合

テンプレートファイルに記述する事で、その個別ページでwpautop関数を無効化する方法もあります。

上記のコードを個別ページのthe_content();(本文を出力している関数)の前に入れてやる事でも対処が可能です。


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

このような形ですね。
一番使いやすい形、対応が必要な状況に合わせて試してみてください。

なおfunctions.phpを触ったりしますので、その場合はきちんとバックアップを取ってから行ってくださいね。

まとめ

今までワードプレスではブログの運用に使うことが多かった為特に困ったことはなかったんですが、最近ワードプレスでコンテンツ作成をした際に頭を抱えましたのでまとめておきました。

通常運用の中でテキストエディタがおかしい!勝手にタグが入る!といった際はwpautop関数がいたずらをしている可能性が高いので確認してみてください。

対応方法カテゴリの最新記事