如何在我的WordPress主题中仅为一个特定页面加载jQuery？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

WordPress开发人员犯的12个最严重的错误

1.将WordPress主题的JavaScript代码放入一个主文件中有一次，在为客户的网站做页面速度优化时，我注意到他们使用了一个高级主题，这个主题包含了所有他们正在使用的库，包括定制代码，在一个名为...我看到WordPress主题和插件，他们的资产目录中已经有WordPress核心文件（例如，jQuery或Color Picker)）中的文件。...此外，客户可以使用Git来跟踪由该特定项目聘用的所有开发人员完成的所有工作历史记录，特别是如果它是一个大型的长期WordPress自定义网站。...由于插件之间的冲突，它还可能导致JavaScript错误。例如，可能有两个插件使用一个通用的jQuery库，这个库可能会加载两次，并可能导致问题。...实际上，这是最好的例子，因为jQuery经常在多次站点上加载。这可能是由于编写的插件或主题很差。

3.9K1 0

WordPress主题推荐

作为网站的基础，WordPress主题对网站加载速度具有重要影响。一个设计不好，代码杂乱的WordPress主题会严重影响网站加载速度，进而影响网站排名。...Astra的主要特点Google页面加载时间快，仅为0.4秒页面大小仅为50KB无需jQuery，仅使用纯JavaScript自托管Google字体优化的WordPress代码Astra主题的主要关注点是性能...GeneratePress的主要特点Google 100%页面速度得分页面大小仅为7.5KB仅2个 HTTP 请求无外部依赖GeneratePress 是一款在性能方面杰出的WordPress主题。...即使对于基本的电子商务网站，它的页面大小仅为7.5KB，你也可以期望获得接近完美的100%页面速度得分。...页面大小仅28KB，Google页面速度得分达到100%，GTMetrix页面加载时间仅为0.6秒，这些成绩显而易见。

1.1K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

指定 WordPress 页面按需加载 JavaScript

在 wordpress 主题或插件中加载 JavaScript 时，官方推荐的方法是使用 wp_enqueue_script() 来加载，该函数可以指定 JavaScript 的依赖库，指定 JavaScript...但是，该插件缺少指定在某些页面加载 JavaScript 的设置参数。所幸的是，我们可以通过 WordPress 的函数自己动手来实现这个功能。...当一个比较大的库只在某一个或几个页面使用时，我们不需要在每个页面上加载所有脚本，而只需要在特定的页面模板中加载即可，以免其他页面加载不需要的 JavaScript 文件而影响页面打开速度，增加服务器开销...比如，我们的主题中有一个名为 “Portfolio Archive” 的页面模板，在这个模板中，我们需要使用 “imagesloaded、masonry、isotope、jquery-ias” 这 4...只在使用了某个页面模板的页面上加载指定的 JavaScript 文件吗，在下面的代码中，首页我们加载了每个页面都需要的 jQuery 和 Main.js 文件，然后判断当前页面是否使用了指定的页面模板，

2.7K1 0

WordPress装备页面插件版带后台

前言之前写了一个html的由于本站的主题采用pjax加载的方式，会导致部分css失效。...抽空改成了插件给你的网站添加一个我的设备页面演示图这是我参考张洪大佬的博客里的我的设备（https://blog.zhheo.com/equipment/）进行二次修改的一个小代码，分享出来给各位做个参考...文件结构奶狗设备展示/ ├── index.php # 主插件文件，包含核心功能和wordpress钩子 ├── assets/ # 资源文件目录...，包括名称、描述、分类、图片等点击"保存设备"按钮在页面中显示设备列表在任何页面或文章中插入以下简码： simple_product_showcase 管理设备在WordPress管理后台，点击左侧菜单中的...扩展JavaScript文件以添加新的交互功能在主题中使用过滤器钩子自定义输出兼容性 WordPress 5.0+ PHP 7.0+ 兼容大多数现代浏览器

2292 0

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

WordPress 引入css/js 是我们制作主题时首先面对的一个难点，任何一款主题都要加载自己的 css,js,甚至很有可能还需要加载 Jquery 文件,网上方法特多，说法不一，我们今天借鉴 wordpress...> 但是 WordPress 不能确定是否在在页面加载了 JS，Css 文件，如果另一个插件使用相同的 JS，Css 文件，就无法检查 JS，Css 文件是否已经被包含在页面中。...> 4、另外一个 4、另外一个函数：wp_print_scripts() 虽然将 JavaScript 文件都放到页面末尾加载对于页面加载速度很有帮助，但是请注意，所谓页面末尾指的是在 WordPress...比如我单独创建了一个链接页面，在这个页面中我使用了 jQuery 方法来获取链接网站的 favicon。...很显然，我只需要在这唯一一个页面使用这部分代码，所以将这段代码直接放在这个页面模板中是最好的做法。

2.7K3 0

WordPress 初学者词汇表（术语解释）

它通常用于您的主博客页面，其中显示了您最近发布的所有帖子的列表，并向读者提示您的帖子是关于什么的。...Gravatar（头像） Gravatar是与您的电子邮件相关联的头像（名称和图像），您可以在Gravatar主网站上创建它。现在我相信您会问，这与 WordPress 有什么关系？...作为博主，您可能不需要学习或使用任何代码——尤其是在页面构建器 WordPress 插件变得如此流行之后。...jQuery是一个 JavaScript 库 – 旨在让开发人员更轻松地操作网页元素的软件。...滑块是小型图像库，旨在使每个图像显示几秒钟，然后再继续（或滑动）到下一个图像。许多包括指向博客文章或其他内容的链接。WordPress 有许多可用的滑块插件，其中一些通常包含在高级主题中。

10.9K2 0

WordPress中通过Ajax评论分页实现方法

现在顺手奉上具体的分页方法及参考地址。实现方法一.准备加载 jQuery 库，这个不解释了。 ...二.开启 WordPress 评论分页打开 WordPress 后台 – 设置 – 讨论，在“其他评论设置”中勾选分页显示评论，设置一下评论数目，这里的评论数目仅计算主评论，回复评论不作计算。...在后台开启评论分页后，在 comments.php 中需要添加分页导航的地方加入以下代码（如主题中有类似代码则无须再添加，另外代码中的 nav 标签为 HTML5 标签，若主题没有使用 HTML5 则有...在你的 header.php 原有的 meta 标签下加入以下代码，这样分页的页面便会禁止被四.Ajax 评论分页根据上文所述，现在主题中已经有评论分页了，要做到 Ajax 的评论分页，只需 JavaScript 的配合，不过在这之前首先要在评论列表前加入一个元素，用于在显示新一页评论列表时表示列表正在加载

1.7K2 0

Display Posts : 按条件显示WordPress文章的最强插件

中比较重要的一个概念： WP_Query是定义于 wp-includes/query.php 中的一个用于处理复杂的请求wordpress博客中文章或页面的类。...比如用 jQuery 和 Bootstrap 在 WordPress 中添加进度条这里介绍的用法也可以通过在主题文件中使用函数do_shortcode() 。...显示特定TAG的文章列表显示结果如下： ---- WordPress 精品插件大全页面的开发小记用Python分析5万+个WordPress插件用Python分析WordPress官网所有插件的开发者信息...Display Posts : 按条件显示WordPress文章的最强插件 WordPress 和 Vue.js 的学习资源推荐 WordPress 精品插件大全页面的开发小记 WordPress主题中加载...jQuery的最佳方法 WordPress免费插件的选择指南 WP Plugin Info Card : 用于展示WordPress插件信息的最佳插件使用Vue.js在WordPress中创建单页面应用

4.4K1 0

WordPress面试题

下面是关于如何在 WordPress 源码中开发主题和插件的基本指南：开发 WordPress 主题：创建主题目录：在 WordPress 的wp-content/themes/目录下创建一个新的文件夹...添加样式和脚本：创建一个style.css文件来定义主题的样式。使用wp_enqueue_style和wp_enqueue_script函数在主题中添加样式和脚本。...使用add_theme_support函数来启用特定功能，如自定义菜单、特色图像等。...创建插件文件：在插件目录下创建一个主插件文件，通常命名为plugin-name.php。添加插件信息：在插件文件中添加插件的基本信息，包括插件名称、版本、描述等。...添加后台页面：使用add_menu_page等函数来添加插件在 WordPress 后台的菜单页面。在页面中添加表单和处理逻辑，如保存设置。

1.9K4 0

WordPress主题开发基础：Body 类指南

您是一位有抱负的WordPress主题设计师吗，正在寻找在主题中使用CSS的新方法？幸运的是，WordPress会自动添加您可以在主题中使用的CSS类。...Body类（body_class）是WordPress函数，可让您将CSS类分配给body元素。 HTML正文标签通常从主题的header.php文件开始，该文件会加载到每个页面上。...接下来，您可以直接编辑WordPress网站上的任何文章或页面。在文章编辑屏幕上，您会在右侧列中找到一个名为“文章类（Post Classes）”的新元框。...好在WordPress在加载时自动检测到浏览器，然后将这些信息临时存储为全局变量。您只需要检查WordPress是否检测到特定的浏览器，然后将其添加为自定义CSS类即可。...希望本文能帮助您学习如何在主题中使用WordPress body类，如果对于这篇文章有什么疑问，可以在下面留言讨论。

3.5K2 0

用BACKSTRETCH实现定时自动切换背景

这是一个创建于 3249 天前的主题，其中的信息可能已经有所发展或是发生改变。...jquery-backstretch可以实现之前>>刷新页面后让WordPress背景随机切换不能到达的动态切换背景功能。 ...用jquery-backstretch就算你不按F5刷新页面背景也可以自动切换，带有淡入淡出的缓慢加载那种效果，很好看。.../ 目前最新版本 Backstretch - v2.0.4 - 2013-06-19 我这使用的是较早的版本1.2.5，没有问题。...由于我之前在NGRO主题中添加了>>wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴的功能。

1K5 0

15款速度超快的最佳轻量化WordPress主题

WordPress 轻量级主题是如何在众多主题中脱颖而出的。简洁优化的代码：轻量级 WordPress 主题使用精简、结构良好的代码（HTML、CSS 和 JavaScript）构建。...Suki 的架构专为顶级性能而设计。这款 WordPress 轻量级主题的页面总大小仅为 26.6KB，仅有 2 个 HTTP 请求，而且不依赖 jQuery，可确保您的网站立即加载。...无论您是博主还是联盟营销人员，该主题都能以最小的投入提供快速加载、高性能的网站。其简洁、无臃肿的代码可确保快如闪电的页面速度，帮助您在搜索引擎中获得更高的排名。...总结选择一个轻量级的 WordPress 主题对于确保快速加载速度、流畅的性能和良好的用户体验至关重要。一个优化良好的主题不仅能提高搜索引擎优化排名，还能保持访客的粘性并降低跳出率。...快速加载的主题可以缩短页面加载时间并提高移动性能，从而有助于提高搜索引擎优化排名，而这些都是关键的排名因素。 9. 我可以在不丢失内容的情况下切换到轻量级主题吗？可以！

3.4K0 0

Genesis框架从入门到精通（2）：什么是动作？

要做的就是把你想执行的代码写入一个php文件中，该文件将在特定的动作(action)被执行时加载进来（可以在add_action()之前或之后） function callback_function()...具有相同优先级的动作(action)将按出现的顺序来执行，WordPress核心代码，插件，框架文件，主题的fucntion文件，主题的模板文件加载。我将在下一篇文章中更详细地讨论这个问题。...例如，如果你不想在页面上显示评论表单，那么你尽可以执行移除评论表单的操作，不管这个网页是不是页面类型，即使这个表单只能在单个页面上加载。还有一个需要注意的地方。...我不打算再次贴上所有代码，但如果你不想来回点击，我会在这里放一些相关的代码片段。注意看下，代码将被添加到主循环内（genesis_before_post是主循环中的第一个钩子）。...小结但，知道只是成功的一半。本系列的下一部分将介绍如何在Genesis文件中查找需要的动作(action)并在子主题中更改它们。

1.2K2 0

为你的站点加上“懒加载”——提高用户体验&节省流量

简介通常来说，一个正常web页面是由图片和文字以及各种CSS,JS构成，而这其中，拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载，边浏览边加载，从而减轻服务器压力以及减轻流量的浪费。...LazyLoad lazyload.js简介 Lazy Load是一个用js编写的jQuery插件，用来实现图片的延迟加载。...当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。...准备工作 WordPress博客 Lazyload.js（本文提供下载） loading动图（文件已打包，也可以百度找资源）一个聪明的大脑文件下载云盘下载备用下载工作大纲引入jquery.min.js...>"/> 进阶篇——头像图片的懒加载正常的话，头像的加载在WordPress 中是用诸如<?

1.9K3 0

WordPress 如何统计并显示文章阅读量？

但随着块主题的流行，很多新手朋友发现 WP-PostViews 插件似乎不起作用，或不知道如何插入统计代码。所以本文将介绍如何在块主题的模板中使用 WP-PostViews 插件的统计功能。...设置插件启用插件后，可在 WordPress 后台 > 设置 > 浏览次数菜单进入设置页面。...修改设置后记得点击底部的“保存”按钮即生效。将统计短代码插入到文章或页面模板 WP-PostViews 插件的帮助文档提供了一种在经典主题中插入统计代码的有效方法，但在块主题中，这种方法通常无效。...这是因为块主题中的块并不一定映射到主题的 PHP 文件和代码，而是在块编辑器中生成并保存在数据库中。...这意味着不会对网页加载速度造成过多负担，使其成为一种轻量级的选择。如果需要更多的统计与分析维度，推荐第三方统计工具，如：Google Analytics 等。

1.7K1 0

为你的站点加上“懒加载”——提高用户体验&节省流量

简介通常来说，一个正常web页面是由图片和文字以及各种CSS,JS构成，而这其中，拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载，边浏览边加载，从而减轻服务器压力以及减轻流量的浪费。...LazyLoad lazyload.js简介 Lazy Load是一个用js编写的jQuery插件，用来实现图片的延迟加载。...当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。...>/js/jquery.min.js" type="text/javascript">//主题中已引用Jquery可省略这行 "/> 进阶篇——头像图片的懒加载正常的话，头像的加载在WordPress 中是用诸如<?

2.8K9 0

WordPress主题中加载jQuery的最佳方法

一般来说，在html页面底部（也就是之前）引入JavaScript，如jQuery 和 jQuery插件是个不错的做法。...原因很简单，HTTP / 1.1规范表明浏览器不能并行下载两个以上的组件。在WordPress模板中加载JavaScript和jQuery的最佳方法是使用wp_enqueue_script。...这样可以更好的控制JavaScript文件的加载时间点和加载位置。下图是我在丘壑博客上添加的用于代码语法高亮的JavaScript，放在子主题的functions.php文件中。...在Wordpress中注册prism.js 速度优化在下面的代码片段中，我们先把WordPress中默认自带的jQuery库取消注册，然后在页面最后部分加载国内的CDN版本。...你应该看到jQuery脚本已成功加载，并且已经移到了页面最后，也命中了CDN的缓存，如下所示。

3K3 1

WordPress 文章无法保存？试试这些实用修复技巧

常见“嫌疑插件”包括：Wordfence（安全）Yoast SEO（优化）Elementor（页面构建）Contact Form 7（表单）三、主题代码异常：functions.php 的隐藏陷阱有些主题文件中存在调试语句...六、浏览器缓存干扰：前端也有“记忆偏差”浏览器缓存可能加载了旧版 JavaScript 或 jQuery 库，导致无法解析新的 AJAX 响应。...解决办法：强制刷新页面（Windows：Ctrl + Shift + R；Mac：Cmd + Shift + R）；打开开发者工具（F12）→ Console 标签 → 观察是否有 JS 报错，如 $...十、母主题与子主题不匹配：定制化的“代沟”如果你使用的是带有子主题的模板，而主主题更新后与子主题不兼容，也可能导致文章保存失败。...解决方法：将子主题中新增的功能文件复制到母主题对应位置；或者使用主题作者提供的兼容性补丁。结语“知其然，亦当知其所以然。”

4611 0

jQuery仿极客公园火箭发射“返回顶部”效果（WordPress代码篇）

前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章，如果你是Word-Press 老手，肯定知道如何移植到WordPress主题中；本文针对的是新手，如果你想在你的WordPress...主题中实现这个效果，那就往下看吧！...建议先看一下下面的文章——如果你还没有看过的话：《 jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》《 jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）》教程如下（代码来源于...一加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；二在主题的footer.php 的适当位置添加以下代码：的dom flyTemp : '', // 一个setInterval的临时变量 /** * * 初始化 scrollTT

1.9K7 0

WordPress 网站主题页面添加加载进度条方法

WordPress 网站主题添加页面加载进度条方法。...pace.js是一个非常赞的JavaScript插件，可以实时监听页面的数据加载，包括Ajax请求，显示页面加载进度，并且能够定制样式，类似浏览器加载进度条，比如Safari。...下面以WordPress默认主题Twenty Seventeen为例，将这个特效功能加到主题中。...wp_enqueue_script( 'pace.min', get_theme_file_uri( 'https://2bcd.com/assets/js/pace.min.js' ), array( 'jquery

9262 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭