如何在 WordPress 中正确添加 JavaScript 和样式
在这篇文章中，我们将看到 如何在 WordPress 中正确添加 JavaScript 和样式.
有许多新的 WordPress 开发人员喜欢专门为自己的网站编写代码和开发插件，或者在各种市场上出售它们并获得丰厚的回报。
编写代码的方法有很多种，但只有选定的方法可以有效地编写代码。
如果您可以在两行而不是十行中编写代码，那么您将节省大量的处理和内存。
如果对于小型轻量级网站可能无关紧要，但对于重型网站来说，这可能意味着很多。
如果您不编写清晰的代码并有效地使用可用资源，您将为其他程序制造大量冲突。
例如，有多种方法可以在 WordPress 中为您的插件加载外部现成的 Javascript。
但是如果你不遵循正确的标准，所有激活的插件都会被严重卡住。
本文主要面向愿意开发 WordPress 主题和插件的新 WordPress 开发者。
除非您正确编码，否则您的代码将是不专业的，并且您制作的任何产品，无论概念多么好，您都永远不会被接受。
所以，最好知道 如何在 WordPress 中正确添加 JavaScript 和样式.
添加 JavaScript 的错误
你们中的一些人可能知道 WordPress 有一个名为 wp_head 的函数，它可以帮助您在网站的标题部分加载任何内容。
您需要做的就是在脚本文件中添加以下代码行，所有内容都将出现在标题中。
|
1 2 3 4 |
add_action('wp_head', 'wpb_bad_script'); function wpb_bad_script() { echo 'jQuery goes here'; } |
这是添加东西的一种相当快捷的方式，但它不是最好的方法。 您必须遵循正确的标准放弃快捷方式，这就是本插图的重点。
例如，您在插件中手动加载 JQuery，而另一个开发人员也手动或通过适当的标准加载相同的 JQuery。 如果有人激活了你的两个插件，那么 JQuery 将在内存中加载两次，这是一种浪费。
此外，如果加载的 JQuery 版本不同，那么由于冲突，插件中会出现很多故障。 你得知道 如何在 WordPress 中正确添加 JavaScript 和样式 在编写任何代码之前。
如何避免此类错误——入队函数的概念？
您可能知道，WordPress 开发者社区是一个庞大而强大的社区。 每天都有成千上万的开发人员开发新的主题和插件。
但是他们正在做的是通过入队脚本功能来确保彼此的编码方法永远不会发生任何冲突。
这是负责的功能 正确添加 JavaScript 和样式 在 WordPress 中，这样就不会有任何冲突和不必要的内存阻塞。
它确保以系统的方式加载 JavaScript 和样式。 函数 qp_enquque_function 告诉 Wordless 何时加载这些 JavaScript 和样式，加载它们的位置，尤其是在什么条件下加载。
在这些帮助下，您不必手动加载 JQuery 和类似的东西，因此，由于一次又一次地加载相同的文件，永远不会出现内存阻塞的情况。
原因是 Enqueue 功能允许您使用 WordPress 本身附带的内置库。 由于没有手动加载 JavaScript，它还将减少页面加载时间缓慢的负担。
步骤 在 WordPress 中正确添加 JavaScript 和样式-
1. 在 WordPress 中排队脚本
以下代码行加载了 WordPress 附带的内置 JavaScript 包。 当您创建插件时，您必须将这些行放在插件文件中，或者如果您正在创建主题，则必须将它们放在 functions.php 中。
|
1 2 3 4 5 |
function wpb_adding_scripts() { wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); |
代码解释
该脚本通过具有五个不同参数的函数 wp_register_script() 注册。
1. $handle - 它是脚本的唯一名称。 这是'my_amazing_script'。
2. $src - 它定义了你的脚本的位置。 库函数 plugins_url 获取插件文件夹的正确 URL。 一旦它被获取，它将开始在其中寻找 Amazing_script.js 文件。
3. $deps——它定义了依赖。 当您要求 WordPress 加载 Jquery 之类的库脚本时，您需要添加它。
如果脚本已经加载到内存中，则不会再次加载，而是进行新的加载。 这确保了没有冲突、没有内存阻塞和没有时间浪费。
4. $ver - 它定义了脚本的版本号。 这不是强制性的。
5. $in_footer - 用于在页脚中加载脚本。 如果要在标头中加载脚本，则应将其设置为 false。
一旦定义了所有内容，您只需使用 wp_enqueue_script() 调用脚本。
2. WordPress 中的入队样式
就像 JavaScript 一样，您必须将样式表排入队列。 在您的插件文件或 functions.php 文件中使用以下代码来创建主题。
|
1 2 3 4 5 |
function wpb_adding_styles() { wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__)); wp_enqueue_script('my_stylesheet'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' ); |
上述代码适用于您创建插件时。 创建主题时，必须将 plugins_url() 更改为 get_template_directory_uri()。 其余的事情将保持不变。
|
1 2 3 4 5 |
function wpb_adding_scripts() { wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true); wp_enqueue_script('my_amazing_script'); } add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' ); |
如果要创建子主题，则必须使用 get_stylesheet_direcroy_uri() 而不是 get_template_directory_uri()。
这是标准的方法 在 WordPress 中正确添加 JavaScript 和样式。
如果您的插件或主题遇到任何故障，您应该使用上述代码行修改它们的代码，也许故障会得到解决。
始终遵循世界各地遵循的编码标准，以便与其他成功的开发人员保持一致。
1. 带 [亲测] 说明源码已经被站长亲测过!
2. 下载后的源码请在24小时内删除,仅供学习用途！
3. 分享目的仅供大家学习和交流，请不要用于商业用途！
4. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
5. 本站所有资源来源于站长上传和网络，如有侵权请邮件联系站长！
6. 没带 [亲测] 代表站长时间紧促,站长会保持每天更新 [亲测] 源码 !
7. 盗版ripro用户购买ripro美化无担保,若设置不成功/不生效我们不支持退款!
8. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
9. 如果你也有好源码或者教程，可以到审核区发布，分享有金币奖励和额外收入!
10.如果您购买了某个产品，而我们还没来得及更新，请联系站长或留言催更，谢谢理解 !
GG资源网 » 如何在 WordPress 中正确添加 JavaScript 和样式
