5ucms论坛

用户名  找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 12171|回复: 0
打印 上一主题 下一主题

[钩子/函数] wp_enqueue_script()函数 安全引入JS文件

[复制链接]

670

主题

785

帖子

8323

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
8323
跳转到指定楼层
楼主
发表于 2021-5-30 15:48:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
相信大部分人在制作wordpress主题引用js文件时,会直接在header.php或footer.php文件中添加js文件调用代码,其实wordpress主题最佳引用js文件的方法是使用wordpress内置的wp_enqueue_script()函数,通过该函数可以安全地将javascript代码加入到WordPress创建的页面中,不仅可以最大限度地保证兼容性,还是提高wordpress性能效率的一个方法。

语法结构

  1. <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
复制代码

参数

$handle – 调用的脚本名称,用于区别其它js,因此不能和其它js文件命名相同。
$src – js文件的路径(即url),不要直接使用域名url,要使用路径函数,如parent theme使用get_template_directory_uri,child theme使用get_stylesheet_directory_uri。
(WP模板路径相关的函数中,通常带有template的是指parent theme,带有stylesheet的指向child theme)
$deps – 依赖关系,加载的js文件所依存的其它js的标识字串数组(array:string),即需要在本代码之前加载的代码的名称
(如js脚本依赖jquery库,那么这里要用数组的形式写上jquery),非必需。
$ver – 加载js文件的版本号,作为查询字串附加在路径的末尾,作用是确保正确的版本信息传递给了客户端,以免受到缓存的影响
(如js脚本发生变化时,通过更改版本号可以强制客户浏览器更新缓存),默认为false,调用当前wordpress程序的版本号,如果不想显示,则设置为NULL(不推荐)。
$in_footer – boolean类型,设置js文件调用代码是否放置在html底部,设置为ture则放在底部,设置为false则放置在head部分。提示需要模板正确放置wp_footer()函数。


通过wp_enqueue_script函数加载js文件时,应该将它分配给一个钩子,如只在前台调用,使用钩子wp_enqueue_scripts;只在后台调用,使用admin_enqueue_scripts。

只在前台调用

  1. <?php
  2. function tone_front_script() {  
  3.    wp_enqueue_script( 'boot', get_template_directory_uri() . '/js/bootstrap.js');
  4. }
  5. add_action( 'wp_enqueue_scripts', 'tone_front_script' );
  6. ?>
复制代码

只在后台调用

  1. <?php
  2. function tone_admin_script() {  
  3.    wp_enqueue_script('boot', get_template_directory_uri() . '/js/bootstrap.js');
  4. }
  5. add_action('admin_enqueue_scripts', 'tone_admin_script');
  6. ?>
复制代码

另外一种方法,使用wp_head钩子和admin_head钩子

为WordPress后台添加css和js代码
  1. <?php
  2.     function admin_jscss() {
  3.         wp_enqueue_style( 'admin-myjscss', get_template_directory_uri() . '/css/bootstrap.css' );
  4.         wp_enqueue_script('admin-myjscss', get_template_directory_uri() . '/js/bootstrap.js' );
  5.         wp_enqueue_script( 'admin-myjscss', get_template_directory_uri() . '/js/jquery.min.js' );
  6.     }
  7.     add_action('admin_head', 'admin_jscss');
  8. ?>
复制代码
回复

举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|5ucms.com

GMT+8, 2025-3-16 17:29 , Processed in 1.343750 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表