浮萍漂泊本无根
天涯游子君莫问

WordPress如何正确引入 JS 及 CSS文件

接填写好js绝对路径,最高深的直接写地fun函数内,通过php调用出来。那我们怎样来评估方法的优劣呢,下面小编给大家拆解一下最有效最正确的css及js引入方法。

举例你的主题需要引入 plugin.css 文件,在functions.php文件内插入以下代码。

<?php
function wpjam_add_styles() {
  wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
  wp_enqueue_script('plugin_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpjam_add_styles' );  
?>

上面先用 wp_register_script 函数创建了一个标识符为 plugin_stylesheet 的资源,随后将其排队请求添加到 wp_enqueue_scripts action 中。虽然函数名中是 script,但是跟资源文件的类型没有关系,对 CSS 和 JS 都有效。

很显然 wp_register_script 函数没有这么简单,它可以有五个参数:

$handle:资源标识符,供 wp_enqueue_script 调用。
$src:资源的位置。相对地址或者绝对地址或者使用 WordPress 内置的函数获取地址等。常用定位函数有 plugins_url、get_template_directory_uri 等。
$deps:依赖关系。如果引用的是 jQuery 插件,需要依赖 jQuery 组建,那么就需要填写上 jQuery。注意,以数组的形式传递。
$ver:资源版本,可选的。
$in_footer:是否放在底部。一般来说,JS 文件要放在页面的底部,就可以设置这个参数为 True,留空或者 False 会输出到顶部。
下面看一个引用 JavaScript 文件的比较完整的例子:

<?php
function wpjam_add_scripts() {
  wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
  wp_enqueue_script('plugin_script');
}
add_action( 'wp_enqueue_scripts', 'wpjam_add_scripts' );  
?>
赞(0) 打赏
未经允许不得转载:主题秀 » WordPress如何正确引入 JS 及 CSS文件
部分内容来自于网络 如有不妥联系站长删除
查看更多心仪的内容 按Ctrl+D收藏我们
主题秀博客欢迎大家前来投稿

评论 抢沙发

评论前必须登录!

 

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册