在 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 脚本以获得更好的性能的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2670519.html

(0)
上一篇 2025年3月7日 12:58:49
下一篇 2025年3月7日 12:58:54

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 如何在 ReactJS 中创建可重用的 Button 组件

    按钮无疑是任何 react 应用程序中重要的 ui 组件,按钮可能用于提交表单或打开新页面等场景。您可以在 react.js 中构建可重用的按钮组件,您可以在应用程序的不同部分中使用它们。因此,维护您的应用程序将变得更加简单,并且您的代码将…

    2025年3月7日
    200
  • 如何避免请求无法访问的资源

    404 not found错误表示服务器无法找到所请求的资源。对于浏览器来说,这意味着该 url 无法识别。 404 请求会让用户感到沮丧,并可能导致网站性能不佳。此外,搜索引擎会抓取不存在的页面并将其编入索引,因此,网站的排名会受到负面影…

    2025年3月7日
    200
  • 使用 Laravel + React 安装 Shadcn/ui❤️

    目前有很多css框架,例如bootstrap、bulma、semantic ui等。这可以加快构建显示(用户界面)的速度。目前流行的 css 工具之一是 shadcn/ui,它之前是什么? 在其官方网站shadcn/ui上表示 “我们可以复…

    2025年3月7日 编程技术
    200
  • 我的 Code Alpha 实习经历:构建项目并获得实践技能

    简介开始在 Code Alpha 实习是一次令人兴奋的机会,可以检验我的前端开发技能。作为实习的一部分,我被分配了三项关键任务:创建图像库、构建基本计算器以及开发自己的作品集网站。这些项目让我能够将我的 HTML、CSS 和 JavaScr…

    2025年3月7日
    200
  • 初学者 JavaScript

    JavaScript 是一种高级编程语言,广泛应用于 Web 开发。它由 Brendan Eich 于 1995 年创建,现已成为世界上最流行的编程语言之一。 JavaScript 主要用于前端 Web 开发,用于创建交互式用户界面和动态网…

    2025年3月7日
    200
  • #daysofMiva 编码挑战日:将 JavaScript 链接到 HTML 文件

    大家好。抱歉迟发这篇文章,但迟发总比不发好?。不管怎样,让我们​​深入了解今天的文章吧。 为什么将 Javascript 链接到 HTML 文件。 JavaScript 是一种在浏览器中运行的编程语言,可以操纵网页的内容、结构和样式。通过将…

    2025年3月7日
    200
  • 只需几分钟即可创建一个专业且具有视觉吸引力的简历网站

    ai提示示例 – 完整的聊天内容,演示如何在几个社区获得一个具有专业外观的网站 只要给我买一杯咖啡,你就会得到一个我和 AI 之间完整聊天内容的链接,这将展示如何在一分钟内通过使用 AI 和良好的提示 – 创建一个专…

    2025年3月7日
    200
  • Nextjs 入门模板

    嗨,我为 next.js 创建了一个入门模板,它还包含 typescript、tailwind、shadcn/ui。我已经在这里写过,但我添加了一些新功能,例如:Next-auth、Prisma、React-hook-form、T3-env…

    2025年3月7日
    200
  • 跳过仪表板

    数据呕吐机器人的时代正在趋于稳定。 像mc一样打字很累。 如果您像我一样,您正在尝试简化您的技术堆栈。 花点时间原谅你的宠物机器人并计划一次个人黑客马拉松。一天的正念可以消除压力。 大多数日历应用程序都可以为您计划您的一天。 任务?我们正在…

    2025年3月7日
    200
  • 如何使用 Electronjs 创建跨平台桌面应用程序

    在当今的软件开发环境中,构建跨不同操作系统无缝运行的应用程序比以往任何时候都更加重要。无论您的目标是 windows、macos 还是 linux,electron.js 都提供了一个强大的框架,可以使用熟悉的 web 技术创建桌面应用程序…

    2025年3月7日
    200

发表回复

登录后才能评论