ブロックを時間や画面サイズなどの条件で表示などができるプラグイン[Block Visibility]

WordPress

Block Visibilityは時間やサイズなどで表示させたり、非表示にさせたり出来る優れたプラグインです。
例えばですがイベント期間中のみに表示させたいアンケートフォームを作ったり、PCとスマホではでは別の画像を表示させたかったりした時などで役立つかと思います。

プラグインのインストールと有効化

プラグイン > 新規追加から「Block Visibility」を検索し、インストール後に有効化をクリック

プラグインの設定は特にすることはありません。
記事投稿や固定ページで使用しましょう!

Block Visibilityの使い方

各ブロックを追加すると、ブロックメニューに「Block Visibility」が追加されています。

Hide block

クリックすると編集画面では表示されますが、プレビューや公開後の画面ではブロックが非表示になります。

Date & Time

Show the block if at least one schedule applies.(少なくとも 1 つのスケジュールが適用される場合、ブロックを表示します。)
Start showing(開始日時)
Stop showing(終了日時)

例えばですが、下記の用意Start showingに開始したい日時を設定し、Stop showingに終了させたい日時を設定すると、その期間中だけブロックが表示されるようになります。

例)
Start showing(開始日時) 2022年8月10日 午前11時25分
Stop showing(終了日時) 2022年8月10日 午前11時30分
設定している5分間だけ表示されうようになります。

これは素晴らしい機能ですね!
期間限定のアンケートや問い合わせフォームなどの設置が簡単に出来てしまいます!

その他の機能としましては
Hide when schedules apply(スケジュールが適用されるときに非表示)をチェックした状態ですとスケジュール部分の項目が書き換わり

Stop showing(非表示)2022年8月10日 午前11時30分
Resume showing(表示を再開)2022年8月10日 午前11時35分
と設定すると、2022年8月10日 午前11時35分になるとブロックが表示されるようなります。

画面サイズに応じての表示/非表示

Date & Time同様に設定することでPC、タブレット、スマホでそれぞれの表示/非表示の設定をすることが出来ます。

Screen Sizeから選択します。また複数選択することも可能です。

Hide on desktop横幅992px以上の画面では非表示
Hide on tablet横幅768px以上、991px以下の画面では非表示
Hide on mobile横幅767px以下の画面では非表示

試しにですが、スマホサイズの時にだけ表示させたい場合はHide on desktopHide on tabletを選択するとOKです。

その他

その他にもユーザーを条件にブロックの表示/非表示を設定することも出来ますが、私個人的には利用していないので今記事では省かせて頂いております。

まとめ

Block Visibilityはスケジュールや表示サイズ、またユーザーなどを条件にブロックを表示/非表示することが出来る便利なプラグインです。
複数選択してブロックの表示を設定することも出来ますので、シーンに合わせて利用してみては如何でしょうか?

また、プロ(有料)版では更に細かい設定やWooCommerceの条件付きブロックでの利用も出来るようですので興味のある方は下記URLのサイトを御覧ください。

プロ機能抜粋

  • Visibility Presets allow you to control multiple blocks at once.
  • Show or hide blocks based on their location and “attributes” of their location (i.e. post type, taxonomy, archive etc.)
  • Advanced day-of-week and time-of-day controls, which include recursion functionality.
  • Display blocks based on the referral source (domain/URL) of a website visitor.
  • Support for all post and user metadata (custom fields).
  • Display blocks based on HTML cookies.
  • WooCommerce conditional block logic for shopping cart contents, product details, customer metrics and more.
  • Easy Digital Downloads conditional block logic for shopping cart contents, customer metrics and more.
  • eCommerce rules for when a customer placed their first/last order, or when specific products were purchased.
  • Access to premium email support.
  • More conditions coming soon…
タイトルとURLをコピーしました