워드프레스 미디어 라이브러리에서 SVG를 지원하는 SVG Support 플러그인

0

워드프레스 미디어 라이브러리에서 SVG를 지원하도록 하는 SVG Support 플러그인

SVG 이미지를 워드프레스에서 사용하는 경우 CSS를 사용하여 SVG 내에 있는 요소들의 스타일을 조정하기가 쉽지 않을 수 있습니다. 무료 플러그인인 SVG Support를 사용하면 수월하게 가능합니다.

이 플러그인은 SVG 지원을 제공할 뿐만 아니라 단순한 IMG 태그를 사용하여 전체 SVG 파일의 코드를 쉽게 삽입할 수 있도록 합니다. IMG 요소에 “style-svg”를 추가하여 “style-svg”가 포함된 IMG 요소를 완전한 SVG로 동적으로 바꾸어줍니다.

이 플러그인은 워드프레스 4.8 이상에서 도입된 새로운 Image Widget에서도 사용 가능하다고 합니다. (현재 WordPress 4.9-alpha-41335 버전까지 테스트되었다고 표시되어 있네요.)

자세한 내용은 SVG Support 플러그인 페이지를 참고해보세요.

코드를 사용하여 워드프레스 미디어 업로더를 통해 SVG를 업로드할 수 있도록 허용하기

워드프레스 4.7.1 이전 버전에서는 다음 코드를 사용할 수 있습니다.

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

워드프레스 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

참고:

Related Posts