任何问题请联系WX:uu16853

买模板送网站采集器 让你轻松放开双手运营网站!

购买更多有优惠!

如何在WordPress中正确添加Java脚本和样式

您想了解如何在WordPress中正确添加Java脚本和CSS样式表吗? 许多DIY用户经常犯一个错误,直接在插件和主题中调用他们的脚本和样式表。 在本文中,我们将向您展示如何在WordPress中正确添加JavaScript和样式表。对于那些刚刚开始学习WordPress主题和插件开发的人来说,这将特别有用。 在WordPress中添加脚本和样式表时的常见错误 许多新的WordPress插件和主题开发人员犯了一个错误,直接将他们的脚本或内嵌的CSS添加到他们的插件和主题中。 有些人错误地使用wp_head函数来加载它们的脚本和样式表。 <?php add_action(‘wp_head’, ‘wpb_bad_script’); function wpb_bad_script() { echo ‘jQuery goes here’; } ?> 由❤️托管WPCode在WordPress中一键使用 虽然上面的代码可能看起来更简单,但它是在WordPress中添加脚本的错误方式,而且它会在未来导致更多冲突。 例如,如果您手动加载jQuery,而另一个插件通过正确的方法加载jQuery,那么jQuery将被加载两次。如果它被加载到每个页面上,那么这将对WordPress的速度和性能产生负面影响。 也有可能这两个版本是不同的,这也可能导致冲突。 话虽如此,让我们来看看添加脚本和样式表的正确方式。 为什么在WordPress中加入脚本和样式? WordPress有一个强大的开发者社区。来自世界各地的数千人为WordPress开发主题和插件。 为了确保一切工作正常,没有人踩到别人的脚趾,WordPress有一个排队系统。该系统提供了一种可编程的方式来加载Java脚本和CSS样式表。 通过使用wp_enQueue_script和wp_enQueue_style函数,您可以告诉WordPress何时加载文件、将其加载到何处以及它的依赖项是什么。 该系统还允许开发人员利用与WordPress捆绑在一起的内置JavaScript库,而不是多次加载相同的第三方脚本。这减少了页面加载时间,并有助于避免与其他主题和插件发生冲突。 如何在WordPress中正确地将脚本入队? 在WordPress中正确加载脚本非常容易。下面是一个示例代码,您可以将其粘贴到插件文件或主题的unctions.php文件中,以便在WordPress中正确加载脚本。 ?php 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’ ); ?> 由❤️托管WPCode在WordPress中一键使用 解释: 我们首先通过wp_register_script()功能。此函数接受5个参数: $Handle-Handle是您的脚本的唯一名称。我们的剧本叫《我的惊艳剧本》$src-src是脚本的位置。我们使用plugins_url函数来获取插件文件夹的正确URL。一旦WordPress找到它,它就会在该文件夹中查找我们的文件名AJAZING_SIPT.js。$deps-deps用于依赖。因为我们的脚本使用jQuery,所以我们在依赖项区域中添加了jQuery。如果jQuery还没有加载到网站上,WordPress会自动加载。美元-这是我们脚本的版本号。此参数不是必需的。$in_footer-我们希望将脚本加载到页脚中,因此我们已将值设置为True。如果您想要在头文件中加载脚本,那么您可以将其设置为FALSE。 中提供了所有参数之后wp_register_script,我们只需调用脚本即可wp_enqueue_script()这让一切都发生了。 最后一步是使用wp_enQueue_脚本操作挂钩来实际加载脚本。由于这是一个示例代码,我们将其添加到所有其他代码的正下方。 如果您要将此代码添加到主题或插件中,则可以将此操作挂钩放在实际需要脚本的位置。这使您可以减少插件的内存占用。 现在,有些人可能会问,为什么我们要先注册脚本,然后再将其排队?好的,这允许其他站点所有者在不修改插件核心代码的情况下取消注册您的脚本。 在WordPress中正确地将样式入队 […]

如何在WordPress中将Java脚本移到底部或页脚

最近,我们的一位读者问我们,他们如何将Java脚本移到WordPress的底部,以提高他们的Google页面速度分数。我们很高兴他们问了,因为老实说,我们想写这方面的文章。在此之前,我们已经讨论了如何在WordPress中正确添加Java脚本和CSS样式。在本文中,我们将向您展示如何将Java脚本移到WordPress的底部,这样您就可以改善站点加载时间和Google页面速度得分。 将Java脚本移至底层的好处 JavaScript是一种客户端编程语言。它是由用户的Web浏览器而不是您的Web服务器执行和运行的。当您将JavaScript放在顶部时,浏览器可能会在加载页面的其余部分之前执行或处理该JavaScript。当Java脚本被移到底部时,您的Web服务器将快速呈现页面,然后用户的浏览器将执行Java脚本。由于所有服务器端渲染都已完成,因此将在后台加载JavaScript,从而使整体加载速度更快。 这将提高您的速度分数测试时,谷歌页面速度或Ylow。谷歌和其他搜索引擎现在正在考虑将页面速度作为显示搜索结果时的性能矩阵之一。这意味着,加载速度较快的网站将在搜索结果中显示得更突出。 在WordPress中添加脚本的正确方法 WordPress有一个强大的排队系统,允许主题和插件开发人员将他们的脚本添加到队列中,并根据需要加载它们。正确地将脚本和样式排入队列可以显著提高页面加载速度。 为了给你展示一个基本的例子,我们将在一个WordPress主题中添加一个小的JavaScript。将您的JavaScript保存在.js归档并放置该文件.js 您的主题中的文件js目录。如果您的主题没有用于Java脚本的目录,则创建一个。放置脚本文件后,编辑主题的functions.php文件并添加以下代码: 有时,您会看到直接将JavaScript添加到页面中,而不是通过单独的.js文件进行链接。在这种情况下,您需要逐个停用所有插件。停用每个插件后刷新页面,直到找到将脚本添加到页面的插件。如果在停用所有插件后,该JavaScript仍未消失,则尝试切换到另一个主题,以查看您的主题是否添加了该Java脚本。 将脚本注册和入队 一旦您找到了在Header部分添加了JavaScript的插件或主题,下一步就是找出插件调用文件的位置。在您的某个主题或插件的PHP文件中,您将看到对该特定内容的调用.js文件。 如果插件或主题已经在使用入队来添加JavaScript文件,那么您需要做的就是更改插件或主题中的wp_Register_script函数,并为$in_footer参数添加TRUE。就像这样: wp_register_script(‘script-handle’, plugins_url(‘js/script.js’ , __FILE__ ),”,’1.0′,true); 由❤️托管WPCode在WordPress中一键使用 让我们假设您的插件或主题正在标题中或内容之间添加原始的JavaScript。在插件或主题文件中找到原始的Java代码,复制该代码并将其保存在.js文件。然后使用wp_register_script() 如上所示的函数,将JavaScript移到底部。 编者按:重要的是要了解,当您对核心文件进行更改并更新插件时,您的更改不会被覆盖。更好的方法是取消该脚本的注册,然后从主题的unctions.php文件中重新注册它。请参阅本教程。 除了将脚本移到页脚,你还应该考虑使用更快的社交媒体插件和延迟加载图片。除此之外,你还应该使用W3Total缓存和MaxCDN来提高你的站点速度。 我们希望本文能帮助您将Java脚本移到WordPress的底部,并提高您的页面速度。如有疑问和反馈,请在下面留言。

WordPress 延时加载,延时加载js,异步加载,异步加载js,渲染阻塞 文字详细教程

每次页面渲染时,WordPress都会加载一系列外部引用JavaScript。 这些包括由WordPress添加的标准脚本以及由使用wp_enqueue_scripts函数的主题和插件添加的一些脚本。 根据脚本的类型,它可能位于网页的头部,正文或页脚部分。 位于页面头部和主体部分内的脚本可能会导致页面加载延迟,因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。 这就是为什么这些脚本被称为渲染阻塞javascripts。 解决此问题的最直接的方法是将所有脚本移动到页面的页脚,但如果这种办法不可行,则可以考虑为这些脚本添加延迟或异步属性标记,就是我们常常挂在挂在嘴边的延迟加载、异步加载。 让我们深入了解这些属性以及它们如何帮助您改善页面加载时间。 什么是异步和延迟属性? 以下是async和defer属性的作用: 异步属性:async属性即异步加载脚本。 换句话说,确保脚本与页面的其他相关内容一起异步加载。 延迟属性:延迟属性即延迟加载脚本。 它确保仅在页面的所有内容完成加载后才执行脚本。 所有现代主流浏览器都支持这两个属性,包括Firefox,Chrome和Internet Explorer。 自IE10以来,Internet Explorer也已经添加了对这些属性的支持。 具有async和defer属性的脚本标记示例如下: <script src=’http://sitename.com/js/scripts.js’ async=’async’ type=’text/javascript’></script> <script src=’http://sitename.com/js/scripts.js’ defer=’defer’ type=’text/javascript’></script> 将“异步/延迟”属性添加到阻塞渲染脚本 在这个章节中,我们将介绍三种不同的方法,将这些属性添加到阻塞渲染javascripts中。 这些方法如下: 方法1:向所有脚本添加延迟/异步。 方法2:向大部分脚本添加延迟/异步,部分例外。 方法3:仅向选择性脚本添加延迟/异步。 (最灵活的方法,因为它允许因地制宜地为脚本添加延迟或者异步属性。) 您可以根据自己的实际情况使用适合您的方法。 方法1:向所有脚本添加延迟/异步属性。 如果您想毫无例外地将async或defer属性添加到所有脚本,则可以使用以下代码。 打开主题的functions.php页面,将此代码添加到页面底部。 /*function to add async to all scripts*/ function js_async_attr($tag){ # 添加异步加载属性到所有js脚本 return str_replace( ‘ src’, ‘ async=”async” src’, […]

Header and Footer Scripts – WordPress plugin WordPress插件下载

点击下载 页眉和页脚脚本 插件描述 如果您正在运行WordPress站点,那么迟早您需要插入某种类型的代码到您的网站。它最像是Google Analytics等网络分析代码,可能是社交媒体脚本或某些CSS样式表,也可能是自定义字体。这个插件将完成所有的魔术。即使您想在自定义帖子类型中插入这些代码。 您所要做的就是添加适当的HTML代码。 不要忘记用适当的标签包装代码。 &lt; script type =“text / javascript”&gt;您的JS CODE HERE&lt; / script&gt; 或者对于CSS: &lt; style type =“text / css”&gt;您的CSS代码在这里&lt; / style&gt; 为什么要使用此插件: 要将CSS和JavaScript代码插入&lt; head&gt; 或之前&lt; / body&gt; 。将代码插入&lt; head&gt;任何单个页面或帖子的。将代码插入自定义帖子类型[新功能]。 该插件应与WooCommerce兼容。 它不提供的内容 您无法插入/执行PHP代码。 几乎所有的WordPress主题都支持这个“页眉和页脚脚本”插件。如果代码没有出现在您的网站[请求支持]或查看您的主题文件,如果他们有标准的 wp_head 和 wp_footer 挂钩。 重要链接 有关信息,欢迎您访问以下链接: 阅读文档 获取支持 GitHub存储库 贡献 数字解放&#8211;博客 安装 安装此插件没有什么特别之处。就像将插件文件上传到插件目录一样简单。 将插件上传到 / wp-content / […]

WordPress 技巧:使用自定义字段给日志单独加载 JS 脚本

我们在介绍一些 Javasctipt 类库或者特效的时候,为了能够更加清楚的展示 Javascript 的效果,需要在日志中做演示,这个时候我们需要加载 Javascript 脚本或者 CSS 样式表,比如这篇日志:Pluralink:一个链接多个选择,中为了演示 Pluralink 的一个链接显示多个链接效果,就需要在日志中加入 Pluralink 的 Javascript 代码和 CSS 样式表。 但是 WordPress 日志编辑框会对过滤这些 Javascript 脚本,所以我们无法直接把脚本写到日志,如果修改主题,把脚本添加到主题的 header.php 文件中,那么博客所有的页面都会加载这些脚本,这样造成整个博客效率下降。所以这个时候我们可以通过 WordPress 自定义字段来给某篇的日志单独加载 Javascript 脚本和 CSS 样式表。 假设我们给日志单独加载 Javascript 脚本的自定义字段是 custom_head。那么你首先需要把下面这段代码复制到你主题的 functions.php 文件中,也可以直接当作一个插件,上传到插件目录中,然后在后台激活。 <?php /* Plugin Name: Custom Head Plugin URI: http://blog.wpjam.com/m/custom-head/ Description: 使用自定义字段给某篇的日志单独加载 Javascript 脚本,使用的自定义字段是 custom_head。 Version: 0.1 Author: Denis Author […]

WordPress 技巧:把多说的 JavaScript 脚本移到底部

多说默认是在 Head 输出它的相关 JavaScript 脚本,但是有时候因为多说服务器不稳定的问题,会引起整个博客速度被拖累,另外按照 YSlow 或者 Google PageSpeed 等优化规则,最好也是要把 JavaScript 代码放到 Footer,下面就介绍下如何把多说的 JavaScript 脚本移到 Footer: <?php /* Plugin Name: 把多说的 JavaScript 脚本移到 footer Plugin URI: http://blog.wpjam.com/m/move-duoshuo-js-to-footer/ Description: 把多说的 JavaScript 脚本移到 footer Version: 0.1 Author: Denis */ add_action('init', 'move_duoshuo_js_to_footer'); function move_duoshuo_js_to_footer() { global $duoshuoPlugin; remove_action('wp_print_scripts', array($duoshuoPlugin, 'appendScripts')); add_action('wp_footer',array($duoshuoPlugin, 'appendScripts')); } ?> 将上面的复制到当前主题的 functions.php 文件,或者直接复制保存一个文件,上传到当前插件目录,激活即可。 标签:WordPress […]

100% Secure Checkout

PayPal / MasterCard / Visa