WordPressテーマの作り方 » WordPressでSVG画像を扱えるようにする

こんにちは。相当久しぶりの更新です。

さて、今日はWordPressでSVG画像を扱う方法について紹介します。SVGを使えるようにするプラグインや、functions.phpの記述方法について書いているサイトを見て幾つか試してみましたが上手くいかず、ちょっとハマったので結果を記しておきます。

まずは、functions.phpに下記を追記します。

functions.php

	<?php
	// SVGファイルに対応する
	add_filter( 'upload_mimes', 'my_add_mime_type' );
	if( !function_exists('my_add_mime_type') ) {
	function my_add_mime_type($mime_types)
	{
	$mime_types['svg'] = 'image/svg+xml';
	$mime_types['svgz'] = 'image/svg+xml';
	return $mime_types;
	}
	}

	add_filter('ext2type', 'my_ext2type');
	if( !function_exists('my_ext2type') ) {
	function my_ext2type($ext2types)
	{
	array_push($ext2types['image'], 'svg', 'svgz');
	return $ext2types;
	}
	}

	add_filter('wp_generate_attachment_metadata', 'my_wp_generate_attachment_metadata',1,2);
	if( !function_exists('my_wp_generate_attachment_metadata') ) {
	function my_wp_generate_attachment_metadata($metadata, $attachment_id)
	{
	$attachment_post = $post = get_post($attachment_id);
	$type = $attachment_post->post_mime_type;
	if ($type === 'image/svg+xml' && empty($metadata)) {
	$upload_dir = wp_upload_dir();
	$base_name = basename($attachment_post->guid);
	$metadata = array(
	'file' => $upload_dir['subdir'] . '/' . $base_name
	);
	}
	return $metadata;
	}
	}

view raw functions.php hosted with

by GitHub

<?php // SVGファイルに対応する add_filter( 'upload_mimes', 'my_add_mime_type' ); if( !function_exists('my_add_mime_type') ) { function my_add_mime_type($mime_types) { $mime_types['svg'] = 'image/svg+xml'; $mime_types['svgz'] = 'image/svg+xml'; return $mime_types; } } add_filter('ext2type', 'my_ext2type'); if( !function_exists('my_ext2type') ) { function my_ext2type($ext2types) { array_push($ext2types['image'], 'svg', 'svgz'); return $ext2types; } } add_filter('wp_generate_attachment_metadata', 'my_wp_generate_attachment_metadata',1,2); if( !function_exists('my_wp_generate_attachment_metadata') ) { function my_wp_generate_attachment_metadata($metadata, $attachment_id) { $attachment_post = $post = get_post($attachment_id); $type = $attachment_post->post_mime_type; if ($type === 'image/svg+xml' && empty($metadata)) { $upload_dir = wp_upload_dir(); $base_name = basename($attachment_post->guid); $metadata = array( 'file' => $upload_dir['subdir'] . '/' . $base_name ); } return $metadata; } }

１つ目のフィルターでメディアアップロード時にWordPressが受け入れるMIME TypeのリストにSVGを追加し、２つ目のフィルターで画像として記事に貼るときに使う拡張子/MIME Type変換テーブルにSVGを追加します。

一見これだけで動きそうです。ところが、それだけでは「メディアを追加」ボタンを押しても動かないんですよね。wp-includes/functions.phpに記述されているメディアアップロード処理の途中でgetimagesize関数で画像サイズを求める箇所があるのですが、getimagesize関数はSVGファイルに対して正しく働かない。そしてこの画像サイズ情報が入手できないと、それとセットで格納されるメディアのファイルパスも空のままで情報登録されてしまう処理になっていることが原因です。という訳で、３つ目のフィルター”wp_generate_attachment_metadata”を使ってSVGファイルをアップロードした場合に、ファイルパスをメディア情報に加える処理を追加しました。

テーマの編集は以上です。

一方で、サーバー側でsvg+xmlのMIME Typeのファイルアップロードを受け入れていない場合があります。.htaccessが使えるならば、次の１行をサイトディレクトリ直下の.htaccess最後に追記します。