WordPress ポップアッププラグインで、スマホメニューがオーバーレイ表示できない

原因は不明ですが、ポップアッププラグインを使ってポップアップを表示させようとすると、スマホ時のメニューアイコンクリックでメニューをオーバーレイで表示できず(プラグインなしで実装)、苦戦しました。3つのプラグインを試した結果、ついにスマホメニューが開けるようになりましたので、試したプラグインをご紹介させていただきます。

試したプラグイン

フォーム入力やクリックで開くポップアップ等ではなく、目的はサイトを開いた時に最初に表示させるためだけだったため、難易度が低く、かつ高評価のものを選定し、下記を試しました。

  • Popup Maker
  • Boxzilla
  • WP Popups – WordPress Popup builder(WP Popups Lite)

各プラグインを比較

インストール数と評価は2021年7月現在のものです。
なお、使用のWordPress のバージョンは5.7.2です。下記は全て互換性があるものです。

特徴プラグイン以外のオーバーレイブロックエディタ評価インストール数
Popup Maker既に存在している要素全てに、aria-hidden属性が付く。開かない利用可能4.9600,000+
Boxzilla開かない利用不可4.830,000+
WP Popups – WordPress Popup builder
(WP Popups Lite)
編集画面の横で、プレビューが確認できる。
テスト表示可能。
開く利用不可4.9 20,000+
popup-toaster
昨今のポップアップトースターも、機能が豊富でデザイン性も高く、選択に迷います。

採用したプラグイン

本命だったのは

Popup Makerはブロックエディターも利用でき、インストール数も多かったので第一希望でした。
特徴欄に記載しているように、自動で要素に付与されるaria-hidden属性がSPメニューをオーバーレイ表示できないのが原因なのかと思い、未表示の要素(SPメニュー)に、aria-hidden属性をjQueryで与えてみましたが、結果は変わりませんでした。

後になって思いつきましたが、SPメニューもPopup Makeプラグインを利用して、クリックでポップアップ表示ということもできたかもしれません。それはそれで、WordPress 管理画面のメニューを入れたウィジェットを利用できるか等、課題はありそうです。試していませんが、機会があれば。

採用結果は

結局、3つ目のWP Popups Liteを採用しました。
はじめは、Popups – WordPress Popupをインストールしましたが、WordPress の検証済みバージョンは5.3.8までです。
そのため新しい後継のプラグインをインストールするように促されてインストールしたのが、WP Popups Liteです。(すみません、ここのところの詳しい経緯は控えていませんでしたが、難しい内容ではなかったです。)確かに、作者は同じ「timersys」となっています。
検索すると、WP Popups – WordPress Popup builderが出てきます。

こちらのインストール数は他と比べて少なく見えますが、前代のPopups – WordPress Popupのインストール数は
50,000+、で評価は4.7です。

不安をよそに、使い勝手もよく(本命より設定項目も少なくて簡単)今では十分満足しています。
ブロックエディタは利用できませんが、HTMLでコードが書けるのならば、特に困ることはないと思います。

ご参考までに、他にもWordPressのプラグインを比較した記事も投稿しています。

目次プラグイン(ETOCとRTOC)比較

タイトルとURLをコピーしました