有风的日子

只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS 代码

Luoshui邀请您加入WORDPRESS技术交流QQ群:31196817 → wordpress技术交流

好久没更新网站,最近手头上有几个客户的WP网站再做,精力有限,无法更新自己的包括本博客在内的一些网站,今天想到在做客户企业站的时候有一个联系表单的问题。在此把这个方法给贴一下,也给自己一个备份。

另,由于我给客户使用的空间不支持MAIL()发信,所以我要使用SMTP外部邮箱替代来发信,所以我使用了wp-mail-smtp这个插件和Contact Form 7这个插件组合来做发信联系表单。当然也可以直接把代码集成到主题中。至于怎么使用,我后边有时间了把这个使用详细介绍一下,今天只介绍一下再使用Contact Form 7过程中遇到的这个棘手的问题,就是JS和主题的JS有冲突导致每次启用Contact Form 7插件,网站前台页面就会错乱或不显示幻灯片之类。

Contact Form 7 是一个非常强大并且易用的联系表单的插件,我在很多项目中都用到它,但是这个插件有个很不好的地方,会在整个博客的所有前台页面都加载 Contact Form 7 的 JavaScript 和 CSS 代码,对于性能要求极致的我们,当然不允许这样的事情发生,所以我们可以通过下面的代码实现只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS 代码。

add_action ( 'wp_enqueue_scripts', 'wpjam_cf7_enqueue_scripts', 99 );
function wpjam_cf7_enqueue_scripts(){
wp_dequeue_script('contact-form-7');
if(is_page('contact')){
$in_footer = true;
if ( 'header' === WPCF7_LOAD_JS )
$in_footer = false;
wp_enqueue_script( 'contact-form-7',
wpcf7_plugin_url( 'includes/js/scripts.js' ),
array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer );
}
}

add_action( 'wp_enqueue_scripts', 'wpjam_cf7_enqueue_styles', 99 );
function wpjam_cf7_enqueue_styles() {
wp_dequeue_style('contact-form-7');
if(is_page('contact')){
wp_enqueue_style( 'contact-form-7',
wpcf7_plugin_url( 'includes/css/styles.css' ),
array(), WPCF7_VERSION, 'all' );
}
}

上面的代码假设我们只有一个叫做“contact”的页面添加了联系表单,具体涉及到你自己的项目,需要根据具体的情况做些修改。

转载请注明:有风的日子 > WordPrees > 只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS 代码

评论 (0) 分享

评论 0