memocarilog

svg の拡張子画像も jpg 画像などと同様に管理画面からアップロードできるようにし、SVG画像をアイキャッチに設定した際にサムネイルを表示可能にする方法です。

.svg 拡張子画像のアップロードを許可する設定

WordPress 4.0 現在では、svg 拡張子の画像を「メディアを追加」などでアップロードしようとすると以下のような「許可されていません」というエラーがでてアップロードできません。

svg 拡張子の画像のアップロードを許可するには、以下のコードを functions.php へ記入します。

function cc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

これで svg 画像がアップロードができるようになりました。

アイキャッチ設定で SVG 画像のサムネイルを表示する

このまま SVG画像をアイキャッチに設定すると、下の画像ように空白になってしまい設定できているのか不安になってしまいます。

これを回避するためには以下のコードを functions.php へ記入します。

function fix_svg_thumb_display() {
  echo '<style>
	td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail, #set-post-thumbnail img[src$=".svg"]{ 
	width: 100% !important; 
	height: auto !important; 
	}</style>';
}
add_action('admin_head', 'fix_svg_thumb_display');

このコードで、管理画面を開いた時に head 内に アイキャッチ画像の欄の .svg 拡張子画像の横幅と高さを保つスタイルを書き出してくれるため、アイキャッチ欄のサムネイルが表示されるようになります。

最初にセレクタ指定している td.media-icon img はどこの画像の指定なのか不明ですが、参考元の CSS-TRICKS さんの記事に記入されていたので、そのまま念の為付けてしまいました…。