Docker環境でContact Form 7の自動生成pタグを消す

WordPress+Dockerでとあるページを作成していました。お問い合わせ用のフォームを作成するにはContact Form 7というプラグインを利用すると良さそうなので使ってみました。

Contact Form 7をインストールして有効化したあとにサイドメニューに表示されるお問い合わせからお問い合せページを新規追加してみます。

Bootstrapを使用して適当にformを作ってみました。

<div class="row">
<label for="your-name" class="col-sm-2 col-form-label">氏名</label>
<div class="col-sm-10">[text* your-name]</div>
</div>

<div class="row">
<label for="your-email" class="col-sm-2 col-form-label">メールアドレス</label>
<div class="col-sm-10">[email* your-email]</div>
</div>

<div class="row">
<label for="your-message" class="col-sm-2 col-form-label">お問い合わせ内容</label>
<div class="col-sm-10">[textarea* your-message]</div>
</div>

<div class="col-auto">
[submit "送信"]
</div>

↓こんなformになりました。 contact-form

あら、labelとinputが横並びになっていない。。DOMを確認してみると謎のpタグが生成されている。。

dom-img

Contact Form 7の公式ページを見てみると下記の記載がありました。

WPCF7_AUTOP

この定数の値が false のとき(デフォルト: true)、Contact Form 7 はフォームの内容に “autop” フィルタを適用しません。”autop” フィルタは連続した改行をパラグラフ要素に置き換えます。

contactform7.com

なるほど、wp-config.phpにdefine ('WPCF7_AUTOP', false);を設定すれば良さそうですね。ただ個人的にこの辺のファイル編集はできれば避けたい&Gitで管理できた方が何かと安心なので、別の方法で対応しようと思います。

今回はDockerを使用しているので、docker-compose.ymlからWordPressの環境変数を設定して対応します。

version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: hogeroot
       MYSQL_DATABASE: hoge
       MYSQL_USER: hoge
       MYSQL_PASSWORD: hoge

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: fuga
       WORDPRESS_DB_PASSWORD: fuga
       WORDPRESS_CONFIG_EXTRA: "define ('WPCF7_AUTOP', false);"
     volumes:
       - ./themes/hoge:/var/www/html/wp-content/themes/fuga
volumes:
    db_data:

WORDPRESS_CONFIG_EXTRA: "define ('WPCF7_AUTOP', false);"の一行をdocker-compose.ymlに追加してみました。

composeの更新を反映させると...labelとinputが横並びになりました！ contact-form-new