特定のページでWPFormsスタイリングをロードする

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

このチュートリアルでは wpforms_setting フィルタでWPFormsをロードする ベーステーマとフォームテーマのスタイリング 特定のページのみ

フォームの作成

フォーム作成にヘルプが必要な場合は、最初のフォーム作成ガイドをご覧ください。

フォームを目的のページに追加したら、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と一致するかどうかをチェックします。
• 条件が真なら、CSSオプションを '1'これはWPForms CSSをロードします。
• それ以外のページでは '3'これはWPForms CSSを完全に無効にします。

を交換することができる。 123 を WPForms のスタイルを読み込ませたい任意のページの ID で指定します。

これで完了だ！これで、簡単なフィルタを使用してWPFormsのスタイルがロードされるタイミングを制御する方法がわかりました。

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