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

oEmbedを使用してWordPress投稿にSoundCloudを埋め込む方法

テキストだけでは訪問者の興味を引き付け、維持できないことがある。

お気に入りの音楽、あるいは自分の曲やポッドキャストをWordPressブログで簡単に共有できるとしたらどうだろう?それは可能です!SoundCloudユーザーなら、WordPressサイトに音声ファイル、プレイリスト、ポッドキャスト、録音セミナーを簡単に埋め込むことができます。

この初心者向けのガイドでは、あなたのページや投稿に音声ファイルを追加する方法をお教えします。oEmbedと呼ばれる機能を使って、SoundCloudの音声ファイルをサイトに追加する方法を見てみましょう。

How to Embed SoundCloud in Your WordPress Posts by using oEmbed

なぜWordPressにSoundCloudの音声ファイルを埋め込むのか?

SoundCloudは人気のある音楽とポッドキャストのホスティングプラットフォームで、3時間までの音声ファイルを無料でアップロードできます。

SoundCloudに音声ファイルを公開すると、ファイルはすべてサーバーに保存され、あなたのSoundCloudページを訪れた人にストリーミングされます。しかし、自分のサイトでも音声ファイルを利用できるようにすることで、ブログのトラフィックを増やせることがよくあります。

朗報は、oEmbedと呼ばれる機能のおかげで、URLを使用してWordPressサイトに任意のSoundCloud音声ファイルを追加できることです。

投稿にSoundCloudを埋め込む方法は、使用するWordPressエディターによって異なります。以下のクイックリンクをクリックするだけで、あなたのニーズに最も適した方法にジャンプします:

方法1:ブロックエディターを使ってWordPressにSoundCloudを埋め込む

WordPressには、PDFや TikTok動画、その他多くのコンテンツを埋め込むことができるビルトインブロックがいくつかあります。また、SoundCloudブロックもあるので、区切りプラグインをインストールしなくても音声ファイルを埋め込むことができます。

さらに良いことに、投稿のコンテンツエリアにリンクを貼り付ければ、WordPressが自動的にSoundCloudブロックを追加してくれる。

まず、SoundCloudにアクセスし、WordPressブログに追加したいファイルを見つけてください。これは、あなた自身のトラックでも、誰かが作成した公開トラックでも構わない。SoundCloudのプレイリストやアルバム全体を埋め込むこともできる。

トラック、プレイリスト、アルバムを開いたら、ページを下にスクロールして「リンクをコピー」アイコンをクリックします。

Copying the Soundcloud link

次に、WordPressダッシュボードに切り替え、SoundCloudファイルを埋め込みたいページまたは投稿に移動する。コンテンツエリアにURLを貼り付ける。

SoundCloudのURLを貼り付けると、WordPressが埋め込みコードを取得し、音声プレーヤーとトラックを表示します。

Paste the URL in the Content Area

再生」ボタンをクリックすると、WordPressエディター内で音声の再生が始まります。

トラックを追加した後、ブロックの上に外観されるツールバーと右側のメニューの設定を使用して、微調整することができます。

You Can Change the Settings

例えば、埋め込み部分の最大幅を設定したい場合、「Align」ボタンをクリックし、表示されるメニューからオプションを選択します。

初期設定では、WordPressはスマートフォンやタブレット上で埋め込みサイズを小さく表示します。この機能は有効化したままにしておくことをお勧めしますが、もしご希望であれば、右側のメニューにある’Resize for smaller devices’トグルを使って無効化することができます。

この設定を変更する場合は、WordPressサイトのモバイル版をテストして、SoundCloudファイルが期待通りに表示され、動作することを確認することをお勧めします。

埋め込み設定に満足したら、’更新’または’公開’をクリックして、埋め込んだSoundCloudファイルを公開します。

別の方法カスタムHTMLブロックを使う

Soundcloudファイルを埋め込むもう一つの方法は、SoundcloudのiFrameコードとWordPressカスタムHTMLブロックを使う方法です。この方法では、ファイルの見た目をカスタマイズする方法が増えます。

まず、Soundcloud音声ファイルのページで、’Share’ボタンをクリックします。

Clicking the Share button in Soundcloud

次に、「埋め込み」タブに切り替える。

ここに、コピーできるSoundcloudのiFrameコードがあります。

このコードをコピーする前に、埋め込みプレーヤーの色と設定を以下でカスタマイズすることもできます。コードはあなたの選択に従って更新されます。

Copying the Soundcloud embed code

このコードをコピーしたら、ページまたは投稿のブロックエディターを開く。

次に、’+ Add Block’ボタンをクリックし、‘Custom HTML‘ブロックを追加します。

Adding a new Custom HTML block in the block editor

本当に〜してもよいですか?

ここで、iFrameのコードをブロック内に貼り付けます。

Pasting the Soundcloud embed code in the block editor

埋め込みプレーヤーがどのように見えるかを見るには、「プレビュー」タブをクリックしてください。

更新」または「公開」をクリックすると、変更が反映されます。

Previewing the Soundcloud embed code in the block editor

方法2:古いクラシックエディターを使ってWordPressにSoundCloudを埋め込む

WordPressクラシックエディターを使用している場合は、同じ方法でSoundCloud音声を埋め込むことができます。

SoundCloudのトラック、アルバム、プレイリストへのリンクをコピーすることから始めます。

そうしたら、ファイルを埋め込みたいページや投稿を開いてください。そして、リンクをコンテンツエリアに一行で貼り付けるだけです。

Paste the Link on a Line of Its Own

ビジュアルエディターを使用している場合、WordPressのSoundCloud音声音楽プレーヤーのプレビューが表示されます。

ただ、WordPressのブロックエディターのように幅や配置を変更することはできないので注意が必要だ。

The SoundCloud Audio Player will be Automatically Displayed

WordPressへのSoundCloudの埋め込みに関するFAQ

このガイドを初めて公開して以来、WordPressにSoundCloudのコンテンツを埋め込む方法について読者から多くの質問をいただきました。

ここでは、よくある質問にお答えしよう。

1.WordPressにSoundCloudポッドキャストを埋め込むことはできますか?

ビルトインのSoundCloudブロックを使って、WordPressに簡単にポッドキャストを埋め込むことができます。ポッドキャストのエピソードやプレイリストをコンテンツエディターに貼り付けるだけで、WordPressが自動的にSoundCloudブロックに追加します。

2.WordPressに複数のSoundCloudの曲を追加できますか?

同じSoundCloudブロックに無制限に曲を追加できます。WordPressのコンテンツエディターにURLを貼り付けるだけで、アルバムやプレイリスト全体を埋め込むことができます。

曲のキュレーションリストを作成したい場合は、SoundCloudのプレイリストにすべてのトラッキングを追加し、プレイリストを公開することをお勧めします。そのプレイリストのURLをWordPressに貼り付けるだけで、WordPressにプレイリストを埋め込むことができます。

各トラックのプライバシー設定はプレイリストの設定に上書きされますのでご注意ください。つまり、公開プレイリストに追加しても、プライベートトラックをサイトに埋め込むことはできません。

3.WordPressサイトにSoundCloudチャンネルを追加するには?

曲やプレイリストを埋め込むのとまったく同じ方法で、SoundCloudチャンネルを追加できます。SoundCloudのチャンネルにアクセスし、URLをコピーするだけです。

そして、そのリンクをコンテンツエディターに貼り付けると、WordPressは、そのチャンネルのバナー、トラックの総数、「フォロー」ボタンを含むすべてのコンテンツを表示します。このようにして、サイト訪問者にSoundCloudでのフォローを促すことができます。

WordPressの投稿にSoundCloudの音声ファイルを埋め込む方法について、この投稿がお役に立てれば幸いです。次は、YouTube ライブストリームを埋め込む方法や、WordPress サイトに Google ウェブストーリーズを追加する方法をご覧ください。

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

7件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. kaushik

    Why to take trouble when the soundcloud shortcode plugin is there !

  3. Umair Ahmad

    hi, i want to add multiple souncloud(SC) track file in wordpress page post area, i get the following code from SC site,

    [soundcloud url=”https://api.soundcloud.com/tracks/68623291″ params=”color=00aabb&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false” width=”100%” height=”166″ iframe=”true” /]

    and embed it in post, but it does not show the track, instead displaying the embed code.

    i used the plugin name “SoundCloud Shortcode” on my self hosted site, but failed,

    Moreover, i am not following your instructions. :)

    have a look or attached file, thats the result.

  4. followers

    Hey pal, I’m a hip hop producer your article was impressive, it really heleped me. I hope my soundcloud mix will be better after reading this.thank you!

  5. bdubb

    How would you add support for album art to this function?

    • Native Imaging

      I was hoping for the same function. It would be nice if the album art can Auto-Populate the Featured Image for WP Posts. Fingers Crossed! :)

  6. Georgia Hebert

    I just recently discovered this webblog and I can say current post is very useful for all

返信を残す

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