暗号資産(仮想通貨)は買わない!無料でもらう方法 >>

WordPress(ワードプレス)で音楽配信サイトをつくる方法【ワンクリック再生】

この記事はプロモーションを含みます
  • 音楽配信サイトをつくりたい
  • バンドの曲を配信したい
  • ワンクリックで再生させたい
結論からいうと、フォトギャラリーを利用します。
写真のようにアルバムジャケットを並べ、ワンクリックで音楽を再生させます。
htmlでゴリゴリ作れたらよいけれど、知識がないのでWordPressで作ってみたいという方へ向けた記事です。
実際につくったサイトはコチラ
https://projectofnapskint.com

お得なキャンペーン情報

Xserver(エックスサーバー)ブログ開設キャンペーン
【期間限定:2024年5月1日(水)12時まで】
期間中に新規申し込みで最大30%OFF & ドメイン2つ永久無料

スタンダードプラン
12ヶ月契約で1,100円→880円/月
24ヶ月契約で1,045円→783円/月
36ヶ月契約で990円→693円/月

期間限定のキャンペーン中にはじめた方が、損をしません!

\ 今だけお得にスタート! /

>>>今すぐブログを始める 

Xserver(エックスサーバー)ブログ開設キャンペーン

豪華キャンペーン同時開催中!

この記事を書いた人
HiD
ハイディー
  • NFTコレクター
  • NFT投資で含み益200万円超
  • 音楽NFTコレクションを運営
  • バンドマンでギターリスト
  • 元ECサイト運営マネージャー:年商10億
もくじ

WordPressテーマはSWELLを選択

最初は音楽配信用のテーマを使えばすぐ作れると思い、カッコよさそうな海外のテーマを買ってみました。
WordPressにも慣れてないのに、英語のテーマはハードル高すぎた…
ハイディー

DeepLつかっても限界がある…

失敗から学び、
日本語で利用者が多く、評判もよい「SWELL」を選びました。
利用者が多い→わからない時に調べて解決しやすい

\ シンプルなのに機能的 /

>>>SWELLを購入する

海外テーマからSWELLに変更して感じたこと

日本語は正義

英語ができる人は別ですが、日本語の表記が重要であることがわかりました。
そもそもブログに不慣れなのに、メニューから全て翻訳しないといけないのは大変すぎです。

ググれば解決する

ブログを始めたばかりだと、分からないことだらけ。
困った時にググって解決するのはありがたいです。

もちろん、海外テーマもググって分かることがありますが、「SWELL」のように利用ユーザーが多いと、細かい疑問でもすぐに解決します。

>>>WordPressのテーマは有料?無料?どっちがいいの?

フォトギャラリーを利用

目指したのはジャケット画像のクリックで曲が再生されるサイト。

画像クリック→詳細ページ→再生ボタンを押してやっと曲が聴ける…
では、聴くまでの導線が長くてめんどくさい。

ネットで検索してもSpotifyやSoundCloudを埋め込む方法はあったけど、外部サイトを使わない方法が見つかりませんでした。

サービス終了や禁止事項の追加などで自分のサイトで使えなくなるリスクは避けたかった。

使ったプラグインはPhoto Gallery

photo Gallery
つかったプラグインはPhoto Gallery 
無料版を使っています。
選んだポイントは3つ
  • 曲にリンクが貼れる
  • 更新が止まっていない
  • 利用者が多い
この3つがクリアできていれば、他のプラグインでも問題なし。
WordPressのブロック「ギャラリー」でも同じことができますが、操作方法がカンタンだったPhoto Galleryにしました。
設定
設定は
「Redirect to url」でリンク先の曲が再生される
CDジャケットのイメージでサムネも正方形に設定。
設定
Galleryをつくったら、イメージ画像を入れてタイトルを入力。

WordPressのテーマ「SWELL」の「アイコン」をつかって、再生ボタンを表示。

<i class="fas fa-caret-square-right"></i>
↑再生ボタンのアイコン
メディア

アップロードした曲のURLをコピペします。

サイトに配置する

TOPページにギャラリーを配置します。
ギャラリー配置
ブロックから「Photo Gallery」を選択。
表示イメージ
このように表示されます。

注意点:必要な場合、詳細ページは別途用意する

上記のやり方で、画像からワンクリックで音楽を再生することはできます。
ただし、音楽を聴けるだけ。

なので、詳細ページが必要な場合は、
別途、投稿ページをつくる必要があります。
詳細イメージ
このように投稿で別ページをつくっています。

まとめ

画像からワンクリックで音楽を再生させるためには
  • htmlの知識がない場合、フォトギャラリーを利用する
  • 詳細ページは別途つくる
お手軽に音楽を聴いてもらえるサイトがつくれます!

WordPressは10分で始められるので、この機会にチャレンジしてみましょう!

>>>WordPressブログの始め方

お得なキャンペーン情報

Xserver(エックスサーバー)ブログ開設キャンペーン
【期間限定:2024年5月1日(水)12時まで】
期間中に新規申し込みで最大30%OFF & ドメイン2つ永久無料

スタンダードプラン
12ヶ月契約で1,100円→880円/月
24ヶ月契約で1,045円→783円/月
36ヶ月契約で990円→693円/月

期間限定のキャンペーン中にはじめた方が、損をしません!

\ 今だけお得にスタート! /

>>>今すぐブログを始める 

Xserver(エックスサーバー)ブログ開設キャンペーン

豪華キャンペーン同時開催中!

music

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ