WordPressサイトにプッシュ通知を導入する方法

プッシュ通知を導入すれば、WordPressサイトを更新した際、ブラウザにメッセージが送信されます。

新しい記事を公開したり、サイトに更新があった場合、ユーザーに通知できるので、コンテンツを届けやすくなるメリットがあるんですよね。

というわけで今回は、WordPressサイトにプッシュ通知を導入する方法をご紹介します。

プッシュ通知とは

プッシュ通知とは、アプリやWebサイトがユーザーにリアルタイムでお知らせを送る機能のことです。スマホやPCの画面に「ポンッ」と表示される通知がこれにあたります。

アプリやサイト内でのアクションをメッセージと一緒に購読者に通知できます。ただの記事更新通知だけでなく、過去数日間サイトを訪問していないユーザーにリマインダーとして通知するような使い方もあります。

プッシュ通知の登録に際しては、メールアドレスの登録を促したり、アカウントを発行する必要もありません。なので、一度サイトを訪れたユーザーとの接触を維持していく上では最も気軽かつ簡便な方法です。

ECサイトであれば、新商品の宣伝にも使えますし、いろいろと幅が広がりますね。

プッシュ通知の導入方法

WordPressサイトにプッシュ通知を導入する2つの方法をご紹介します。

• プラグイン「Push 7」を利用する（国産）
• プラグイン「OneSignal」を利用する

「OneSignal」に関しては、TCDのPWA（プログレッシブウェブアプリ）機能内に順次搭載予定です。OneSignalのAPIキーを利用して、PWAでプッシュ通知を受け取れるようになります。

プラグイン「Push 7」を利用する

当メディアで過去にご紹介した「Push 7」というプラグイン。国産プラグインで設定も簡単でおすすめだったのですが、2025年4月25日時点で、更新が4年前で止まっておりました。サービス自体は続いているようですので、ご興味ある方は下記記事を参考にご覧ください。

プラグイン「OneSignal」を利用する

海外製ですが、「OneSignal」というプラグインもおすすめです。有効インストール数も多く、高く評価されています。海外製といえど、設定は簡単です。

操作は以下の3ステップです。順番に進めていけば、数十分で終わります。

1. アカウントの作成
2. 初期設定（APIキー取得）
3. プラグイン側の設定

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」を有効化します。

プラグイン「OneSignal」

有効化したら、次の箇所から設定画面を開きます。

「APP ID」と「APP KEY」をそれぞれコピペします。

最後に上記箇所（投稿公開・更新時に通知を自動送信）のみチェックを入れて、最下部の「Save Settings」を押せば設定完了です。

サイトのフロント画面をチェックしてみてください。

購読確認メッセージが表示されるはずです。ここで許可したユーザーを対象に、投稿公開時にブラウザから通知が送信されるようになります。

通知が来ない場合は？

通知が来なかったり、サイトを閲覧しても「購読確認メッセージ」が表示されない場合は、デバイス側の設定が影響している可能性があります。プッシュ通知を正しく受け取るためには、いくつかの確認事項があります。プッシュ通知検証時などにご活用ください。

よくあるケースは以下の通り。

• 通知設定をOFFにしている。
• 「購読する」を選ばずに閉じた。
• PWA未対応サイトをスマホで見ている。
• iOSの場合、PWA対応サイトをホーム画面に追加していない。

通知設定をOFFにしている。

パソコンやスマホ側の通知設定をOFFにしていると、通知は来ません。

特にMac Chromeの場合、通知設定（ > システム設定 > 通知）内に「Google Chrome Helper（Alerts）」という設定があるので要注意です。

通常のGoogle Chromeと別に存在する設定です。こちらも「通知を許可」しておかないとChromeから通知を受け取ることができません。

「購読する」を選ばずに閉じた。

「購読しますか？」「通知を受け取りますか？」というような「購読確認メッセージ」を承認せず、閉じてしまった場合は、通知は来ません。また、ブラウザを閉じるか、クッキーを削除するまで再表示されない仕組みになっています。

Chromeの場合は、下記箇所よりデータとクッキーを削除できます。「サイトの設定」をクリックします。

次の画面が開きますので、「データを削除」からデータとクッキーを削除可能です。

クッキーを削除しても、次のような項目がリセットされるだけですので、ご安心ください。

• ログイン状態
• フォームなどに入力した内容
• ネットショップのカートの中身
• 閲覧状態に基づいて表示される広告

こちらの記事も参考にご覧ください。

PWA未対応サイトをスマホで見ている。

iPhoneやAndroidなどのスマホの場合、サイトがPWA（プログレッシブウェブアプリ）に対応していなければ、プッシュ通知を受け取れません。

iPhoneで、PWA対応サイトをホーム画面に追加していない。

iPhone（iOS）では、以下の条件を満たさないと、プッシュ通知を受け取れません。

• サイトがPWAに対応していること
• ユーザーがそのサイトをホーム画面に追加していること

この2つの条件をクリアしてはじめて、iOSでのプッシュ通知が有効になります。

まとめ

WordPressサイトにプッシュ通知を導入する方法をご紹介しました。

ユーザーに新しいコンテンツを届け、再訪を促すのに効果的な施策です。サイトがPWAに対応していれば、スマホにも通知を送れます。モバイルアプリのような体験を実現できるわけです。

弊社テーマ「GRAVITY」は、PWAおよびプッシュ通知機能が標準実装されており、テーマの機能だけでこれらを実現可能です。

その他のTCDテーマで、PWA化やプッシュ通知を可能にしたい場合は、こちらのプラグインをご利用ください。TCDテーマをご利用中の方は、みなさま無料でお使いいただけます。