如何在WordPress中創建自動網站截圖


您是否要在WordPress網站中創建自動網站截圖? 如果您經常將網站屏幕截圖添加到WordPress帖子或頁面中,那麼自動執行該過程將節省您手動捕獲屏幕截圖所花費的時間。 在本文中,我們將向您展示如何在WordPress中創建自動網站截圖。

在WordPress中創建自動網站截圖

方法1:使用插件在WordPress中創建自動網站截圖

因此,此方法比較容易,因此建議初學者和不想處理代碼的用戶使用。

您需要做的第一件事是安裝並激活Browser Shots插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

該插件可以直接使用,沒有可供您配置的設置。

只需編輯帖子/頁面或創建一個新的即可。 您會在視覺編輯器中註意到一個新按鈕,用於添加網站屏幕截圖。

WordPress視覺編輯器中的“瀏覽器快照”按鈕

單擊它會彈出一個彈出窗口,您可以在其中輸入網站URL,備用文本,URL鏈接以及屏幕截圖的高度/寬度。

輸入URL生成網站截圖

單擊確定按鈕,該插件將在您的WordPress帖子中添加一個簡碼。 現在,您可以預覽自己的帖子,以查看實際使用的插件。

如果您在WordPress中使用文本編輯器,或者不想在可視化編輯器中使用按鈕,那麼您也可以自己手動添加簡碼。

[browser-shot url="https://www.wpbeginner.com"]

默認情況下,該插件將創建600 x 600像素的屏幕截圖。 您可以通過將width和height屬性添加到簡碼中來更改它。

[browser-shot url="https://www.wpbeginner.com" width="400" height="400"]

它還將自動鏈接到該網站。 您可以通過將鏈接屬性添加到短代碼並添加所需的任何鏈接來更改此設置。

[browser-shot url="https://www.wpbeginner.com" width="400" height="400" link="http://example.com"]

如果要在屏幕截圖下方添加標題,則可以通過在簡短代碼周圍包裝標題文本來實現。

[browser-shot url="https://www.wpbeginner.com"]WPBeginner - WordPress Resource Site for Beginners[/browser-shot]

字幕將使用您的WordPress主題的字幕樣式。 這是在我們的演示網站上的外觀:

使用Browser Shots插件生成的網站截圖

Browser Shots插件使用WordPress.com的mshots API即時生成屏幕截圖。 這些圖像未存儲在您的WordPress媒體庫中。 它們直接從WordPress.com服務器提供。

請參閱我們的指南,了解WordPress.com和WordPress.org之間的區別。

方法2:通過將代碼添加到WordPress創建自動屏幕截圖

此方法要求您將代碼添加到WordPress文件中。 不建議初學者使用。 如果您願意將網頁摘要粘貼到WordPress中,則可以使用此方法。

只需將此代碼添加到主題的functions.php文件或特定於站點的插件中即可。

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
 
$img = ''。  $ alt。  '';

return $img;
}
add_shortcode("screen", "wpb_screenshots");

與我們前面提到的插件類似,此代碼還使用WordPress.com mshots API即時生成屏幕截圖。

要在您的WordPress帖子和頁面中顯示網站屏幕截圖,您需要輸入以下簡短代碼:

[screen url=”http://wpnull.xyz.com” alt=”WPBeginner”]

用您自己的值替換URL和Alt字段。

默認情況下,此代碼將生成600 x 450像素的屏幕截圖。 您可以通過在短代碼中添加自己的height和width屬性來更改它。

[screen url=”http://wpnull.xyz.com” alt=”WPBeginner” w=”400″ h=”400″]

僅此而已,我們希望本文能幫助您學習如何在WordPress中創建自動網站截圖。 您可能還希望查看我們的指南,了解如何使用IFTTT自動化WordPress和社交媒體。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。