前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress 技巧:只在含有联系表单的页面加载 Contact Form 7 的 JS 和 CSS

WordPress 技巧:只在含有联系表单的页面加载 Contact Form 7 的 JS 和 CSS

作者头像
Denis
发布2023-04-15 14:33:39
1.4K0
发布2023-04-15 14:33:39
举报
文章被收录于专栏:WordPress果酱

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

代码语言:javascript
复制
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”的页面添加了联系表单,具体涉及到你自己的项目,需要根据具体的情况做些修改。


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档