5 款适用于 WordPress 网站制作者的最有用的 Google Chrome 扩展

优化您的工作流程对于项目的成功至关重要。 它节省了时间、金钱，改善了与同事、客户的沟通，并提高了完成的 WordPress 网站的质量。

如今，总有一个应用程序、插件或插件可以帮助您更有效地完成任务。 在本文中，我想向您展示我们在 ProteusThemes 的浏览器（特别是 Google Chrome）中使用哪些扩展程序来交流、编辑和分析多种类型的内容。

我使用的所有 5 个 Chrome 扩展程序都是免费提供的，您可以在几分钟内设置它们。 让我们来看看它们：

– 什么字体

– 页尺

– ColorZilla

– 很棒的截图

– 风格机器人

您可以从Chrome Web Store安装所有扩展。 安装扩展程序后，其图标将显示在浏览器工具栏的右上角，URL 字段旁边。 您可以通过单击其图标来运行扩展程序或查看所有选项。

如果您单击 URL 字段末尾的菜单并选择更多工具，或者只需右键单击扩展程序的图标以选择所需的选项，则可以查看、修改、激活或停用所有已安装的扩展程序。

让我们深入了解每个扩展的细节。

什么字体

获取 WhatFont 扩展

您是否曾经访问过网站并想使用相同的字体？ 您可以采取艰难的方式，在代码中搜索字体，或者您可以使用 WhatFont。 此扩展通过单击文本来识别不同网页上使用的字体。 弹出窗口显示有关字体的所有信息。 您还可以将鼠标悬停在文本上以获取所用字体的名称。

当我为下一个项目寻找灵感或在上线之前检查 WordPress 网站的最终版本时，我会使用此工具。 Web 设计人员和开发人员在测试不同浏览器分辨率的字体时经常使用它。

扩展显示了字体的以下特征：

• 字体粗细和样式（显示选择的粗细和样式）。

• 字体系列（显示字体来源的完整字体集合，以便您跟踪它）。

• 字体大小（是当前查看的分辨率中使用的字体大小。请注意，当两种不同的字体设置为相同大小时，由于其差异，一种通常看起来比另一种大。大小以像素为单位显示，不幸的是扩展名没有其他印刷测量）。

• 字体高度（是从大写字母的顶部到最低下降器底部的高度，加上一个小的缓冲空间）。

• 字体颜色（字体的 HEX 颜色模型。阅读链接的文本颜色时要小心。在某些情况下，选择会在悬停模式下显示链接的颜色）。

• Google Fonts、 Font Squirrel 或 TypeKit链接（在某些情况下，字体连接到一组交互式应用程序编程接口，允许您从他们的网站浏览和使用 Web 字体。查找相同的字体或获取整个字体） .
• 字符（大写和小写字母示例以所选字体显示）。

另请注意，在使用 WhatFont 时，您将无法与网页交互，只有页面上的滚动处于活动状态。 您可以单击多种字体进行比较，而不会丢失之前的弹出窗口。

页尺

获取页面标尺扩展

页面标尺让您可以在任何页面上绘制标尺并显示元素的宽度和高度，以及它在网页上的位置。 您再也不必查看代码或制作屏幕截图并在 Photoshop 中进行测量。 该工具在检查网页上较大元素的大小和位置时很有用。 例如，您可以使用它检查所有填充和边距。 也可以测量更小的元素或细节。

如何使用页尺

通过单击浏览器工具栏右上角的图标或按ALT + P开始使用标尺工具。 弹出蓝色标尺栏，显示选择的宽度、高度和位置——左、上、右、下。

要进行选择，只需单击、拖动并释放。 选择数据立即出现在蓝色工具栏中。 通过单击并移动标尺的边和角，您可以更改标尺选择的大小。 您还可以在蓝色标尺栏上的字段中手动输入所需的大小或位置。 另一种选择是单击字段中的小箭头来调整大小或移动选择。 这使您可以进行精确的更改。 也可以通过从中心拖动选择来移动选择。

当您想测量较小的细节时，请放大网页。此工具的最大好处是，当您放大时，标尺不会在选择中添加任何额外的像素。

可以更改标尺的颜色，以便在标尺的选择和页面元素上使用的颜色之间形成更好的对比，以便您进行更准确的测量。

要测量相距很远的两个元素之间的空间，请打开“显示参考线”选项，以显示从标尺边缘延伸的参考线。

如果您在进行测量时遇到问题，您可以将工具栏停靠在网页底部。

启用“元素模式”（单击工具栏左侧的浅蓝色箭头）以勾勒页面上的元素，当您将鼠标移到它们上方时。 通过单击元素，您可以获得稳定的选择。 该扩展程序还显示并允许您根据网站代码在元素之间移动。

在元素模式中查找和移动元素

该插件的唯一缺点：如果您需要在移动视图中获取元素的大小，则必须同时使用 Page Ruler 和另一个调整大小的 Chrome 插件（例如 Window Resizer），因为 Page Ruler 在您使用时不起作用在开发者模式的网页上。

ColorZilla

获取 ColorZilla 扩展

ColorZilla 是一个扩展程序，可帮助 Web 开发人员和图形设计师完成与颜色相关的任务。 它通常用于制作颜色托盘，从颜色组合中获得灵感或检查某个元素的颜色。 您可以从网页的任何部分读取颜色，调整该颜色并将其粘贴到另一个程序中，而无需打开另一个应用程序。

该工具提供 RGB 和十六进制格式的颜色读数。 单击 ColorZilla 的吸管图标会打开一个包含许多选项的菜单。

如何使用 ColorZilla

ColorZilla 最常见的用途是读取元素的颜色。 单击“从页面选择颜色”允许您从当前显示的页面中选择任何颜色。 它会在网页顶部打开一个工具栏，其中显示颜色示例、RGB 和 HEX 颜色格式以及颜色元素的大小和代码。 工具栏还提供了选择更大的颜色块的选项，以计算平均颜色。

您可以通过单击选择并复制颜色的 HEX 格式。 使用按钮CTRL + V或CMD + V粘贴 HEX 颜色代码。 对于以不同格式一次性复制，您可以打开下拉菜单，选择“复制到剪贴板”并选择所需的格式。

可以为选项中所有下一个选择的颜色更改格式。 在那里您可以禁用 # 格式 (66CAA6) 并将 HEX 代码设为小写 (66caa6)。 不要忘记保存更改。

您选择的最后一种颜色保存在 ColorZilla 图标的下拉菜单中，位于“颜色选择器”下。 拾色器存储拾取颜色的历史记录，具有编辑颜色的选项，您可以从此处复制它。

“网页颜色分析器”读取您当前网页上使用的所有 CSS 颜色。 单击颜色会突出显示该颜色中的每个元素，并显示颜色的 RGB 和 HEX 格式。

内置的调色板浏览器允许您从预先存在的颜色集中选择颜色。 其中一个与颜色相关的选项也是“CSS Gradient Generator”，这是一个用于创建渐变的高级选项。

很棒的截图

获得很棒的截图扩展

此扩展程序使截屏和记录网页变得容易。 也可以导入本地图像、编辑它们并导出它们。 在 ProteusThemes，我们每天都使用它进行内部交流以及我们提供的 WordPress 支持。 如果您在远程工作，该工具非常有用。 是的，还有很多其他的扩展可以做同样的工作，但是我们喜欢 Awesome Screenshot，因为它简单而强大。

如何使用真棒截图

此扩展允许您：

– 捕捉网页的可见部分（延迟字幕选项），

– 捕获选定区域（选择您想要作为图像的区域），

– 捕获整个网页，

– 截屏您的桌面，

– 导入和编辑您的本地图像和

– 录制屏幕视频。

要选择一种截取网页的方式，请单击浏览器工具栏中的相机镜头图标。 请注意，除了延迟捕获真棒屏幕截图外，所有操作都将立即完成。 您制作的屏幕截图将保存为 PNG 或 JPEG 图像。 可以在扩展程序的选项中选择所需的图像格式，您还可以在其中进行其他设置，例如延迟捕获时间、短代码和您希望自动保存图像的文件夹。

如果您想要网页的移动视图或以其他分辨率制作 WordPress 网页的屏幕截图，您可以进入开发人员模式来修改它或首先激活任何其他调整大小的扩展（例如网站调整器）。

在保存屏幕截图之前，您有机会对其进行编辑和评论。 滚动您的捕获，裁剪它并轻松模糊包含私人数据的部分。 您可以使用不同颜色的文本、圆圈、箭头和线条对图像进行注释，以强调和清晰。 使用放大镜图标放大和缩小以在保存前查看图像。

带有 Awesome Screenshot 的工具栏和屏幕截图编辑选项

对结果感到满意后，将图像保存到您的计算机、云端、共享或打印。

此扩展还提供免费录制 30 秒屏幕视频的选项。 您可以制作标签或窗口视频。 视频可以以 WebM 格式保存、传输到 Google Drive 或直接上传到 YouTube。 您的录音可以在“我的录音”下的 Awesome Screenshot 下拉菜单中找到。

该扩展的唯一两个缺点是，当您放大浏览器时，无法捕获所选区域，并且许多用户无法获得带有粘性元素的网站的漂亮屏幕截图。

有趣的琐事事实：您在本文中看到的大多数屏幕截图和视频都是使用 Awesome Screenshot 制作的。

风格机器人

获取 Stylebot 扩展

Stylebot 允许您编辑和操作网站的 CSS，仅供您查看。 您将需要一些 CSS 知识来对网站的 CSS 进行精确和长期的更改。 如果您只需要它来更快地预览 WordPress 页面上的更改，则不需要高级 CSS 知识。 此工具用于更改所有可能的元素，添加新元素，删除它们以及制作不同的网站布局，因此您可以制作完美的截图，修复不需要的错误或保存网站的 CSS，因此更改也将是在下次访问中看到。 您创建的网站的样式，可以导入或导出并与他人共享。

对于更高级的编辑，Stylebot 与开发人员模式结合使用来识别页面上的元素。

如何使用样式机器人

要打开 Stylebot，请单击浏览器工具栏中的 CSS 图标或按ALT + M 。 如果你没有太多的编程技巧，我建议你选择新开的栏目底部的Basic模式。

高级模式会打开一个文本字段，您可以在其中为所选元素编写 CSS 代码。 在这里，结合开发者模式更容易从嵌套元素中找到要更改的元素名称，并继续在 Stylebot 中进行编辑。 如果您想同时使用多种编辑模式，您可以。 简单的编辑将被翻译成代码，在高级或编辑 CSS 模式下可见。

“编辑 CSS”选项会打开一个 CSS 代码字段，该字段将应用于整个网站，并且可以在您下次访问该网站时保存、共享和使用。 您所做的所有更改都将可见。 请注意，如果您刷新网站，您所做的所有更改都将保留。 要删除样式，请单击 Stylebot 图标并选择“删除样式”。
基本模式具有简单的部分，可以更快、更轻松地编辑网站。 我们有时将它用作快速预览工具（例如，测试更大的标题看起来如何，改变背景颜色等）。 初学者可以从一开始就轻松使用它。

在这里您可以更改：

– 文本，

– 颜色，背景，

– 边界，

– 布局和可见性。

您使用光标手动选择网站上的元素（以绿色边框突出显示）。 元素的名称将显示在 Stylebot 列的顶部。 对于新的选择，只需单击列中左上角的图标。 元素标题处的下拉箭头为您提供先前选择的部分。 选择正确的元素后，您可以通过输入值并选择预先设置的选项来开始更改网站。 基本模式下的编辑选项是有限的。 您可以更改字体大小、文本颜色、填充和边距等。

要使您的 Stylebot 编辑或查看体验更加愉快，请单击 Stylebot 图标并选择选项。 在这里您可以制作个性化的快捷方式，选择首选的编辑模式，启用和禁用您在不同网站上应用的样式，导入和导出样式等。

所以这里只有 5 个，最重要和最强大的扩展，我们每天在 ProteusThemes 使用它们，也可以让您的工作流程更轻松。 你不这么认为吗？ 你会推荐更好的替代品吗？ 发表评论。