內容簡介
**外掛簡介：**
此外掛新增了一個自定義的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.
