2026年6月28日

2026年6月28日

WordPressにMixcloudを埋め込む方法(URL貼り付け・Mixcloudブロック・埋め込みコード)

Mixcloud はDJミックスやラジオ番組、ポッドキャストを公開できる音声配信サービスです。WordPress は本体の oEmbed 機能で Mixcloud に対応しているため、番組の URL を貼るだけで再生プレーヤーを表示できます。プラグインは必要ありません。

この記事では、ブロックエディター・クラシックエディター・テーマのテンプレートのそれぞれで Mixcloud を埋め込む方法と、表示されないときの確認点を説明します。内容は WordPress 本体のソースと公式ドキュメントで確認しています(2026年11月時点)。

WordPressが対応している範囲

WordPress は 4.0 から Mixcloud の埋め込みに対応しています。本体の wp-includes/class-wp-oembed.php に、mixcloud.com の URL を Mixcloud の oEmbed エンドポイント(https://app.mixcloud.com/oembed/)に問い合わせる設定があり、返ってきたプレーヤーの HTML が記事に入ります。

公式ドキュメントによると、埋め込めるのは次の3種類です。

種類 URLの例 表示されるもの
番組(トラック) https://www.mixcloud.com/ユーザー名/番組名/ 再生プレーヤー
プレイリスト https://www.mixcloud.com/ユーザー名/playlists/プレイリスト名/ プレーヤーと曲目(「UP NEXT」で一覧)
プロフィール https://www.mixcloud.com/ユーザー名/ プロフィールのウィジェット

埋め込む側に Mixcloud のアカウントは要りませんが、公開されているコンテンツでないと埋め込めません。

手順1: MixcloudでURLをコピーする

  1. Mixcloud で埋め込みたい番組・プレイリスト・プロフィールのページを開きます。
  2. 「Share」ボタンを押し、表示されたリンクをコピーします。ブラウザーのアドレスバーの URL でもかまいません。

URL の末尾に ?utm_source=... のようなパラメーターが付いている場合は、? 以降を消してから貼ると認識されやすくなります。

手順2: ブロックエディターに貼る

ブロックエディターでは、次のどちらかで埋め込みます。

  • URLだけを貼る: 空の段落に URL を1行だけで貼ると、自動で Mixcloud の埋め込みブロックに変わります。
  • Mixcloudブロックを使う: ブロック挿入ツール(「+」)で「Mixcloud」を検索して追加し、URL 欄に貼って「埋め込み」を押します。

埋め込めた場合は、エディター内にプレーヤーのプレビューが表示されます。埋め込めない URL のときは、埋め込めなかったことを知らせるメッセージ(英語表示では “Sorry, this content could not be embedded.”)が出て、URL をやり直すか、リンクに変換するかを選べます。

ブロックの設定は次のとおりです(公式ドキュメントより)。

場所 設定 内容
ツールバー 配置 左・中央・右寄せ。幅広・全幅はテーマが対応している場合だけ
ツールバー URLを編集 別の番組に差し替える
サイドバー メディア設定 小さな画面向けのサイズ変更のトグル。オンだと画面幅が変わっても縦横比を保つ(既定はオン)
サイドバー 高度な設定 HTML アンカー、追加 CSS クラス

背景色や枠線を付けたいときは、ブロックを「グループ」に変換し、グループ側で色や枠線を設定します。

クラシックエディターの場合

クラシックエディター(Classic Editor プラグインや、ブロックエディターの「クラシック」ブロック)でも、ビジュアルタブで URL を1行に単独で貼れば埋め込まれます。文章と同じ行に書くと、ただの文字列として表示されます。

URL を単独の行に置けない場合は、embed ショートコードで囲みます。

[embed]https://www.mixcloud.com/ユーザー名/番組名/[/embed]

テーマのテンプレートに表示する場合

固定の番組をサイドバーやフッターに出したいときは、wp_oembed_get() で埋め込み HTML を取得できます。ただし wp_oembed_get() は呼ぶたびに Mixcloud へ問い合わせるため、トランジェントに保存してから使います(投稿本文の埋め込みは WordPress が投稿メタに保存するので、この処理は不要です)。

<?php
/**
 * Mixcloud のプレーヤー HTML を返す(1日キャッシュ)。
 *
 * @param string $url Mixcloud の番組・プレイリスト・プロフィールの URL。
 * @return string 埋め込み HTML。取得できなければ空文字。
 */
function mytheme_mixcloud_player( $url ) {
	$key  = 'mytheme_mixcloud_' . md5( $url );
	$html = get_transient( $key );

	if ( false === $html ) {
		$html = wp_oembed_get( $url );
		if ( ! $html ) {
			return '';
		}
		set_transient( $key, $html, DAY_IN_SECONDS );
	}

	return $html;
}

テンプレート側では次のように呼び出します。

<?php echo mytheme_mixcloud_player( 'https://www.mixcloud.com/ユーザー名/番組名/' ); ?>

関数は子テーマの functions.php か、自作のプラグインに置いてください。

Mixcloudの埋め込みコードを直接使う場合

oEmbed で入るプレーヤーは、Mixcloud が返す標準の見た目です。2026年11月時点では、番組の URL に対して次のような iframe が返ってきます。

<iframe width="100%" height="120"
  src="https://www.mixcloud.com/widget/iframe/?feed=https%3A%2F%2Fwww.mixcloud.com%2Fユーザー名%2F番組名%2F&hide_cover=1"
  frameborder="0"
  allow="encrypted-media; fullscreen; autoplay; idle-detection; speaker-selection; web-share;"></iframe>

プレーヤーの大きさや表示を変えたい場合は、Mixcloud の共有画面で埋め込みコード(Embed)を開き、設定を選んでからコピーし、WordPress の「カスタム HTML」ブロックに貼ります。Mixcloud の開発者向け資料では、ウィジェットの表示オプションとして hide_cover・hide_tracklist・mini・hide_artwork・light が挙げられています。URL を手で書き換えるより、Mixcloud の画面で選んで出力されたコードを使うほうが間違いが起きにくくなります。

iframe を含む HTML を保存できるのは、unfiltered_html 権限を持つユーザー(通常のサイトでは管理者と編集者)だけです。投稿者・寄稿者が貼った iframe は保存時に取り除かれます。投稿者に任せる場合は、URL を貼る方法(oEmbed)を使ってもらいます。

埋め込めない・表示されないときの確認点

症状 確認すること
埋め込めなかったというメッセージが出る 番組が公開されているか、非公開・下書き・削除済みでないか。URL が番組・プレイリスト・プロフィールのページか
URLが文字のまま表示される URL が単独の行・単独の段落になっているか。前後に空白以外の文字がないか
どのサービスも埋め込めない サーバーから外部への HTTP 通信が止められていないか(セキュリティ系プラグインや WP_HTTP_BLOCK_EXTERNAL の設定)
番組を差し替えたのに古いまま 埋め込み結果は投稿メタにキャッシュされる。URL を一度削除して貼り直し、投稿を更新する
投稿者が貼ったiframeが消える unfiltered_html 権限がない。URL を貼る方法に切り替える

oEmbed 全般の原因の切り分けは、WordPressのoEmbedが動かないときの対処とoEmbedが表示されない原因と直し方も参考にしてください。

運用上の注意

  • 音源は公式プレーヤーで埋め込む: 番組の音声をダウンロードして自サイトに置き直すのではなく、Mixcloud のプレーヤーで再生させます。自分の番組でない場合は、公開されている番組を共有機能の範囲で紹介する使い方にとどめます。
  • 外部サービスの読み込みをプライバシーポリシーに書く: 埋め込んだページを開くと、訪問者のブラウザーは Mixcloud のサーバーに接続します。外部サービスの埋め込みについてプライバシーポリシーに記載しておきます。
  • 自動再生は期待しない: Mixcloud の開発者向け資料にもあるとおり、ブラウザーは利用者が操作していない音声の自動再生を制限しています。再生は訪問者に押してもらう前提でページを作ります。
  • 1ページに多数並べない: プレーヤーは1つずつ外部の iframe を読み込みます。番組を多数紹介する場合は、ページを分けるか、プロフィールやプレイリストの埋め込み1つにまとめます。

まとめ

  • WordPress 4.0 以降は、Mixcloud の公開コンテンツの URL を貼るだけで埋め込める。
  • ブロックエディターでは URL を単独の段落に貼るか、Mixcloud ブロックを使う。クラシックエディターでは URL を単独の行に置く。
  • テンプレートで使うときは wp_oembed_get() の結果をトランジェントに保存する。
  • 見た目を変えたい場合は Mixcloud の埋め込みコードを「カスタム HTML」ブロックに貼る。iframe を保存できるのは unfiltered_html 権限を持つユーザーだけ。

お気軽にご相談ください

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