Title: Enable Responsive Image Author: Aki Hamano Published: 2023 年 12 月 12 日 Last modified: 2026 年 3 月 3 日 --- 搜尋外掛 ![](https://ps.w.org/enable-responsive-image/assets/banner-772x250.png?rev=3008450) ![](https://ps.w.org/enable-responsive-image/assets/icon-256x256.png?rev=3008450) # Enable Responsive Image 由 [Aki Hamano](https://profiles.wordpress.org/wildworks/) 開發 [下載](https://downloads.wordpress.org/plugin/enable-responsive-image.1.6.0.zip) [即時預覽](https://tw.wordpress.org/plugins/enable-responsive-image/?preview=1) * [詳細資料](https://tw.wordpress.org/plugins/enable-responsive-image/#description) * [使用者評論](https://tw.wordpress.org/plugins/enable-responsive-image/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/enable-responsive-image/#installation) * [開發資訊](https://tw.wordpress.org/plugins/enable-responsive-image/#developers) [技術支援](https://wordpress.org/support/plugin/enable-responsive-image/) ## 外掛說明 Enable Responsive Image 能為 [圖片] 區塊加入可以依據螢幕寬度顯示不同圖片的額外設定。 使用者可以新增多張圖片並為個別圖片設定媒體查詢及解析度。當螢幕寬度與媒體查詢設定 的條件相符時，便會切換至對應的圖片。 ### 資源 #### 螢幕擷圖中的圖片 * 使用授權：公眾領域 * 來源：https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20 ## 螢幕擷圖 * [[ * 新增至 [圖片] 區塊資訊欄的額外設定 * [[ * 依據不同螢幕寬度變更圖片的實際效果 ## 安裝方式 1. 將外掛安裝套件 ZIP 壓縮檔解壓縮所得的 `enable-responsive-image` 資料夾上傳至網站 的 `/wp-content/plugins/` 目錄。 2. 在 WordPress 管理後台的 [外掛] 選單中啟用外掛。 ## 常見問題集 ### 這個外掛如何運作？ 這個外掛會重寫 [圖片] 區塊在網站前端轉譯的 HTML 標記。使用 `picture` 元素包裝 `img` 元素，並依據新增圖片的設定，在 `picture` 元素中加入包含 `srcset` 及 `media` 屬性 的 `source` 元素。 ### 設定多張圖片來源時，這個外掛沒有正確執行。 請嘗試重新排列圖片順序。舉例來說，如果 2 張圖片都設定為使用 [媒體查詢類型] 的 [最大 寬度]，寬度較小的圖片應該排在最上方。 ### 即使在編輯器中切換螢幕寬度或裝置，卻沒有切換至設定的圖片。 在編輯器中，預設不會切換圖片。點擊區塊工具列上的 [啟用回應式圖片預覽] 便能處理這個 狀況。 ### 可以使用哪些篩選器？ 可供使用的篩選器列於 [GitHub 存放庫的 README](https://github.com/t-hamano/enable-responsive-image#filters)。 ## 使用者評論 ![](https://secure.gravatar.com/avatar/83fabe163ff5f3406b03ffa2337bc87c0ebc5c3c2cfcca2c36286a8ca9f3e4bb? s=60&d=retro&r=g) ### 󠀁[Great Plug-In. Should be added to Core](https://wordpress.org/support/topic/great-plug-in-should-be-added-to-core/)󠁿 [digberlin](https://profiles.wordpress.org/digberlin/) 2025 年 3 月 17 日 Must-have plug-in for responsive websites. ![](https://secure.gravatar.com/avatar/2892d0b180230dc82c8c8898e5b5d925837b0e51f80f8a5df52ed0d5150028b2? s=60&d=retro&r=g) ### 󠀁[Must install for website creation at work.](https://wordpress.org/support/topic/must-install-for-website-creation-at-work/)󠁿 [けい (Kei Nomura)](https://profiles.wordpress.org/mypacecreator/) 2025 年 3 月 12 日 This is exactly the plugin I wanted. Thank you. ![](https://secure.gravatar.com/avatar/a7276235fb250f091f56688568365e47d4536c5acc9b22873be5d89ded125a3e? s=60&d=retro&r=g) ### 󠀁[5 Stars](https://wordpress.org/support/topic/5-stars-594/)󠁿 [iz4atkal](https://profiles.wordpress.org/iz4atkal/) 2024 年 12 月 8 日 Very convenient! ![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80? s=60&d=retro&r=g) ### 󠀁[Very useful for professional site builds](https://wordpress.org/support/topic/very-useful-for-professional-site-builds/)󠁿 [onetrev](https://profiles.wordpress.org/onetrev/) 2024 年 7 月 26 日 Working well, just what was needed. Thanks for making this! While I understand this functionality not being the core image block, it’s essential for any kind of professional site build so thank you very much for making it! ![](https://secure.gravatar.com/avatar/62fe212021d456e5fdb54e3ee53bdd71b42a195b3e9ca74c7c0494cb96425d30? s=60&d=retro&r=g) ### 󠀁[The Plugin I Have Been Waiting For!!](https://wordpress.org/support/topic/the-plugin-i-have-been-waiting-for-2/)󠁿 [stevieboy23](https://profiles.wordpress.org/stevieboy23/) 2024 年 2 月 7 日 At last! I have waited a long time for this functionality to come to Gutenberg… As far as I know, this is the only plugin out there that will allow you to set different images for different screen sizes – all inside the block editor!! No more outside- the-editor workarounds needed to achieve this – Brilliant!!!By-the-way, this developer has created a whole “swiss army knife” range of additional plugins for Gutenberg: Flexible Spacer Block, Flexible Table Block and more. Well done, thank you, and keep up the great work, Very Best Wishes!!!! [ 閱讀全部 5 則使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Enable Responsive Image〉的開發相關工作。 參與者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) 〈Enable Responsive Image〉外掛目前已有 4 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image/contributors) 為這個外掛做出的貢獻。 [將〈Enable Responsive Image〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/enable-responsive-image/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/enable-responsive-image/)，或 透過 [RSS](https://plugins.trac.wordpress.org/log/enable-responsive-image/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/enable-responsive-image/)。 ## 變更記錄 #### 1.6.0 * Tested to WordPress 7.0 * Drop support for WordPress 6.8 * Enhancement: Polish block sidebar * Accessibility: Improve source button aria-label #### 1.5.0 * Tested to WordPress 6.9 * Enhancement: Update block toolbar icon * Drop support for WordPress 6.6 and 6.7 * Drop support for PHP 7 #### 1.4.0 * Tested to WordPress 6.8 * Enhancement: Show full srcset url * Accessibility: Respect user preference for CSS transitions * Drop support for WordPress 6.5 #### 1.3.0 * Tested to WordPress 6.7 * Drop support for WordPress 6.4 #### 1.2.0 * Tested to WordPress 6.6 #### 1.1.1 * Remove unnecessary changelog #### 1.1.0 * Tested to WordPress 6.5 * Enhancement: Polish block sidebar #### 1.0.0 * Initial release ## 中繼資料 * 版本 **1.6.0** * 最後更新 **1 個月前** * 啟用安裝數 **1,000+** * WordPress 版本需求 ** 6.9 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0** * PHP 版本需求 ** 8.0 或更新版本 ** * 語言 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/enable-responsive-image/)、 [English (US)](https://wordpress.org/plugins/enable-responsive-image/)、[Japanese](https://ja.wordpress.org/plugins/enable-responsive-image/)、 [Spanish (Chile)](https://cl.wordpress.org/plugins/enable-responsive-image/)、 及 [Spanish (Spain)](https://es.wordpress.org/plugins/enable-responsive-image/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/enable-responsive-image) * 標籤 * [block](https://tw.wordpress.org/plugins/tags/block/)[gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/) [image](https://tw.wordpress.org/plugins/tags/image/)[responsive](https://tw.wordpress.org/plugins/tags/responsive/) * [進階檢視](https://tw.wordpress.org/plugins/enable-responsive-image/advanced/) ## 評分 5 星，滿分為 5 星 * [ 5 個 5 星使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/enable-responsive-image/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/enable-responsive-image/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/enable-responsive-image/reviews/) ## 參與者 * [ Aki Hamano ](https://profiles.wordpress.org/wildworks/) * [ Toro_Unit (Hiroshi Urabe) ](https://profiles.wordpress.org/toro_unit/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/enable-responsive-image/)