1. HOME
  2. WordPress
  3. MW WP Formの自動整形(pタグ、brタグ)を無効化し、レイアウト崩れを防ぐ方法
WordPress - 2022-08-10

MW WP Formの自動整形(pタグ、brタグ)を無効化し、レイアウト崩れを防ぐ方法

MW WP Formは非常に高機能で便利なWordPressのフォームプラグインですが、時として意図しないHTMLタグ(<p>タグや<br>タグ)が自動的に挿入され、CSSでのスタイリングが崩れてしまうことがあります。これは、WordPressのwpautopという自動整形機能が原因です。

この記事では、この自動整形機能を無効化し、フォームのHTML構造を完全にコントロールする方法について詳しく解説します。

自動整形を無効化するPHPコード

お使いのテーマのfunctions.phpに以下のコードを追記することで、MW WP Formで作成したすべてのフォームの自動整形を無効化できます。

注意:テーマを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。子テーマを作成し、子テーマのfunctions.phpに記述することを強く推奨します。

function mvwpform_autop_filter() {
  // MW WP Formの管理クラスが存在するかをチェックし、エラーを防ぐ
  if (class_exists('MW_WP_Form_Admin')) {
    $mw_wp_form_admin = new MW_WP_Form_Admin();
    // 登録されている全てのフォーム情報を取得
    $forms = $mw_wp_form_admin->get_forms();

    // 各フォームに対してループ処理
    foreach ($forms as $form) {
      // 各フォームのIDを指定して、wpautopを無効化するフィルターフックを追加
      add_filter('mwform_content_wpautop_mw-wp-form-' . $form->ID, '__return_false');
    }
  }
}
// 上記の関数を実行
mvwpform_autop_filter();

コードの解説

  1. if (class_exists('MW_WP_Form_Admin'))
    プラグインが有効化されているか(MW_WP_Form_Adminクラスが存在するか)を確認します。これにより、プラグインを無効化した際にサイトがエラーで停止するのを防ぎます。
  2. $mw_wp_form_admin->get_forms()
    MW WP Formで作成されたすべてのフォームのリスト(オブジェクト配列)を取得します。
  3. foreach ($forms as $form)
    取得したフォームリストを一つずつループ処理します。
  4. add_filter('mwform_content_wpautop_mw-wp-form-' . $form->ID, '__return_false');
    これが中核部分です。MW WP Formには、フォームIDごとにwpautopを制御するためのフィルターフック mwform_content_wpautop_mw-wp-form-(フォームID) が用意されています。
    このフィルターに対して__return_false(常にfalseを返すWordPressの標準関数)を返すように設定することで、指定したフォームの自動整形機能が完全に無効化されます。

まとめ

このコードをfunctions.phpに一行追加するだけで、MW WP Formの自動整形によるレイアウトの悩みを解消できます。HTML/CSSを細かく制御してフォームをデザインしたい場合には必須のカスタマイズと言えるでしょう。