2 cách để thêm hỗ trợ hình ảnh SVG trong WordPress

Thông thường khi xuất bản nội dung trên website của mình, tôi không bao giờ sử dụng hình ảnh SVG trong bài đăng của mình.

Vấn đề là không phải lúc nào chúng tôi cũng sử dụng các công cụ xuất bản của WordPress ( The Block Editor , Elementor, v.v.) để chỉnh sửa nội dung, đôi khi chúng tôi tạo trang đích bằng chúng.

Khi bạn cố tải biểu tượng SVG lên trang web WordPress, bạn sẽ gặp lỗi như thế này trong Tải lên phương tiện:

Hoặc nếu bạn cố tải nó lên qua REST API thì nó sẽ trả về 500 Server Error với nội dung phản hồi sau:

{
	"code":"rest_upload_sideload_error",
	"message":"Sorry, you are not allowed to upload this file type.",
	"data":{
		"status":500
	}
}

{

"code":"rest_upload_sideload_error",

"message":"Sorry, you are not allowed to upload this file type.",

"data":{

"status":500

}

Giải quyết vấn đề này có 2 cách:

1. Đoạn mã cho phép tải lên SVG

Chỉ cẩn add đoạn mã này vào file function.php là chạy

add_filter( 'upload_mimes', 'rudr_svg_upload_mimes' );

function rudr_svg_upload_mimes( $mimes ) {
	
	// it is recommended to uncomment these lines for security reasons
	// if( ! current_user_can( 'administrator' ) ) {
	// 	return $mimes;
	// }

	$mimes[ 'svg' ]  = 'image/svg+xml';
	$mimes[ 'svgz' ] = 'image/svg+xml';

	return $mimes;
	
}

add_filter( 'wp_check_filetype_and_ext', 'rudr_svg_filetype_ext', 10, 5 );

function rudr_svg_filetype_ext( $data, $file, $filename, $mimes, $real_mime ) {

	if( ! $data[ 'type' ] ) {

		$filetype  = wp_check_filetype( $filename, $mimes );
		$type = $filetype[ 'type' ];
		$ext = $filetype[ 'ext' ];
		
		if( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
			$ext  = false;
			$type = false;
		}

		$data = array( 
			'ext' => $ext,
			'type' => $type, 
			'proper_filename' => $data[ 'proper_filename' ],
		);
		
	}

	return $data;

}

add_filter( 'upload_mimes', 'rudr_svg_upload_mimes' );

function rudr_svg_upload_mimes( $mimes ) {

// it is recommended to uncomment these lines for security reasons

// if( ! current_user_can( 'administrator' ) ) {

// return $mimes;

// }

$mimes[ 'svg' ] = 'image/svg+xml';

$mimes[ 'svgz' ] = 'image/svg+xml';

return $mimes;

}

add_filter( 'wp_check_filetype_and_ext', 'rudr_svg_filetype_ext', 10, 5 );

function rudr_svg_filetype_ext( $data, $file, $filename, $mimes, $real_mime ) {

if( ! $data[ 'type' ] ) {

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

$type = $filetype[ 'type' ];

$ext = $filetype[ 'ext' ];

if( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {

$ext = false;

$type = false;

}

$data = array(

'ext' => $ext,

'type' => $type,

'proper_filename' => $data[ 'proper_filename' ],

);

}

return $data;

}

2. Sử dụng Plugin SVG Support

Khoảng 1tr+ lượt cài đặt chắc chắn bạn yên tâm cài đặt=> SVG Support

Bạn chỉ cần cài đặt và kích hoạt nó là xong. Như bạn có thể thấy, nó miễn phí và có sẵn trong bảng điều khiển WordPress của bạn trong Plugins > Add New.

Chúc bạn thành công!