こんにちは。デザイナーのSUZUKIです。
今回はWordPressの自動整形を無効にする方法を紹介します。
WordPressでページを登録し、プレビューで確認すると、
想定したデザインになってなく、崩れていたりすることがあります。
ソースを確認すると勝手にpタグなどが追加されていたりします。
とても困った現象です。
これはWordPressに実装されている自動整形機能（オートパラグラフ）という機能が原因です。
プラグインを使わずにこの現象を回避する下記2つの方法を紹介します。
- ビジュアルリッチエディターを使用しない方法
- function.phpによる設定方法
ビジュアルリッチエディターを使用しない方法
まず、WordPressで投稿するには「ビジュアルリッチエディター」と「HTMLコードエディター」の2つがあります。
実際の登録画面で説明すると下記画像の赤枠で囲んだタブ部分にあたります。
「ビジュアルリッチエディター」はタブの「ビジュアル」のことです。
「HTMLコードエディター」はタブの「テキスト」のことです。
○ビジュアルリッチエディター
文字の大きさや太さ、色などのデザインを直感的に編集できます。
htmlやcssの知識がなくても編集可能です。
○HTMLコードエディター
htmlやcssの知識があり、タグを入力しなれている方には使いやすく、
より詳細に指定が可能です。
自動整形機能は「ビジュアルリッチエディター」と「HTMLコードエディター」を切り替えたときにも発生します。
切り替える度に機能するので、誤操作でタブを切り替えたときにも勝手にタグが追加されてしまいます。
そこで、ユーザーの設定画面でビジュアルリッチエディターの設定を変更して、自動整形機能を無効にします。
「ユーザー」→「あなたのプロフィール」→個人設定の「ビジュアルリッチエディターを使用しない」にチェックを入れます。
タブの「ビジュアル」が非表示になり、HTMLコードエディターのみの使用となります。
これでタブの切り替えによる自動整形がなくなります。
function.phpによる設定方法
functions.php に以下のコードを追加するだけで、自動整形機能が無効になります。
// 記事の自動整形を無効化
remove_filter('the_content', 'wpautop');
// 抜粋の自動整形を無効化
remove_filter('the_excerpt', 'wpautop');
ビジュアルリッチエディターを使用しない方法と違って、
「ビジュアル」タブは表示されたままになりますが、
改行の自動追加もなくなるので、<br>タグを手動で入れる必要があるので、注意です！
○固定ページのみ無効にする場合
functions.php に以下のコードを追加します。
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;
}
○投稿ページのみ無効にする場合
functions.php に以下のコードを追加します。
add_filter('the_content', 'wpautop_filter', 9);
function wpautop_filter($content) {
global $post;
$remove_filter = false;
$arr_types = array('post'); //適用させる投稿タイプを指定
$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;
}
まとめ
自動整形の機能は状況によってはとても便利だったり、
逆に邪魔になることがあります。
案件ごとにユーザーがどういった使い方をするのかを把握して、
自動整形の機能を無効にする、もしくは部分的に無効にするなど
対応を変えていくことをおススメします。
設定自体はとても簡単なので、恐れることはありません。
忘れずにしっかり設定しましょう！
参考リンク
下記は参考にしたサイトになります。
詳しく知りたい方は下記サイトをご覧ください。
- WordPressで自動挿入されるタグ<p>や<br>を除去する方法
https://upd.world/wordpress-auto-p-br/ - クセの強い WordPress 自動整形機能(wpautop) とうまく付き合う方法
https://qiita.com/oreo3@github/items/117e41689d3396f70f6d - WordPressの自動整形（ビジュアルエディタ含む）を無効にする方法
https://qiita.com/jyokyoku/items/c560b0d1eacc1df61620 [WordPress] プラグイン不要！WordPressの自動整形を無効・解除する方法http://buburinweb.wp.xdomain.jp/wordpress-automatic-forming-plugin
