从其他页面延迟联系表格 7 脚本和 css

Question

我是 wordpress 技术的新手，如果我在这里问基本问题，我深表歉意。

实际上我正在尝试从除联系我们之外的所有其他页面中删除联系表格 7 样式和 js 文件，所以我在 function.php[=15= 中所做的]

add_action( 'wp_enqueue_scripts','pine_scripts' );

    function pine_scripts() {
         if(! is_page(22) )
        {
           wp_dequeue_script('contact-form-7'); // Dequeue JS Script file.
           wp_dequeue_style('contact-form-7');  // Dequeue CSS file. 
        }
    }

但我仍然在每个页面的源代码中看到联系表 7 被包含在内

/* <![CDATA[ */
var wp_load_style = {"0":"admin-bar.css","1":"jquery.prettyphoto.css","2":"video-lightbox.css","3":"wp-block-library.css","4":"page-visit-counter-pro.css","6":"controlled-admin-access.css","7":"dashicons.css","8":"post-views-counter-frontend.css","9":"wordfenceAJAXcss.css","10":"quadro-theme-style.css","11":"magnific-popup.css","12":"cherry-projects-styles.css","13":"cherry-google-fonts-quadro.css","14":"duplicate-post.css","15":"tablepress-default.css","16":"yoast-seo-adminbar.css","17":"popup-maker-site.css","18":"contact-form-7.css","19":"tm-builder-swiper.css","20":"tm-builder-modules-style.css","21":"font-awesome.css","22":"current-template-style.css","23":"wp-add-custom-css.css"};
var wp_load_script = ["admin-bar.js","jquery.js","jquery.prettyphoto.js","video-lightbox.js","cherry-js-core.js","tm-builder-modules-global-functions-script.js","page-visit-counter-pro.js","controlled-admin-access.js","wordfenceAJAXjs.js","smush-lazy-load.js","quadro-theme-script.js","magnific-popup.js","cherry-projects-single-scripts.js","cherry-post-formats.js","google-recaptcha.js","popup-maker-site.js","contact-form-7.js","google-maps-api.js","divi-fitvids.js","waypoints.js","tm-jquery-touch-mobile.js","tm-builder-frontend-closest-descendent.js","tm-builder-frontend-reverse.js","tm-builder-frontend-simple-carousel.js","tm-builder-frontend-simple-slider.js","tm-builder-frontend-easy-pie-chart.js","tm-builder-frontend-tm-hash.js","tm-builder-modules-script.js","tm-builder-swiper.js","fittext.js"];
var cherry_ajax = "0901ce207c";
var ui_init_object = {"auto_init":"false","targets":[]};
/* ]]> */

我的网站url：https://www.mobitsolutions.com/home 并联系我们 url：https://www.mobitsolutions.com/contactus

如有任何帮助，我们将不胜感激。

Answer 1

你可以使用这个插件:

https://wordpress.org/plugins/scripts-removal-for-contact-form-7/

或者你可以这样做：

function rjs_lwp_contactform_css_js() {
    global $post;
   if(! is_page(22) ) {
        wp_enqueue_script('contact-form-7');
         wp_enqueue_style('contact-form-7');

    }else{
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );
    }
}
add_action( 'wp_enqueue_scripts', 'rjs_lwp_contactform_css_js');

Answer 2

此解决方案会检查短代码，并仅将使用短代码的页面上的脚本和样式排入队列。

function dd_wpcf7_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', 'dd_wpcf7_dequeue_scripts', 99 );

Answer 3

截至 2020 年 11 月，似乎需要一个额外的标签才能有效地使 recaptcha 脚本出列：组合使用“wpcf7-recaptcha”和“google-recaptcha”。

function remove_contact_scripts() {     
    
    /* remove Contact Form scripts if not viewing Contact page */
    if ( !is_page( array( 'contact-us' ) ) ){
        wp_dequeue_script( 'contact-form-7' );
        wp_dequeue_style( 'contact-form-7' );

        /* these are both needed */
        wp_dequeue_script( 'wpcf7-recaptcha' );
        wp_dequeue_script('google-recaptcha');
    }
} 
add_action('wp_enqueue_scripts', 'remove_contact_scripts', 99);

Answer 4

小心：不建议将 cf7/recaptcha3 脚本出队，因为 recaptcha 3 需要检查现场的用户模式才能正确完成其工作： https://contactform7.com/faq-about-recaptcha-v3/#stop-script-loading

从其他页面延迟联系表格 7 脚本和 css

Defer contact form 7 script & css from other pages

php

wordpress

deferred-loading

contact-form-7