在 WordPress 中排队 CSS 和 JS 脚本以获得更好的性能

在 wordpress 中排队 css 和 js 脚本以获得更好的性能

wordpress 是开源软件 – 用户可以按照自己的意愿安装、修改和分发它。由于每个人都可以访问源代码,数百万 wordpress 专家和开发人员可以创建工具和扩展并与公众分享。

让我们看看如何将 css 和 js 文件加入到你的wordpress项目中。

大多数新开发者都喜欢,

里面“header.php”

                    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">        <link href="/assets/css/custom.css" rel="stylesheet" type="text/css">        <script src="/assets/js/bootstrap.bundle.min.js">    <script src="/assets/js/font-awesome-all.min.js">    <script src="/assets/js/custom.js">

内部“footer.php”

<script src="/assets/js/bootstrap.bundle.min.js"> <script src="/assets/js/font-awesome-all.min.js"> <script src="/assets/js/custom.js">

但是,这不是在 wordpress 项目中对 css 和 js 文件进行排队的正确方法。为了对接它,首先转到“functions.php”文件并像这样将文件排入队列。让我们看看西格玛技巧……

立即学习“前端免费学习笔记(深入)”;

第1步:functions.php

function my_theme_enqueue_styles_scripts() {    // enqueue css files    wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css');    wp_enqueue_style('aos-css', 'https://unpkg.com/aos@2.3.1/dist/aos.css');    wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css');    // enqueue default jquery in wordpress.    wp_enqueue_script('jquery');    wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true);    wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true);    wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);}add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');

注意:wordpress提供了未压缩版本的jquery。所以我们可以简单地在所需的 js 文件中使用该 jquery !为此,您只需在“wp_eneueue_script”中传递array(‘jquery’)参数即可。要记住的一件事是 jquery 有 2 个主要版本:未压缩和压缩。在未压缩版本中,ajax 将无法正常工作。

第2步:现在在“header.php”中
现在,我们需要使用 wp_head();在

标签下运行。

                    

第3步:现在进入“footer.php”
现在,我们需要使用 wp_footer();在标签下


在您的 wordpress 主题中包含 wp_head() 和 wp_footer() 至关重要。这些功能会自动插入wordpress、主题和插件所需的基本脚本、样式和元数据,确保适当的功能、兼容性和性能。 wp_head() 在 seo 的 部分添加必要的元素,而 wp_footer() 在末尾包含脚本以推迟非关键 javascript,提高页面加载速度。这些功能对于插件集成和动态主题定制以及分析和跟踪代码的正确放置至关重要。

以上就是在 WordPress 中排队 CSS 和 JS 脚本以获得更好的性能的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1490761.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何在 ReactJS 中创建可重用的 Button 组件
上一篇 2025年12月19日 13:25:46
如何在 Ruby 中使用互斥体:综合指南
下一篇 2025年12月19日 13:26:01

相关推荐

发表回复

登录后才能评论
关注微信