[WordPress] 外掛分享： MakeITeasy Popup

WordPress 外掛 MakeITeasy Popup 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「MakeITeasy Popup」是 2024-06-28 上架。
  • 目前有 800 個安裝啟用數。
  • 上一次更新是 2025-01-13，距離現在已有 111 天。
  • 外掛最低要求 WordPress 6.5 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
  • 有 4 人給過評分。
  • 論壇上目前有 1 個提問，問題解答率 100% ，不低，算是個很有心解決問題的開發者團隊了！

外掛協作開發者

lovor |

外掛標籤

block | modal | popup | Dialog | pop up |

內容簡介

總結：
這個 WordPress 外掛可以讓您在網站上建立用於通知用戶的彈出視窗、根據滾動或計時器啟用行銷行動，或是點擊某些元素或懸停在某些元素上。外掛具有各種功能，並且可以在需要時只在其中安裝。

問題與答案：
1. 這個外掛和其他外掛有什麼不同？
- 這個外掛感覺就像是有原生的、內建的 WP 區塊。它是自我完備的，不需要大型區塊庫的沈重負擔，您只需在需要的地方安裝即可。

2. 這個外掛的開源代碼有什麼特點？
- 這個外掛包含區塊源代碼的完全開源代碼，您可以自由地派生這個代碼並根據項目需要進行調整。它也非常符合開發者的需求，提供了可升級修改的鉤子和無意見的起始 CSS，並且有許多功能且免費。

3. 這個外掛的已知限制是什麼？
- 由於 Micromodal.js 庫的限制，無法打開多個模態彈出窗口。未來版本中計劃刪除此庫並轉換為原生對話框 HTML 元素。屆時將提供對新代碼的彈出窗口進行自動遷移。

4. 這個外掛的區塊提供哪些選項？
- 這個區塊在區塊側邊欄提供了許多選項。其中大部分與其他區塊的功能相同，但以下是一些值得強調的選項：
- 開啟時間選擇器：請參見下面的部分
- 佈局類型：漂浮在中心（如果不在中心，使用 CSS 來移動它）、固定在螢幕一側、而附加在其他元素附近的彈出窗口，例如提示框。這種類型隨著滾動而移動。
- 啟用彈出窗口：也許您想暫時隱藏彈出窗口，但保留以便稍後顯示。請禁用此切換按鈕。

原文外掛簡介

Need popups to grab your users’ attention? Marketing call-to-actions that open on scroll, timer, click, matched referer or even hover?
Multiple popups on one page? This plugin has it all. It provides styling consistent with core block editor blocks plus additional features.
Why choose Makeiteasy Popup?
▶️ Unlike some other plugins, Makeiteasy Popup integrates seamlessly with WordPress,
feeling like a native, built-in WP block. It’s lightweight and self-sufficient,
without the heavy burden of a large blocks library.
It relies on a single tiny dependency – micromodal.js – with a combined total of only 10 kB of JavaScript❕
👆 Try demo – there is a “Live preview” button on the top of this page 👆
❗ Sometimes “Live preview” does not start due to slower responds of servers with resources. If progress stops with black screen or
progress indicator does not advance anymore (loading should be finished at max 30 seconds) – in that case please refresh the page in browser.
Key Features

🥇 Feature-Rich and free.
🥈 Fully Open Source: Including the block source code. Fork and adjust as needed.
🥉 Developer friendly: Hooks for modifications and unopinionated starting CSS.
⏲️ Future-Proof Compatibility: Guaranteed compatibility with future WordPress versions.

🆕✨ Improved handling of long content in popups. Mobile sizing is improved as well.
⚠️ This is the last version which will support WordPress 6.5 and below. I am switching to newer development environment which is WP6.6+ compatible.
Please open ticket in support section if that’s a problem.
🆕 Added roadmap section in development tab
⏱️❗Queue if another popup is opened, popup is placed in queue and opened upon closing the former.
Known limitations
Currently, opening several modal popups simultaneously is impossible due to the limitations of the Micromodal.js library.
Future versions will replace this library with the native Dialog HTML element, including automatic migration for existing popups.
Block options
The block sidebar provides many options, most of which function similarly to other blocks. Notable options include:
– Opening time selector: See the detailed section below.
– Layout type: Floating, Fixed, Attached
– Popup Enabled: Temporarily hide the popup without deleting it.
– Open on interval: Open on given interval in days.
– Open on matching referer: Open if the user’s referral URL matches.
Layout Types

Floating: popup floats above content. Clicking on area outside popup closes it.
Fixed: popup is “fixed” to one of sides of screen — top, bottom, right, left
Attached: popup is attached to element on screen. When user scrolls, it moves with it.

Modality

Modal: popup blocks everything else on screen, scrolling is not possible, popup can be closed by clicking outside of popup
Modeless: popup is non-blocking, user can scroll, popup can’t be closed by clicking outside of popup

Developers
Github repository
https://github.com/Lovor01/makeiteasy-popup
Changing the Close button
Using Javascript:
import { ReactComponent as CloseIcon } from '../assets/close-x.svg';
addFilter( 'makeiteasy-closeButtonIcon', 'makeiteasy/makeiteasy-popup/close-icon', () => () );

If you customize button this way and you already have posts(or pages) with popup block,
on post reopening the message “This block contains unexpected or invalid content.” will be presented.
In such case choose “Attempt to repair block” and if it looks good, save post.
Using PHP:
add_action( 'render_block_makeiteasy/popup', function($content) {
$svg = file_get_contents( __DIR__ . '/path_to_file/close-button-dark.svg' );
return preg_replace(
'~().*()~m',
"$1$svg$2",
$content
);
} );

Attaching Code to Modal Events
Custom events ‘makeiteasy/openModal’ and ‘makeiteasy/closeModal’ are fired on modal open and close. Events fire on modal itself, DOM element
with class .wp-block-makeiteasy-popup.

各版本下載點

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

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

1.0.0 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.1.5 | 1.2.0 | 1.3.0 | trunk |

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

  • Popup Builder – Create highly converting, mobile friendly marketing popups. 》updating the integration with other WordPress plugins to ensure seamless usage with your website., DATA ANALYTICS, Popup Builder provides detailed ...。
  • Popup Box – Create Countdown, Coupon, Video, Contact Form Popups 》WordPress 彈出視窗外掛, , WordPress 彈出視窗外掛價格, 免費版彈出視窗外掛DEMO, 專業版彈出視窗外掛DEMO, 專業版彈出視窗外掛使用手冊, , 此短片提供如何...。
  • Boxzilla 》WordPress 的 Boxzilla, Boxzilla 是一個外掛，允許您向 WordPress 網站添加彈出框或滑入框。框可以在任何時刻滑入或淡入並且可以包含您喜歡的任何內容。, Bo...。
  • Responsive Lightbox 》Responsive Lightbox WordPress外掛可在網頁上為圖片、HTML內容和媒體添加Lightbox功能。, 現場演示。, 此外掛的功能, , 響應式。, 輕量級。, 可選擇自動為圖...。
  • Popup by Supsystic 》Popup外掛由Supsystic開發，搭配強大的Popup Builder，幫助你獲得電子報訂閱者、宣傳新產品、推出特價優惠並吸引更多社交媒體關注者。, 使用Popup Builder輕...。
  • Pop-up 》在您的免費測試網站上試用此外掛：按此 => https://tastewp.com/plugins/pop-up-pop-up., (這個技巧可用於 WordPress 外掛儲存庫中的所有外掛 - 只需在網...。
  • Plum: Spin Wheel & Email Pop-up 》感謝您對我們外掛的關注。Qodeblock 是我們的專家開發的，旨在改善您的網站的 WordPress 網站設計和用戶體驗。這個外掛允許您使用易於使用的區塊來擴展 WordP...。
  • Homepage Pop-up 》在首頁上添加一個簡單的 jQuery 彈出框。在首頁顯示標題和重要資訊，避免被任何廣告封鎖擋住。, 經過測試, , Chrome (PC, MAC)、Firefox (PC, MAC)、Safari (...。
  • YITH WooCommerce Popup 》插件YITH WooCommerce Popup可以讓您使用跳出視窗來吸引用戶注意：它直接且可定制化，您可以使用這款插件來最好地實現您的目標。, 您可以在需要的每個頁面上...。
  • Scroll Triggered Boxes 》Scroll Triggered Boxes, Scroll Triggered Boxes 是一個輕量級的外掛，可將靈活的呼籲至 WordPress 網站上。Box 可以在任何時間滑動或淡入，並可以包含您喜...。
  • WP Modal Popup with Cookie Integration 》如果您想要顯示類似首次訪問者的燈箱彈出窗口，並且可以輕鬆地樣式化並集成cookie，那麼這個外掛就是為您而設的。創建和管理強大的推廣彈出窗口，幫助您抓住...。
  • Uji Popup 》Uji Popup 是一款 WordPress 彈出窗口外掛，可讓您將您網站/部落格的訪客轉變為採取行動，無論是廣告、訂閱電子報、提供折扣或優惠券。彈出訊息會在訪客打開...。
  • Exit Notifier 》某些產業的規範建議在某人離開您的網站時顯示一個通知。我搜尋了一下外掛，但找不到，因此在這裡為您介紹！, 功能：, * 可在很少或無需設定的情況下運作。, *...。
  • Scroll Triggered Box 》查看你的網站最新 WordPress 外掛優惠。, 如果要說有什麼東西可以被稱為增進人們行動力的「銀彈」，那麼那就是它！「Scroll Triggered Box」能夠一貫多次地提...。
  • VenoBox Lightbox 》這個外掛可在連結中添加 VenoBox Responsive Lightbox，顯示 YouTube 和 Vimeo 影片、圖片、圖庫、iframe、Google 地圖或其他內嵌內容，以反應靈活的燈箱模式...。

文章
Filter
Apply Filters
Close
Mastodon