2026年9月20日

2026年9月20日

WordPressでeスポーツチームのサイトを構築する方法|選手紹介・試合日程・配信埋め込み・スポンサー掲載

eスポーツチームの公式サイトは、ファンに選手と試合の情報を届ける場であると同時に、スポンサーや大会運営者がチームを確かめる「名刺」の役割も持ちます。この記事では、WordPressで選手紹介、試合日程と結果、Twitch・YouTube の配信埋め込み、スポンサー掲載を備えたチームサイトを作る手順を、未成年の選手を含む場合の個人情報の扱いも含めて解説します。

チームサイトに必要なページ

SNSや配信プラットフォームで日々の発信をしていても、情報が流れてしまうため、まとまった情報を置く場所として公式サイトがあると便利です。次のページから始めます。

  • トップ: チームロゴ、次の試合、最新ニュース、配信中の表示
  • 選手・スタッフ紹介: 部門(タイトル)ごとのロースター
  • 試合日程・結果: 大会名、日時、対戦相手、結果、アーカイブ動画
  • ニュース: 加入・脱退、大会結果、グッズやイベントの告知
  • スポンサー: 協賛企業のロゴとリンク、協賛の問い合わせ窓口
  • 問い合わせ: 取材・出演依頼、スポンサー相談、ファンからの連絡を分けて受ける

複数のタイトルで部門を持つチームでは、部門ごとに選手・日程・ニュースを絞り込めるようにしておくと、特定のタイトルのファンが目的の情報にたどり着きやすくなります。

デザインとテーマ

チームカラーとロゴを軸にしたデザインにします。ブロックテーマ(Twenty Twenty-Five など)ならサイトエディターの「スタイル」で配色を統一でき、暗い背景のデザインも作れます。暗い配色では文字と背景のコントラストが不足しやすいので、WCAG 2.2 の基準(通常の文字で 4.5:1 以上)を目安に確認します。自動チェックツールで見つかるのは問題の一部なので、実際にスマートフォンで読めるかも見ておきます。

汎用テーマの無料版と有料版の機能の分け方や設定画面の表記は変わることがあるため、導入前に公式の機能一覧を確認してください(2026年10月現在)。

選手紹介とロースターの管理

選手は入れ替わりがあるため、通常の固定ページに書き並べるより、選手をカスタム投稿タイプ(例: player)として登録し、「部門」のタクソノミーで分けると管理しやすくなります。移籍や引退のときは、ページを削除せずに「元所属」のタクソノミーに移すか非公開にすると、過去の大会結果からのリンクが切れません。登録コードはテーマではなく mu-plugin に置くと、テーマを変えてもデータの構造が残ります。

選手ページには、プレイヤー名(ハンドルネーム)、担当ロール、使用デバイス、主な戦績、SNS・配信チャンネルへのリンクをまとめます。

未成年の選手がいる場合

eスポーツでは高校生など未成年の選手が所属することも珍しくありません。本名・顔写真・学校名・居住地域など、本人が特定される情報の掲載は最小限にとどめ、掲載する内容について本人と保護者の同意を取ります。ハンドルネームとアバター画像だけで紹介する形も選べます。退団後にどの情報をいつ消すかも、加入時に決めておくと揉めません。

試合日程と結果の載せ方

試合情報は「ニュース」に混ぜるより、日程・結果専用のカテゴリーかカスタム投稿タイプにします。各試合の記事に、大会名、日時(タイムゾーンを明記)、対戦相手、配信URLを書き、終了後に結果とアーカイブ動画を追記する運用にすると、1つのページで試合前から試合後まで扱えます。カレンダー形式で表示したい場合は、The Events Calendar のようなイベント管理プラグインを使う方法もあります。

海外の大会に出るチームでは、開始時刻を日本時間と大会の現地時間の両方で書くと、取り違えが起きにくくなります。

配信を埋め込む

YouTube の動画やライブ配信は、URLをブロックエディターに貼るだけで WordPress の自動埋め込みで表示されます。一方、Twitch はコアの自動埋め込みの対象ではないため、Twitch の埋め込みプレーヤーを iframe で置きます。Twitch の埋め込みでは、表示するサイトのドメインを parent パラメータで指定する必要があり、これが合っていないとプレーヤーが表示されません。

次のコードは、ショートコード [twitch_player channel="チャンネル名"] で Twitch のプレーヤーを表示する例です。子テーマの functions.php か mu-plugin に置き、ステージング環境で表示を確認してから本番に反映してください。

<?php
// [twitch_player channel="your_channel"] で Twitch の埋め込みプレーヤーを出す
add_shortcode( 'twitch_player', function ( $atts ) {
	$atts = shortcode_atts( array( 'channel' => '' ), $atts, 'twitch_player' );

	// Twitch のチャンネル名は英数字とアンダースコアなので、それ以外を取り除く
	$channel = preg_replace( '/[^A-Za-z0-9_]/', '', $atts['channel'] );
	if ( '' === $channel ) {
		return '';
	}

	// parent には、このサイトのホスト名(例: example.com)を渡す
	$host = wp_parse_url( home_url(), PHP_URL_HOST );
	$src  = add_query_arg(
		array(
			'channel'  => $channel,
			'parent'   => $host,
			'autoplay' => 'false',
		),
		'https://player.twitch.tv/'
	);

	return sprintf(
		'<div class="twitch-embed"><iframe src="%s" title="%s" width="640" height="360" loading="lazy" allowfullscreen></iframe></div>',
		esc_url( $src ),
		esc_attr( $channel . ' の Twitch 配信' )
	);
} );

画面幅に合わせて16:9で表示するには、「追加CSS」などで次のように指定します。

.twitch-embed iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

このコードは home_url() からホスト名を取るので、ステージングと本番で parent が自動で切り替わります。iframe を手書きで貼った場合は parent が固定になるため、ステージングで表示できても本番で表示できない(またはその逆)ことがあります。www の有無が混在するサイトでは、正規のURLに揃えておきます。Twitch の埋め込み仕様は変わることがあるため、表示されないときは Twitch の開発者向けドキュメントで現在の要件を確認してください。

配信の埋め込みは読み込みが重いので、トップページに複数並べるより、配信中の1つだけを表示するか、試合ページに置くほうが表示速度への影響を抑えられます。

スポンサー掲載と権利の扱い

スポンサーページには、協賛企業のロゴ、社名、リンクを掲載します。ロゴの使い方(色、余白、最小サイズ)は企業ごとに決まりがあることが多いので、提供されたデータとガイドラインに従います。スポンサーのサイトへのリンクには、広告関係であることを示す rel="sponsored" を付けるのが Google の推奨です。

ゲームタイトルのロゴやゲーム画面の画像を使う場合は、各ゲーム会社が公開している著作物の利用ガイドラインを確認します。大会の映像を切り抜いて掲載する場合も、大会運営者の配信や二次利用の規約に従います。

コミュニティとの連携

ファンとの交流に Discord を使うチームは多く、サイトには参加用の招待リンクを置きます。期限切れにならない設定の招待リンクを使うか、リンクが切れていないか定期的に確認します。ニュースを公開したときに Discord へ自動通知する仕組みを Webhook で作ることもできます。問い合わせフォームで集める連絡先は個人情報なので、プライバシーポリシーへのリンクを置き、スパム対策も入れておきます。

まとめ

  • チームサイトは、選手・試合・配信・スポンサーの情報をまとめて置く公式の窓口
  • 選手と試合はカスタム投稿タイプとタクソノミーで管理し、移籍や引退でもリンクが切れない形にする
  • 未成年の選手は掲載情報を最小限にし、本人と保護者の同意を取る
  • Twitch の埋め込みは parent にサイトのホスト名が必要で、ステージングと本番で値が変わる点に注意する
  • スポンサーのリンクには rel="sponsored" を付け、ゲームの画像や映像は各社のガイドラインに従う

お気軽にご相談ください

お見積りへ お問い合わせへ
▲