News & Topics


■ 問い合わせページのコーディングがずれてしまう??

今回は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タグを削除しておくコードは非常に有効です。勝手にタグが入るとデザインが崩れたり、思い通りにならなかったりするので、不要な自動生成タグは削っておきましょう。

 


Calma(カルマ)は、枚方市を活動拠点に、主に中小企業や個人事業主をクライアントにしており、様々な業種のクライアントのWebコンサルタントとして企業や事業主のビジネスのIT化、DX化推進のお手伝いをさせていただいております。
サイト制作やサイトリニューアル、Webアプリケーション開発はもちろん、SEO対策やWebサイトの運用、改善といったご依頼から、サイト保守やバナー作成、ロゴデザイン作成、名刺デザイン作成、動画作成、動画編集、ブログ更新代行のようなスポットのご依頼まで幅広く承っております。
Webについてのお困りごとやご相談がありましたら、下記お問い合わせフォームよりお気軽にご相談ください。
(相談&見積り無料)

ご相談はこちら


 


Contact

ホームページ作成・サイト運用/解析
・動画編集・デザイン(ロゴ作成・名刺作成)は、
枚方市のCalmaにお任せください。
ご相談・お見積り、お気軽にお問い合わせ下さい。