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 使用它們，也可以讓您的工作流程更輕鬆。 你不這麼認為嗎？ 你會推薦更好的替代品嗎？ 發表評論。