sonoLoop 応援ボタン（WordPress プラグイン）

sonoLoop の応援（チップ）ページへの導線を、アーティストご自身の WordPress サイトに表示します。

• パソコンでは、応援ページの QR コードを表示します
• スマートフォン・タブレットでは、「sonoLoop で応援する」ボタンを表示します

応援を受け取れる状態でなくなった場合は、表示が自動で消えます。

インストール方法

1. 配布された sonoloop-support.zip をダウンロードする
2. WordPress の管理画面で プラグイン → 新規追加 → プラグインのアップロード
3. zip を選んでインストールし、有効化する

動作環境は WordPress 6.0 以上、PHP 7.4 以上です。

初期設定

1. 設定 → sonoLoop 応援ボタン を開く（画面は「設定」「見た目」「使い方」のタブに分かれています）
2. 「設定」タブで、sonoLoop の管理画面にある応援ページの URL を貼り付けて保存する
   • URL は https://sono-loop.com/○○○ の形式です。末尾の ○○○ の部分だけを入力しても設定できます
3. 保存すると、同じタブに確認結果が表示されます
   • 見つかり、応援を受け取れる状態であれば「応援を受け取れる状態です」と表示されます
   • 見つからない場合や、受け取りの設定が完了していない場合は、その内容が表示されます。 この状態のあいだ、サイトには何も表示されません

「設定」タブの「ID を確認する」では、設定を保存せずに、別の URL または ID の状態を確認できます。

使い方

投稿や固定ページに、次のショートコードを入力します。

[sonoloop_support]

ボタンのラベルを変更する場合（40文字まで）:

[sonoloop_support label="応援する"]

label で変更されるのは、スマートフォン・タブレットのボタンのラベルだけです。

複数のアーティストを表示する

レーベルのサイトなどで、複数のアーティストの応援ボタンを表示できます。 slug 属性に、各アーティストの ID を指定します。

[sonoloop_support slug="artist-a"]
[sonoloop_support slug="artist-b"]

• ID は、各アーティストの応援ページの URL の末尾（https://sono-loop.com/○○○ の ○○○）です。 URL をそのまま指定することもできます。
• 所属アーティストなど、表示の了承を得た相手の ID を指定してください。
• slug 属性を指定した場合は、誰への応援かが分かるように、アーティスト名が文言に入ります （例: 「DJ NAGI を sonoLoop で応援する」）。アーティスト名が未設定の場合は ID が入ります。
• label 属性を併用すると、ボタンのラベルを変更できます。複数並べる場合は、誰のボタンか分かるラベルにしてください。
• slug 属性を省略した場合は、設定画面の ID が使われます。
• 指定した ID が見つからない場合や、応援を受け取れる状態でない場合は、何も表示されません。
• 設定 → sonoLoop 応援ボタン の「ID を確認する」で、保存せずに事前に確認できます。 受け取れる状態であれば、その ID 用のショートコードも表示されます。

表示の仕組み

• 取得はサーバー側で行い、10分間キャッシュします。 訪問者のブラウザから sonoLoop へ直接通信することはありません
• sonoLoop に接続できないときは、最後に取得できた内容を表示します。 それも無い場合は何も表示しません（エラー文がサイトに表示されることはありません）
• 受け取りを停止したあとに sonoLoop へ接続できなくなった場合も、停止前の内容が表示されることはありません
• 受け取りの開始・停止が表示に反映されるまで、30分ほどかかることがあります （サイト側のキャッシュと、sonoLoop 側のキャッシュの合計）
• 設定画面の「表示を今すぐ更新する」で、キャッシュを待たずに反映できます
• パソコンとスマートフォンの出し分けは、端末の判定ではなく CSS （@media (hover: hover) and (pointer: fine)）で行います。HTML には QR とボタンの両方が 出力され、端末に合わないほうが非表示になります。ページキャッシュを使うサイトでも、 端末ごとの表示は崩れません
• QR コードは、SVG を <img> の data URI として表示します。取得した SVG を HTML に直接埋め込むことはしません
• パソコンの表示でも、QR を読み取れない方のために、QR の下に応援ページへの文字リンクを表示します
• 取得するのは公開情報だけです（応援ページの URL・QR コード・表示名・受け取りの可否）

デザインのカスタマイズ

本文の色や書体は指定していないので、お使いのテーマの表示が引き継がれます。 ボタンは濃い背景色に白い文字、QR の下のリンクは下線付きの文字リンクで表示されます。

設定画面から変更する

「設定」→「sonoLoop 応援ボタン」の「見た目」タブで、QR コードの大きさ、色、角丸などを指定できます。

• 空欄の項目は既定値で表示されます（既定値は下の表を参照）。説明文とリンクの色の既定は、テーマの文字色です。
• 色は「この色を指定する」にチェックを入れた項目だけが適用されます。
• 長さは 16px、1em のように単位付きの数値で入力します。形式が正しくない項目は保存されず、画面に警告が表示されます。
• ID を変更しても、見た目の設定は保持されます。

保存すると、次のような CSS が出力されます。ショートコードを本文に配置した場合は <head> 内に、ウィジェットなどに配置した場合はページの末尾に出力されます。

<style>.sonoloop-sp{--sonoloop-sp-button-bg:#0a7d5a;--sonoloop-sp-radius:999px}</style>

QR の下のリンクの表示形式は、「文字リンク」と「枠線のボタン」から選択します。 「文字リンク」では、下線付きの文字リンクになります。 「枠線のボタン」では、背景が透明で、枠線と文字がリンクの色（未指定の場合はボタンの背景色）になります。

CSS で変更する

子テーマの style.css などに、次のように指定します。設定画面の指定より優先させる場合は、セレクタの詳細度を上げるか !important を指定してください。

.sonoloop-sp {
  --sonoloop-sp-button-bg: #0a7d5a;
  --sonoloop-sp-radius: 999px;
  --sonoloop-sp-qr-size: 200px;
}

設定画面の項目に加えて、次の変数も指定できます。

これで足りない場合は、次のクラスに CSS を指定してください。

アップデート

新しい版が出ると、WordPress の管理画面に「更新があります」と表示されます。 そのままワンクリックで更新できます（wordpress.org は経由せず、sonoLoop から直接届きます）。

開発者向け

• API: GET https://sono-loop.com/api/loop/public/support-widget?slug={slug} （sonoloop リポジトリ app/api/loop/public/support-widget/route.ts）。 形が合わない・存在しない slug は、エラーではなく 200 と {"found":false,...} を返します。 障害時は 503 を返します
• 更新情報: GET https://sono-loop.com/api/loop/public/wp-plugin-update
• 接続先を変更する場合は wp-config.php などで define('SONOLOOP_API_ORIGIN', 'https://...') を定義してください
• 公開リポジトリ: https://github.com/miryna1978/sonoloop-support （配布と履歴のミラー。開発の本体は sonoLoop 側で、リリースのたびに ./scripts/publish-wp-plugin.sh sonoloop-support で上書きされます）

ライセンス

GPLv2 or later