麻烦问下wp如何将css放顶部js放底部

问答中心分类: WordPress麻烦问下wp如何将css放顶部js放底部
酷腾酷腾 提问于 1年 以前

如题

本文最后更新于2018年9月15日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

历史上的今天:

1 个回答
布布网布布网 管理员 回答于 1年 以前

在许多场合中,不管是制作修改主题或插件,我们都需要调用一些 JavaScript 库,或者样式表等。这时,我们不应该直接去修改主题的 header.php,或者添加代码到 wp_head() 或 wp_footer() 钩子上,而是要使用 WordPress 官方文档建议使用的 WP 内建的 wp_enqueue_script() 和 wp_enqueue_style() 等函数进行操作。
函数:wp_enqueue_script()
函数用法:wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
参数解释:
$handle:用于区别 JS 名称,即标识字串 (string);
$src:JS 的文件 URL (string);
$deps:加载的 JS 所依存的其他 JS 标识字串数组 (array:string, 非必需);
$ver:JS 的版本号,留空则使用当前 WP 版本号 (string, 非必需);
$in_footer:是否放置到网页 HTML 底部加载 (boolean, 非必需)。
函数:wp_enqueue_style()
函数用法:wp_enqueue_style( $handle, $src, $deps, $ver, $media );
参数解释:
$handle:用于区别 CSS 的名称,即标识字串 (string);
$src:CSS 的文件 URL (string);
$deps:加载的 CSS 所依存的其他 CSS 标识字串数组 (array:string, 非必需);
$ver:CSS 文件的版本号,留空则使用当前 WP 版本号 (string, 非必需);
$media:用于加载 CSS 的头部标签 link 的 media 参数值 (string, 非必需)。
示例
function my_enqueue_scripts() {
if( ! is_admin() ) {
// 前台加载的脚本与样式表
// 去除已注册的 jquery 脚本
wp_deregister_script( 'jquery' );
// 注册 jquery 脚本
wp_register_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false ); /
/ 提交加载 jquery 脚本
wp_enqueue_script( 'jquery' );
// 注册 jquery-easing 脚本
wp_register_script( 'jquery-easing', get_template_directory_uri() . '/js/jquery.easing.js', array( 'jquery' ), '1.2', false );
// 提交加载 jquery-easing 脚本
wp_enqueue_script( 'jquery-easing' );
// 注册并加载 jquery-bxSlider 脚本
wp_enqueue_script( 'jquery-bxSlider', get_template_directory_uri() . '/js/jquery.bxSlider.min.js', array( 'jquery', 'jquery-easing' ), '3.0', false );
// 注册并加载 jquery-bxSlider 样式表
wp_enqueue_style( 'jquery-bxSlider', get_template_directory_uri() . '/css/jquery.bxSlider.css', array(), '3.0', 'screen' ); }
else {
// 后台加载的脚本与样式表 // 取消加载 jquery 脚本
wp_dequeue_script( 'jquery' );
// 注册并加载 jquery 脚本
wp_enqueue_script( 'jquery', 'http://code.jquery.com/jquery.min.js', array(), 'lastest', false ); } }
// 添加回调函数到 init 动作上
add_action( 'init', 'my_enqueue_scripts' );

本文最后更新于2018年9月15日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

历史上的今天: