SWELLの制限エリアブロック|期間限定表示や閲覧制限を簡単に設定できる!

WordPressテーマ『SWELL』のカスタムブロック「制限エリアブロック」について紹介します。

特定の期間だけブロックを表示したり、ログインしているユーザーだけにブロックが表示されるような設定ができます。

さとしん

期間限定キャンペーンの表示などに大活躍…!

ブログだけでなく、コーポレートサイトなどでも重宝する機能のブロックです。

工夫次第でいろいろな使い方ができるブロックなのでぜひ活用してみてください。

SWELLのブロックエディターの機能や使い方は以下の記事にまとめました。

目次

SWELLの制限エリアブロックでできること

制限エリアブロックは、2021/9/11リリースのVer2.5.1で追加されたSWELLオリジナルのブロックです。

Ver2.5.1アップデートでは、制限エリアブロック以外にも便利機能が複数追加されました。
ぜひ上記アップデート情報を覗いてみてください。

制限エリアブロックは以下のような指定をすることができます。

  • ブロックを表示する期間の指定
  • ユーザーごとにブロックの表示/非表示の切り替え

制限エリアブロックの中に、他のブロックを配置するようにして使用します。

制限エリアブロックに対していろいろな制限や指定をかけることで、制限エリアブロック内のブロック全体の表示条件を柔軟に設定することができます。

ブロックの表示期間を指定できる!

まず、制限エリアブロックに対して、表示期間を指定することができます。

例えば、以下のようなイメージです。

2021/9/4の20:00から2021/9/11の01:59の間だけブロックを表示する。

さとしん

この例は2021年9月の楽天スーパーセールの期間です…!

このように期間限定セールなどと絡めて、セール期間だけブロックを表示させることができます。

手動で期間限定セールの情報を追記したものの、セール期間が終了した後も削除し忘れてずっと古いセール情報が表示されている記事をたまに見かけます。

このような作業漏れをなくすことができるので、とても便利な機能です。

非ログインユーザーにはブロックを非表示にできる!

それから、ブロックを表示するユーザーを制限することができます。

本来は、ここの行の上に以下画像のような文章を挿入していますが、みなさんには見えていないと思います。

制限エリアブロックのログイン状態での制限例

このように、編集画面には表示されているけど、読者が実際に見るページでは表示させない。という設定ができます。

大きくは以下の2つの制限を指定できます。

  1. 非ログインユーザー
  2. ログインユーザー

このログインというのはWordPressへのログインです。

また、WordPressのユーザー権限でも制限をかけることができます。

  • 管理者
  • 編集者
  • 投稿者
  • 寄稿者
  • 購読者

個人ブロガーであれば、管理者権限しか使っていないケースが多いと思います。

一方で、複数人で管理しているサイトや、ライターさんに寄稿してもらっているサイト、制作案件でクライアントに管理者権限以外を渡す場合などに重宝する設定だと感じています。

制限エリアブロックの使い方

制限エリアブロックの使い方を紹介します。

以下手順でリッチカラムブロックを設置、設定していきます。

STEP
メインコンテンツエリアで+ボタンをクリック
制限エリアブロックの使い方-1
STEP
制限エリアを探してクリック
制限エリアブロックの使い方-1
STEP
制限エリアブロックの中に自由にブロックを配置する
制限エリアブロックの使い方-2
STEP
サイドバーからログイン制限を設定する

詳細は「ログイン状態で制限する」参照

制限エリアブロックの使い方-3
STEP
サイドバーから表示期間を設定する

詳細は「表示期間を制限する」参照

制限エリアブロックの使い方-4

基本的な使い方は以上です。

ちなみに、ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

制限エリアブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /restrict-area
  • /制限エリア
さとしん

覚えておくと便利です…!

表示ユーザーの設定と、表示期間の設定について更に説明していきます。

ログイン状態で制限する

表示制限の設定は、ブロックを選択した状態でサイドバーから設定できます。

「制限設定」→「ログイン状態で制限する」をクリック

制限エリアブロックの使い方-3

ログインしている人だけに表示される様にしたい場合は、「ログインユーザー」をクリックしましょう。

「ログインユーザー」をクリックすると、WordPressのユーザー権限のリストが表示されます。

制限エリアブロックの使い方-6

ここから、表示させたい権限のみクリックしていきます。

さとしん

このようにクリック操作だけで表示制限の設定ができます…!

表示期間を制限する

表示期間の設定も、ブロックを選択した状態でサイドバーから設定できます。

「制限設定」→「表示期間を制限する」をクリック

制限エリアブロックの使い方-4

こちらは単純に、開始日時と終了日時を設定するだけでOKです。

開始の日にちをカレンダーから選択して、時間を入力しましょう。

制限エリアブロックの使い方-7

その後、終了日時の方も同様に設定するだけです。

制限エリアブロックの使い方-8
さとしん

とっても簡単に期間指定ができますね…!

表示期間はWordPress管理画面で設定したタイムゾーンの時刻が基準になります。正しく設定しておきましょう。

ちなみに、WordPress管理画面→「設定」→「一般」の『時刻形式』の設定に合わせて、サイドバーの表示も変わります。

WordPressの時刻設定画面

この記事でも、先に表示した画像は20:00~01:59の表示ですが、この後表示する画像は、8:00 PM~1:59 AMとあえて変えています。

さとしん

使いやすい方を設定しておくと良いかもしれませんね…!

制限エリアブロックの実際の使用例を考えてみた!

ここまでは制限エリアブロックの説明と使い方を紹介してきました。

どのような場面で使うかイメージが湧かない方もいるかもしれないので、実際に使えそうな例を何個か考えてみました。

とりあえず3個、用途ごとに例を挙げます。

  1. ブロガーさん向け
  2. コーポレートサイト向け
  3. 全SWELLユーザーさん向け

ブログパーツ機能や再利用ブロックと組み合わせると、複数記事の制限エリアブロックも一括管理できて良いかもしれませんね。

ブロガーさん向け

Amazonや楽天などのセール時に、セール中限定の文章を期間指定して表示させるのも効果がありそうです。

Pochipp Proなどの商品リンク管理プラグインとも相性が良いのでおすすめです。

文章などは適当ですが、簡単に作ってみました。

投稿画面

制限エリアブロックとポチップの組み合わせ-1

読者が見る画面

制限エリアブロックとポチップの組み合わせ-2

以下のイメージです。

楽天スーパーセールのお知らせをセール期間中だけ表示するように制限エリアブロックで作っています。

さらに「5と0の付く日」のお知らせも、もう1つ制限エリアブロックを使って対象日だけ表示させる設定にしています。

これにポチップのセール情報の表示機能を組み合わせています。

さとしん

この2つを組み合わせるとセール時の成約率もあがりそう…!

コーポレートサイト向け

例えば、1月1日の0時から新年の挨拶などを期間指定して表示するのも面白いかもしれません。

年末年始の休暇中にわざわざ担当者が新年の挨拶を書いて記事を更新する必要がなくなります。

表示期間を設定して事前に制限エリアブロックを使ってコンテンツを準備しておけば、年が明けたと同時に自動でそのコンテンツが表示されます。

さとしん

お仕事を休めるときはしっかり休みましょう…!笑

全SWELLユーザーさん向け

今後、記事に追加したい内容があるけど、まだ内容が不十分で公開できないというケースもあると思います。

そんな時に、とりあえず書ける分だけ事前に書いておいて、ログインユーザーにだけ表示する設定にしておけば、読者に見られることはありません。

さとしん

工夫次第でいろいろな活用方法がありそうですね…!

制限エリアブロックは使い道がたくさん!

今回は、SWELLのVer 2.5.1で新たに追加された「制限エリアブロック」についてご紹介しました。

ブロックの表示、非表示を以下のような条件で簡単に設定することができます。

  • ブロックを表示する期間の指定
  • WordPressのユーザー権限ごと

期間限定セールの情報を、対象のセールが実施されている期間中だけ表示することも簡単になります。

任意のコンテンツをWordPressにログインしている人だけに表示させることも簡単にできます。

ユーザーさんの工夫次第でたくさんの使い方ができるとても便利なブロックです。

ぜひ、制限エリアブロックをうまく活用して素敵なサイトを運営していきましょう。

最後まで読んでいただきありがとうございました。


はこちらからどうぞ…!

SWELLのブロックエディターの紹介記事はこちら

SWELLのレビュー記事はこちら

SWELLでトップページをカスタマイズする方法はこちら

SWELLの設定や使い方で困った時はこちら

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる