メインコンテンツへスキップ

概要

このガイドでは、OneSignal WordPress WebプッシュプラグインV3+のセットアップと設定方法について説明します。
古いバージョン2.x.xのWordPressドキュメントについては、WordPressレガシープラグインを参照してください。

バージョン3+の新機能

このリリースは、セットアップと設定プロセスを合理化することで大幅なアップグレードを示しています。バージョン3+では、すべてのプロンプト設定を1か所、OneSignalダッシュボードで処理できます。
  • 🚀 SDKアップグレード:OneSignal Web SDKをバージョン15から16に更新
  • 💬 ダッシュボードプロンプト:OneSignalダッシュボードで直接すべてのパーミッションプロンプトを設定 - カスタムコードは不要
  • ワンクリック公開:「投稿が公開されたときに通知を送信」にチェックを入れると、自動的にプッシュ通知が送信されます
  • 🧑‍🤝‍🧑 オーディエンスターゲティング:各投稿で通知を受け取るセグメントを選択
  • 📲 モバイルアプリ統合:オプションのディープリンクを使用してモバイルアプリのサブスクライバーに送信
古いバージョン2.x.xのWordPressドキュメントについては、WordPressレガシープラグインを参照してください。

セットアップ

開始する前に、次を確認してください:
  • OneSignalアカウント(無料で作成可能)
  • プラグインをインストールおよび設定するためのWordPress管理者アクセス
  • HTTPS対応のWebサイト(Webプッシュ通知に必要)

1. OneSignalダッシュボードでWordPressを設定

Settings > Push & In-App > Web > WordPress Plugin or Website Builderに移動します

OneSignalダッシュボードのWebsite BuilderオプションからWordPressを選択

サイトセットアップ

  • Site Name:サイトの名前とデフォルトの通知タイトル
  • Site URL:WordPressサイトの正確なURLと一致する必要があります(Same-origin policyに従う)
  • Auto Resubscribe:これを有効にすると、ブラウザーデータをクリアしたユーザーがサイトに戻ったときに自動的に再サブスクライブされます(新しいパーミッションプロンプトは不要)
  • Default Icon URL:通知とプロンプト用の正方形256x256pxのPNGまたはJPGファイル - MacOS Safariは、アイコンなしで通知プロンプトを表示しません

正確なSite URLを入力してください。https://your-site.comとhttps://www.your-site.comは異なります - 一貫して1つの形式のみを使用してください

ローカルでテストしていますか?localhost開発については、ローカルテストガイドを参照してください

パーミッションプロンプト

プッシュ、メール、SMSのパーミッションプロンプトをセットアップします。Push Slide Promptはデフォルトで有効になっていますが、カスタマイズしたり、追加のプロンプトを追加したりできます。
プロヒント:シンプルなプロンプトから始めて、徐々に複雑さを追加します。OneSignalダッシュボードを通じて、いつでもすべてのプロンプト設定を変更できます。Webパーミッションプロンプトで利用可能なすべてのオプションを確認してください。
  • 基本的なプロンプトセットアップ
  • 高度:カテゴリーベースのセグメンテーション
1

Push Slide Promptをクリックしてカスタマイズ

Push Slide Promptの設定にアクセスしてカスタマイズ

2

タイミングとテキストを設定:

  • 初期テストのためにAuto Prompt1ページビューと1秒に設定
    • プロンプトのテキストと外観をカスタマイズ
    • 起動後のユーザー行動に基づいてタイミングを調整

自動プロンプトのタイミングを設定し、プロンプトの外観をカスタマイズ

3

プロンプトの設定が完了したら、Doneをクリック

プロヒント:シンプルなプロンプトから始めて、徐々に複雑さを追加します。OneSignalダッシュボードを通じて、いつでもすべてのプロンプト設定を変更できます。 Webパーミッションプロンプトで利用可能なすべてのオプションを確認してください。

ウェルカム通知

ユーザーが初めてサブスクライブした後に送信される即座の通知をセットアップします。これにより:
  • サブスクライブしてくれたユーザーに感謝
  • 通知の表示方法を示す
  • エンゲージメントを高め、サブスクライブ解除を減らす
ウェルカムメッセージのテキストとタイミングを設定し、下にスクロールしてSaveをクリックします。
Advanced Push Settingsセクションは今のところスキップしてください - これらはカスタムWeb SDKセットアップ用です。Saveをクリックして続行してください。

2. WordPressプラグインを設定

ダッシュボード設定を保存すると、App IDAPI Keyが表示されます。これらの値をWordPressプラグインにコピーします:

OneSignalダッシュボードからApp IDとAPI Keyをコピー

API Keyが表示されませんか? Keys & IDsガイドに従って作成してください。
1

WordPress管理画面で、OneSignalプラグイン設定に移動

2

ダッシュボードに表示されているとおりにApp IDとREST API Keyを正確に貼り付け

WordPressプラグインのApp IDとREST API KeyがOneSignalダッシュボードと正確に一致していることを確認

詳細設定

ニーズに基づいて追加のプラグインオプションを設定します:

機能強化と分析追跡のための詳細設定

URLパラメーター追跡 追跡用に通知URLに分析パラメーターを追加します。重要:特殊文字をエスケープしてください - 入力はそのままURLに追加されます。 Google Analyticsの例:
utm_medium=push&utm_source=onesignal&utm_campaign=wordpress-plugin
特殊文字を含む例:
utm_medium=ppc&utm_source=adwords&utm_campaign=snow%20boots&utm_content=durable%20snow%20boots
追加設定
  • Custom Post Types:プラグインの投稿タイプを追加して通知オプションを有効化
  • Automatically send notifications when a post is published:投稿を公開するときに通知ボックスを自動的にチェックするため、手動でチェックしなくても通知が送信されます
  • Automatically send notifications when a post is updated:投稿を更新するときに通知ボックスを自動的にチェックするため、手動でチェックしなくても通知が送信されます
  • Automatically send notifications when a page is published:ページを公開するときに通知ボックスを自動的にチェックするため、手動でチェックしなくても通知が送信されます
  • Automatically send notifications when a page is updated:ページを更新するときに通知ボックスを自動的にチェックするため、手動でチェックしなくても通知が送信されます
  • Automatically send a push notification when I publish a post from 3rd party plugins:外部公開プラグインから通知を自動送信
  • Mobile App Integration:同じOneSignal App IDを使用してモバイルアプリのサブスクライバーに通知を送信

3. 移行を完了(アップグレードユーザーのみ)

新規インストールはこのステップをスキップできます。v2+からアップグレードする場合は、以下に従ってください…
タイムセンシティブ:移行期間中にユーザーが通知を見逃すことを避けるため、これらのステップを可能な限り早く完了してください。
1

OneSignalダッシュボード設定を保存した後、WordPressに戻る

2

プラグイン設定でMigration Completedをクリック

3

Save Settingsをクリックしてアップグレードを完了

Migration Completedをクリックしてプラグインのアップグレードを完了

セットアップ完了!Save Settingsをクリックしてプラグイン設定を完了します。

セットアップのテスト

  • 初期テスト
  • サブスクリプションの確認
  • テストメッセージの送信
  1. Webサイトにアクセス(シークレット/プライベートブラウジングは避けてください - ユーザーはこれらのモードではサブスクライブできません)
  2. 設定したスライドダウンプロンプトを探す

設定したスライドダウンプロンプトは、タイミング設定に基づいて表示されます

  1. サブスクライブボタンをクリック(この例では「Subscribe」とラベル付けされています)
  2. プロンプトが表示されたらブラウザーのパーミッションを承認

ブラウザーパーミッションプロンプト(外観はブラウザーによって異なります)は、Webプッシュ通知に必要です

  1. ウェルカム通知を確認(設定されている場合)

ウェルカム通知は、サブスクリプション成功の直後に表示されます

成功です! WordPressサイトはWebプッシュ通知用に設定されました。 ユーザーがサブスクライブすると、サブスクリプションに表示され始めます。
次のステップ:
問題がありますか? 一般的な解決策については、WordPressトラブルシューティングガイドを確認してください。

通知の公開

投稿の公開をスケジュールすると、OneSignalもスケジュールされた時刻にサブスクライバーに送信されるプッシュ通知をスケジュールします。投稿を再スケジュールすると、プッシュ通知はキャンセルされ、新しい時刻に新しいプッシュがスケジュールされます。 スケジュールされた通知とキャンセルされた通知は、OneSignalダッシュボードのDelivery > Scheduled Messagesで確認できます。詳細については、プッシュメッセージレポートを参照してください。

基本的な投稿通知

WordPress投稿を作成または編集するときは、OneSignal Push Notificationsメタボックスを見つけます(通常は投稿エディターの下部またはサイドバーにあります)。

OneSignal Push Notificationsメタボックス - 必要に応じてドラッグして再配置

通知を送信するには:
  • **「Send notification when post is published or updated」**にチェックを入れます
  • その投稿の通知送信をスキップするにはチェックを外します

オーディエンスターゲティング

すべてのサブスクライバーに送信(デフォルト)

デフォルトでは、通知はすべてのプッシュサブスクライバーに送信されます。

特定のセグメントに送信

OneSignal Dashboard > Audience > Segmentsで作成したセグメントを使用して、特定のオーディエンスをターゲットにします。 ステップ3でカテゴリーをセットアップした場合、対応するセグメントを作成します:
  1. OneSignalダッシュボードでAudience > Segmentsに移動
  2. タグキーを使用してセグメントを作成します。例:
    • News Segment:タグnews1
    • Deals Segment:タグdeals1

タグは大文字と小文字を区別します!「news」と「News」は異なるタグです

  1. セグメントを作成した後、WordPress投稿エディターを更新
  2. ドロップダウンからターゲットセグメントを選択

関連するユーザーグループをターゲットにするために特定のセグメントを選択

高度なセグメンテーション:ユーザーの行動、場所、デバイスタイプなどに基づいてセグメントを作成します。タグは、カスタムユーザーデータとパーソナライゼーションに最も柔軟性を提供します。

通知コンテンツのカスタマイズ

デフォルトの動作

  • Title:WordPressサイトのタイトルを使用(Settings > General)
  • Message:投稿タイトルを使用
  • Image:投稿のアイキャッチ画像を使用(設定されている場合)
  • URL:公開された投稿にリンク

カスタムコンテンツ

**「Customize notification content」**にチェックを入れてデフォルトを上書きします:

通知タイトル、コンテンツ、その他の要素をカスタマイズ

結果の例:

ユーザーに表示されるカスタマイズされたプッシュ通知

OneSignal WordPressプラグインにカスタム投稿タイプを追加

カスタム投稿タイプ名を見つける

新しい投稿を作成するときに、ブラウザーのアドレスバーを確認します。URLは次のようになります:
https://yoursite.com/wp-admin/post-new.php?post_type=your_custom_type
post_typeパラメーターの値(例:your_custom_type)が、OneSignalプラグインの設定に追加する必要がある正確な名前です。

OneSignal設定に追加

  1. WordPress管理画面でOneSignal > Settingsに移動
  2. Advanced Settingsで、Custom Post Typesフィールドにカスタム投稿タイプ名を追加
  3. 設定を保存
一般的な例: product(WooCommerce)、tribe_events(Events Calendar)、portfolio

モバイルアプリ統合

同じOneSignal App IDを使用するモバイルアプリがある場合:
  1. プラグイン設定で**「Send notification to Mobile app subscribers」**を有効化
  2. 投稿メタボックスで、ディープリンク用のMobile URLを追加
  3. モバイルユーザーはWebブラウザーではなくアプリに誘導されます
スケールアップの準備ができました:高度な通知キャンペーンのために、高度なプッシュ戦略自動化されたジャーニーを探索してください。
通知が表示されませんか? 解決策については、Webプッシュトラブルシューティングガイドを確認してください。

FAQ

注意:この方法は、スライドダウンとネイティブパーミッションプロンプトでのみ機能し、ベルやカスタムリンクプロンプトでは機能しません。
  1. OneSignalダッシュボードで、Settings > Push & In-App > Web Settingsに移動
  2. Permission Prompt Setupテーブルからプロンプトを選択
  3. Auto Promptのチェックを外してDoneをクリック

プロンプトが表示されるタイミングを手動で制御するためにAuto Promptを無効化

  1. 下にスクロールして、SaveをクリックしてからFinishをクリック
  2. プロンプトを表示したい特定のページにカスタムJavaScriptコードを追加
これにより、プロンプトのタイミングと配置を完全に制御できます。実装の詳細については、Webパーミッションプロンプトを参照してください。
はい!モバイルアプリが同じOneSignal App IDを使用している場合:
  1. WordPressプラグイン設定で**「Send notification to Mobile app subscribers」**を有効化
  2. 投稿を公開するときに、OneSignalメタボックスのMobile URLフィールドを使用してディープリンクを指定
  3. カスタムMobile URLがない場合、ユーザーはWebサイトに誘導されます
この機能により、単一のWordPressインターフェースからクロスプラットフォームメッセージングが可能になります。
WordPressプラグインは現在プッシュ通知のみをサポートしています。メールとSMSの場合:
  1. メールメールセットアップガイドに従い、メールメッセージングツールを使用
  2. SMSSMSセットアップガイドに従い、SMSメッセージングツールを使用
両方のチャネルは、プッシュ通知と一緒に同じOneSignalダッシュボードから管理できます。
キャッシュの問題:WordPressのキャッシュが移行の変更を遅らせる可能性があります。解決策:ステップ1: Webサイトを右クリックしてInspectを選択ステップ2: Networkタブに移動ステップ3: **「Disable cache」**にチェックを入れる

移行後に更新されたファイルの読み込みを強制するためにブラウザーキャッシュを無効化

ステップ4: Webサイトを更新して現在の設定を確認ステップ5: 該当する場合は、WordPressキャッシュプラグイン設定をクリア
このエラーは、移行が不完全であることを示しています:

ブラウザーコンソールの404エラーは、移行プロセスが不完全であることを示しています

解決策:
  1. OneSignalダッシュボード設定を保存したことを確認
  2. WordPressでプラグイン設定の**「Migration Completed」**をクリック
  3. Save Settingsをクリックしてアップグレードを完了
このエラーは、バージョン2.x.xからアップグレードするユーザーにのみ影響します。
はい、onesignal_send_notificationフィルターを使用できます。
カスタムPHPコードをwp-content/mu-plugins/onesignal-custom.phpに配置します。これにより、正しく読み込まれ、更新によって上書きされることがなくなります。
<?php

add_filter('onesignal_send_notification', function($fields, $post_id) {

  // Create Notification APIリファレンスに記載されているプロパティを含めます:
  // https://documentation.onesignal.com/reference/push-notification 例:

  // アクションボタンを追加
  $fields['web_buttons'] = array(
    array(
      "id" => "read-more",
      "text" => "Read More",
      "url" => get_permalink($post->ID)
    )

  // 変更されたfieldsの配列を返す
  return $fields;

}, 10, 2);