如何自動拍攝瀏覽器屏幕截圖並在 WordPress 中顯示它們

圖像和屏幕截圖是任何 WordPress 博客中的關鍵元素。 特別是，屏幕截圖使您能夠突出顯示其他頁面的關鍵方面。 但是，拍攝完美的瀏覽器屏幕截圖並將其添加到您的帖子中可能會很麻煩。 雖然您可以根據您的操作系統 (OS) 完成工作，但始終如一地截取屏幕截圖是一項挑戰。

進入瀏覽器截圖插件。 這使您可以截取任何網站，甚至無需離開 WordPress 編輯器。 如果您對此感到耳目一新，您可能會想繼續閱讀。

讓我們來看看它是如何工作的！

訂閱我們的 YouTube 頻道

瀏覽器截圖插件簡介

Browser Screenshots 可以說是一個小眾插件，值得在您的網站上佔有一席之地。 它使您能夠在不離開 WordPress 編輯器的情況下拍攝任何頁面的動態瀏覽器屏幕截圖。 這適用於經典編輯器和塊編輯器，具體取決於您的首選選項。 這與操作系統原生解決方案形成對比，後者要求您在平台之外打開新的瀏覽器窗口並進一步優化您的圖像。

如果您使用經典編輯器，瀏覽器屏幕截圖使您能夠使用自定義短代碼來生成您想要的截圖。 您可以在任何頁面或帖子中添加多個屏幕截圖，這同樣適用於塊編輯器。

由於該插件動態生成屏幕截圖，因此非常適合您不想為內容使用過時截圖的情況。 如果您的頁面或帖子包含瀏覽器屏幕截圖短代碼或塊，訪問者將看到實時屏幕截圖。 對於某些類型的內容來說，這是一個誘人的提議。

無論您使用哪種方法，該插件還可以讓您自定義瀏覽器屏幕截圖的分辨率。 您還可以向圖像添加替代文本和文本，以及自定義 CSS 類。

但是，重要的是要了解此插件只需要“首屏”瀏覽器屏幕截圖。 這意味著您需要滾動到的區域將不會顯示。 該區域有多大取決於您為每個瀏覽器屏幕截圖配置的參數，稍後您將了解如何執行此操作。

主要特點：

• 使用短代碼或塊為瀏覽器窗口中的任何網站拍攝自定義照片。
• 在您的內容中添加瀏覽器屏幕截圖，而無需手動拍攝或上傳。
• 自定義瀏覽器屏幕截圖的分辨率。
• 向插件生成的圖像添加自定義 CSS 類。
• 將鏈接和替代文字添加到您的圖像。

價格：免費 | 更多信息

如何使用瀏覽器截圖插件（2種方法）

到目前為止，您已經知道 Browser Screenshot 插件是如何工作的，所以讓我們討論一下如何使用它。 短代碼是插件的基本部分，所以讓我們先看看這個。

1. 使用簡碼生成動態瀏覽器截圖

瀏覽器截圖插件使您能夠使用以下自定義短代碼來生成動態瀏覽器截圖：

[browser-shot url="elegantthemes.com" width="600" height="400"]

短代碼包括兩個基本參數： width和height 。 這兩個參數都使用像素值，插件用於拍攝的默認分辨率為600 x 400 。 當然，您還需要將要截圖的特定 URL 添加到短代碼中。

無論您使用塊編輯器還是經典編輯器，短代碼都會呈現類似於以下內容的屏幕截圖：

但是，瀏覽器屏幕截圖還允許您設置多個自定義參數。 除了寬度和高度，還包括以下內容：

• Alt：此參數使您可以為屏幕截圖設置替代文本。
• 鏈接：您可以使用此參數選擇圖像指向的鏈接（這可能與鏡頭的來源不同）。
• Target：此參數可讓您控制是否在新窗口中打開圖像鏈接。

例如，以下是包含所有參數的完整短代碼的樣子：

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]

您還可以使用簡碼手動添加字幕：

[browser-shot url="http://www.google.com" width="700" height="500" alt="Google's homepage" link="http://www.otherwebsite.com"]Here's the caption[/browser-shot]

在大多數情況下，您將使用的兩個最重要的參數是width和height 。 對您拍攝的所有瀏覽器屏幕截圖使用相同的值通常不會返回最佳結果，因此您需要定制參數以適合內容。

2. 使用塊將屏幕截圖添加到您的網站

如果您使用 Block Editor，則 Browser Screenshots 插件將使您可以訪問名為Browser Shots的新塊：

選擇 Block 將提示插件詢問您要使用哪個網站來生成屏幕截圖。 在本例中，我們使用亞馬遜美國主頁：

單擊Find Image 後，插件將“截取”屏幕截圖並將其顯示在塊編輯器中：

要記住的一件事是，該插件無法訪問私人頁面或為您登錄。 對於這些類型的瀏覽器屏幕截圖，您必須自己做一些骯髒的工作。

繼續，在該屏幕截圖的右側，您可以看到“阻止詳細信息”選項卡。 這使您能夠修改我們之前討論的所有參數，而無需添加自定義短代碼。

使用塊編輯器修改瀏覽器屏幕截圖的寬度和高度要簡單得多。 這是因為編輯器使您可以通過點擊高度和寬度參數下方的刷新圖像按鈕來查看預覽：

如果您比較兩個示例，您可以看到分辨率的變化如何修改插件為您截屏的區域。 除此之外，您還可以向屏幕截圖添加自定義鏈接，配置它們是否在新選項卡中打開，並在此處設置自定義 CSS 類。

結論

如果您經常在博客內容中包含瀏覽器屏幕截圖，則瀏覽器屏幕截圖插件可以為您節省大量時間。 這是一個相當小眾的插件，但如果你是我們提到的人群之一，它會讓編輯帖子變得更加容易。

使用瀏覽器屏幕截圖，您可以使用簡單的短代碼或塊編輯器添加瀏覽器的屏幕截圖。 對於短代碼，該插件包含多個參數，使您能夠自定義屏幕截圖，例如寬度、高度，甚至alt （用於替代文本）。

您對如何使用瀏覽器截圖插件有任何疑問嗎？ 讓我們在下面的評論部分中討論它們！

文章縮略圖由 VectorMine/shutterstock.com 提供