Contents
■ 問い合わせページのコーディングがずれてしまう??
今回はContact Form 7で自動で挿入されるpタグやbrタグを削除する方法を解説します。
WordPressでサイト制作をしていると、問い合わせフォームについてはプラグインの「Contact Form 7」を使うと、通常のサイト制作でフォームを作る時間に比べて圧倒的に速く、その後のメンテナンスも非常に楽という事で使用されている方も多いのではないでしょうか。
Contact Form 7は日本で開発されたプラグインで、もちろん日本語にも対応しておりますし、WordPressプラグイン特有の使いづらさや、サイトが重たくなる現象もあまり感じないとても優秀なプラグインだと思います。
ただ、プラグインの特性上、エディタ画面での改行がスペースタグやPタグを自動生成してしまい、思ったデザイン通りにならない、なんて事があります。
今回はその場合の解決方法をいくつかご紹介しますので、ぜひこちらのコードを試してみてください。
■ Code.1 CSSを追加
cssに下記のコードを追加してください。
.wpcf7 p { display: inline; }
とてもシンプルですが、フォーム内のPタグにdisplayにinlineをあててあげるだけで解決します。
■ Code.2 wp-config.phpにコードを追加
CSSでの制御ではなくコンタクトフォーム内で自動Pタグを無効にしたい場合はこちらの方法をお試しください。
FTP等からWordPress直下にあるwp-config.phpファイルを直接編集しましょう。ただ、こちらはコーディングやphpファイルにある程度知識のある方におすすめの方法となります。
// Contact Form 7の自動pタグ無効 define ('WPCF7_AUTOP', false);
こちらの方法については1点だけ注意点があります。
必ずwp-config.phpの最終行にある以下のコードよりも上に書くようにしましょう。
// Contact Form 7の自動pタグ無効 define ('WPCF7_AUTOP', false); /** Sets up WordPress vars and included files. */ require_once( ABSPATH . 'wp-settings.php' );
■ Code.3 function.phpにコードを追加する
自動Pタグ無効の方法でwp-config.phpを触るのはちょっと怖いなという人はfunction.phpに以下のコードを追記しても自動Pタグの無効化は可能です。
// Contact Form 7の自動pタグ無効 add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false'); function wpcf7_autop_return_false() { return false; }
■ Code.4 jQueryにコードを追加する
最後はjQueryにコードを追加する方法です。
jQuery(document).ready(function($){ $('.wpcf7 p').contents().unwrap(); });
<まとめ>
WordPressでContact Form 7使う場合には自動で挿入されるpタグやbrタグを削除しておくコードは非常に有効です。勝手にタグが入るとデザインが崩れたり、思い通りにならなかったりするので、不要な自動生成タグは削っておきましょう。
(相談&見積り無料)
ご相談はこちら