[WordPress] メディアプレイヤーの表示がくずれる
[WordPress] 音声ファイルの再生 | プログラミング生放送 で紹介したメディアプレイヤーの表示ですが、サーバーやテーマによっては正しく表示できない場合があります。
当サイトでもつまづいた点を紹介します。
※ この投稿時点での WordPress のバージョンは 3.8.1 です。
アイコンが表示されない
再生ボタンやスピーカーのアイコンは SVG ファイルが使われています（表示するブラウザーによって PNG 画像と切り替わるようです）。サーバーによっては SVG ファイルにアクセスできるよう拡張子と MIME タイプを設定しておかないと表示されません。
Web.config
Windows Server (IIS) の場合、Web.config を編集します。
https://gist.github.com/jz5/8887024
.htaccess
.htaccess ファイルを使う場合は、下記の内容の .htaccess ファイルをサーバーのディレクトリに配置します。SVG ファイルは、/wp-includes/js/mediaelement/ にあります。
https://gist.github.com/jz5/8887039
ボリュームの位置がずれる
WordPress のテーマによってはメディアプレイヤーがくずれて表示されます。メディアプレイヤーの CSS 指定がもう少しテーマに堅牢であるといいのですが……。
当サイトではまったのは、ボリュームの位置がおかしいというものです。これは span に font-family を指定しているとスライダーなどの幅が変わりボリューム部分がはみ出してしまう現象です。
次のようにメディアプレイヤーの時間表示と同じ font-family をメディアプレイヤー内の span に指定すると解決します。
https://gist.github.com/jz5/8887178