CSS

如果你是众多想要定制WordPress站点设计而不接触CSS的初学者中的一员，那么你是幸运的。 WordPress的CSS Hero插件允许你在不接触一行代码的情况下定制设计。 在这篇更新的css Hero评论中，我们将向你展示如何使用css Hero定制你的网站，以及为什么我们认为它是每个WordPress初学者都应该尝试的插件之一。 点击该按钮将把您的站点转换为实时预览。 现在，您将能够看到CSS Hero编辑器。它有一个顶部和底部的工具栏，一个左栏，和你的网站的实时预览。 接下来，将鼠标移到您想要编辑的元素上，CSS Hero将突出显示它，以指示您所在的位置。 单击它将选择该元素，并在左列中显示其属性。 这些属性将包括所选元素的常见css属性，如背景、版式、边框、间距等。 您可以单击任何项将其展开，然后使用简单的用户界面编辑css属性。 当您进行更改时，自定义的css会神奇地出现在下面。 如果你正在学习css，那么你会发现在实时预览中看到不同的css变化是如何应用的是很有帮助的。 为你的网站找到免版税的图片有困难吗？ CSS Hero还有一个内置的UnSplash集成，允许你在网站设计中浏览、搜索和使用美丽的照片。 CSS Hero还附带了一些现成的代码片段，您可以将这些代码片段应用于网站上的不同元素。 只需切换到左栏中的“代码片断”标签。您将看到在那里列出了一组列元素。 点击选择一个元素，CSS Hero会向你展示不同的风格变化。 点击“设置参数”按钮编辑你喜欢的风格，然后点击“应用”按钮将其添加到你的主题中。 当您对您的网站进行更改时，CSS Hero将自动保存这些更改，但不会发布它们。 要将这些更改应用于您的实时网站，您需要单击屏幕右下角的“保存并发布”按钮。 你可以点击一个日期和时间来查看你的网站当时的样子。如果要恢复到该状态，只需从该点保存或继续编辑即可。 这并不意味着您在此之后所做的更改将消失。它们仍将被存储，您也可以恢复到那个时间。没有比这更简单的了。 但是，如果您只想恢复对特定项目所做的更改，该怎么办呢？ 在这种情况下，您不需要使用历史记录工具。只需点击你想要恢复到较早版本的元素，然后点击‘重置’按钮。 这会将项目更改回您的WordPress主题定义的默认设置。 切换到“编辑”模式将允许你编辑你的网站，同时在移动设备上预览它。这个工具可以方便地调整你的主题的移动和平板电脑的设计。 Css英雄主题兼容性 官方的css Hero网站上有越来越多的兼容主题。这个列表包括了许多最好的免费WordPress主题。 它还拥有CSSIgniter、Themify、StudioPress等商店最受欢迎的高级主题。 如果主题不在主题兼容性列表中，该怎么办？ CSS Hero附带了一项名为火箭模式自动检测的功能。如果您使用的主题不包括在主题兼容性列表中，那么CSS Hero将自动开始使用火箭模式。 火箭模式尝试从你的主题中猜测出css选择器。这在大多数情况下都非常有效。如果您的主题遵循WordPress编码标准，那么您将能够编辑几乎所有内容。 您可能还想联系您的主题开发人员，并要求他们提供与css Hero的兼容性。 哪些插件与css Hero兼容？ CSS Hero定期测试与顶级WordPress插件的兼容性。其中包括联系人表单插件、流行的页面构建器、WooCommerce等。 如果你使用的WordPress插件生成了一个不能被CSS Hero编辑的输出，那么你可以要求插件作者来解决这个问题。他们不需要做太多事情来提供与CSS Hero的兼容性。 要了解更多细节，请参阅我们的指南，了解如何恰当地请求WordPress支持并获得支持。 我们希望你会发现我们的css英雄评论对你有帮助。你可能还想看看我们为初学者改进WordPress速度和性能的终极指南，我们的专家挑选了最好的WordPress页面构建器来设计你的主题和网站页面，而不使用CSS。 中国和中国都是如此。

您想要优化您的WordPress css交付吗？ Css文件控制WordPress网站的视觉格式和样式。但是，如果你的css代码没有以最佳的方式交付，那么它可能会减慢你的网站的速度。 在本文中，我们将向您展示两种简单的方法来优化您的WordPress CSS交付。 如果需要在页面显示之前加载这些文件，则会降低您的网站的速度。这意味着您的访问者将看到一个空白页面，直到加载完css文件。这就是所谓的呈现块css。 CSS文件会降低网站速度的另一个常见原因是，当它们包含的代码多于显示当前页面的可见部分所需的代码时。额外的代码意味着它们将需要更长的加载时间。 好消息是，您可以通过优化交付css代码的方式来提高WordPress站点的性能。 这是通过确定显示当前网页第一部分所需的最少的css代码来实现的。这就是所谓的“关键css”。 然后，这些关键代码被内联添加到页面的HTML中，而不是添加到单独的样式表中，这样就可以呈现代码，而不需要首先加载CSS文件。 然后，在访问者可以看到页面内容之后，可以加载其余的css。这就是所谓的“延迟加载”。 话虽如此，让我们来看看两种优化WordPress CSS交付的方法，您可以选择最适合您的方法： 使用WP Rocket优化WordPress CSS交付使用AutOptimize优化WordPress CSS交付 接下来，您需要向下滚动到css文件部分。 在那里，你需要勾选‘优化css交付’选项旁边的方框。 这一功能将智能地识别需要格式化您的访问者首先看到的网页部分所需的关键css。您的页面将更快地加载，其余的css将在您的访问者可以看到其内容后加载。 你现在需要做的就是点击‘保存更改’按钮，等待WP Rocket为你所有的帖子和页面生成必要的css文件。 它还将自动清除您网站的缓存，以便您的访问者将看到您网站的新优化版本，而不是存储在缓存中的未优化版本。 WP Rocket还有很多其他方法可以帮助你提高网站的性能。要了解更多，请参阅我们关于如何在WordPress中正确安装和设置WP Rocket的指南。 一旦你这样做，你需要确保‘聚合css文件’选项是未选中的，然后选中‘消除呈现阻塞css’。 现在，您可以单击“保存更改并清空缓存”按钮来存储您的设置。 但是，除非你注册了一个重要的css账户，否则这个插件不会正常工作。这是一项高级订阅服务，它将提供AutOptimize所需的关键CSS代码，以优化您的WordPress CSS交付。 要做到这一点，导航到AutOptimize设置中的关键css标签。在这里，您可以找到注册Critical CSS所需的信息。您可以通过点击第三段中的注册链接开始。 收到关键的css API密钥后，向下滚动到API密钥部分，这样您就可以将其粘贴到“您的API密钥”文本框中。 在此之后，请确保您点击了“保存更改”按钮。 AutOptimize现在有了所有需要的信息，可以内联添加关键的CSS，并将样式表的加载推迟到页面呈现之后。因此，您的网站加载速度会更快。 我们希望这篇教程能帮助你学习如何优化WordPress的CSS交付。你可能还想看看我们的终极指南，关于建立一个WordPress网站的真正成本，以及我们的专家精选的管理最好的WordPress托管公司。 中国和中国都是如此。

是否要删除WordPress中未使用的css，以便您的站点加载速度更快？ 未使用的css是由你的WordPress主题或插件添加的任何你并不真正需要的css代码。删除此css代码可以提高WordPress的性能和用户体验。 在本文中，我们将向您展示如何在不破坏您的网站的情况下轻松删除WordPress中未使用的CSS。 为什么WordPress中添加了未使用的css？ Css用于设置WordPress网站外观的样式。您的WordPress主题包含了css，其中大部分包含在一个单独的style.css文件中。 除了你的主题的css，你的wordPress插件也会加载它们自己的css。 例如，WooCommerce将加载css来显示产品，页面构建器插件将添加自己的css来显示您的定制页面，而表单构建器插件将包括css来为您的表单设置样式。 然后，您的Web字体、图标字体和其他元素也需要添加它们自己的css文件。 通常，这些文件非常小，加载速度很快。然而，如果你的WordPress站点有很多这样的东西，那么这些影响就会累积起来，并对你的站点速度产生明显的影响。 接下来，你需要向下滚动到“css文件”部分，然后选中“删除未使用的css(测试版)”选项旁边的框。 由于WP Rocket的这一功能还处于测试阶段，它会再次询问您是否要启用该设置。你可以继续点击‘激活，删除未使用的css’按钮。 一旦“删除未使用的css”选项被激活，你就可以在“css安全列表”框中指定不应删除的css文件名、id或类。 只需将它们输入框中即可。 接下来，您需要通过向下滚动并单击“保存更改”按钮来保存您的更改。 当你这样做的时候，WP Rocket会开始处理你的css文件，并显示一个进度条。 插件需要几分钟的时间来处理并从您的网站中删除未使用的css文件。 您将看到“删除未使用的css已完成！”插件完成该过程时的消息。 现在，访问Google Pagespeed Insights工具并测试您网站的性能。 删除WordPress的呈现阻止CSS WP Rocket可以让你优化你的css文件，并从你的网站上移除呈现阻塞的css。 首先，你可以导航到WP Rocket中的“文件优化”标签。从这里，向下滚动到“css文件”部分，然后选中“优化css交付”选项旁边的框。 此选项会生成一个只包含显示网站可见部分所需的CSS代码的CSS文件。它首先加载该文件，向访问者显示页面，然后使用一种称为延迟加载的技术加载其他CSS文件。 通过移除这种呈现阻止的CSS，用户可以更快地查看您的网站，而不是在页面显示之前加载所有的CSS文件。 启用‘优化css交付’选项后，点击‘保存更改’按钮，等待WP Rocket为你的所有帖子和页面生成必要的css文件。它还会自动清除您网站的缓存。 完成后，您可以继续使用Google Pagespeed Insights再次测试您的网站性能。 额外的文件交付调整以提高性能 WP Rocket还允许你从静态文件中删除查询字符串，合并Google字体文件，并缩小HTML。所有这些调整都会对您的整体速度进行微小的改进，从而为您的访问者提供更快的加载体验。 您还将看到缩小和组合css文件的选项。这些选项将减少HTTP请求，并为您提供额外的速度提升。 但是，您需要仔细检查您的网站，以确保启用这些设置后没有任何损坏。 此外，您还可以对您网站上的JavaScript文件应用相同的优化。 您可以将它们缩小并组合为单个文件，并推迟加载JavaScript文件以提高性能。 要了解更多细节，请参阅我们关于如何在WordPress中正确设置WP Rocket的逐步教程。 这使您可以尝试不同的设置，并以管理员的身份进行测试，而不会影响网站访问者。 在此之后，您需要访问资产清理»CSS/JS管理器佩奇。从这里，您可以逐个页面地卸载不需要的CSS和JavaScript文件。 它将首先获取您的主页，并向您显示加载到该页面上的所有CSS和JavaScript文件。 您需要向下滚动并查看加载的文件。如果你看到一个你不需要的文件，那么你可以为特定的页面、帖子类型或整个站点卸载它。 该插件还允许你从这里选择特定的帖子或页面，或者你可以像往常一样编辑帖子或页面来访问相同的选项。 在POST编辑屏幕上，您将在POST编辑器下方找到Asset Cleanup框。 当访问者在您的网站上查看此页面时，该插件将自动获取并列出所有加载的文件和资产。 然后，您可以简单地卸载该页面上不需要的未使用的CSS或JavaScript文件。 重要：别忘了在删除任何未使用的CSS或JavaScript后测试您的网站，以确保一切工作正常。 一旦你完成了卸载和删除未使用的CSS和JavaScript文件，你就可以返回到插件的设置页面，并关闭‘测试模式’。 别忘了点击“更新所有设置”按钮来保存你的更改。 […]

想尝试编辑WordPress CSS，但不知道从哪里开始？使用CSS样式，您可以全局或在某些页面上编辑网站的外观。添加颜色，分隔某些元素，设计布局，并从根本上改变WordPress主题中任何内容的外观。 如果您想更熟悉WordPress的开发环境，或者只是想更好地控制您网站的外观，您需要知道如何在WordPress中添加CSS（以及如何更改已经存在的内容）。 通过编辑您的主题并包含您自己的其他CSS，您将能够优化您网站上的每个视觉元素。今天，我们将仔细研究它。 什么是CSS编辑？ WordPress和CSS 如何使用CSS自定义您的WordPress主题 如何在WordPress中添加自定义CSS 在哪里学习CSS 什么是CSS编辑？ CSS代表Cascading Style Sheets，它是除了HTML之外最流行的网络语言。两者相辅相成，因为CSS用于设置HTML元素的样式。HTML为网站的外观奠定了基础，而CSS用于进一步设置样式。 CSS代码示例（来源：w3schools.com） CSS使您能够使网站具有响应性、添加颜色、更改字体、修改布局以及总体上微调网站的视觉呈现。与HTML和JavaScript一样，CSS是一种前端客户端语言，这意味着它在用户端执行，而不是在后端服务器上执行。 在深入研究WordPress开发时，HTML、CSS、JavaScript和PHP是您需要了解的语言。这就是核心CMS以及它的许多主题和插件的内置内容。 但是，即使您不是网页设计师或开发人员，也可以选择一点CSS，因为您可以使用它来移动网站上的元素或设置样式，或者对主题进行小的美学更改以更好地适应您。 WordPress和CSS 在WordPress中，CSS有点不同。它由主题控制，主题由模板文件、模板标签，当然还有CSS样式表组成。虽然由您的主题生成，但所有这些都可以由您编辑。 模板文件将您网站的各个部分拆分为多个部分（例如header.php或archive.php），并且模板标签用于调用它们以及数据库中的其他内容。这些文件实际上主要由PHP和HTML组成，但如果需要，您可以添加CSS。 您真正需要的是stylesheet或style.css。要更改您网站的外观，您需要了解如何在此文件中添加和编辑代码。 如何使用CSS自定义您的WordPress主题 如果您想自定义主题并使用CSS更改网站的外观，您需要添加自己的代码或编辑已有的代码。有很多方法可以添加CSS，而无需接触任何主题文件，但要更改现有的主题代码，您必须访问您网站的样式表。 当您进行这些更改时，您应该知道一件事：当您的主题更新时，您对style.css、functions.php或其他主题模板文件所做的任何编辑都将被删除。一般来说，您不应该在不使用子主题的情况下在编辑器中直接更改您的网站。 样式表就像您网站的“指令列表”，准确设置其样式以及CSS代码的处理方式。这是您进行大量编辑的地方，但我们还将向您展示如何访问其他主题模板文件，例如header.php和footer.php。 有两种方法可以访问WordPress网站的样式表：通过WordPress仪表盘或通过FTP客户端。我们将分别介绍这两种方法。 自己做这个不方便吗？考虑聘请WordPress开发人员为您处理该步骤。 在仪表盘中编辑WordPress CSS 访问CSS样式表的最简单、最方便的方法就是在WordPress仪表盘中。无需安装FTP程序或代码编辑器。您可以使用内置的语法突出显示和函数文档直接编辑任何文件。 在对核心文件进行任何重大编辑之前，您应该始终备份您的WordPress站点。如果您是CSS新手，很容易意外犯下可能破坏网站外观的错误，并且可能很难弄清楚如何恢复您的更改。 完成备份和子主题后，登录到您的后端。您可以通过转到菜单并单击外观 > 主题编辑器来找到编辑器。 您应该会看到一个弹出窗口，警告您不要直接编辑这些文件。不用担心，只需单击“I understand”即可。在进行任何重大更改之前，使用子主题并备份您的网站只是一个警告。按照这些步骤操作，就可以安全地进行编辑了。 直接编辑WordPress文件 现在你进来了！默认情况下，您应该在样式表上，但如果没有，请查看右侧的菜单以查看您的主题文件。 除了style.css，您还可以访问functions.php、header.php和single.php等模板文件。所有这些都会影响您网站上某些页面的行为方式。 但是在深入研究这些特定文件之前，您应该熟悉PHP。 在WordPress主题中编辑style.css样式表 请记住：您在此处所做的大多数CSS更改都是全局性的。例如，如果您将H1标题更改为某种字体，它将对您网站上的每个页面生效。您需要使用特殊语法来自定义特定页面的样式。 直接编辑主题文件 如果您无法访问主题编辑器或更喜欢通过FTP进行工作怎么办？使用后端编辑器更容易，但某些主题或插件可能会禁用它。如果是这种情况，您需要通过FTP连接到您的网站。 FTP或文件传输协议允许您远程访问和修改网站的文件。您需要做的第一件事是下载FileZilla或任何其他FTP客户端。 接下来，您应该联系您的主机并询问您的FTP凭据（主机、端口和用户名/密码，如果适用）。如果您的主机有仪表盘，您可以通过登录找到它们。 拥有它们后，启动FTP客户端并输入该信息。如果它不起作用，请尝试将“sftp://”放在主机部分的URL之前。 使用FileZilla 进入后，您可以找到style.css文件，方法是单击wp-content文件夹将其打开，然后单击主题文件夹（如TwentyTwenty主题），然后滚动直到看到style.css。 双击打开它（或右键单击并选择View/Edit）并进行修改。记得保存并上传回服务器。 如果您需要编辑home.php、single.php、archive.php等其他模板文件，您可以在style.css所在的文件夹中找到它们。 编辑您的主题文件，无论是通过FTP还是仪表盘，并不总是必要的。事实上，如果你只是添加一些额外的代码，最好避免这样做。 对于少量添加，这是将CSS添加到WordPress网站的最佳方式。 如何在WordPress中添加自定义CSS 如果您不想编辑现有的CSS代码，而只想添加自己的样式，强烈建议使用以下方法之一：WordPress定制器或使用专用插件。 […]

删除WordPress中未使用的CSS可以在一定的程度上让网站加载速度更快。 未使用的CSS是由您的WordPress主题或插件添加的但并不真正需要的CSS代码。删除这些CSS代码可提高WordPress性能和用户体验。 在本教程中，我们将学习如何在不破坏网站的情况下删除WordPress中未使用的 CSS。 什么是WordPress中未使用的CSS？ WordPress中未使用的CSS是加载到网站上但实际上并不需要用于显示页面的CSS代码。 额外的代码会使访问者的浏览器需要更长的时间来呈现页面，造成糟糕的用户体验。较慢的加载时间甚至会影响网站搜索引擎排名，有可能会导致网站的自然流量减少。 您可以使用Google Pagespeed Insights了解未使用的CSS代码如何影响您的网站。标题为“Remove unused CSS”的部分，将详细说明了哪些CSS文件影响网站加载时间。 为什么在WordPress中添加了未使用的CSS？ CSS用于设计WordPress网站的外观。WordPress主题包含CSS，其中大部分包含在主题的style.css文件中。 除了主题的CSS之外，部分WordPress插件还将加载自己的CSS。例如，WooCommerce插件将加载CSS以显示产品，页面构建器插件将添加自己的CSS以显示您的自定义页面，而表单插件将包含CSS以设置表单样式。 然后，Web fonts、图标字体和其他元素也需要添加自己的CSS文件。 通常，这些文件非常小并且加载速度很快。但是，如果WordPress网站有很多这样的资源，累积起来，还是会对网站速度产生负面影响。 如何删除WordPress中未使用的CSS？ 我们可以有几种不同的方法可以减少WordPress网站上未使用的 CSS。 但是，要完全删除WordPress中所有未使用的CSS将是一项艰巨的任务。由于WordPress在幕后工作的方式，一些未使用的CSS可能很难找到和删除。 下面我们将向展示两种删除未使用CSS的方法，您可以选择最适合的一种。 方法 1. 使用WP Rocket插件删除WordPress中未使用的CSS 这种方法比较简单，推荐给初学者。它极大地改善了WordPress网站上CSS文件的整体交付，包括删除大部分未使用的CSS。 我们认为它是初学者的最佳解决方案，因为它更容易并且实现了为您的用户提供更好体验的主要目标。这意味着您的网站在速度测试工具上加载速度很快，并且访客也感觉很快。 首先，您需要安装并启用WP Rocket插件。 启用后，您需要访问Settings »WP Rocket页面并切换到“File Optimization”选项卡。 接下来，您需要向下滚动到CSS文件部分，选中“Optimize CSS delivery”选项旁边的框。 此选项会生成一个CSS文件，该文件仅包含显示网站可见部分所需的CSS代码。它首先加载该文件，向访问者显示该页面，然后使用延迟加载的技术加载其他CSS文件。 通过删除这个阻止渲染的CSS，网站可以比在页面显示之前加载所有CSS文件更快地被用户查看。 启用“Optimize CSS delivery”选项后，单击“Save Changes”按钮并等待WP Rocket为您的所有文章和页面生成必要的CSS文件。它还会自动清除您网站的缓存。 完成后，您可以继续使用Google Pagespeed Insights再次测试您的网站性能。 额外的文件传输调整以提高性能 WP Rocket还支持从静态文件中删除查询字符串、合并Google字体文件并缩小HTML。所有这些调整都为您的整体速度带来了微小的改进，从而为您的访问者带来了更快的加载体验。 您还将看到用于缩小和合并CSS文件的选项。这些选项将减少HTTP请求并为您提供额外的速度提升。 但是，您需要仔细检查您的网站，以确保启用这些设置后没有任何问题。 此外，您可以对网站上的JavaScript文件应用相同的优化。您可以缩小和组合它们以作为单个文件并延迟JavaScript文件的加载以提高性能。 方法 […]

CSS文件控制WordPress网站的视觉格式和样式。但是，如果您的CSS代码没有以最佳方式交付，那么它可能会降低您的网站速度。在本教程中，我们将向您展示两种优化WordPress网站CSS交付的简单方法。 WordPress网站CSS交付如何影响WordPress性能 CSS文件用于定义WordPress站点的视觉外观。您的WordPress主题包含一个CSS样式表文件，您的一些插件也可能使用CSS样式表。CSS是现代网站所必需的，但CSS文件可能会降低您网站的速度和性能，具体取决于它们的设置方式。 即使网站速度稍有延迟，也会造成糟糕的用户体验，并可能影响您的搜索排名和转化，从而导致流量和销售额减少。 CSS文件可能会减慢网站速度的一种方式是，是否需要在显示页面之前加载它们。这意味着您的访问者将看到一个空白页面，直到CSS文件加载完毕。这被称为渲染阻塞CSS。CSS文件可能会降低网站速度的另一个常见原因是，它们包含的代码比显示当前页面可见部分所需的代码多。额外的代码意味着它们需要更长的时间来加载。 好消息是，您可以通过优化CSS代码的交付方式来提高WordPress网站的性能。这是通过确定显示当前网页的第一部分所需的最少CSS代码来完成的。这被称为关键 CSS。然后将此关键代码内联添加到页面的HTML中，而不是添加到单独的样式表中，以便无需先加载CSS文件即可呈现代码。 在您的访问者可以看到页面的内容后，可以加载其余的CSS。这称为“延迟加载”。在本教程中，我们将向您展示两种优化WordPress网站CSS交付的方法，您可以选择最适合您的一种。 方法 1：使用WP Rocket优化WordPress CSS交付 方法 2：使用Autooptimize优化WordPress CSS交付 方法 1：使用WP Rocket优化WordPress CSS交付 WP Rocket是市场上最好的WordPress缓存插件。它提供了优化WordPress CSS交付的最简单方法。事实上，这就像选中一个框一样简单。WP Rocket是一个付费插件，但最好的部分是所有功能都包含在基础版本中。 您需要做的第一件事是安装并激活WP Rocket插件。激活后，您需要导航到“设置”»“WP Rocket”页面并切换到“File Optimization”选项卡。 接下来，您需要向下滚动到CSS files部分。在那里，您需要选中“Optimize CSS delivery”选项旁边的框。 此功能将智能地识别对访问者首先看到的网页部分进行格式化所需的关键CSS。您的页面将加载得更快，而其余的CSS将在您的访问者看到其内容后加载。 您现在需要做的就是单击“Save Changes”按钮并等待WP Rocket为您的所有文章和页面生成必要的CSS文件。它还会自动清除您网站的缓存，以便您的访问者看到您网站的新优化版本，而不是缓存中存储的任何未优化版本。 WP Rocket 还有很多其他方法可以帮助您提高网站的性能。要了解更多信息，请参阅我们关于如何在WordPress中正确安装和设置WP Rocket的教程。 方法 2：使用Autooptimize优化WordPress CSS交付 Autooptimize是一个免费插件，旨在改进您网站的CSS和JS文件的交付。虽然Autoptimize是一个免费插件，但它没有WP Rocket那么多的功能，及需要更多的时间来设置。 例如，它无法像WP Rocket那样自动识别关键 CSS。相反，Autoptimize需要高级第三方服务的帮助，这需要额外的费用并需要额外的时间进行配置。但是，如果您预算紧张并且不需要WP Rocket的所有其他功能来加速您的网站，那么它可能是一个不错的选择。 您需要做的第一件事是安装并激活Autooptimize插件。激活后，您需要访问设置»Autoptimize页面以配置插件设置。在那里，您需要向下滚动到CSS选项部分并选中顶部的Optimize CSS Code框。 完成此操作后，您需要确保未选中“Aggregate CSS-files”选项，然后选中“Eliminate render-blocking CSS”。您现在可以单击“Save […]

在Pingdom、GTmetrix或Google PageSpeed Insights中看到“合并外部CSS”警告？对于许多WordPress网站来说，这是一个非常常见的错误。当您从CDN 和/或子域（外部域）加载10个或更多CSS文件时，通常会显示此警告。解决此问题的一种方法是串联您的CSS文件，或将它们组合起来，以便在单个请求中加载它们。 注意：如果您使用支持HTTP/2的提供程序通过HTTPS运行，现在通常可以安全地忽略此警告。使用HTTP/2，现在可以通过单个连接并行加载多个CSS文件。 Pingdom合并外部CSS警告 如果您仍在通过HTTP运行并且还没有迁移到HTTP/2，您可以按照下面的教程学习如何合并外部CSS文件。同样，串连（concatenation）现在是一种通常被认为已弃用的技术。现在，超过77%的浏览器在通过HTTPS以及许多CDN和网络托管提供商运行时支持HTTP/2。 使用CDN时通常会看到合并外部CSS警告，因为您将CSS文件托管在外部域（例如 cdn.domain.com）上。您可以做的只是将您的CSS文件连接到您的Web服务器上。一旦它们组合在一起，您将不再看到此警告，因为它将在单个请求中加载它们。最简单的方法之一是使用由Frank Goossens开发的名为Autoptimize的免费WordPress插件。 Autoptimize插件 这个插件非常轻巧，准确地说只有176KB。在撰写本文时，它目前有超过1,000,000次活跃安装。该插件可帮助您串联脚本、缩小、添加过期标头，以及将样式移至页眉和将脚本移至页脚的能力。 您可以从WordPress插件库下载它 ，也可以在WordPress仪表盘中的“安装插件”插件下搜索它。安装后，您将需要进入设置并启用“Optimize CSS Code”选项。这将串联（组合）您的 CSS 文件。如果您使用的是CDN，请确保输入您的CDN URL。这样，您的CSS文件将作为单个请求加载到CDN上。 合并外部CSS文件 在启用上述设置后，你将看到一个“autoptimize_xxxxx.css”文件的CSS文件。 组合CSS文件

互联网上有许多拖放式网站建设者可以在没有技术技能的情况下创建网站。但是，您必须学习SEO的一些技术方面，才能使您的网站保持在搜索引擎结果页面的顶部。 关键CSS是这样的技术主题之一，用于优化您的内容交付，进而直接影响速度。对于在其网站上使用多个插件的普通用户来说，WordPress生态系统使这变得更加复杂。 在本文中，让我们探讨如何为WordPress网站创建关键CSS以提高Google PageSpeed分数。 基础知识 在讨论关键CSS之前，有必要了解一些术语，例如首屏和内容交付优化。此外，您还需要了解在WordPress上使用外部样式表的基本方法。 首屏内容 当您在桌面或移动设备上打开网站时，您在屏幕上看到的可见部分是首屏内容区域。这是一个传统的报纸术语，您可以在其中看到首页顶部的首屏内容。一般来说，人们习惯于折叠报纸，折叠区域上方提供重要内容。同样，首先加载的网页顶部可见部分应该为用户提供最有价值的内容。因此，您应该专注于优化可见顶部以快速加载。 内容交付优化 许多速度工具（如Google PageSpeed Insights）衡量网站如何提供首屏内容。您可以将其视为对首次内容绘制 (FCP) 的测量。如果他们检测到阻塞，您将看到删除阻塞元素的警告。您将在Google PageSpeed Insights工具中看到的流行建议之一是消除渲染阻塞资源。如果您点击该建议，Google将向您展示优化关键CSS/JS的交付并推迟所有非关键CSS/JS。 关键的CSS和JS建议 修复阻塞渲染的JavaScript (jQuery) 非常容易，因为主题/插件默认在页脚部分加载脚本。jQuery是唯一的问题，许多网站可能需要它来加载首屏内容。因为，WordPress也使用jQuery，如果它只是由于jQuery，你可以忽略这个错误。否则，如果不会破坏您网站的布局，请使用WP Rocket之类的插件来组合和交付所有脚本。 然而，问题在于生成关键的CSS并首先加载它。在本文中，我们将解释如何处理CSS优化以提高页面速度得分。 相关阅读： 正确地配置WP Rocket插件以提升网站加载速度。 在网站中加载CSS 有多种方法可以在您的网页中插入CSS 。您可以通过内联、内部或外部方式执行此操作。最流行和推荐的方法是在网页的标题部分链接外部样式表。由于页眉部分中的内容首先与网页一起加载，因此会极大地影响首屏内容的加载，从而影响页面速度。 <!DOCTYPE html> <html lang=”en”> <head> <!– Meta Tags for Bootstrap 4 –> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”Link Your Stylesheet URL Here”> </head> <body> […]

有时您可能会发现自己需要在WordPress网站中添加自定义 CSS。在本教程中，我们将介绍如何在不编辑任何主题文件的情况下轻松地将自定义CSS添加到您的WordPress网站。 方法 1：使用Theme Customizer添加自定义 CSS 从WordPress 4.7开始，用户现在可以直接从WordPress管理后台添加自定义CSS。这非常简单，您可以立即通过实时预览看到您的更改。 首先，您需要转到外观»自定义页面。 这将启动WordPress主题定制器界面。 您将在左窗格中看到您网站的实时预览和一堆选项。单击左侧窗格中的额外CSS选项卡。 该选项卡将滑动显示一个简单的框，您可以在其中添加自定义CSS。一旦添加了有效的CSS规则，您就可以在网站的实时预览窗格中看到它的应用。 您可以继续添加自定义CSS代码，直到您对其在网站上的外观感到满意为止。 完成后不要忘记单击顶部的“保存并发布”按钮。 注意：您使用主题定制器添加的任何自定义CSS仅适用于该特定主题。如果您想将其与其他主题一起使用，则需要使用相同的方法将其复制并粘贴到新主题中。 方法 2：使用插件添加自定义CSS 第一种方法只允许您为当前活动的主题保存自定义CSS。如果更改主题，则可能需要将自定义CSS复制并粘贴到新主题。 如果您希望无论使用哪种WordPress主题都应用自定义CSS ，那么此方法适合您。 您需要做的第一件事是安装并激活Simple Custom CSS插件。激活后，只需转到外观»Custom CSS并写下或粘贴您的自定义CSS。 不要忘记按“Update Custom CSS”按钮来保存您的更改。 您现在可以查看您的WordPress网站以查看正在运行的自定义CSS。 使用自定义CSS插件与在主题中添加CSS 建议初学者使用上述两种方法。高级用户还可以将自定义CSS直接添加到他们的主题中。 但是，不建议将自定义CSS片段添加到您的父主题中。如果您在没有保存自定义更改的情况下不小心更新了主题，您的CSS更改将会丢失。 最好的方法是使用子主题。但是，许多初学者不想创建子主题。除了添加自定义CSS，初学者通常真的不知道他们将如何使用该子主题。 使用自定义CSS插件可以让您独立于主题存储自定义CSS。这样您就可以轻松切换主题，而您的自定义CSS仍然存在。 将自定义CSS添加到WordPress网站的另一种好方法是使用CSS Hero插件。这个出色的插件允许您在WordPress网站上编辑几乎所有CSS样式，而无需编写任何代码。 我们希望本教程有助于将自定义CSS添加到您的WordPress网站。您可能还想了解如何选择最佳网页设计软件和最佳WordPress拖放页面构建器插件。