WordPress メディアライブラリでSVGをサポートしているSVG Supportプラグイン

WordPress メディアライブラリでSVGをサポートするようにしてSVG Supportプラグイン

SVG画像を WordPressで使用する場合は、CSSを使用してSVG内にある要素のスタイルを調整するのが容易ではないことがあります。 無料のプラグインであるSVG Supportを使用すると、簡単にできます。

このプラグインはSVGサポートを提供するだけでなく、単純なIMGタグを使用してSVGファイル全体のコードを簡単に挿入できます。 IMG要素に「style-svg」を追加して、「style-svg」を含むIMG要素を完全なSVGに動的に置き換えます。

このプラグインは、 WordPress 4.8以上で導入された新しいImage Widgetでも使用可能であるとします。 （現在の WordPress 4.9-alpha-41335バージョンまでテストされた表示されていますね。）

もっと詳しく SVG Supportプラグイン ページを参照してみてください。

コードを使用して WordPress メディアアップローダを使用してSVGをアップロードできるようにする

WordPress 4.7.1以前のバージョンでは、次のコードを使用することができます。

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
// 출처: css-tricks

WordPress 4.7.1以降のバージョンでは、次のようなコードが動作することです。

// Allow SVG
// SVG 허용
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

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

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );
// 출처: https://codepen.io/chriscoyier/post/wordpress-4-7-1-svg-upload

メモ：

• メディアライブラリの整理のプラグイン