WordPressのネイティブ Audio player（ショートコード）をカスタマイズする（Post Snipetsプラグイン利用）

当ブログの性格上、投稿記事中に音声ファイルを配置する機会が多いので、Wordpressに組込まれたaudioショートコードよりオプション設定が簡単で使い勝手の良い「MediaElement.jsプラグイン」のショートコード（ [mejsaudio src="〜.mp3"] ）を以前から使って、Audio playerを投稿ページに埋め込んでいました。　

ところが、Wordpressはバージョン3.6からMediaElementが組み込まれ「MediaElement.jsプラグイン」が有効になっていると、Wordpressのネイティブ audioショートコードと競合してCSSのclass名が２重に表記されるなど互換上の問題があることが分かりました。（元々、「MediaElement.jsプラグイン」は使用中の WordPress バージョンで未検証と表記されていたものの敢えて使用していた。）

そこで、「MediaElement.jsプラグイン」を削除して、新たにWordpressに付属するaudioショートコードをベースに位置指定やスキン色の指定などが簡単にできるAudio playerショートコードをPost Snipetsプラグインを利用して作ってみました。

WordPressのネイティブ Audio（音声）ショートコードについて

WordPress公式サポートサイトより「Audio（音声）ショートコード」ページから以下要約・抜粋

オペレータ

以上のオプショには、Audio playerのサイズ（横幅は100%一定）や色等のオプション指定は出来ず若干扱い難いです。

まず、新たに作成したショートコードによるサンプルを示します。

 new shortcode
[Audio_player src="url.mp3" width="300px" margin="0" color="default"]
" "で囲まれた部分がオプションになります。（後述）

オペレータ

このショートコードはフルで記述する必要はありません。　指定したいオプションを記述するだけでOKです。　例えば横幅を400pxに指定したければ[Audio_player src="url.m4a" width="400px"]だけでOKです。

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

ショートコードが簡単に作成できる、Post Snippets プラグインを使います。　Post SnippetsプラグインをWordpressにインストールして有効化します。　Post Snippetsプラグインの使い方は、「小技・事例集」を参照してください。

Post Snippets 設定画面は以下の通りで、番号を振った部分に従って説明します。

① にショートコードの名称を記入します。　今回は、Audio_player にしました。

② にHTMLコード（下記）を記入します。

③ に変数（オプション）のデフォルト値を記載します。

④ にショートコード化するので、レ点を入れます。　⑤ にはPHPを使っていないので無記入のままです。

⑥ にショートコードの簡単な説明を記載します。　参考として以下を記載

オペレータ

Saveボタンを押してAudio_player ショートコードの完成です。　非常に簡単に作成できますね。　次にスキン（表面）カラー指定のためのCSSコードを追記します。　

WordPress管理画面で テーファイルエディタ ＞ 子テーマのスタイルシート (style.css)　で以下のCSSコードを追記します。

 CSS
/* Audio player の表面色 　PostSnipetsとの連携CSS*/
div.audio_player_brown .mejs-controls{background-color:#5D310C;}/*brown系*/
div.audio_player_blue .mejs-controls{background-color:#00547A;}/*blue系*/
div.audio_player_green .mejs-controls{background-color:#264a2e ;}/*green系*/
div.audio_player_red .mejs-controls{background-color:#C11F34;}/*red系*/

『備考：Wordpress audio ネイティブplayer class要素の『 .mejs-controls 』に {background-color:#5D310C;}  付与することで、背景色が brown系 #5D310C になります。』

以上で、CSSの連携含めた、Audio player（ショートコード）をカスタマイズできるショートコードが完成しました。

オペレータ

完成したショートコードを使うには、ビジュアルエディタで、右上コンソールにあるPostSnippetsボタンをクリックして Audio_player を選択すればOKで、又は、ショートコードを直書きします。

ついでに、Audio playListのデザインをカスタマイズするショートコードを作ってみました。

作成手順としては、前記「Audio player ショートコード」の作成と同じです。　下にPost Snippetsの管理画面に記載する主要項目とstyleシートに追記するCSSコードを示します。

 CSS
/* PlayListの背景を薄い青 #E1F5FEにカラーリング */
.plist_back_color_on .wp-playlist-light{background-color: #E1F5FE;}

 Audio_playList shortcode
[Audio_playList ids="0" color="default" back_color="off" width="100%" margin="0"]
" "で囲まれた部分がオプションになります。

Audio playList ショートコードの使い方

テキストエディタ側にしてコンソールの上にあるメディアを追加 ボタンを押し音声プレイリストを作成 を選んで　リスト化したい音声ファイルを選びます。　プレイリストの新規作成ボタンを押してプレイリストの編集後、音声プレイリストの挿入ボタンを押すとテキストエディタにショートコード、 例えば、【playlist ids="8307,8306,8304"】が挿入されます。　id=後の数字番号がidになります。

Audio playList ショートコード 事例紹介

以上、Wordpressに付属するaudioショートコードをベースに位置指定やスキン色の指定などのカスタマイズが簡単にできるAudio playerショートコードの紹介でした。