特定のページでのWPFormsスタイリングの読み込み

WPFormsのCSSをサイトに読み込むタイミングを制御しますか？デフォルトでは、WPFormsは選択したフォームのスタイルを含めるオプションをグローバルに適用します。ただし、簡単なPHPフィルターを使用して、特定のページでフォームのスタイルを条件付きで読み込んだり無効にしたりできます。

このチュートリアルでは、wpforms_settingフィルターを使用して、基本およびフォームテーマのスタイルを特定のページにのみ読み込む方法を説明します。

フォームの作成

まず、フォームを作成し、いずれかのページに公開します。
フォームの作成にヘルプが必要な場合は、最初のフォームの作成ガイドを参照してください。

フォームを目的のページに追加したら、WPForms » 設定 » 一般の下にあるフォームのスタイルを含めるオプションが基本およびフォームテーマのスタイルに設定されていることを確認してください。

フォームのスタイルを条件付きで読み込む

デフォルトでは、WPFormsはフォームが表示されるすべてのページでCSSを読み込みます。

特定のページにのみ読み込みたい場合は、次のコードスニペットを使用できます。

add_filter( 'wpforms_setting', function( $value, $key, $default, $option ) {
    if ( $key === 'disable-css' ) {
        // Example: only load WPForms CSS on page ID 123.
        if ( is_page( 123 ) ) {
            return '1';
        } else {
            return '3';
        }
    }
    return $value;
}, 10, 4 );

仕組み

• このスニペットは、wpforms_settingフィルターを使用して、現在のページが指定されたIDと一致するかどうかを確認します。
• 条件が true の場合、CSSオプションを'1'に設定し、WPForms CSSを読み込みます。
• それ以外のすべてのページでは、'3'を返します。これにより、WPForms CSSは完全に無効になります。

123を、WPFormsのスタイルを読み込みたい任意のページのIDに置き換えることができます。

これで完了です！簡単なフィルターを使用して、WPFormsのスタイルがいつ読み込まれるかを制御する方法がわかりました。

次に、送信ボタンのスタイルをカスタマイズする方法やWPFormsにカスタムCSSを追加する方法を学びたいですか？これらのチュートリアルは、フォームのスタイルをさらに進化させるのに役立ちます。