Nhấn Enter để tìm kiếm

Hướng dẫn cho phép upload ảnh SVG trong WordPress
WordPress & PHP

Hướng dẫn cho phép upload ảnh SVG trong WordPress

Chia sẻ:

Bạn đang muốn upload SVG trong WordPress? Theo mặc định, WordPress cho phép bạn tải lên tất cả các định dạng tệp hình ảnh, âm thanh và video phổ biến, nhưng SVG không nằm trong số đó.

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng hình ảnh vector dựa trên Ngôn ngữ đánh dấu mở rộng (XML), hỗ trợ hình ảnh hai chiều với hoạt hình.

Lợi ích chính của SVG là cho phép phóng to hình ảnh mà không làm giảm chất lượng. Điều này khác với các định dạng hình ảnh truyền thống như PNG, JPG — vốn được tạo thành từ hàng ngàn pixel.

Ảnh SVG bao gồm một tập hợp các hướng dẫn bằng văn bản để tạo ra hình ảnh hai chiều. Vì không sử dụng các điểm ảnh (pixel), chúng sẽ không bị vỡ khi bạn phóng to hoặc thu nhỏ.

Tại sao nên sử dụng SVG?

  • Khả năng mở rộng cao: Dễ dàng thao tác kích thước mà không ảnh hưởng tới chất lượng hình ảnh. Trong khi đó, khi phóng to tệp JPG hoặc PNG, nó sẽ bắt đầu vỡ tại một số điểm nhất định.
  • Kích thước tệp nhỏ: Hình ảnh SVG thường có kích thước tệp ít hơn so với các định dạng hình ảnh khác.
  • Hỗ trợ SEO: Các công cụ tìm kiếm như Google hỗ trợ lập chỉ mục các tệp SVG, giúp duy trì chất lượng hình ảnh mà không cản trở tốc độ trang web.

Tại sao SVG không được WordPress hỗ trợ mặc định?

WordPress ngăn chặn tải lên hình ảnh SVG vì nó sử dụng ngôn ngữ đánh dấu XML (tương tự HTML) và có thể tạo ra lỗ hổng bảo mật, chẳng hạn như:

  • Kích hoạt brute force attacks
  • Cross-scripting attacks (XSS)
  • Truy cập trái phép dữ liệu người dùng

Đặc biệt khi bạn chấp nhận bài đăng của khách, bất cứ ai cũng có thể tải lên tệp SVG bị lỗi và phá hỏng trang web của bạn. Vì vậy, luôn sử dụng các tệp SVG từ nguồn đáng tin cậy.

May mắn thay, có một số plugin bảo mật trong WordPress mà bạn có thể sử dụng để ngăn chặn các mối đe dọa này.

Cách tải hình ảnh SVG lên WordPress

Cách 1: Thêm SVG bằng Plugin

Vào Plugins → Add New rồi tìm kiếm từ khóa “SVG Support” hoặc “Safe SVG”.

Hướng dẫn sử dụng chi tiết các bạn có thể xem tài liệu do bên phát triển plugin cung cấp.

Cách 2: Bật SVG bằng code PHP

Nếu bạn không muốn sử dụng plugin, bạn có thể thêm đoạn mã PHP dưới đây vào tệp functions.php trong theme của bạn:

add_filter('wp_check_filetype_and_ext', 'web99_check_filetype_and_ext', 10, 4);
function web99_check_filetype_and_ext($data, $file, $filename, $mimes) {
   if (!$data['type']) {
      $wp_filetype = wp_check_filetype($filename, $mimes);
      $ext = $wp_filetype['ext'];
      $type = $wp_filetype['type'];
      $proper_filename = $filename;
      if ($type && 0 === strpos($type, 'image/') && $ext !== 'svg') {
         $ext = $type = false;
      }
      $data['ext'] = $ext;
      $data['type'] = $type;
      $data['proper_filename'] = $proper_filename;
   }
   return $data;
}

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

add_action('admin_head', function () {
   echo '<style type="text/css">
   .media-icon img[src$=".svg"],
   img[src$=".svg"].attachment-post-thumbnail {
      width: 100% !important;
      height: auto !important;
   }</style>';
});

Tôi hy vọng bài viết này giúp bạn tải lên ảnh SVG một cách an toàn trong WordPress. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại bình luận bên dưới.

Chia sẻ: