仅当表单在页面上时如何加载 CF7 CSS 和 JS答案

【问题标题】：How to load CF7 CSS & JS only when form is on the page仅当表单在页面上时如何加载 CF7 CSS 和 JS
【发布时间】：2021-01-16 00:25:07
【问题描述】：

我想加快我的网站。我只想在表单是页面之一时加载联系表单 7 css & js。我找到了解决方案，但它们对我来说不是 100%。为什么？因为它们是基于我所在的页面。我想换一种方式。我正在使用gutenberg 创建我的网站，但我不知道表单会在哪里。我将来可能会出现在联系页面、主页或子页面上。所以我的想法是仅当表单在页面中时才加载 css & js。任何页面。那么有什么办法吗？我正在考虑使用简单的 ACF Checkbox 来执行此操作。当用户想要输入 CF7 简码/表单时，他需要单击复选框，例如 Website have form。也许还有更优雅的方式？

【问题讨论】：

标签： javascript php wordpress contact-form-7

【解决方案1】：

您可以简单地将所有 Contact Form 7 脚本出列，然后检查短代码。

从你的主题将这个添加到你的functions.php：

function contactform_dequeue_scripts() {
    $load_scripts = false;

    if( is_singular() ) {
        $post = get_post();

        if( has_shortcode($post->post_content, 'contact-form-7') ) {
            $load_scripts = true;
            
        }
    }

    if( ! $load_scripts ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_script('google-recaptcha');
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform_dequeue_scripts', 99 );

【讨论】：

谢谢！我正在使用 wpcf7_enqueue_scripts() 和 wpcf7_enqueue_styles() 而不是 wp_dequeue 函数，它也在工作。

【解决方案2】：

我无法让上一个答案中的脚本正常工作。

但是以下工作：

function contactform7_dequeue_scripts() {
    $check_cf7 = false;

    if( is_page('contact') ) {
        $check_cf7 = true;
    }

    if( !$check_cf7 ) {
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'cf7-conditional-fields' );
        wp_dequeue_style( 'cf7-conditional-fields' );
    }
}
add_action( 'wp_enqueue_scripts', 'contactform7_dequeue_scripts', 77 );

【讨论】：