[WordPress] 外掛分享： Image Hotspots Field for ACF

前言介紹

  • 這款 WordPress 外掛「Image Hotspots Field for ACF」是 2025-12-04 上架。
  • 目前有 20 個安裝啟用數。
  • 上一次更新是 2025-12-05，距離現在已有 83 天。
  • 外掛最低要求 WordPress 5.8 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.2 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

levelsdev |

外掛標籤

acf | hotspots | coordinates | image mapping | advanced custom fields |

內容簡介

**外掛簡介：**
此外掛新增了一個自定義的ACF欄位類型，允許用戶點擊圖像並捕獲X/Y座標。非常適合創建互動式圖像地圖、產品熱點或任何需要精確基於座標定位的功能。這是原創ACF圖像熱點欄位的一個衍生版本，具有對Gutenberg編輯器中ACF塊的完整支持。

**問題與答案：**

1. 這個外掛的主要功能是什麼？
- 答：允許用戶點擊圖像並捕獲精確的X/Y座標，適用於創建互動式圖像地圖、產品熱點或其他需要精確座標定位的特定功能。

2. 這個外掛有哪些關鍵功能？
- 答：支持像素和百分比坐標、與現有ACF圖像欄位相關聯、可視標記器顯示所選位置、在常規ACF欄位組和ACF塊中運行、全面兼容Gutenberg塊編輯器、與ACF 5.8+兼容。

3. 這個衍生版本有什麼新功能？
- 答：支援Gutenberg塊、修復事件捕獲問題、優化DOM搜索、改進視覺可見性、自動刷新塊預覽。

4. 這個外掛如何使用？
- 答：安裝並啟用外掛後，創建名為"Image Mapping"的自定義ACF欄位，進入欄位設置，在現有ACF圖像欄位的名稱中進行關聯，向關聯欄位添加圖像，點擊熱點欄位中的圖像捕獲座標。

5. 這個外掛兼容性如何？
- 答：兼容ACF 5.8+、WordPress 5.8+、Gutenberg塊編輯器、傳統編輯器、PHP 7.2+。

原文外掛簡介

This plugin adds a custom ACF field type that allows users to click on an image and capture X/Y coordinates. Perfect for creating interactive image maps, product hotspots, or any feature requiring precise coordinate-based positioning.
This is a fork of the original ACF Image Hotspots Field by Andrew Rockwell, enhanced with full support for ACF blocks in the Gutenberg editor.
Key Features

Click on an image to capture precise X/Y coordinates
Supports both pixel-based and percentage-based coordinates
Links to existing ACF image fields
Visual marker shows the selected position
Works in regular ACF field groups AND ACF blocks
NEW: Full Gutenberg block editor compatibility
Compatible with ACF 5.8+

What’s New in This Fork
This fork adds critical improvements for modern WordPress development:

Gutenberg Block Support: Works seamlessly in ACF blocks within the Gutenberg editor
Event Capture Fix: Solves the issue where Gutenberg intercepts click events
Improved DOM Search: Enhanced field discovery in complex block structures
Enhanced Visibility: Fixed z-index and marker visibility in block contexts
Auto-Refresh: Automatically updates block previews when coordinates change

Original Plugin
Original plugin by Andrew Rockwell – Thank you for creating this excellent field type!
This fork maintains 100% backwards compatibility with the original while adding modern editor support.
How to Use

Install and activate the plugin
Create a custom ACF field of type “Image Mapping”
In field settings, enter the name of an existing ACF image field to link to
Add an image to the linked field
Click on the image in the hotspot field to capture coordinates
Coordinates are stored as comma-separated strings (e.g., “150px,200px” or “45.5%,60.2%”)

Works in both ACF field groups and ACF blocks!
Compatibility
This ACF field type is compatible with:

ACF 5.8+
WordPress 5.8+
Gutenberg block editor
Classic editor
PHP 7.2+

Credits
Original Plugin: Andrew Rockwell (rockwell15, eridesign)
Gutenberg Fork: Levels Branding and Development
Thank you to Andrew Rockwell for creating the original plugin!
Support
For issues specific to this plugin:
* GitLab: https://gitlab.com/levels-dev/plugins/advanced-custom-fields-image-hotspots-field-fork
For general ACF questions:
* ACF Documentation: https://www.advancedcustomfields.com/resources/
Other Plugins by Levels
Check out our other WordPress plugins:

Ready-Made Oxygen Integration – Seamless integration for Oxygen Builder with pre-built components and utilities

Visit levels.dev/plugins for more tools and resources.
Technical Details
This fork includes a sophisticated event capture system that intercepts mouse events before Gutenberg’s React event system can prevent them. The plugin uses native JavaScript addEventListener with capture phase to ensure reliable coordinate capture in all contexts.
For detailed technical information, see the GUTENBERG_FIX.md file in the plugin directory.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Image Hotspots Field for ACF」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

0.2 | trunk |

延伸相關外掛（你可能也想知道）

  • Advanced Custom Fields (ACF®) 》Advanced Custom Fields 可以讓 WordPress 網站成為一個完整的內容管理系統，提供您所有工具以更好管理您的數據。, 使用 Advanced Custom Fields 外掛，完全...。
  • Advanced Custom Fields: Font Awesome Field 》在 Advanced Custom Fields 中添加一個< a href="http://fontawesome.io/" rel="nofollow ugc">Font Awesome 圖標字段類型。, , 指定要使用哪些 Font Awesome...。
  • Advanced Custom Fields: Extended 》🚀 全方位增強套件，可改進WordPress和Advanced Custom Fields。此外掛旨在提供一個強大的管理框架，涵蓋了眾多改進和優化。, 此外掛需要至少 ACF Pro 5.8。,...。
  • ACF Content Analysis for Yoast SEO 》此外掛確保 Yoast SEO 分析包括所有 ACF 內容，包括彈性內容和重複器。, Yoast SEO for WordPress 內容和 SEO 分析不會考慮一篇文章的Advanced Custom Fields...。
  • ACF Photo Gallery Field 》t; 'Status', , 'name' => 'status', , 'choices' => array(, 'public' => 'Public', , 'private' => ...。
  • Table Field Add-on for ACF and SCF 》表格欄位外掛程式增強了Advanced Custom Fields外掛程式的功能，讓表格編輯更易於使用。, 此外掛程式需要Advanced Custom Fields外掛程式或專業版！, 表格欄...。
  • Really Simple CSV Importer 》替代 CSV 導入外掛程式。簡單而強大，最適合於技術狂熱者。, , 類別支援, 標籤支援, 自訂欄位支援, Smart Custom Fields 支援, Custom Field Suite 支援, Adv...。
  • ACF to REST API 》此 WordPress 外掛在WordPress REST API中提供了Advanced Custom Fields的端點, 詳細資訊請參閱GitHub：https://github.com/airesvsg/acf-to-rest-api/。
  • ACF Quick Edit Fields 》這個 WordPress 外掛為 Advanced Custom Fields Plugin（Pro 和 Free 5+）增加了快速編輯功能。, 特色, , 在清單檢視中顯示 ACF 欄位值, 支援的 ACF 欄位類型...。
  • Advanced Custom Fields: Gravity Forms Add-on 》提供進階自訂欄位 (Advanced Custom Field)，讓 WordPress 編輯使用者或管理員可以在欄位群組配置中選擇 Gravity Form。, 可以在 外掛的 GitHub 存儲庫 中找...。
  • Advanced Custom Fields: Image Aspect Ratio Crop Field 》這是一個進階自訂欄位 (Advanced Custom Fields) 的外掛，會在使用者上傳圖片後強制執行特定的長寬比例或像素大小裁剪。使用長寬比例對於回應式圖片的使用情...。
  • ACF Theme Code for Advanced Custom Fields 》ACF Theme Code 外掛可以自動生成在主題中實現 Advanced Custom Fields 所需的程式碼。以下是該外掛的功能特色：, , - 縮短網站開發時間。, - 當您發布、編輯...。
  • ACF Options For Polylang 》您使用了高級自訂欄位來建立選項頁面，並且安裝了 Polylang 外掛以獲得令人驚嘆的多語言網站嗎？, 可惜的是，Polylang 並不處理 ACF 的選項頁面。這意味著您...。
  • ACF Field For CF7 》此外掛為「Advanced Custom Fields」WordPress 外掛添加一個「Contact Form 7」欄位類型。, 您可以將一個或多個聯絡表單存儲在「Advanced Custom Fields」欄...。
  • WPGraphQL for ACF 》- WPGraphQL for Advanced Custom Fields 是一個免費的開源 WordPress 外掛，將 ACF Fields 和 Field Groups 添加到 WPGraphQL Schema 中。, - 創建 ACF Fiel...。

文章
Filter
Mastodon