フォーム作成プラグイン「Contact Form 7」を使用して お問い合わせページを作っていたところ、思いもよらずレイアウトが崩れるという場面に出会いました。
そのときに確認したこと、対応の方法をノートとして記します。
お問い合わせページのレイアウトが 何だか崩れる
お問い合わせページをデザインするとき、HTML＋CSSで静的ページを一旦組んで、レイアウトを確認してからワードプレス化していくことがあります。
ワードプレス化する際には、フォーム作成プラグインの「Contact Form 7」を使っていきます。
そのときに、きちんとform系のHTMLをContact Form 7のものに置き換えているのに、何だかレイアウトが決まらない.. 困った
というようなことが、起こりました。
原因は自動で入るpタグにあり
ブラウザからソースを見てみたら、入れた覚えのない「pタグ」が入っているのを発見しました。
しかも閉じタグ</p>だけが何ヶ所かに入っています。
これは崩れて当然という感じですね。
どうもContact Form 7が自動でタグを入れているようです。
公式ページを見てみたら、autopフィルタというものが効いていて、そのためタグが入っているようです。
WPCF7_AUTOP
この定数の値が false のとき(デフォルト: true)、Contact Form 7 はフォームの内容に “autop” フィルタを適用しません。”autop” フィルタは連続した改行をパラグラフ要素に置き換えます。
pタグが入らないようにする方法
pタグが入らないようにするには、wp-config.phpに以下のコードを1行追加していきます。
define ('WPCF7_AUTOP', false);
追加する場所は、最後の行の一つ手前になります。
（最後の行より後ろに追加すると、機能しないです。）
/** Contact Form 7自動pタグ追加をオフにするとき以下の1行を追加 */
define ('WPCF7_AUTOP', false);
/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';※3、4行目が初めから入っている「最後の行」になります。
まとめ
Contact Form 7で組んだフォームでレイアウト崩れが起きたら、まずはソースを見てみてタグの状態を確認。
不要なpタグが入っていたら、この方法で対応していきましょう。
［注意したいこと］
今回は Contact Form 7の「自動pタグ追加機能（autopフィルタ）」をオフにする方法として、「定数を設定する」ということを行いました。
ワードプレスで何か機能をコントロールするとき、function.phpをいじることが多いですが、今回は「wp-config.php」というファイルをいじりました。
wp-config.phpはワードプレスをインストールするときに、DB（データベース）の設定を書くファイルでもありますね。
重要なファイルなので、しっかりとバックアップを取ってから、注意しながら書き換えを行いましょう。
