首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

-Wordpress插件-在没有wp_enqueue_scripts的情况下包含js文件的正确方式

在没有wp_enqueue_scripts的情况下,可以使用以下方式来正确地包含JavaScript文件:

  1. 将JavaScript文件直接包含在WordPress主题的header.php或footer.php文件中。这种方式简单直接,但不推荐使用,因为它会导致代码混乱,难以维护,并且可能与其他插件或主题产生冲突。
  2. 创建一个自定义函数,并在需要的地方调用该函数来包含JavaScript文件。首先,在主题的functions.php文件中添加以下代码:
代码语言:txt
复制
function include_custom_js() {
    echo '<script src="' . get_template_directory_uri() . '/js/custom.js"></script>';
}

然后,在需要包含JavaScript文件的地方调用该函数:

代码语言:txt
复制
<?php include_custom_js(); ?>

这种方式可以更好地组织代码,并且避免了与其他插件或主题的冲突。

  1. 使用WordPress提供的wp_enqueue_script函数来包含JavaScript文件。首先,在主题的functions.php文件中添加以下代码:
代码语言:txt
复制
function enqueue_custom_js() {
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_custom_js');

然后,在需要包含JavaScript文件的地方调用wp_enqueue_script函数:

代码语言:txt
复制
<?php wp_enqueue_script('custom-js'); ?>

这种方式是最推荐的方式,它会自动处理依赖关系,并确保JavaScript文件按照正确的顺序加载。

总结起来,正确包含JavaScript文件的方式有三种:直接包含、自定义函数包含和使用wp_enqueue_script函数包含。其中,使用wp_enqueue_script函数是最推荐的方式,因为它更加灵活、可维护,并且与其他插件或主题兼容性更好。

推荐的腾讯云相关产品:腾讯云对象存储(COS) 产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

WordPress 通过模板文件和自带的函数引入 cssjs 的两种方法

其实网上的N种方法总结起来就两种: 一、模板文件 header.php 中直接引入文件 二、在主题的 functions.php 中通过 WP 自带的函数 wp_enqueue_scripts 来加载...> 但是 WordPress 不能确定是否在在页面加载了 JS,Css 文件,如果另一个插件使用相同的 JS,Css 文件,就无法检查 JS,Css 文件是否已经被包含在页面中。...该参数只在WordPress不了解脚本情况时使用。默认值:None $deps(数组)(可选)脚本所依靠的句柄组成的数组;加载该脚本前需要加载的其它脚本。若没有依赖关系,返回false。...该参数可确保即使在启用缓存的状态下,发送给客户端的仍然是正确版本,因此如果版本号可用且对脚本有意义,包含该版本号。...默认值:false $in_footer(布尔型)(可选)通常情况下脚本会被放置在区块中。如果该函数为true,脚本则会出现在区块的最下方。要求主题在适当的位置中包含有 wp_footer() 钩子。

1.8K30

WordPress 教程:如何正确引用 JavaScript 和 CSS 文件

在开发 WordPress 插件或者是制作 WordPress 主题的时候,都会引用一些 JavaScript 和 CSS 脚本资源。...众所周知,WordPress 有很多的插件,几乎每个插件都会引用一些资源文件,难免会有两个插件引用的资源发生冲突等,这样会变得不稳定而且可能会影响效率。...WordPress 合理引入 JS 和 CSS 的方法 可以使用下面代码为你的插件引入 plugin.css 文件。 文件的类型没有关系,对 CSS 和 JS 都有效。...> 在 WordPress 主题开发中使用 wp_enqueue_script 引入资源 上面的例子都是以插件开发引用资源为例,在主题中引用的方法相似,主要的区别就在于使用对应的函数获取主题目录从而得到主题下面的资源文件地址

1.3K40
  • WPJAM「静态文件」:一键合并 WordPress 插件和主题的 JS 和 CSS 文件,加快页面加载速度

    一键合并 JS 和 CSS 文件 有没有什么更好的方法来解决这些问题呢?有的,今天推出的 WPJAM「静态文件」插件就是要专门来解决这个问题的。...合并的文件加上时间戳:这样就保证每次合并生成的文件是全新的,CDN 加速在镜像回源的时候,都会抓取到最新的 JS 和 CSS 文件了,不怕插件或者主题更新造成问题了。...: 点击这里的「一键合并」按钮就可以生成唯一的 JS 和 CSS 文件了,如果文件内容,没有更新,点击该按钮是不会文件不会被提示更新的: 注册「静态文件」 从上面列表也可以看出,WPJAM「静态文件...Script Loader 通过恢复 WordPress 联合加载方式来优化 WordPress 后台脚本加载。 外部链接 将文章或评论中的外部链接加上安全提示的中间页。...微信小程序 微信小程序 WordPress 基础插件,包含基础类库和管理。 微信群二维码 轮询显示微信群二维码,突破微信群100人限制。

    7.1K30

    WordPress 开发之使用WordPress 3.8+后台图标(dashicons)

    那么,如果你是WordPress 开发者,你可以通过以下方式在你开发的主题或插件中使用WordPress 3.8+后台图标(dashicons)。...Dashicons 与WordPress 3.8 Dashicons 最初是集成在MP6 插件上的,但后来独立成一个项目托管在Github上,然后就是随着MP6集成在WordPress 3.8 新后台UI...在WordPress 主题或插件中加入Dashicons 的图标 如果你是在开发WordPress 主题或插件需要像WordPress 仪表盘左侧那样的图标的,或者说需要引用这些图标,那么可以通过下面的方法使用...: 加载Dashicons的样式表 先用WordPress 的wp_enqueue_scripts 函数加载样式 add_action( 'wp_enqueue_scripts', 'dw_load_dashicons...很容易,去下载MP6 插件,然后揪出里面有关Dashicons 的资源(CSS文件、字体文件),然后在项目中引用: <link rel="stylesheet" href="css/dashicons.css

    1.4K80

    使用这三种方法提交 WordPress 博客链接到百度站长,百度收录立刻翻倍

    4、自动推送:通过一个轻量级链接提交组件实现,将自动推送的 JS 代码放置在站点每一个页面源代码中,当页面被访问时,页面链接会自动推送给百度,有利于新页面更快被百度发现。...除了第三种在百度站长后台手工提交没什么好讲之外,其他三种方法,WordPress 博客都能完美支持了: 1、首先通过插件生成站点的 Sitemap,WordPress 很多插件都会生成适配百度站长的...Sitemap 文件,WPJAM Basic 插件里面的「简单SEO」扩展已有生成 Sitemap 功能,另外 WordPress 也内置了 sitemap 功能,大家可以按照自己的需求选择一个即可。...2、使用百度站长的 JS 代码实现自动推送,将下面这段代码贴到你当前也主题的 functions.php 文件即可,WPJAM Basic 插件的「简单SEO」扩展也集成了该功能: add_action...{ wp_enqueue_script( 'baidu_zz_push', 'http://push.zhanzhang.baidu.com/push.js'); } 3、使用 WordPress 的

    1.1K30

    WordPress 函数:wp_enqueue_script() 安全引入 JS

    ​WordPress 主题最佳引用 js 文件的方法是使用 WordPress 内置的 wp_enqueue_script() 函数,通过该函数可以安全地将javascript 代码加入到 WordPress...> 参数 $handle – 调用的脚本名称,用于区别其它js,因此不能和其它js文件命名相同。...$ver – 加载js文件的版本号,作为查询字串附加在路径的末尾,作用是确保正确的版本信息传递给了客户端,以免受到缓存的影响 (如js脚本发生变化时,通过更改版本号可以强制客户浏览器更新缓存),默认为false...$in_footer – boolean类型,设置js文件调用代码是否放置在html底部,设置为ture则放在底部,设置为false则放置在head部分。...通过 wp_enqueue_script 函数加载 js 文件时,应该将它分配给一个钩子,如只在前台调用,使用钩子 wp_enqueue_scripts;只在后台调用,使用 admin_enqueue_scripts

    85320

    WordPress 如何免插件实现代码高亮

    使用Prettify一般只需包含两个文件:prettify.js 和 prettify.css。压缩过后的 prettify.js 大小差不多在 15K 左右,非常小巧。...当然你可以在这里挑选适合自己的样式。 二、修改 functions.php 文件 打开 WordPress 主题文件中的 functions.php 文件,在末尾 ?> 前添加如下代码。...第一步下载 js 文件我保存在当前主题下的js目录。 function dangopress_esc_html($content) { $regex = '/(]*?...三、修改header.php文件 打开 WordPress 主题文件中的 header.php 文件,在 标签前添加如下代码,用来加载主题样式,也只在文章页加载。 " /> 到这里 WordPress+Prettify 免插件纯代码实现文章代码高亮设置就结束了。我们在编写文章时把代码放在 pre 标签内即可。

    61120

    指定 WordPress 页面按需加载 JavaScript

    在 wordpress 主题或插件中加载 JavaScript 时,官方推荐的方法是使用 wp_enqueue_script() 来加载,该函数可以指定 JavaScript 的依赖库,指定 JavaScript...文件的版本,设置在页面头部或者底部加载,非常灵活和方便。...但是,该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是,我们可以通过 WordPress 的函数自己动手来实现这个功能。...只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗,在下面的代码中,首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件,然后判断当前页面是否使用了指定的页面模板,.../js/imagesloaded.js'); ... } } } 在实际的 WordPress 主题开发工作中,并不是每个主题都需要这么操作。

    2.3K10

    WPJAM「代码高亮」:一键实现 WordPress 页面代码高亮显示

    WPJAM「代码高亮」插件特别之处 现在大部分代码高亮的插件都是使用 prism 这个代码高亮 JS 库来实现的,WPJAM「代码高亮」插件也是,只是之前是纯代码方式写到主题里面,今天就把它整理了一下,...整个插件自己写的代码只有不到 30 行,就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。...然后插件也兼容 WPJAM「静态文件」插件,不单独加载 prism 的样式和脚本代码,把 prism 的样式和脚本代码合并到整个站点唯一的样式和脚本文件中: 所以这个从另外一个侧面说明 WPJAM 出品的插件...如果你使用古腾堡编辑器的话,先点击选择创建一个代码块: 然后输入代码,选择该该区块: 点击右侧区块属性框,在额外的CSS类中输入:language-php,如果你的代码是 JS 则,输入 language-javascript...定义就是语言,如何设置,和上面古腾堡的设置方式是一样的,自己灵活处理一下,个人感觉还是古腾堡编辑器方便一点。

    1.8K30

    WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下面就介绍一个简单的方法。...在WordPress 中,用时间戳代替版本号的处理方式可以更加方便一点。 http://devework.com/wp-content/themes/Devework/style.css?v=" /> WordPress 中呢? ? ? 有过WordPress 主题开发经验的都知道,WordPress 中引用主题的styl.css 文件的路径是直接使用函数的functions.php 文件下即可为styl.css 文件添加时间戳版本号: add_action( 'wp_enqueue_scripts', 'add_styles' )...如此一来,就能保证浏览器每次访问都是最新的css、js文件,而非采用缓存。 本文参考国外网站paulund,感谢原作者!如有错误,欢迎雅正!

    5K100

    WordPress 5.0默认老版编辑器

    方法3一句代码禁用Gutenberg古腾堡 编辑器其实之前经典的Classic Editor编辑器代码,在WordPress 50并没有被删除,上述插件也只是个切换开关而已。...另外,完整中文版估计遥遥无期,目前50版完全可以用之前的语言文件,除了新编辑器没有汉化,其它没有影响。...方法3:一句代码禁用Gutenberg(古腾堡) 编辑器 其实之前经典的Classic Editor编辑器代码,在WordPress 5.0并没有被删除,上述插件也只是个切换开关而已。...后台禁用block editor编辑器后,前端还是会加载相关的的样式文件,还需要加上一句: remove_action( 'wp_enqueue_scripts', 'wp_common_block_scripts_and_styles...另外,完整中文版估计遥遥无期,目前5.0版完全可以用之前的语言文件,除了新编辑器没有汉化,其它没有影响。 cambrian.render('tail')

    1.3K10

    WordPress 开发之让浏览器自动加载最新的CSS、JS文件(免刷新缓存)

    在开发WordPress 主题的时候,如果频繁更新主题的CSS、JS文件但主题已经上线,如何让访客的浏览器获取最新的CSS、JS文件而非等到浏览器删除缓存后?下面就介绍一个简单的方法。...在WordPress 中,用时间戳代替版本号的处理方式可以更加方便一点。 http://devework.com/wp-content/themes/Devework/style.css?v=" /> WordPress 中呢? image.png 有过WordPress 主题开发经验的都知道,WordPress 中引用主题的styl.css 文件的路径是直接使用函数的functions.php 文件下即可为styl.css 文件添加时间戳版本号: add_action( 'wp_enqueue_scripts', 'add_styles' )...如此一来,就能保证浏览器每次访问都是最新的css、js文件,而非采用缓存。 本文参考国外网站paulund,感谢原作者!如有错误,欢迎雅正!

    4.7K80

    WordPress面试题

    下面是关于如何在 WordPress 源码中开发主题和插件的基本指南: 开发 WordPress 主题: 创建主题目录: 在 WordPress 的wp-content/themes/目录下创建一个新的文件夹...开发 WordPress 插件: 创建插件目录: 在 WordPress 的wp-content/plugins/目录下创建一个新的文件夹,该文件夹即为你的插件名称。...创建插件文件: 在插件目录下创建一个主插件文件,通常命名为plugin-name.php。 添加插件信息: 在插件文件中添加插件的基本信息,包括插件名称、版本、描述等。...自定义功能: 在插件文件中定义自定义功能,可以是短代码、小部件、自定义查询等。 使用 WordPress 提供的函数,如get_option、update_option等,来处理插件的设置。...保存并测试: 保存你的修改并刷新 WordPress 站点,以查看效果。确保你的代码没有引起布局问题或其他冲突。

    40540

    用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

    需求 昨天整理了一下Genesis的系列教程的翻译进度,汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。...第一步 原作者一共写了15篇,这是定死了的, 只需要获取到我已经在丘壑博客上翻译了几篇就可以了,除以总数15篇就得到了百分比。...本想自己写个 WP_Query 查出来,发现有个插件可以很方便的获取到,就不用重复造轮子了 Display Posts – Easy lists, grids, navigation, and more...写CSS是我的弱项,所以我就选择了Bootstrap,完整版的太臃肿了,包含了太多不需要的东西,完整引入也有可能会把现有主题搞乱,所以在 Bootstrap官网上定制化下载了一个最简版的,只包含alert...当然要先把需要用的文件FTP上传到对应的目录下,我就全扔到wp-content/themes/genesis-sample/js 这里了。 <?

    1.3K40

    DW Replace Open Sans:将WordPress 后台中的open-sans字体加载源从Google Fonts换为360 CDN

    针对最近因为Google fonts被墙导致WordPress 打开慢的问题,Jeff 在上一篇《Google Fonts导致WordPress 速度问题的三个解决方案》提出的方案中其中是禁止加载Google...为此Jeff 借助网络上的代码开发了这款插件,可一键将WordPress 后台中的open-sans字体加载源从Google Fonts替换为360的CDN 加载源。...2015.2.26更新:Google Fonts 已可正常访问,相关插件可卸,本文已失效 插件简介 之前网络上提供的将WordPress 后台中的open-sans字体加载源从 fonts.googleapis.com...替换为fonts.useso.com 的方法都是要修改WordPress 核心文件的——这么来说一般不那么好,结合网络上的代码,Jeff 折腾出了这款插件,安装激活就可以一键替换,“不伤头皮不伤发”。...> 你其实也可以直接将上面的代码添加到主题的functions.php 文件中;其实加载源你可以随便定义,甚至是字体也可以自定义,只要修改第14 行就可以了。

    837100

    10万WordPress网站沦陷:恶意软件SoakSoak来了

    WordPress是一款使用PHP语言开发的博客平台,用户架设属于自己的博客,也可以把 WordPress当作一个内容管理系统(CMS)来使用。...Google将超过11,000个域名纳入黑名单 消息先是周日早上在WordPress社区传播,起因是Google将超过11,000域名列入黑名单,这些网站都被一款最新的恶意软件攻击,软件来源于SoakSoak.ru...Google已经将11,000个可能已经感染病毒的网站列入黑名单。 恶意软件分析 恶意软件SoakSoak会修改wp-includes/template-loader.php文件 <?...'FuncQueueObject'); 这样使得wp-includes/js/swobject.js文件会在每一个页面上加载,这个swobject.js文件包含加密的恶意js代码。...想要让你的WordPress更加安全,可参见:如何为WordPress做安全防护?

    78970

    WordPress主题开发,从入门到精通。

    3.wp_get_theme() 获取当前启用的主题相关说明信息(style.css文件内的主题说明),wp_get_themes(),获取系统内所有的主题信息; 4.样式、脚本加载 只在wp_enqueue_scripts...the_post_thumbnail_caption,缩略图文件标题 8.站点信息 页面判断函数需要在指定声明周期之后才会有值,例如function加载的时候是没有的,wp_enqueue_scripts...可以在处理函数的最终返回值上调用 do_shortcode() ,使 $content 中包含的简码也可以被解析。.../ 2.添加插件的两种方式; 先create一个类,再通过PluginManager.add添加插件。...,没有这个action了,任务还会继续,所有在插件关闭时需要同步取消任务,同理表单的开关也需要同步任务的开启和关闭。

    10.7K40
    领券