Sử dụng SVG trong WordPress như thế nào?

Chúng ta biết rằng WordPress hỗ trợ rất nhiều định dạng file ảnh như: jpg, png, gif, nhưng lại không tự động kích hoạt định dạng SVG (Scalable Vector Graphics) cho chúng ta, đây là một định dạng khá phổ biến cho những website bây giờ. SVG có thể tuỳ ý co giãn hình ảnh mà không sợ bị giảm chất lượng.

Tuy vậy, vẫn có cách đơn giản sau để kích hoạt chức năng sử dụng SVG cho WordPress, bài viết dưới đây của mr386 sẽ hướng dẫn bạn cách khởi động SVG cho WordPress. Chúng ta sẽ sử dụng những cách đơn giản sau đây:

1. Sử dụng SVG Support Plugin để hỗ trợ

Để đỡ phải lằng nhằng, đây là cách nhanh nhất, cài vào là xong. Các bạn chỉ việc tìm và cài đặt SVG Support Plugin này lên, sau đó active nó để sử dụng.

WordPress sẽ yêu cầu bạn sử dụng thẻ <xml> trước khi sử dụng tiếp file SVG. Như vậy là phải khai báo cho file SVG của bạn:

<?xml version="1.0" encoding="utf-8"?>

Trong plugin này sẽ có 2 lựa chọn:

1. Advanced Mode: Bật tính năng này lên nếu SVG của bạn là 1 ảnh động, hỗ trợ CSS
2. Restrict to Administrators: Đây là một tính năng hạn chế upload, chỉ dành cho administrator.

2. Thay đổi trong file functions.php

Đây là cách mình rất thích, tự quản lý code của mình, không phải phụ thuộc vào ai. Và nhất là không sợ “nặng” website của bạn.

Đối với ae sử dụng WordPress không còn lạ gì cách chỉnh sửa này, mỗi một theme trong WordPress đều có chứa một file functions.php, hãy tìm nó và chèn thêm đoạn mã này vào, sau đó là sử dụng SVG thoải mái trong media nhé.

function add_file_types_to_uploads($file_types) {
    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );
    return $file_types;
}

add_filter('upload_mimes', 'add_file_types_to_uploads');

Oki bây bê, vậy là bạn đã có 2 phương cách để có thể sử dụng tuỳ ý SVG cho website của mình.

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