Amazonで商品を見る セール会場へ

SWELL│お知らせバーを期間限定で表示する|年末年始・セールに

SWELLのお知らせバーを、決めた日時のあいだだけ自動で表示するカスタマイズです。

表示中のページでだけSWELLの設定を差し替えるスニペットを、Code Snippetsに1つ貼れば動きます。

年末年始の休業案内やセールの告知を、始まりの日に手で出して、終わりの日に手で消す作業はもういりません。

SWELLの設定でお知らせバーを「表示しない」にしていても、期間中だけ出る作りです。

期間外はカスタマイザーの設定のままなので、普段の表示は変わりません。

この記事で分かること

  • SWELLの標準機能だけでは、お知らせバーを予約表示できない理由
  • 期間限定のお知らせバーが、実際にどう見えるか(PC・スマホ・期間外)
  • 必要なものと、使える場面
  • 検証用のサイトで確かめた環境と、確かめた内容
目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

結論:表示のあいだだけSWELLの設定を差し替える

SWELLのお知らせバーは、カスタマイザーで文言・リンク・色を1組だけ決める機能です。

表示を始める日時と終わる日時を決める項目はありません。

そこで、ページを表示するあいだだけ、SWELLの設定とお知らせバーの中身を差し替える形にしました。

データベースの設定は書き換えないので、期間が終われば元の表示です。

やること使うもの
期間中かどうかを判定するサイトのタイムゾーン(設定 → 一般)
文言・リンク・ボタンを差し替えるSWELLのフィルター swell_infobar_data
「表示しない」でも出す・色を変える表示中だけ設定を上書き(保存はしない)
始まりと終わりにキャッシュを消すWordPressの予約実行(WP-Cron)

SWELLの公式マニュアルにあるお知らせバーの設定方法は、手で切り替える前提の説明です。

この記事のスニペットは、その設定を残したまま、期間中だけ上から差し替えるもの。

SWELLのフィルターの仕組みはSWELLのフック一覧と使い方で詳しく書いています。

スポンサーリンク

完成した表示

検証用のサイトで、期間の始まりを数分後にして、表示が切り替わるところを確かめました。

まずは、期間中のPCの表示から。

期間中にヘッダーの上へ年末年始休業のお知らせバーが出たPCの画面
年末年始休業の例(PC・ログアウト状態)(2026/11/02時点の表示)

ボタン付きで、ボタンの先はお問い合わせページです。

背景色・文字色・ボタンの色は、お知らせごとに変えられます。

スマホ幅でセールのお知らせバーとボタンが2行で表示された画面
セールの例(スマホ幅390px)(2026/11/02時点の表示)

スマホでは文言が長いと2行になり、ボタンはその下に回ります。

これはSWELLのお知らせバーの標準の動きで、スニペットでは変えていません。

期間外でお知らせバーが出ていないPCの画面
期間外(SWELLの設定は「表示しない」のまま)(2026/11/02時点の表示)

期間外は、SWELLの設定どおりです。

この例ではSWELL側を「表示しない」にしているので、バーは出ない状態に戻りました。

SWELL側で普段のお知らせを出している場合は、期間外にはそのお知らせが出ます。

必要なもの

必要なもの備考
SWELL確かめたのは2.19.0。それより前の版は未確認
Code Snippets(無料)WordPress.orgのプラグイン。確かめたのは4.0.0
管理者のアカウントスニペットを追加するため
子テーマ(任意)Code Snippetsを使わず、子テーマの functions.php に書いても動く

有料のプラグインや、SWELLの子テーマの編集は要りません。

PHPを書いたことがなくても、日時と文言を書き換えるだけで使えるはずです。

Code Snippetsを入れていないなら、SWELLと相性の良いプラグインもあわせて見てください。

使える場面

場面表示の例期間の決め方
年末年始・夏季休業休業日と、返信が再開する日休業の数日前から、営業再開の朝まで
セール・キャンペーン割引の内容と締め切り、会場へのボタンセールの開始から終了まで(終わりの時刻ぴったりに消す)
臨時休業・メンテナンス予告止まる日時と影響告知を始める日から、作業が終わるまで
受付の締め切り申し込みの締め切り日時締め切りの時刻に消す
配送の遅れ連休の発送スケジュール連休の前後

お知らせは何件でも並べて登録できます。

期間が重なったときは、上に書いたほうが優先。

たとえば「セール」と「年末年始休業」を1つのスニペットに入れておけば、それぞれの期間に自動で入れ替わります。

確かめた環境と内容

項目版
SWELL2.19.0
WordPress7.1.4
PHP8.3.36
Code Snippets4.0.0
確かめた日2026年11月2日

検証用のWordPressを別に作り、本番のサイトには入れずに確かめました。

確かめたのは次のことです。

  • 期間の始まりを2分後・終わりを4分後にして、ログアウトした状態で5〜30秒ごとにページを取得した
  • SWELLの「表示しない」の設定のまま、始まりの時刻から5秒以内にバーが出て、終わりの時刻から5秒以内に消えた(サーバーのキャッシュを避けたURLで確認)
  • SWELLの「ヘッダーをキャッシュする」をオンにしても、期間中はバーが出た。期間が終わったあとのヘッダーのキャッシュは、バーの無い元のままだった
  • 背景色・文字色・ボタンの色が、お知らせごとに切り替わった
  • 管理者のプレビュー(?infobar_preview=1)は、期間前でもログイン中だけ表示された
  • Code Snippetsの画面から保存し直しても、スニペットは有効のままだった
  • サーバーのキャッシュ(エックスサーバー系のwpX)がオンのURLでは、2分間の期間中に一度もバーが出なかった。前の回では、終わりの時刻から2分以上たってもバーが残った

スニペットの切り替えは時刻どおりでした。

遅れたのは、サーバーのキャッシュが古いページを返していたあいだだけです。

確かめていないこと理由
ページキャッシュのプラグイン(WP Rocketなど)を入れた状態検証用のサイトに入れていない
予約したキャッシュ削除が、訪問をきっかけに自動で動くこと検証用のサイトは自分のIP以外を断るため、WordPressが自分を呼ぶ予約実行が届かない(手で実行して、エラーなく動くことは確認)
SWELL 2.19.0より前の版手元にない

有料部分では、キャッシュの種類ごとに何が起きるかと、その対処をまとめています。

ここから先(有料部分)の中身

  • スニペットの全文(コピーして貼るだけ)
  • Code Snippetsへの貼り方と、編集画面のスクショ
  • 日時・文言・リンク・色の書き換え方
  • 年末年始休業とセールの2つの例、ボタンなしの例
  • 公開前に管理者だけで見た目を確かめる方法
  • キャッシュで切り替えが遅れるときの対処
  • 表示されないときの確認

この記事だけ読みたい方は単品購入、ほかの有料記事も読みたい方は購読プランをご確認ください。

購読対象の記事・料金は、下のプラン案内で確認できます。

役に立った記事を、ブログやSNSで紹介しませんか?

紹介制度の対象記事・購読プランを購入した方は、codocで専用リンクと報酬条件を確認できます。

専用リンク経由で購入されると、設定された紹介報酬が発生します。

購読プランの紹介報酬は初回課金のみが対象です。

codocで紹介リンク・報酬条件を確認する

紹介時は、広告・PRであることが読者に分かるように明記してください。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次