您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
wordpress的js代码放在哪里
华章滕2023-07-30WordPress教程已有人查阅
导读在wordpress中,js代码通常情况下会直接放在header.php或footer.php文件中添加js文件调用代码。其实wordpress主题较佳引用js文件的方法是使用wordpress内置的

在wordpress中,js代码通常情况下会直接放在header.php或footer.php文件中添加js文件调用代码。其实wordpress主题较佳引用js文件的方法是使用wordpress内置的wp_enqueue_script()函数,通过该函数可以安全地将javascript代码加入到WordPress创建的页面中,不仅可以大限度地保证兼容性,还是提高wordpress性能效率的一个方法。
函数代码:
<?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_script;只在后台调用,使用admin_enqueue_scripts。
示例:
只在前台调用
<?php function boke8_theme_scripts() { wp_enqueue_script( 'boke8', get_template_directory_uri() . '/js/boke8.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'boke8_theme_scripts' ); ?>
只在后台调用
<?php function boke8_theme_scripts() { wp_enqueue_script( 'boke8', get_template_directory_uri() . '/js/boke8.js', array(), '1.0.0', true ); } add_action( 'admin_enqueue_scripts', 'boke8_theme_scripts' ); ?>
附:函数位置wp-includes/functions.wp-scripts.php文件。
本文标签:
很赞哦! ()
相关教程
- (响应式)wordpress模板VieuV4.5主题资讯自媒体博客源码
- (响应式)WordPress主题Ripro9.0博客免扩展二开版
- (自适应多语言)WordPress开源主题MirageV资讯个人博客源码
- (自适应)WordPress主题SEO自媒体博客资讯模板RabbitV2.0
- WordPress主题模板JustNews资讯博客类源码V5.2.2
- (自适应)WordPress二次元博客主题Sakurairo
- 响应式WordPress简约博客主题Alt_Blog
- Wordpress博客新闻主题在线商店平台betheme 21.5.6版
- WordPress个人博客主题 - wp-Concise-v1.0免费下载
- WordPress主题模板主题巴巴/博客X主题源码免费下载
- MYcat实现wordpress库和shopxo库分库
- wordpress、Discuz产品部署示例
图文教程
wordpress迁移服务器的方法示例
标签(空格分隔): 未分类历经两天,从完全对服务器方面的内容不懂的小白终于将服务器给迁移了打开 第一步,将wordpress文件,以及数据库导出。打开到处的网站文件,第一级目录,里面有
wordpress访问提速及防ddos攻击快速CF切换的实现方法
wordpress的插件模板加载数据比较多,就算安装了wprocket这类缓存插件,做了js,css压缩,或者数据库优化。其实对网站的速度也并不会有太大提升。
WordPress文章实现阅读量统计和显示的方法
WordPress文章阅读量统计和显示(非插件, 刷新页面不累加)WordPress文章阅读量统计实现思路:
wordpress修改登陆地址的方法
近几天,小站的默认登录地址一直被攻击(扫描),平均一天几百次,虽然看着没什么,一不定会被撞开。但凡事有个万一哈!虽然小站也没有什么重要的。
相关源码
-
(PC+WAP)智能机器人人工智能物联网自动化设备源码下载本模板基于PbootCMS内核开发,为智能机器人及传感器科技企业精心设计。采用现代化设计风格,突出科技感与专业性,多方位展示企业技术实力与产品优势。查看源码 -
(PC+WAP)盆栽绿植观赏植物花卉租赁免费pbootcms网站模板为花卉盆栽租赁、园林绿化企业打造的PbootCMS网站模板,采用较新内核开发,PC与移动端数据实时同步。通过清新自然的视觉设计,精准展现植物养护、花卉展示等业务场景,帮助用户快速建立专业级行业网站。查看源码 -
(自适应)pbootcms家政服务保洁保姆打扫卫生网站模板下载本模板基于PbootCMS内核开发,为家政服务企业量身定制。设计风格温馨亲切,突出家政行业的专业与贴心服务特性,多方位展示企业服务项目与优势。查看源码 -
(PC+WAP)院校学院职业学校机构协会网站开源源码下载本模板基于PbootCMS系统开发,为高等院校、职业学校等教育机构设计,特别适合展示学校概况、院系设置、招生信息等内容。采用双端适配技术,确保在PC和移动设备上都能获得良好的浏览体验。查看源码 -
(自适应)帝国cms7.5模板自媒体文章新闻博客为帝国CMS7.5设计的响应式模板,采用H5技术构建现代化内容展示框架。通过智能断点检测技术实现手机、平板、PC三端适配查看源码 -
帝国cms淘宝客京东联盟网站整站源码下载本模板基于帝国CMS内核深度开发,为淘宝客行业量身定制。随着腾讯微信与淘宝生态的互联互通,淘宝客链接现可在微信、QQ等平台直接分享,为推广带来更多便利。模板特别优化了店铺推广功能,有效避免商品下架导致的链接失效问题,同时支持京东联盟等多平台商品推广。查看源码
| 分享笔记 (共有 篇笔记) |

