フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【Contact Form 7】自動挿入されるpタグやbrタグを削除する方法

Contact Form 7
WordPress
wpcf7_autop_or_not
自動挿入

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

Contact Form 7はWordPressで簡単にお問い合わせフォームを作成することが出来る人気プラグイン。
Contact Form 7の設定画面にHTMLを使い、フォームを作成してそれを出力すると記述した覚えの無い<p>タグや<br>タグが自動挿入されてしまいます。
これらのタグが影響してしまい、せっかく整えたレイアウトが崩れてしまう経験をした人も多いのではないでしょうか。
もう一度、<p>タグや<br>タグを考慮してCSSでレイアウトを整え直すのは避けたいですよね。。。
そこで今回の記事ではContact Form 7で<p>タグや<br>タグを自動挿入しない設定方法をご紹介したいと思います。

Contact Form 7で自動挿入されるpタグやbrタグを削除する

Contact Form 7で自動挿入されるpタグやbrタグを削除する方法はいくつか存在します。

  • wp-config.phpにコードを追加する方法
  • function.phpにコードを追加する方法

これらの方法があります。それではそれぞれの方法を見ていきましょう。

wp-config.phpにコードを追加する方法

wp-config.phpを使う場合は、以下のコードを記述します。

// Contact Form 7の自動pタグ無効
define( 'WPCF7_AUTOP', false );

この方法の注意点がひとつあります。
それはこのコードの追加位置です。

最後に書かれている以下のコードよりも上に書く必要があります。

/** Sets up WordPress vars and included files. */
require_once( ABSPATH . 'wp-settings.php' );

つまり以下のような順番にする必要があります。

// Contact Form 7の自動pタグ無効
define( 'WPCF7_AUTOP', false );

/** Sets up WordPress vars and included files. */
require_once( ABSPATH . 'wp-settings.php' );

これで自動で<p>タグや<br>タグが挿入されるConact Form 7の機能は無効化されます。

function.phpにコードを追加する方法

functions.phpを使う場合は、以下のコードを記述します。

add_filter('wpcf7_autop_or_not', 'my_wpcf7_autop_or_not');
function wpcf7_autop_return_false() {
    return false;
}

この記述をするだけで自動で<p>タグや<br>タグが挿入されるConact Form 7の機能は無効化されます。

まとめ

いかがでしたか?
CSSでレイアウトを整えているのあれば基本的に自動で挿入される<p>タグや<br>タグは不要です。
Contact Form 7を使う場合は、今回ご紹介したどちらかの対策をしておくことをお勧めします。