未分類

【MW WP Form】コメントアウトしたフォームが表示される

tomomi@clap-create.com

WordPressで人気のフォームプラグイン「MW WP Form」を利用していて、HTMLコメントアウトで非表示にしたはずのフォーム項目が、ある日突然表示されてしまう現象にお困りではありませんか?

この記事では、具体的な原因と、状況や技術レベルに合わせた複数の解決策を詳しく解説します。安全なウェブサイト運用のためのヒントもご紹介しますので、ぜひ最後までご覧ください。

【現象】ショートコードを含むHTMLコメントアウトが機能しない!

具体的には、以下のようにMW WP Formのショートコード(例: [mwform_textarea ...])を含むHTML要素をコメントアウトしても、そのコメントが無視され、内部のフォーム項目がページに表示されてしまう、という状況です。

以前はこれで問題なく非表示にできていたにも関わらず、新しい固定ページにこのコードだけを記述しても表示されてしまうことがあります。一方で、単純なテキスト(例: “)のHTMLコメントアウトは正常に機能します。

【原因】MW WP Form 5.1.0以降の wp_kses() による出力仕様の変更

この問題の主な原因は、MW WP Formのバージョン5.1.0以降、フォーム内のコンテンツ出力にWordPressの関数 wp_kses() が使われるようになったことです。

wp_kses() は、HTMLに含まれる悪意のあるコード(XSS:クロスサイトスクリプティングなど)をフィルタリングし、許可されたHTMLタグや属性のみを通過させることでセキュリティを高める重要な機能です。この仕様変更が、HTMLコメント内のショートコードの解釈に影響を与え、コメントアウトが意図した通りに機能しなくなったと考えられます。これは脆弱性対応のための措置。

【解決策】状況に応じた複数のアプローチ

この問題への対処法は一つではありません。ここでは主な3つの解決策を、それぞれのメリット・デメリットと共に紹介します。

解決策1: ソースコードから該当箇所を完全に削除する(最も確実)

  • 方法: 表示させたくないフォーム項目(ショートコードを含むHTML全体)を、テーマファイルや固定ページの編集画面から完全に削除します。
  • メリット:
    • 最もシンプルかつ確実な方法です。
    • MW WP Formの仕様変更に今後も左右されません。
    • ソースコード上にも情報が残らないため、セキュリティ的にも最も安全です。
  • デメリット:
    • 将来的にそのフォーム項目を再利用したい場合、再度記述する必要があります。

解決策2: CSSで非表示にする(応急処置的)

方法:表示させたくないフォーム要素を特定のCSSクラスで囲み、そのクラスに対して display: none; というスタイルを適用します。

<div class="hidden-mwform-field"> <div class="form_item">
    <div class="form_entry">テスト項目:</div>
    <div class="form_input">[mwform_textarea name="purpose" cols="50" rows="5" placeholder="テスト"]</div>
  </div>
</div>

WordPressのカスタマイザーの「追加CSS」や、テーマのスタイルシートに以下のように記述します。

.hidden-mwform-field {
  display: none !important; /* !important が必要な場合があります */
}
  • メリット:HTML構造を直接削除せずに、比較的簡単に見た目上は非表示にできます。
  • デメリット・注意点:HTMLソースコード上にはフォームの記述が残ります。 あくまでブラウザの表示上見えなくするだけなので、機密性の高い情報を隠す目的には絶対に使用しないでください。
    wp_kses() の影響やテーマのCSSによっては、スタイルが意図通りに適用されない場合があり、その際は !important が必要になることがあります。根本的な解決ではなく、あくまで応急処置と考えるべきです。

解決策3:PHPによる条件分岐でショートコードの出力を制御する(より根本的・推奨)

  • 方法:WordPressのテーマファイル(例: functions.php、固定ページや投稿タイプのテンプレートファイルなど)で、PHPの条件分岐を用いて、特定の条件下でのみMW WP Formのショートコードを含むHTMLが出力されるようにします。
<?php
// 表示・非表示を制御するための条件変数
$display_this_field = false;

// 例: 特定の固定ページでのみ表示する場合 (ページIDが 123 の場合)
// if ( is_page(123) ) {
//   $display_this_field = true;
// }

// 例: 管理者ユーザーのみに表示する場合
// if ( current_user_can('administrator') ) {
//   $display_this_field = true;
// }

if ( $display_this_field ) :
?>
  <div class="form_item">
    <div class="form_entry">テスト項目:</div>
    <div class="form_input"><?php echo do_shortcode('[mwform_textarea name="purpose" cols="50" rows="5" placeholder="テスト"]'); ?></div>
  </div>
<?php endif; ?>
  • メリット:条件に合致しない場合、そもそもHTML自体がサーバーサイドで出力されないため、CSSよりも確実で安全です。HTMLコメントアウトの挙動に依存しません。
  • デメリット・注意点PHPの知識とWordPressのテーマ構造に関する理解が必要です。テーマファイルを編集する際は、記述ミスをするとサイト全体が表示されなくなるリスクがあります。必ず事前にバックアップを取り、可能であれば子テーマでの編集を強く推奨します。どのような条件で表示・非表示を切り替えるのか、明確なロジックを考える必要があります。

どの解決策を選ぶべきか?

  • 単純に不要になった項目であれば、解決策1(完全削除) が最も安全かつシンプルです。
  • 一時的に非表示にしたいが、ソースコードに残っても問題ない程度の情報であれば、手軽な解決策2(CSSで非表示) も選択肢に入りますが、リスクを理解した上で使用してください。
  • 特定の条件下でのみ表示させたい、かつセキュリティも考慮したい場合は、技術的なハードルは上がりますが解決策3(PHPで条件分岐) が最も推奨される方法です。

根本的な対策と今後のホームページ運用について

今回のMW WP Formの事例のように、CMSやプラグインは、セキュリティ強化や機能改善のために日々バージョンアップが行われます。その過程で、予期せぬ仕様変更が発生し、これまで問題なかった箇所に影響が出る可能性は常にあります。

  • アップデート時の慎重な検証: 可能であれば、本番環境へプラグインやテーマのアップデートを適用する前に、ステージング環境(テスト環境)で影響がないか確認することが理想的です。
  • 代替プラグインの検討: 利用しているプラグインの仕様変更が運用に大きく影響する場合、同様の機能を持つ他のプラグインへの乗り換えも検討する必要が出てくるかもしれません。
  • CMSの限界とスクラッチ開発: 高度なカスタマイズ性や、外部要因に左右されない絶対的な安定性を求める場合、CMSではなくスクラッチ(オーダーメイド)でウェブサイトを構築するという選択肢もあります。

スクラッチ開発とCMS開発(WordPressなど)のそれぞれのメリット・デメリットについては、以下の記事で詳しく解説しています。

準備中です

  • [内部リンク] スクラッチ開発の詳細はこちら
あわせて読みたい
ワードプレスとは?初心者向けに徹底解説!メリット・デメリットも【完全ガイド】
ワードプレスとは?初心者向けに徹底解説!メリット・デメリットも【完全ガイド】

ウェブサイト制作や運用、セキュリティ対策などでお困りのことがございましたら、お気軽にご相談ください。専門のスタッフがお客様の状況に合わせた最適なご提案をいたします。

ABOUT ME
伊藤 友美
伊藤 友美
Clap create 代表 / コミュニケーションデザイナー
1992年生まれ、愛知県出身のグラフィックデザイナー。 名古屋芸術大学デザイン学部デザイン学科を卒業後、印刷会社に6年勤務。 内2年間グラフィックデザイナー、4年間Webディレクター・プランナーを経験しました。 その後食品メーカーのインハウスデザイナーを経て独立開業。 プライベートでは一児の母として育児に日々奮闘中。
記事URLをコピーしました