[WordPress] メディアプレイヤーの表示がくずれる

2014/02/09WordPress

[WordPress] 音声ファイルの再生 | プログラミング生放送で紹介したメディアプレイヤーの表示ですが、サーバーやテーマによっては正しく表示できない場合があります。

当サイトでもつまづいた点を紹介します。

※ この投稿時点での WordPress のバージョンは 3.8.1 です。

アイコンが表示されない

再生ボタンやスピーカーのアイコンは SVG ファイルが使われています（表示するブラウザーによって PNG 画像と切り替わるようです）。サーバーによっては SVG ファイルにアクセスできるよう拡張子と MIME タイプを設定しておかないと表示されません。

Windows Server (IIS) の場合、Web.config を編集します。

	<?xml version="1.0" encoding="UTF-8" ?>
	<configuration>
	<system.webServer>
	<staticContent>
	<remove fileExtension=".svg" />
	<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
	</staticContent>
	</system.webServer>
	</configuration>

view raw

gistfile1.xml

hosted with ❤ by GitHub

.htaccess ファイルを使う場合は、下記の内容の .htaccess ファイルをサーバーのディレクトリに配置します。SVG ファイルは、/wp-includes/js/mediaelement/ にあります。

AddType image/svg+xml svg

view raw

gistfile1.apacheconf

hosted with ❤ by GitHub

WordPress のテーマによってはメディアプレイヤーがくずれて表示されます。メディアプレイヤーの CSS 指定がもう少しテーマに堅牢であるといいのですが……。

当サイトではまったのは、ボリュームの位置がおかしいというものです。これは span に font-family を指定しているとスライダーなどの幅が変わりボリューム部分がはみ出してしまう現象です。

次のようにメディアプレイヤーの時間表示と同じ font-family をメディアプレイヤー内の span に指定すると解決します。

view raw

gistfile1.css

hosted with ❤ by GitHub

Posted by jz5