Spotify のプレイリストを WordPress にレスポンシブで埋め込んで再生する設定方法

SpotifyのプレイリストをWordpressに埋め込む方法

[spotify][/spotify]

Spotifyで毎日音楽聞いてます。最近好きな曲は Kygo, Sandro Cavazza – Happy Now をヘビロテしているNORI(@noriposo)です。

今回はWordPressなどのブログ記事で、Spotifyのプレイリストなどを埋め込んで表示・共有する方法をご紹介します。

手順通りやると問題なく設定がができますので、ぜひチャレンジしてみてください。

Spotifyのプレイリストを埋め込む前の準備

当然のことですが、埋め込むにはSopifyにアカウントがあることが前提ですので、Shopifyでアカウントを作成してください。

注意
Spotifyを埋め込む為にはWeb Playerではなく、アプリをダウンロードしてくる必要もありますので、こちらもインストールしておきます。

プレイリスト埋め込みコードの取得

ブログで紹介したい曲や、プレイリストなどがあればその曲やプレイリストをアプリで表示させます。

SpotifyのプレイリストをWordpressに埋め込む方法

STEP.1
・・・をクリック
ハートマークの隣の
・・・をクリックするとシェアという項目がでてきますのでシェアを選択
STEP.2
埋め込みコードをコピー
さらにその中にある埋め込みコードをコピーを選択
STEP.3
完了
青い通知ボックスで「埋め込みコードをクリップボードにコピーしました」という表示がでればコードのコピーが完了です。

生成される埋め込みコード

生成されるサンプルコードはこちら。私の好きな曲 Kygo, Sandro Cavazza – Happy Now の曲の埋め込みコードです。

参考埋め込みコード
<iframe src="https://open.spotify.com/embed/album/6nAjd2MlBY1f1mNu6BsWLO" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

埋め込んだコードが正常に表示される場合

投稿のテキストに上記の埋め込みコードをコピペして貼り付け公開すると、以下のように表示されます。

ただコピーしたものを貼り付けた場合、width=”300″となってしまっており、横幅が300に制限されて表示されてしまいます。
ここのコードをwidth=”100%”にすると横幅表示100%で表示されます。

ただ、ここで終わることもできますが、上記の方法だとコピペした後に毎回widthの数値を変更する必要があり若干面倒でもあるので、ショートコードを使ってコピペしたコードでも数字を変更することなく、簡単にレスポンシブ表示できるように少しコードをいじっていきます。

ショートコードの作成方法

ショートコードの使い方は、以下のように投稿画面で[Spotify]と入力することで、指定した関数の処理に基づいて値が出力されるというものです。

ショートコードを作成するには、functions.php に以下の記載することで任意のショートコードが使えるようになります。

Shopifyレンスポンシブ用コード
<?php
/**
 *このファイルではショートコードの登録を行います
 */

// ウィジェットでショートコードを有効に
add_filter('widget_text', 'do_shortcode');

// 登録
add_shortcode('spotify', 'responsive_spotify'); // Spotifyをレスポンシブで挿入

/*********************
 * Spotifyをレスポンシブに
 *********************/
if (!function_exists('responsive_spotify')) {
  function responsive_spotify($atts, $content = null)
  {
    if ($content) {
      return '<div class="spotify">' . $content . '</div>';
    }
  }
}

CSSでレスポンシブに修正

Spotifyの埋め込みコードはiframeなので上記 functions.php に追記しただけでは、CSSが効かずレスポンシブで表示がされません。

そこでテーマのCSSへ[shopify]のショートコードで、Shopifyの埋め込みコードであるiframeがレスポンシブで表示されるように以下のコードを追加します。

追記CSS
/*Spotifyのレスポンシブ対応[spotify]*/
.spotify {
  position: relative;
  margin: 1.5em 0;
  width: 100%;
  padding-top: 56.25%;
}
.spotify iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

レスポンシブでの表示結果

上記設定がきちんとできている場合、以下の埋め込みコードを入れて記事を更新すると、パソコンでみても、タブレットでみても、スマートフォンでみてもSpotifyのプレイリストの横幅が100%で表示されるようになります。

埋め込みコード
[spotify]<iframe src="https://open.spotify.com/embed/album/6nAjd2MlBY1f1mNu6BsWLO" width="300" height="380" frameborder="0"></iframe>[/spotify]

表示結果

[spotify][/spotify]

爆速で記事仕上げるために、Spotyfyのレスポンシブ用ショートコードを一発で入力できるように、WordPressの有名プラグインである「AddQuicktag」を使って設定しておくと非常に効率的で便利です。

設定方法のまとめ

本記事は、「Spotify のプレイリストを WordPress にレスポンシブで埋め込んで再生する設定方法」についてまとめた記事です。
多少難しいかもしれませんが、上記手順で設定できますのでぜひチャレンジしてみてください。

この設定方法の評価
設定方法の難易度
(4.0)
サイトデザインの美しさ
(5.0)
総合評価
(4.5)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です