WordPressでSVGをアップロードする
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
このサイトでは各所でSVG画像を使用しています。
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 -wikipediaより
要はベクター画像だから拡大縮小しても荒れない画像データだよ、ということ。
固定でSVGを設置している箇所には直接サーバーにアップロードしたSVGを使用してますが、WordPressのメディアにアップロードして管理したい場合もあるのでカスタマイズしました。
WordPressでSVGアップロードを許可する方法
基本的にはfunction.phpに下記を記載します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //SVGアップロード許可 | |
| function SVG_mime_types($mimes) { | |
| $mimes['svg'] = 'image/svg+xml'; | |
| return $mimes; | |
| } | |
| add_filter('upload_mimes', 'SVG_mime_types'); | |
| //アイキャッチ欄サムネイル表示 | |
| 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'); |
こんな感じ。
MIMEタイプ（ファイル形式）配列にSVGのMIMEタイプを追加して実行してやる感じです。
もう一手間。投稿画面のアイキャッチ欄にSVG画像を表示
ついでにもう一工夫。↑の「SVGアップロード許可」の記述だけでもいいんですが、僕の場合はブログ記事のアイキャッチとしてSVGを使うためにこのカスタマイズを行ってます。
ただ「SVGアップロード許可」の記述だけだと基本的にWP管理画面上でアップしたSVG画像のサムネイルが表示されません。
なのでブログ投稿画面上のアイキャッチ欄に指定したSVGのサムネイルを表示するために「アイキャッチ欄サムネイル表示」部分も追加しました。
SVG用styleをechoする関数を追加する感じです。
メディア内のサムネイルは表示されないままになりますが、そこまで大量にSVGの使用用途が無いこと＆ファイル名は表示されるので別にいいかな、という感じです。
本日も偉大なる先人に感謝。
