Skip to main content
この包括的なガイドでは、OneSignal WordPressプラグインバージョン2.x.xを使用したWebプッシュ通知のセットアップとカスタマイズについて説明します。バージョン3以降を使用している場合は、WordPress v3+ガイドを参照してください。
このガイドは、OneSignal WordPressプラグインバージョン2.x.x専用です。バージョン3+については、更新されたWordPressドキュメントを参照してください。

前提条件

  • 管理者アクセス権を持つWordPressウェブサイト
  • HTTPS有効化(Webプッシュ通知に必須)
  • OneSignalアカウント(onesignal.comで無料)

ステップ1:統合の選択

onesignal.comでOneSignalアカウントを作成します。これが最初のアプリでない場合は、New App/Websiteを選択し、アプリに名前を付け、Webを選択して「Next」をクリックします。

Webオプションを表示するプラットフォーム選択インターフェース

WordPress Plugin or Website Builderを選択して続行します:

WordPressプラグインがハイライトされたWebプッシュ統合オプション

ステップ2:サイトセットアップ

これらの設定はすべての通知に影響するため、サイト情報を慎重に設定してください:

必須フィールドを含むサイトセットアップ設定フォーム

フィールド説明要件
Site Nameプッシュ通知に表示されるデフォルト名表示を良くするため簡潔に保つ
Site URL完全なWebサイトURLhttp://またはhttps://を含み、実際のURL形式と一致する必要がある
Auto Resubscribe再訪ユーザーを自動的に再サブスクライブ(HTTPSのみ)推奨 - ブラウザーデータをクリアしたユーザーの摩擦を軽減
Default Icon URLプロンプトと通知のアイコンHTTPS、正方形256x256ピクセル、PNG/JPG/GIF形式である必要がある
URL形式が重要: サイトURLがユーザーがサイトにアクセスする方法と完全に一致することを確認してください。URL の不一致(www対非www、http対https)はサブスクリプションの問題を引き起こす可能性があります。

ステップ3:高度なプッシュ設定(オプション)

OneSignalはSafari Webプッシュ証明書を無料で提供します。特定の要件がある場合にのみカスタム証明書をアップロードしてください。

Safari証明書アップロードオプションを表示する高度なプッシュ設定

カスタム証明書を使用するタイミング:
  • 既存のSafari証明書がある
  • 組織が特定の証明書管理を必要とする
  • カスタム証明書ブランディングが必要

ステップ4:WordPressプラグインの設定

プラグインのインストール

WordPress管理画面からOneSignal WordPressプラグインを追加するか、プラグインディレクトリで「OneSignal」を検索してください。

APIキーの設定

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

App IDとAPI Keyの場所を表示するOneSignalダッシュボード

WordPress管理画面 → OneSignal PushConfigureタブに移動し、キーを貼り付けます:

APIキー入力フィールドを表示するWordPressプラグイン設定

プッシュプロンプトの有効化

訪問者から権限をリクエストするために、スライドプロンプトとサブスクリプションベルをアクティブ化します:

スライドプロンプトとサブスクリプションベルオプションを表示するプロンプト設定

設定を保存してください - これはプラグインが適切に機能するために重要です。

設定ページ下部の保存ボタンの場所

ステップ5:セットアップのテスト

インストールの確認

  1. Webサイトにアクセスします(キャッシュプラグインのクリアが必要な場合があります)
  2. OneSignalスライドプロンプトとサブスクリプションベルを探します
  3. フローをテストするためにサブスクライブします
  4. OneSignalダッシュボード → Audience → Usersでサブスクリプションを確認します

テスト通知の送信

OneSignalダッシュボード → Messages → New Pushに移動して、最初の通知を送信し、すべてが機能することを確認します。
トラブルシューティング: プロンプトが表示されない場合は、デバイス設定でプッシュ通知が有効になっていることを確認し、ブラウザーのキャッシュをクリアしてみてください。

ステップ6:通知プロンプトの設定

Configureセクションで、ユーザーがサブスクリプションプロンプトを表示する方法とタイミングを設定します:

サブスクリプションベル

ユーザーがいつでもクリックしてサブスクリプションステータスを管理できる永続的なアイコン(通常はコーナーに表示)。

スライドプロンプト

タイミング設定に基づいて表示され、権限をリクエストするモーダルダイアログ。 次のステップ: ユーザーは通常、プロンプトのタイミングと外観をカスタマイズしたいと考えます。以下の高度なカスタマイズセクションを参照してください。

ステップ7:自動投稿通知

基本セットアップ

投稿を作成すると、OneSignalセクションが表示されます。サブスクライバーに通知するにはSend notification on post publishをチェックします:

OneSignal通知チェックボックスを表示する投稿エディター

通知の自動有効化

すべての新しい投稿でこのボックスを自動的にチェックするには:
  1. OneSignal PushAutomatic Notification Settingsに移動します
  2. Automatically send a push notification when I create a postを有効にします
  3. 設定を保存します

自動送信オプションを表示する自動通知設定

ウェルカム通知

ユーザーがサブスクライブした直後に送信されるオプションのウェルカムメッセージを設定します。プラグインのConfigureセクションでこれらを編集または無効化できます。
レート制限: 同じ投稿に対する複数の通知は、スパムを防ぐために1分あたり1回に制限されています。

高度なカスタマイズ

OneSignal WordPressプラグインは、設定されたオプションでWeb Push SDKを読み込みます。Web Push SDK JavaScript APIを使用して、エクスペリエンスをさらにカスタマイズできます。
開発者向け注意: このセクションにはJavaScriptとPHPの知識が必要です。サイトにコードを追加するのに助けが必要な場合は、Insert Headers and FootersCustom CSS & JSなどのプラグインの使用を検討してください。

サブスクリプションプロンプトのカスタマイズ

高度なプロンプトセットアップ

遅延、カテゴリー、メール収集を含む洗練されたプロンプトカスタマイズの場合:
ステップ1:デフォルトプロンプトの無効化
OneSignal WordPress Plugin → Prompt Settingsで、スライドとネイティブプロンプトをオフにします(ベルは有効のままにできます)。

無効化されたスライドとネイティブプロンプトを表示するプロンプト設定

ステップ2:手動初期化の有効化
Advanced Settingsまでスクロールし、「Disable OneSignal initialization」をオンにして、Saveをクリックします。

手動初期化トグルを表示する高度な設定

ステップ3:カスタムJavaScriptの追加
このコードをサイトに追加します(例に示されている3秒の遅延後):
// Basic Delayed Prompt
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "push",
          autoPrompt: true,
          text: {
            actionMessage: "Get notified of new posts and updates!",
            acceptButton: "Yes",
            cancelButton: "No thanks",
          },
          delay: {
            timeDelay: 10, // Wait 10 seconds
            pageViews: 2,  // Show after 2 page views
          }
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);
// Category-Based Prompt
setTimeout(function(){
  window._oneSignalInitOptions.promptOptions = {
    slidedown: {
      prompts: [
        {
          type: "category",
          autoPrompt: true,
          text: {
            actionMessage: "Choose what notifications you'd like to receive:",
            acceptButtonText: "Subscribe",
            cancelButtonText: "Not now",
            positiveUpdateButton: "Save Preferences",
            negativeUpdateButton: "Cancel",
            updateMessage: "Update your notification preferences.",
          },
          categories: [
            {
              tag: "news",
              label: "Breaking News",
            },
            {
              tag: "sports",
              label: "Sports Updates",
            },
            {
              tag: "tech",
              label: "Technology News",
            }
          ]
        }
      ]
    }
  }
  window.OneSignal = window.OneSignal || [];
  window.OneSignal.push(function() {
    window.OneSignal.init(window._oneSignalInitOptions);
  });
}, 3000);

ページ固有のプロンプト

サーバーサイドPHPメソッド
onesignal_initialize_sdkフィルターを使用して、ページプロパティに基づいて初期化を制御します。
クライアントサイドJavaScriptメソッド
「Disable OneSignal initialization」を有効にし、特定のページでのみOneSignalを初期化する条件付きJavaScriptを追加します。

多言語プロンプト

単一言語サイトの場合は、プロンプト設定のテキストを翻訳するだけです。 多言語サイトの場合は、上記の手動初期化メソッドを使用し、ページ言語を検出して適切なテキストを表示します。

ユーザーセグメンテーションとターゲティング

ユーザーのタグ付け

データタグでユーザーを分類して、ターゲット通知を送信します:
// Tag users based on their interests
OneSignal.push(function() {
  OneSignal.sendTag("interest", "technology");
  OneSignal.sendTag("location", "california");
});

セグメントのターゲティング

OneSignalダッシュボードでUser Tagフィルターを使用してセグメントを作成し、onesignal_send_notificationフィルターでターゲットにします:
<?php
add_filter('onesignal_send_notification', 'target_tech_users', 10, 4);

function target_tech_users($fields, $new_status, $old_status, $post) {
  // Only send to users interested in technology
  $fields['included_segments'] = array('Technology Enthusiasts');
  return $fields;
}

通知内のアイキャッチ画像

アイキャッチ画像サポートの有効化

テーマがアイキャッチ画像をサポートしていることを確認してください。テーマのfunctions.phpで次を確認します:
add_theme_support('post-thumbnails');

画像設定の構成

OneSignal Push → Sent Notification Settingsで、希望するアイキャッチ画像オプションをオンにします:

アイコンと大きな画像オプションを表示するアイキャッチ画像設定

サードパーティプラグイン統合

標準投稿タイプ

標準投稿タイプに対してAutomatically send a push notification when I publish a post from 3rd party pluginsを有効にします。

サードパーティプラグイン統合設定

カスタム投稿タイプ

Additional Custom Post Typesフィールドにカスタム投稿タイプ(カンマ区切り)を追加します:

カスタム投稿タイプ設定フィールド

カスタム投稿タイプの見つけ方: カスタム投稿タイプを作成する際のブラウザーのURLを確認します: https://yoursite.com/wp-admin/post-new.php?post_type=your_custom_type post_typeパラメーターが追加する名前を示しています。

モバイルアプリ統合

方法1:シンプルなWebブラウザー起動

WordPressプラグイン設定でSend notifications additionally to iOS & Android platformsを有効にします。

モバイルプラットフォーム統合トグル

方法2:ディープリンキング

カスタムモバイルアプリの動作の場合は、上記の設定を無効にしてこのPHPコードを使用します:
<?php
add_filter('onesignal_send_notification', 'send_to_mobile_apps', 10, 4);

function send_to_mobile_apps($fields, $new_status, $old_status, $post) {
  $fields['isAndroid'] = true;
  $fields['isIos'] = true;
  $fields['isAnyWeb'] = true;
  $fields['data'] = array("customkey" => $fields['url']);
  $fields['web_url'] = $fields['url'];
  unset($fields['url']); // Prevents browser opening on mobile

  return $fields;
}

WordPressプラグインのフックとフィルター

コード配置

更新で上書きされないように、カスタムPHPコードをwp-content/mu-plugins/に配置してください。
カスタムコードでwp-content/mu-plugins/onesignal-custom.phpを作成します。

onesignal_send_notification

送信前に通知パラメーターを変更します:
<?php
add_filter('onesignal_send_notification', 'customize_notification', 10, 4);

function customize_notification($fields, $new_status, $old_status, $post) {
  // Customize title and message
  $fields['headings'] = array("en" => "Breaking News!");
  $fields['contents'] = array("en" => "Check out our latest post");

  // Schedule for later
  $fields['send_after'] = "2024-12-25 09:00:00 GMT-0800";

  // Add action buttons
  $fields['web_buttons'] = array(
    array(
      "id" => "read-more",
      "text" => "Read More",
      "url" => get_permalink($post->ID)
    )
  );

  return $fields;
}

onesignal_initialize_sdk

OneSignalが初期化されるタイミングを制御します:
<?php
add_filter('onesignal_initialize_sdk', 'control_initialization', 10, 1);

function control_initialization($settings) {
  // Only initialize on blog posts
  if (is_single() && get_post_type() == 'post') {
    return true;
  }
  return false;
}

onesignal_include_post

特定の投稿タイプに対して通知を強制します:
<?php
add_filter('onesignal_include_post', 'include_pages', 10, 3);

function include_pages($new_status, $old_status, $post) {
  // Send notifications when pages are published
  if ($post->post_type == "page" && $new_status == "publish") {
    return true;
  }
  return false;
}

onesignal_meta_box_send_notification_checkbox_state

通知チェックボックスのデフォルト状態を制御します:
<?php
add_filter('onesignal_meta_box_send_notification_checkbox_state', 'auto_check_checkbox', 10, 2);

function auto_check_checkbox($post, $settings) {
  // Always check the box for news category posts
  if (has_category('news', $post)) {
    return true;
  }
  return false;
}

WordPressと非WordPressの混在サイト

WordPressページと非WordPressページの両方を持つサイトの場合:
  1. OneSignalダッシュボードでカスタムコードセットアップを使用します
  2. 非WordPressページにこのコードを追加します:
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
var initConfig = {
  appId: "YOUR_APP_ID_FROM_WORDPRESS_PLUGIN",
  notifyButton: {
    enable: true
  },
};
OneSignal.push(function () {
  OneSignal.SERVICE_WORKER_PARAM = {
    scope: '/wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/'
  };
  OneSignal.SERVICE_WORKER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.SERVICE_WORKER_UPDATER_PATH = 'wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js'
  OneSignal.init(initConfig);
});
</script>

トラブルシューティング

よくある問題

「No Recipients」エラー

  • 原因: 同じ投稿に対して複数の通知を送信しようとしている速度が速すぎる
  • 解決策: 同じ投稿の通知間で少なくとも1分待機してください

プロンプトが表示されない

  • 原因: キャッシュプラグイン、ブラウザー設定、または初期化の問題
  • 解決策:
    • すべてのキャッシュプラグインをクリアします
    • ブラウザーの通知権限を確認します
    • HTTPSが有効になっていることを確認します
    • プラグイン設定が保存されていることを確認します

「Couldn’t load wp.data」警告

  • WordPress 5+ with Gutenberg: セットアップの問題を示す可能性があります - サポートに連絡してください
  • WordPress 4.x: 無視しても安全 - この警告は機能に影響しません

カスタム投稿タイプが機能しない

  • 原因: 必要なメタデータがありません
  • 解決策: onesignal_include_postフィルターを使用して、投稿タイプを明示的に含めます

通知がスケジュールされない

  • 原因: WordPress cronまたはテーマの競合
  • 解決策:
    1. スケジューリングにOneSignalダッシュボードまたはAPIを使用します
    2. onesignal_send_notificationフィルターでカスタムスケジューリングを実装します
    3. 自動化にZapier統合を使用します

データベースエントリ

OneSignalはwp_postmetaテーブルに次のエントリを作成します:
エントリ説明
onesignal_meta_box_present投稿が公開されたときにOneSignalがアクティブだったことを確認
onesignal_send_notification通知送信を追跡
status通知のHTTPステータス(200 = 成功)
response_body通知IDと受信者数を含むAPI応答
recipients通知を受信したユーザー数

ヘルプの取得


次のステップ

このセットアップ完了後:
  1. パフォーマンスの監視: サブスクライバーの成長とエンゲージメントメトリクスのためにOneSignalダッシュボードを定期的に確認します
  2. プロンプトの最適化: さまざまなプロンプトのタイミングとメッセージングを試します
  3. ユーザーのセグメント化: よりターゲットを絞った通知を送信するためにタグ付けを実装します
  4. 徹底的なテスト: さまざまなデバイスとブラウザーにテスト通知を送信します
  5. コンテンツ戦略の計画: ユーザーを圧倒することなく価値を追加する通知戦略を開発します
A/Bテスト、高度なセグメンテーション、詳細な分析などの高度な機能については、有料のOneSignalプランへのアップグレードを検討してください。