プッシュ通知を導入すれば、WordPressサイトを更新した際に、スマートフォンやPCのブラウザにリアルタイムでメッセージを届けることができます。
たとえば、PCではブラウザにメッセージが表示され、スマートフォンでは「新着記事が公開されました」といった通知がポンッと画面に表示されるようになります。
プッシュ通知の例
近年はiOSやAndroidでも通知への対応が進み、モバイルユーザーへのリーチ手段としても注目されています。
新しい記事を公開したり、サイトに更新があった場合、ユーザーに通知できるため、コンテンツを確実に届けやすくなるのが大きなメリットです。
というわけで今回は、WordPressサイトにプッシュ通知を導入する方法をご紹介します。
目次
プッシュ通知とは
プッシュ通知とは、アプリやWebサイトがユーザーにリアルタイムでお知らせを送る機能のことです。スマホやPCの画面に「ポンッ」と表示される通知がこれにあたります。
アプリやサイト内でのアクションをメッセージと一緒に購読者に通知できます。ただの記事更新通知だけでなく、過去数日間サイトを訪問していないユーザーにリマインダーとして通知するような使い方もあります。
プッシュ通知の登録に際しては、メールアドレスの登録を促したり、アカウントを発行する必要もありません。なので、一度サイトを訪れたユーザーとの接触を維持していく上では最も気軽かつ簡便な方法です。
ECサイトであれば、新商品の宣伝にも使えますし、いろいろと幅が広がりますね。
ただし、通知を受け取るには、サイトがPWA（プログレッシブウェブアプリ）に対応しており、ユーザーがそのサイトをホーム画面に追加し、通知を許可する必要があります。
プッシュ通知の導入方法
WordPressサイトにプッシュ通知を導入する2つの方法をご紹介します。
- プラグイン「Push 7」を利用する（国産）
- プラグイン「OneSignal」を利用する
「OneSignal」に関しては、TCDのPWA（プログレッシブウェブアプリ）機能内に順次搭載予定です。OneSignalのAPIキーを利用して、PWAでプッシュ通知を受け取れるようになります。
プラグイン「Push 7」を利用する
当メディアで過去にご紹介した「Push 7」というプラグイン。国産プラグインで設定も簡単でおすすめだったのですが、2025年4月25日時点で、更新が4年前で止まっておりました。サービス自体は続いているようですので、ご興味ある方は下記記事を参考にご覧ください。
WEBサイトやブログを更新した際に、購読者にプッシュ通知を発信できるWEBサービス「Push7」をご紹介いたします。 多くの方にサイトを閲覧してもらうためには、広告を打ったり、SNSやメルマガなどを使って様々な角度からアピールする方法があります。プッシュ通知は、それらとまた別角度から訴求できる...
プラグイン「OneSignal」を利用する
海外製ですが、「OneSignal」というプラグインもおすすめです。有効インストール数も多く、高く評価されています。海外製といえど、設定は簡単です。
操作は以下の3ステップです。順番に進めていけば、数十分で終わります。
- アカウントの作成
- 初期設定（APIキー取得）
- プラグイン側の設定
1. アカウントの作成
まずは、「OneSignalの公式ページ」を開きましょう。
「Get started now」よりアカウント作成画面に移動して、メールアドレスとパスワードを登録します。
次の画面でプランを選びます。今回は「Free」を選択すると、登録したアドレスにメールが送信されます。
メールを確認してくださいという画面です。
お使いのメーラーでメールを確認できたら、「Confirm your account」を押します。
ブラウザが開きますので、ここから簡単なアンケートに応えていきます。
First Name、Last Nameなどを入力して、利用目的、利用予定のチャネルにチェックを入れます。
次の画面では、企業名やサイトURLなどの入力を行います。
最後にアプリ or サイト名を入力したら「Create」を押します。
ここまででアカウント設定は完了です。
2. 初期設定（APIキー取得）
続いて初期設定です。画面ごとに何を選択し、設定するか参考にしてください。
↑の画面では、「Push & In App」を選びます。
↑の画面では、「Web」を選びます。
↑この画面では、「WordPress Plugin or WordPress Builder」を選んでから「WordPress」を選びます。
続いて下にスクロールします。
↑「2. WordPress Site Setup」でサイト名、サイトURL、サイトのファビコン等を登録できたら、下部の「Push Slide Prompt」をクリックしてください。
「購読確認メッセージ」の表示内容を登録します。赤枠箇所に英語が登録されていますので、日本語に書き換えて右下の「Done」を押せばOKです。プレビューされるのでわかりやすいです。
さらにその下にある「Welcome Notification (Optional)」。
ここでは、購読された方に表示するサンキューメッセージを登録します。赤枠箇所のみを日本語に書き換えておくだけでOKです。
最下部の「5. Advanced Push Settings (Optional)」は、上級者向けなので、スキップしても大丈夫です。
「Save」を押して保存します。
保存できたら、上記画面に「APP ID」と「APP KEY」が表示されます。後で使うので、両方ともコピーしてどこかに保存しておきましょう。コピーできたら、「Finish」を押して完了です。
3. プラグイン側の設定
最後にプラグイン側で設定します。といっても、先ほどのAPIキーをコピペするだけです。
まずは下記プラグイン「OneSignal」を有効化します。
有効化したら、次の箇所から設定画面を開きます。
「APP ID」と「APP KEY」をそれぞれコピペします。
最後に上記箇所（投稿公開・更新時に通知を自動送信）のみチェックを入れて、最下部の「Save Settings」を押せば設定完了です。
通知を受け取るまでの流れ
通知を正しく受け取るには、ユーザー側で通知自体を許可する必要があります。
PCブラウザでの流れ
PC環境では、ChromeやEdgeなどの主要なブラウザを使用している場合、Web Push通知を受信することができます。
該当サイトにアクセスすると、以下のように通知許可を求めるポップアップが表示されます。
ここで「許可」を選択すれば、そのブラウザ上で通知の購読が開始され、記事公開時などにリアルタイムで通知が表示されるようになります。
PCで通知を受け取る基本的な流れは以下のとおりです。
- 通知に対応したブラウザ（例：Chrome、Edgeなど）で該当サイトにアクセス
- サイトが通知機能を実装している場合、画面上部に通知許可のポップアップが表示される
- 「許可」を選択すると、そのブラウザ上で通知の購読が開始される
スマートフォンでの流れ
PWA対応サイトからスマートフォンで通知を受け取るには、以下のような手順が必要です。
- スマートフォンで該当サイトを開き、「ホーム画面に追加」を選択する（＝PWA化）
- ホーム画面に追加されたアイコンからサイトを起動
- サイト上に通知許可を求めるポップアップが表示される
- 通知を「許可」すると、その端末で通知の購読が開始される
通知が来ない場合は？
通知が来なかったり、サイトを閲覧しても「購読確認メッセージ」が表示されない場合は、デバイス側の設定が影響している可能性があります。プッシュ通知を正しく受け取るためには、いくつかの確認事項があります。プッシュ通知検証時などにご活用ください。
よくあるケースは以下の通り。
- 通知設定をOFFにしている。
- 「購読する」を選ばずに閉じた。
- PWA未対応サイトをスマホで見ている。
- iOSの場合、PWA対応サイトをホーム画面に追加していない。
通知設定をOFFにしている。
パソコンやスマホ側の通知設定をOFFにしていると、通知は来ません。
特にMac Chromeの場合、通知設定（ > システム設定 > 通知）内に「Google Chrome Helper（Alerts）」という設定があるので要注意です。
通常のGoogle Chromeと別に存在する設定です。こちらも「通知を許可」しておかないとChromeから通知を受け取ることができません。
「購読する」を選ばずに閉じた。
「購読しますか？」「通知を受け取りますか？」というような「購読確認メッセージ」を承認せず、閉じてしまった場合は、通知は来ません。また、ブラウザを閉じるか、クッキーを削除するまで再表示されない仕組みになっています。
Chromeの場合は、下記箇所よりデータとクッキーを削除できます。「サイトの設定」をクリックします。
次の画面が開きますので、「データを削除」からデータとクッキーを削除可能です。
クッキーを削除しても、次のような項目がリセットされるだけですので、ご安心ください。
- ログイン状態
- フォームなどに入力した内容
- ネットショップのカートの中身
- 閲覧状態に基づいて表示される広告
こちらの記事も参考にご覧ください。
Webサイトはクッキーやキャッシュを用いてユーザーのスムーズな閲覧を可能にしています。しかし、時としてそれらが原因でWeb制作の妨げになることもあります。クッキーで制御している広告やバナーなどを再表示するには、クッキーを削除しなければならないからです。 というわけで今回は、ブラウザ別の削除方法...
PWA未対応サイトをスマホで見ている。
iPhoneやAndroidなどのスマホの場合、サイトがPWA（プログレッシブウェブアプリ）に対応していなければ、プッシュ通知を受け取れません。
Webサイトをスマホアプリ化したいけど、ネイティブアプリは開発コストも維持コストもかかります。その上、アプリストア（Google Play/App Store）の審査も必要。サイトをアプリ化するのは、なかなかハードルが高いわけです。 そんなハードルを一挙に解決する技術がPWAです。PWAであれ...
iPhoneで、PWA対応サイトをホーム画面に追加していない。
iPhone（iOS）では、以下の条件を満たさないと、プッシュ通知を受け取れません。
- サイトがPWAに対応していること
- ユーザーがそのサイトをホーム画面に追加していること
この2つの条件をクリアしてはじめて、iOSでのプッシュ通知が有効になります。
※通知を受け取るには、ホーム画面に追加したPWAアプリを起動し、通知を「許可」する操作が必要です。
※通知許可のポップアップが表示されるタイミングは、OSやブラウザの仕様により異なり、表示までに時間がかかる場合もあります。
※ホーム画面アイコンにプッシュ通知のバッジ（赤丸＋数字）は表示されない仕様です。
まとめ
WordPressサイトにプッシュ通知を導入する方法をご紹介しました。
ユーザーに新しいコンテンツを届け、再訪を促すのに効果的な施策です。サイトがPWAに対応していれば、スマホにも通知を送れます。モバイルアプリのような体験を実現できるわけです。
弊社テーマ「GRAVITY」は、PWAおよびプッシュ通知機能が標準実装されており、テーマの機能だけでこれらを実現可能です。
その他のTCDテーマで、PWA化やプッシュ通知を可能にしたい場合は、こちらのプラグインをご利用ください。TCDテーマをご利用中の方は、みなさま無料でお使いいただけます。
Webサイトをスマホアプリのような操作感にし、プッシュ通知なども実現できる「PWA（Progressive Web Apps）」という仕組み。 WordPressサイトに実装できれば、サイトをアプリライクな動きで使っていただける上に、サイトの更新情報も効率よくお届けできます。 そこで今回...
