Cách upload file svg lên wordpress cập nhật mới nhất năm 2025

Mục mục bài viết

Dù SVG có nhiều ưu điểm như kích thước nhỏ, độ phân giải cao và khả năng mở rộng tốt, nhưng vì các lý do bảo mật và khả năng tương thích, WordPress không cho phép tải lên file SVG theo mặc định. Nếu bạn muốn sử dụng SVG trong WordPress, bạn cần thực hiện một số điều chỉnh trong mã nguồn hoặc sử dụng plugin để cho phép tải lên các file này một cách an toàn.

Sau đây mình sẽ hướng dẫn cách bạn cách upload file svg lên wordpress cập nhật mới nhất.

Cách upload file svg lên wordpress

Để chèn đoạn code vào WordPress và đảm bảo nó hoạt động, bạn có thể làm theo các bước sau:

Bước 1: Đăng nhập vào WordPress Admin

Truy cập vào bảng điều khiển quản trị của WordPress bằng cách sử dụng thông tin đăng nhập của bạn.

Bước 2: Chỉnh sửa file functions.php

1. Đi đến Giao diện (Appearance) hoặc giao diện: Trong bảng điều khiển bên trái, chọn giao diện (Appearance) rồi chọn chỉnh sửa (Editor).
2. Tìm file functions.php: Trong danh sách các file bên phải, tìm và nhấp vào file có tên là functions.php. Đây là file mà bạn sẽ thêm đoạn code vào.

Bước 3: Thêm đoạn code

Cuộn xuống cuối file functions.php.
Dán đoạn code dưới đây vào cuối file:

Xem thêm.

function howto_edu_vn_mime_types($mimes) {
$mimes['svg'] = $mimes['svgz'] = 'image/svg+xml';
return $mimes;}
add_filter('upload_mimes', 'howto_edu_vn_mime_types');
function howto_edu_vn_mimetype_svg($data, $file, $filename, $mimes) {
$extension = pathinfo($filename, PATHINFO_EXTENSION);
if (in_array($extension, ['svg', 'svgz'])) {
$data['type'] = 'image/svg+xml';
$data['ext'] = $extension;}
return $data;}
add_filter('wp_check_filetype_and_ext', 'howto_edu_vn_mimetype_svg', 100, 4);

Bước 4: Lưu thay đổi

Nhấn nút Cập nhật file (Update File) để lưu các thay đổi bạn đã thực hiện.

Bước 5: Kiểm tra hoạt động

Vào phần Media trong bảng điều khiển WordPress.
Nhấn nút Thêm mới (Add New) để tải lên một file SVG hoặc SVGZ.
Kiểm tra xem file có nhìn được file hoặc file tải lên thành công hay không.

Lưu ý

Trước khi thực hiện bất kỳ thay đổi nào trên file functions.php, bạn nên sao lưu file này hoặc tạo một bản sao lưu toàn bộ website của bạn để tránh mất dữ liệu nếu có sự cố xảy ra.
Nếu bạn không thấy file functions.php, hãy đảm bảo rằng bạn đang sử dụng một theme con (child theme) hoặc theme chính có hỗ trợ chỉnh sửa.

Ý nghĩa đoạn code:

Hàm howto_edu_vn_mime_types($mimes):

Hàm này nhận một mảng $mimes chứa các kiểu file đã được định nghĩa trước đó.
Nó thêm hai kiểu file mới vào mảng: svg và svgz với giá trị kiểu MIME là image/svg+xml.
Cuối cùng, hàm trả về mảng $mimes đã được cập nhật.

add_filter('upload_mimes', 'howto_edu_vn_mime_types')

Dòng này sử dụng hàm add_filter của WordPress để kết nối hàm howto_edu_vn_mime_types với hook upload_mimes.
Điều này cho phép WordPress nhận diện các file có đuôi svg và svgz khi người dùng tải lên.

Hàm howto_edu_vn_mimetype_svg($data, $file, $filename, $mimes)

Hàm này kiểm tra loại file và đuôi file khi một file được tải lên.
Nó sử dụng hàm pathinfo để lấy phần mở rộng của tên file.
Nếu phần mở rộng là svg hoặc svgz, nó cập nhật $data để chỉ định kiểu MIME là image/svg+xml và lưu phần mở rộng vào $data['ext'].

add_filter('wp_check_filetype_and_ext', 'howto_edu_vn_mimetype_svg', 100, 4)

Dòng này kết nối hàm howto_edu_vn_mimetype_svg với hook wp_check_filetype_and_ext.
Tham số 100 chỉ định độ ưu tiên của filter, và 4 cho biết số lượng tham số mà hàm có thể nhận.

Vì sao WordPress không cho phép tải lên file SVG (Scalable Vector Graphics) theo mặc định vì một số lý do chính sau đây:

1. Vấn đề bảo mật:

Mã độc hại: Cách upload file svg lên wordpress này nếu bạn không biết file đó ở đâu không có nguồn gốc rõ ràng dễ bị chèn mã độc. SVG là định dạng XML, có thể chứa mã JavaScript. Nếu một file SVG bị giả mạo hoặc chứa mã độc hại, nó có thể được thực thi trên website của bạn, dẫn đến các vấn đề bảo mật như tấn công XSS (Cross-Site Scripting).
Nguy cơ từ người dùng: Nếu cho phép tải lên file SVG mà không kiểm tra, người dùng có thể tải lên các file chứa mã độc, điều này có thể làm tổn hại đến website và dữ liệu của bạn.

2. Không tương thích với trình duyệt:

Mặc dù hầu hết các trình duyệt hiện đại hỗ trợ SVG, một số trình duyệt cũ hơn có thể không hỗ trợ đầy đủ, dẫn đến vấn đề hiển thị.

3. Kiểm soát file:

WordPress muốn kiểm soát các loại file mà người dùng có thể tải lên để đảm bảo rằng chỉ những file an toàn và được hỗ trợ mới có thể được sử dụng trên hệ thống.

4. Thiếu khả năng xử lý lỗi:

Nếu một file SVG không được tạo đúng cách, nó có thể gây ra lỗi hoặc hiển thị không đúng. WordPress cần kiểm soát các loại file để đảm bảo tính ổn định và khả năng tương thích.

Kết luận

Vừa rồi mình vừa chia sẻ cho các bạn cách upload file svg lên wordpress mới nhất. Nếu bạn muốn sử dụng file SVG trong website của mình, bạn cần thực hiện các biện pháp cần thiết để đảm bảo an toàn, chẳng hạn như sử dụng plugin hỗ trợ hoặc điều chỉnh mã nguồn để cho phép tải lên SVG một cách an toàn. Việc này sẽ giúp bạn tận dụng những ưu điểm của định dạng SVG mà vẫn duy trì được tính bảo mật cho website.

Ngoài ra đừng quên theo dõi kênh Fanpage facebook Howto.edu.vn của chúng tôi để được cập nhật nhiều thông tin mới nhất nhé