外掛說明
使用 [browser-shot] 短代碼便能自動完成擷取網站螢幕擷圖的程序。如果使用的是 TinyMCE 編輯器 (傳統編輯器)，會在編輯器工具列上顯示對應圖示按鈕，簡化使用短代碼建立螢幕擷圖的程序。
這個外掛使用 WordPress.com 提供的 mshots 自動擷取網站螢幕截圖功能，但這個功能僅供非商業用途免費使用。
圖片會儲存在 WordPress.com 的伺服器，而不會儲存在網站上。這些圖片會在快取約 24 小時候重新產生。
短代碼使用範例
// basic shot 600px wide
[browser-shot url="https://link-to-website" width="600"]
// shot with link to other website
[browser-shot url="https://link-to-website" width="700" link="https://www.binarymoon.co.uk/"]
// shot with caption (uses default WordPress caption styles)
[browser-shot url="https://link-to-website" width="700"]Add Caption[/browser-shot]
可用參數
url(必要參數)：擷取螢幕擷圖的目標網址。width：螢幕擷圖圖片寬度。height：螢幕擷圖圖片高度。alt：螢幕擷圖圖片替代文字。link：螢幕擷圖圖片連結。如不設定這項參數，螢幕擷圖圖片會連結至擷取螢幕擷圖的網站網址。target：連結開啟方式。設定為_blank便會在新視窗開啟連結。class：為 browsershots 新增包裝函式類別。image_class：將 browsershots 圖片類別從預設的 alignnone 變更為自選類別。display_link：參數值為true或false，預設值為 true，用於在螢幕擷圖中顯示連結。post_links：參數值為true或false，預設值為 false，用於將螢幕擷圖連結至文章的永久連結。
使用程式碼產生螢幕擷圖
使用外掛提供的 BrowserShots::get_shot 方法，便可以在佈景主題中使用這個外掛建立網站螢幕擷圖。
程式碼片段範例：
<img src="<?php echo BrowserShots::get_shot( 'https://prothemedesign.com', 600, 450 ); ?>" />
請注意，如果要達成這個目的，必須安裝外掛並完成啟用。
get_shot 方法有 3 個參數：
urlwidthheight
短代碼的其他參數，可以在外掛輸出 HTML 程式碼時手動輸入。
多站網路相容性
Browser Shots 與 WordPress 多站網路相容，請使用 [於多站網路中啟用] 功能為全部網站啟用外掛的短代碼。如果僅需要為特定的網站啟用外掛短代碼，請在個別網站啟用外掛。
相關資訊
- 如需取得外掛程式碼，可以前往 GitHub 存放庫取得。
- 如果有任何使用上的問題，請前往 Twitter 詢問。
螢幕擷圖
適用於區塊編輯器
這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。
- Browser Shots
安裝方式
- 在 WordPress 管理後台的 [外掛] 頁面自動安裝，或下載外掛安裝套件並解壓縮檔案，將解壓縮所得的
browser-shots資料夾及其全部檔案上傳至/wp-content/plugins/目錄。 - 在 WordPress 管理後台的 [外掛] 選單中啟用外掛。
常見問題集
-
Browser Shots 的運作方式
-
Browser Shots 呼叫 WordPress.com 使用的 MShots 功能開發而成，並且遵守 Matt Mullenweg 回覆的使用授權。
-
Browser Screenshots 是免費外掛嗎？
-
可以，但這個由 Automattic 提供的服務隨時有可能發生變更。
-
必須重新整理頁面才會顯示圖片的原因
-
圖片由外部伺服器產生，並且需要一點時間才能完成。在無法預知圖片是否產生的狀況下，便會先顯示一個代表「載入」的圖片。
使用者選取這個外掛提供的區塊後，會在區塊工具列顯示 [重新整理] 按鈕，如需重新整理圖片，點擊 [重新整理] 按鈕即可。如果是顯示在網站前端的圖片，重新整理頁面是唯一可行的操作。
-
這些圖片會儲存在網站的伺服器上嗎？
-
不會，圖片均由第三方產生並儲存於他們的伺服器上，並且由他們掌控圖片。
-
可以查看 MShots 的程式碼嗎？
-
可以，請前往 MShots 的 GitHub 存放庫查看程式碼。請注意，這是 Automattic 的專案，即使使用者可以查看程式碼並回報程式碼錯誤，但他們不一定會回覆技術支援問題。如果使用者具備相關技術背景，可以自行分支這個存放庫並開發自有版本。
使用者評論
2023 年 6 月 13 日
1 則留言
Are there plans to replace the mshots api or at least provide alternative?
Keep up the good work, your plugin saves a ton of time.
2022 年 7 月 20 日
Works just fine and have not had a single issue.
Hope development continues, not a better screenshots plugin in the repository.
Thanks to the dev for releasing to us!
2022 年 6 月 12 日
1 則留言
Thank you! 🙂
2021 年 1 月 27 日
Great plugin. Thanks
2021 年 1 月 27 日
Awesome plugin, ideal for automatic websites. Using the php manual implementation combined with custom fields is amazing and saves a ton of time.
2020 年 8 月 3 日
1 則留言
yep, recommneded
參與者及開發者
變更記錄
1.7.7 – 22nd November 2021
- Fix broken images (the image url moved – thanks @idanka for finding the fix).
- Small tweaks and improvements to the UX
- Update scripts and packages to the latest version.
1.7.6 – 18th June 2021
- Fix possible XSS vulnerability as reported by WPScan.
1.7.5 – 27th January 2021
- Fix variable comparison that could cause errors in some situations.
- Add missing text domain for translations.
1.7.4 – 15th July 2019
- Add a $shortcode parameter to the shortcode_atts function call so that the shortcode properties can be filtered.
- Added option to allow screenshot to link to the post’s URL.
- Make get_shots static so it can be used outside of the shortcode/ gutenberg block.
1.7.3 – 12th June 2019
- Add PERMALINK as a link property. If you set the link url to PERMALINK then the url will point to the currrent page or post.
- Improve the default alt text. Previously it would display the url for the screenshot, but this could be messy, and is not actually useful. Now displays “Screenshot from domain-name”.
1.7.2 – 11th June 2019
- Ensuring display_link is a boolean in the shortcode.
- Code formatting and cleanup.
1.7.1 – 11th June 2019
- Add a new parameter display_link that allows you to disable the link around the screenshot. Defaults to true. Set to false to remove the link.
- Add some placeholder text to the input fields to make it clearer what is expected.
- Change the rel link property to a toggle for one click changes.
1.7 – 8th June 2019
- Add Gutenberg block for including Browser Shots.
- Fix image alignment so that it works properly :).
1.6 – 30th May 2019
- Add rel property to shortcode so that links can include rel=”nofollow” or similar.
- Fix output of target attribute.
- Tidy codes.
1.5.2 – 7th January 2017
- Improve output html to reduce likelihood of html being modified by a plugin
- Swap urlencode for rawurlencode
- Switch to yoda conditions
1.5.1
- add two new class properties. One for the container, one for the image
- lots of code tidying, and refactoring. Simpler, faster, and more secure
- new tinymce icon that fits the style of the editor much better 🙂
1.5
- update localisation strings so that things can be translated more easily
1.4
- Update the website screen capture path. This ensures the code will work properly on secure domains
- Add some additional value escaping for extra security
1.3.2
- Fix a couple of small javascript bugs (thanks again to Ciprian Dracea)
1.3.1
- Fix a couple of small bugs with the visual editor and add support for all shortcode parameters
1.3
- Make the visual editor work again (thanks to Ciprian Dracea for the report and the code help!)
- add a new pop up box for the shortcode properties in visual editor mode
1.2
- Add ‘link’ attribute. Allows you to change the url that the screenshot links to
- Sanitize the height attribute and fix a small height related PHP error
- Add support for captions
- Add target attribute for opening links in new windows
1.1
- Add ‘height’ attribute to the TinyMCE prompts
- Allow users to override ‘height’ attribute in [browser-shot] shortcode
1.0
- Initial public release to the WordPress plugin repository