「Buy Me A Coffee」とは、投げ銭システムを無料で簡単に導入できるサービスです。
コーヒーを奢るような感覚で、少額からクリエイターに寄付することができます。
アメリカ初のサービスということもあり、主に海外のサイトで見かけることが多いですね。
今回の記事では、「Buy Me a Coffee」をサイトに設置できるWordPressプラグインの使用方法を解説していきます！
- WordPressサイトに投げ銭システムを導入したい
- HTML/CSSを書かずに簡単に導入したい
といった方には役に立つかと思いますので、ぜひ参考にしてみてください。
下準備：Buy Me a Coffeeでクリエイター登録をしておく
プラグインを導入する前に、Buy Me a Coffeeのサイトでアカウントを作成する必要があります。
アカウント作成手順は特に難しいことはないので、ここでは説明を省きます。
アカウントが作成できたら、次に進んでください。
Buy Me a Coffeeのプラグインをインストール&有効化
WordPressの管理画面から[プラグイン] → [新規追加] に進み、”Buy Me a Coffee – Button and Widget Plugin”と検索してください。
以下のようなプラグインが出てきたら、[インストール] → [有効化] することで使用可能になります。
Buy Me a Coffeeプラグインの設定方法
プラグインが有効化できたら、次は各種設定を行います。
管理画面のサイドバーに「Buy Me a Coffee」というのが追加されているはずなので、それをクリックすると設定画面が表示されます。
Buy Me a Coffeeのアカウントを追加してプラグインと連携する
まず一番最初に、Buy Me a Coffeeのアカウントを追加して、プラグインと連携する必要があります。
設定画面を開くと以下のような画面が表示されているかと思いますので、入力欄にユーザーネームを記入します。
ユーザーネームは、Buy Me a Coffeeのプロフィールページを開くことで確認できます。
私の場合だと、プロフィールページのURLはhttps://www.buymeacoffee.com/atatsu0117なので、atatsu0117の部分がユーザーネームとなります。
自身のユーザーネームが入力できたら、Saveを押して保存してください。
すると以下のような画面に切り替わるかと思います。
これでアカウントを追加することができました。
Buy Me a Coffeeのボタンを表示する
続いては、Buy Me a Coffeeのボタンをページ上に設置する方法を見ていきましょう。
管理画面から[外観] → [ウィジェット] を開きます。
すると、利用できるウィジェットの中に「Buy Me a Coffee」が追加されているかと思います。
あとはサイドバーや記事下部など、ドラッグ&ドロップで好きな場所に配置してください。
ウィジェットの配置場所は、ご利用中のテーマによって異なります。当サイトではWordPressテーマSWELLを使用しています。
以下はこちらのサイトでサイドバーに表示した時の見た目です。
サイドバーの一番下にボタンが表示されているのが確認できましたね。
このボタンをクリックすると、Buy Me a Coffee内の自身のプロフィールページに遷移し、そこから寄付をしてもらえるような仕組みになっています。
Buy Me a Coffeeボタンの見た目をカスタマイズする
デフォルトでは、ボタンは以下のようなデザインになっています。
しかしサイトカラーに合わせたい場合や、フォントを変えたいという場合がありますよね。
ボタンの見た目は、Buy Me a Coffeeプラグインの設定画面からある程度カスタマイズすることができます。
管理画面からBuy Me a Coffeeのプラグイン設定画面を開き、Customize Buttonをクリックします。
すると、以下のようなカスタマイズ画面が表示されます。
ここでは、以下の3つの項目をカスタマイズ可能です。
- ボタンに表示されるテキスト
- ボタンテキストのフォント
- ボタンの背景色
カスタマイズが完了したら、Save Changesをクリックして保存してください。
Buy Me a Coffeeのウィジェットを表示する
ここでは、Buy Me a Coffeeのウィジェットを表示する方法を紹介します。
WordPressにも「ウィジェット」があるので紛らわしいですが、Buy Me a Coffeeのウィジェットは、ページ遷移することなくその場で決済ができる機能です。
通常のボタンだと、「ボタンクリック」→「Buy Me a Coffee内のプロフィールページに遷移」→「寄付」という流れですが、ウィジェットだとページ遷移なしで全て完結するというのがメリットですね。
ウィジェットを表示するには、Buy Me a Coffeeの設定画面にあるWidgetをONにします。
すると、ページ右下にBuy Me a Coffeeのウィジェットを開くボタンが表示されます。
このボタンをクリックすると、寄付するためのフォームが表示されます。
以上でウィジェットの表示方法は終わりです！
Buy Me a Coffeeウィジェットの見た目をカスタマイズする
ボタンと同様、ウィジェットの見た目も設定画面からカスタマイズすることができます。
Buy Me a Coffeeの設定画面からCustomize Widgetをクリックします。
すると、以下のようなカスタマイズ画面が表示されます。
ウィジェットのテーマカラーやメッセージ文など、様々な項目を調整できるようになっているので、ぜひ自身のサイトに合うようカスタマイズしてみてください。
【まとめ】Buy Me a CoffeeをWordPressサイトに導入する方法
WordPressサイトでBuy Me a Coffeeを設置できるプラグイン「Buy Me a Coffee – Button and Widget Plugin」の紹介でした。
サイトに投げ銭システムを手軽に導入したい方は、ぜひ参考にしてみてください。
コメント