[WordPress] .svg 拡張子画像をアップロードできるようにし、管理画面のアイキャッチ設定欄にサムネイルを表示されるようにする

[WordPress] .svg 拡張子画像をアップロードできるようにし、管理画面のアイキャッチ設定欄にサムネイルを表示されるようにする

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 画像のサムネイルを表示する

このまま 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 拡張子画像の横幅と高さを保つスタイルを書き出してくれるため、アイキャッチ欄のサムネイルが表示されるようになります。
アイキャッチ欄にsvg画像のサムネイルが表示されるようになった

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

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能