はじめに
SoundCloudは、音楽やオーディオコンテンツを共有するための人気プラットフォームです。WordPressサイトで独自のコンテンツを制作している場合、SoundCloudから楽曲やプレイリストを直接埋め込むことで、訪問者にとって魅力的な体験を作り出すことができます。
症状・背景
このテーマが必要になる主な場面:
- <サイトで音楽コンテンツを共有したい>
- <音楽の紹介ページを作成する必要がある>
- <オーディオコンテンツへの直接リンクではなく、埋め込み形式で表示したい>
- <ウェブサイトにインタラクティブな要素を取り入れたい>
手順・設定方法
ステップ1: SoundCloudトラックの埋め込みURL取得
# WordPress記事編集中、SoundCloudページを開く
<実際のコマンド>
https://soundcloud.com/<ユーザー名>/<トラックID>
# 「共有」ボタンをクリックし、「HTML」タブを選択する
<実際のコマンド>
# ここで生成されたHTMLコードはWordPress記事内で使用できる
ステップ2: SoundCloud埋め込みコードをWordPressで使用
# WordPressダッシュボードにログインし、新しい投稿またはページを作成する
<実際のコマンド>
https://your-wordpress-site.com/wp-admin/post-new.php
# 「HTML」モードに切り替えて、SoundCloudから取得した埋め込みコードを貼り付ける
<実際のコマンド>
<!-- SoundCloud Embed Code Start -->
<div style="width:100%;height:166px;">
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/<トラックID>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
</div>
<!-- SoundCloud Embed Code End -->ステップ3: 音楽のプレイリストを埋め込む
# SoundCloudプレイリストページを開く
<実際のコマンド>
https://soundcloud.com/<ユーザー名>/<プレイリストID>
# 「共有」ボタンからHTMLコードを取得する
<実際のコマンド>
<!-- プレイリストEmbed Code Start -->
<div style="width:100%;height:450px;">
<iframe width="100%" height="450" scrolling="no" frameborder="no" allow="autoplay"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/<プレイリストID>&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
<!-- プレイリストEmbed Code End -->ステップ4: カスタムCSSとJavaScriptを適用（オプション）
# WordPressの子テーマフォルダにカスタムスタイルスシートを作成する
<実際のコマンド>
mkdir -p wp-content/themes/your-child-theme/css
touch wp-content/themes/your-child-theme/css/custom.css
# カスタムスタイルを適用する
<実際のコマンド>
// custom.css
.soundcloud-iframe {
width: 100%;
height: auto;
}
// JavaScriptを使用して、ページ読み込み時に自動再生を行う場合
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var iframes = document.querySelectorAll('.soundcloud-iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].src += '&auto_play=true';
}
});
</script>注意事項
- <実践的な注意点1>: SoundCloudの利用規約に従って、無断で他人の音楽を公開しないようにしましょう。
- <実践的な注意点2>: カスタムCSSとJavaScriptを使用する際は、WordPressテーマが更新されてもコードが失われないように子テーマフォルダを使用すること。
- <セキュリティ上の注意>: 動的コンテンツ（特にユーザー生成のもの）をサイトに埋め込む場合、クロスサイトスクリプト攻撃(XSS)やその他のセキュリティリスクがあることに留意してください。
- <パフォーマンス/運用上の注意>: 外部APIからのリクエストは遅延の原因となる可能性があります。必要に応じて、キャッシュプラグインを使用して表示速度を向上させることが推奨されます。
まとめ
1. 埋め込みURL取得: SoundCloudから音楽やプレイリストの埋め込みコードを直接取得し、それをWordPress記事内で使用します。
2. HTMLモードでの使用: WordPress編集画面で「HTML」モードを使用して、SoundCloudの埋め込みコードを貼り付けます。
3. カスタマイズ: カスタムCSSとJavaScriptを使って、音楽プレーヤーの見た目や動作をカスタマイズできます。
4. セキュリティとパフォーマンス: 埋め込みコンテンツを使用する際は、セキュリティ上のリスクとパフォーマンス問題に注意が必要です。
関連記事: