Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressにDiscordウィジェットを埋め込む方法

Discordは有名なVOIPチャットアプリケーションで、独自のコミュニティを構築し、テキスト、音声、ビデオを通じてユーザー同士のコミュニケーションを可能にする。2024年現在、Discordには約2億2700万人のアクティブユーザーがいる。

WordPressサイトとDiscordコミュニティを接続することで、シームレスなコミュニケーションチャンネルを提供し、ユーザーとのインタラクションを向上させ、エンゲージメントを高めることができます。

Discordウィジェットをウェブサイトに埋め込むと、ゲーム、教育、クリエイティブなコラボレーションなどのコミュニティを育成している場合でも、訪問者が直接Discordサーバーに参加して交流できるようになります。

この投稿では、WordPressにDiscordウィジェットを簡単に埋め込む方法を紹介します。

How to Embed Discord Widget into WordPress

なぜWordPressサイトにDiscordウィジェットを追加するのか?

Discordチャットでは、ユーザー同士がメッセージ、音声通話、動画通話でコミュニケーションをとることができる。

WordPress ウェブサイトに Discord ウィジェットを埋め込むことで、ユーザーが接続する手段を提供できます。このウィジェットはDiscordサーバーの総メンバー数を表示し、新規メンバーの招待リンクも提供します。

WordPressユーザーがDiscordチャットルームに参加できるようにすることで、あなたのウェブサイトに巨大なコミュニティを構築し、訪問者があなたのサイトに長く滞在するよう促すことができます。

さらに、Discordウィジェットを使用して、サポート質問用の専用チャンネルを作成し、ユーザーにライブサポートを提供することで、カスタマイザーサポートを提供することができます。

それでは、WordPressにDiscordウィジェットを追加する方法を見てみましょう。

WordPressにDiscordウィジェットを埋め込む方法

WordPressにDiscordウィジェットを埋め込むには、Discord公式サイトにアクセスする必要があります。

ここで、Discordユーザーアカウントとコミュニティ用のDiscordサーバーを作成する必要があります。

ステップ1:Discordアカウントとサーバーの作成

Discordサイトにアクセスしたら、すでにDiscordアカウントをお持ちの方は、画面右上の「ログイン」ボタンをクリックしてください。

アカウントをお持ちでない場合は、「ブラウザーでDiscordを開く」ボタンをクリックしてください。

Login to your Discord account or create a new account

その後、Discordアカウントのユーザー名を選択するよう求められます。

これは、他の人があなたを見つけるためのハンドルネームになりますが、サーバーごとに表示名を変更することができます。

Choose a username for your discord account

次に、Discordは’チャンネル’ページに移動し、あなたの生年月日を尋ねます。

必要事項を入力し、「次へ」ボタンをクリックしてください。

Type your date of birth and click Next button

その後、最初のDiscordサーバーを作成するよう求められます。自分でテンプレートを作成することも、あらかじめ用意されているテンプレートを選ぶこともできます。

このチュートリアルでは、「Gaming」サーバーテンプレートを使用します。

Create a discord server

次に、チャットルームの’サーバーネーム’を選択します。サーバーの画像をアップロードすることもできます。

Discordサーバーを作成するには、「作成」ボタンをクリックしてください。

Type a name for your discord server

最後に、メールアドレスのプロバイダーとDiscordアカウントのパスワードの選択を求められます。

これらの情報を入力したら、「Claim Account」ボタンをクリックしてください。

Provide your email and password

これで、Discordがあなたのメールアドレスに認証メールを送信します。

アカウントを確認すると、サーバーがセットアップされます。

Email for verification

あとは、WordPressにDiscordウィジェットを埋め込むだけです。

これを行うには、Discordの’チャンネル’ページの上部にあるサーバーネーム横の矢印アイコンをクリックします。

ドロップダウンメニューが開きますので、「サーバー設定」オプションをクリックしてください。

Click server settings option

サーバー設定」ページが表示されます。ここから、サイドバーから「ウィジェット」タブをクリックします。

サーバーウィジェット」設定が画面に表示されるので、「サーバーウィジェットを有効化」スイッチを切り替える。

Toggle the enable server widget switch

その後、「Premade Widget」セクションまでスクロールダウンし、「Premade Widget」オプションの下にある「Copy」ボタンをクリックする。

このコードを貼り付けることで、あなたのサイトのどこにでもDiscordウィジェットを埋め込むことができます。

Copy premade widget shortcode

ステップ2:WordPressにDiscordウィジェットを埋め込む

まず、Discordウィジェットを埋め込みたいWordPressページまたは投稿に移動します。

画面左上のブロック追加「+」ボタンをクリックし、ブロックメニューを開きます。

ここから、カスタムHTMLブロックを見つけて、ページ/投稿に追加します。次に、ウィジェットのHTMLコードをブロックに貼り付ける。

Paste the discord widget shortcode into the HTML block

その後、上部にある「公開」または「更新」ボタンをクリックして、設定を保存します。これで、DiscordウィジェットがWordPressブログやウェブサイトに埋め込まれます。

これがデモサイトでのDiscordウィジェットの様子です。

Discord widget on your website

サイドバー、ヘッダー、フッターなど、テーマのブロック有効化エリアにDiscordウィジェットを埋め込むことができます。

ボーナス:WordPressでチャットルームを作成する

Discordを使用したくない場合は、WordPressブログに直接チャットルームを作成することができます。この方法では、インスタントメッセージプロンプトがあなたのサイトに表示され、ユーザーはあなたの投稿について意見を残したり、他の訪問者と議論したりすることができます。

Simple Ajax Chat で簡単にチャットルームを作成することができます。この無料プラグインを使用すると、WordPress サイトの任意の場所にチャットルームを追加することができます。一般公開することも、ログイン中のユーザーに制限することもできます。さらに詳しく知りたい方は、Simply Ajax Chat のレビューをご覧下さい。

まず、Simple Ajax Chat プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法の初心者ガイドを参照してください。

有効化したら、設定 ” Simple Ajax Chatページにアクセスし、チャットルームの名前と初期設定を追加します。また、未登録ユーザーに参加を許可するかどうかを決定したり、カスタマイザーのロゴを追加したり、ブランドカラーを設定したりすることができます。

Add a name and message for chat room

設定が完了したら、「Save Settings」ボタンをクリックして設定を保存します。その後、ショートコード&テンプレートタグセクションまでスクロールダウンし、タブを展開します。

ここから、ショートコードをコピー&ペーストし、チャットルームを追加したいサイト上の任意の場所に貼り付けることができます。

Copy shortcode for the chat room

詳しくは、WordPressでユーザー用のチャットルームを作成する方法のチュートリアルをご覧ください。

この記事で、WordPressにDiscordウィジェットを簡単に埋め込む方法を知っていただけたら幸いです。WordPressにインタラクティブマップを追加する方法のチュートリアルや、ウェブサイトにTikTokの動画を埋め込む方法の記事もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

コメント

  1. おめでとうございます!この記事の最初のコメント投稿者になるチャンスです。
    ご質問やご提案がおありですか?ディスカッションを始めるためにコメントを残してください。

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。