WordPressの記事に音声プレイリストを挿入する方法をまとめておきます。
音声プレイリストとは？
音声プレイリストを使うと、下記の様な音声プレイヤーを表示できます。
音声ファイルの挿入と似ていますが、表示できる情報やデザインが若干異なります。
| 音声ファイル | 音声プレイリスト | |
|---|---|---|
| オーディオプレイヤー | 〇 | 〇 |
| タイトル（曲名） | × | 〇 |
| アルバム名 | × | 〇 |
| アーティスト名 | × | 〇 |
| ジャケット画像 | × | 〇 |
| 複数曲のリスト表示 | × | 〇 |
曲の詳細情報を載せたい＆複数の曲をリスト表示させたい時に使うと便利です。
クラシックブロックで挿入する
記事編集画面で、「クラシック」ブロックを追加します。
タブ一覧から、「メディアを追加」を選択します。
アクションから、「音声プレイリストを作成」を選択します。
曲を選択して、「プレイリストを新規作成」をクリックします。
ここでは、添付ファイルの詳細も編集できますが、後からメディアライブラリで編集した方が楽です。
必要であれば、曲の順番をドラッグ＆ドロップで入れ替えることができます。また、表示させたくない項目があれば、プレイリストの設定のチェックを外して下さい（初期設定推奨）。
設定に問題がなければ、「音声プレイリストを挿入」をクリックして、記事に音声プレイリストを挿入します。
ショートコードで挿入する
記事編集画面で、段落ブロック及びショートコードブロックに音声プレイリストショートコードを挿入します。
曲が複数ある場合は、「,」で区切って追加して下さい。
ショートコードには下記のオプションを追加することもできます。
| 効果 | |
|---|---|
| tracklist="false" | トラックリストを非表示にする |
| artists="false" | トラックリストのアーティスト名を非表示にする |
| images="false" | 画像を非表示にする |
| style="dark" | ダークテーマに変更する |
メディアファイルIDが分からない時は、メディアライブラリで音声ファイルを選択して、表示されたURLを確認して下さい。URLの「item=〇〇」「post=〇〇」に表示されている数字がメディアファイルIDです。
音声ファイルの編集
音声プレイリストに表示される項目は、音声ファイルを編集して変更できます。
管理画面の「メディアライブラリ」から、編集したい音声ファイルを選択します（リスト表示の場合は編集）。
添付ファイルの詳細で、「タイトル」「アーティスト」「アルバム」を入力します。
入力する必要はありませんが、「キャプション」はリストに表示されるタイトル（未入力の場合は「タイトル – アーティスト」で表示）、「説明」は添付ファイルページで表示される説明文です（デザインに影響しない）。
アイキャッチ画像を設定したい時は、右下の「さらに詳細を編集」をクリックします。
表示させたい画像を「アイキャッチ画像を設定」から選択します。
この際、アイキャッチ画像にはサムネイルが使用されますが、表示される画像のサイズは「60 x 60」の正方形になっています。縦横比率1:1の画像を使うと見栄えがよくなります。
ここで編集した内容は、挿入済みのプレイリストにも反映されます。
最後に
複数の曲をまとめて紹介したい＆曲の詳細情報を一緒に載せたい時は、音声ファイルの挿入よりも音声プレイリストがおすすめです。ただ、ブロックエディターでは専用のブロックが用意されていないので、ブロックエディターで使用する時は、クラシックブロックを使う及びショートコードで挿入する必要があります。
コメント