3 giải pháp thêm file SVG vào WordPress

4 giờ ago, Hướng dẫn WordPress, Views
3 giải pháp thêm file SVG vào WordPress

3 Giải Pháp Thêm File SVG Vào WordPress

Giới Thiệu Về File SVG và WordPress

WordPress là một nền tảng quản lý nội dung (CMS) phổ biến, được sử dụng rộng rãi để xây dựng website. SVG (Scalable Vector Graphics) là một định dạng ảnh vector dựa trên XML, có nhiều ưu điểm so với các định dạng ảnh raster như JPEG hoặc PNG. SVG có thể được thu phóng mà không làm giảm chất lượng, kích thước file thường nhỏ hơn, và có thể chỉnh sửa bằng code.

Tuy nhiên, theo mặc định, WordPress không cho phép tải lên file SVG vì lý do bảo mật. Việc này nhằm ngăn chặn các cuộc tấn công Cross-Site Scripting (XSS) có thể xảy ra thông qua các file SVG độc hại. Để sử dụng SVG trong WordPress, chúng ta cần áp dụng các giải pháp để cho phép tải lên và hiển thị file SVG một cách an toàn.

Giải Pháp 1: Sử Dụng Plugin SVG Support

Đây là cách đơn giản và phổ biến nhất để thêm SVG vào WordPress. Các plugin SVG Support giúp bạn dễ dàng tải lên và sử dụng file SVG mà không cần can thiệp vào code.

Ưu điểm:

  • Dễ dàng cài đặt và sử dụng.
  • Cho phép tải lên file SVG trực tiếp từ media library.
  • Cung cấp tính năng inline SVG, giúp cải thiện hiệu suất website.

Nhược điểm:

  • Phụ thuộc vào plugin, có thể ảnh hưởng đến hiệu suất nếu plugin không được tối ưu hóa tốt.
  • Cần phải cập nhật plugin thường xuyên để đảm bảo tính bảo mật.

Hướng dẫn sử dụng plugin SVG Support:

  1. Cài đặt và kích hoạt plugin “SVG Support” từ WordPress plugin repository.
  2. Sau khi kích hoạt, bạn có thể tải lên file SVG trực tiếp từ media library như bất kỳ file ảnh nào khác.
  3. Để sử dụng inline SVG, bạn cần kích hoạt tùy chọn “Enable advanced mode” trong cài đặt plugin.
  4. Khi chèn SVG vào bài viết hoặc trang, bạn có thể chọn hiển thị dưới dạng image tag hoặc inline SVG.

Giải Pháp 2: Thêm Code vào File functions.php

Một cách khác để cho phép tải lên SVG là thêm code trực tiếp vào file functions.php của theme WordPress. Cách này đòi hỏi một chút kiến thức về code, nhưng nó cho phép bạn kiểm soát hoàn toàn quá trình tải lên và hiển thị SVG.

Ưu điểm:

  • Không phụ thuộc vào plugin.
  • Kiểm soát hoàn toàn quá trình tải lên và hiển thị SVG.

Nhược điểm:

  • Yêu cầu kiến thức về code.
  • Cần cẩn thận khi chỉnh sửa file functions.php, vì lỗi có thể gây ra sự cố cho website.
  • Khi thay đổi theme, code này cần được thêm lại vào file functions.php của theme mới.

Hướng dẫn thêm code vào file functions.php:

  1. Truy cập vào file functions.php của theme đang sử dụng thông qua trình chỉnh sửa code hoặc FTP.
  2. Thêm đoạn code sau vào cuối file: 
    
        function add_file_types_to_uploads($file_types){
          $new_file_types = array();
          $new_file_types['svg'] = 'image/svg+xml';
          return array_merge($file_types, $new_file_types );
        }
        add_filter('upload_mimes', 'add_file_types_to_uploads');

        function fix_svg_thumb_display() {
          echo '
            td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
              width: 100% !important;
              height: auto !important;
            }
          ';
        }
        add_action('admin_head', 'fix_svg_thumb_display');
  3. Lưu file functions.php.
  4. Bây giờ bạn có thể tải lên file SVG từ media library.

Lưu ý quan trọng: Sao lưu file functions.php trước khi chỉnh sửa. Luôn kiểm tra kỹ code sau khi thêm vào để đảm bảo không gây ra lỗi cho website.

Giải Pháp 3: Sử Dụng Plugin Safe SVG

Plugin Safe SVG là một lựa chọn khác để thêm file SVG vào WordPress một cách an toàn. Plugin này không chỉ cho phép tải lên SVG mà còn thực hiện quá trình làm sạch (sanitizing) để loại bỏ các đoạn code độc hại, giảm thiểu rủi ro bảo mật.

Ưu điểm:

  • Cho phép tải lên file SVG một cách an toàn.
  • Thực hiện quá trình làm sạch để loại bỏ code độc hại.
  • Dễ dàng sử dụng.

Nhược điểm:

  • Phụ thuộc vào plugin.
  • Có thể ảnh hưởng đến hiệu suất nếu plugin không được tối ưu hóa tốt.
  • Cần phải cập nhật plugin thường xuyên để đảm bảo tính bảo mật.

Hướng dẫn sử dụng plugin Safe SVG:

  1. Cài đặt và kích hoạt plugin “Safe SVG” từ WordPress plugin repository.
  2. Sau khi kích hoạt, bạn có thể tải lên file SVG trực tiếp từ media library.
  3. Plugin sẽ tự động thực hiện quá trình làm sạch để đảm bảo an toàn.
  4. Bạn có thể sử dụng file SVG như bất kỳ file ảnh nào khác trong bài viết hoặc trang.

So Sánh Các Giải Pháp

Giải Pháp Ưu điểm Nhược điểm Độ khó Độ an toàn
Plugin SVG Support Dễ sử dụng, inline SVG Phụ thuộc plugin, cần cập nhật Dễ Trung bình
Thêm code vào functions.php Không phụ thuộc plugin, kiểm soát hoàn toàn Yêu cầu kiến thức code, cần sao lưu Trung bình Cao (nếu code được viết cẩn thận)
Plugin Safe SVG An toàn, làm sạch file SVG Phụ thuộc plugin, cần cập nhật Dễ Cao

Kết Luận

Việc thêm file SVG vào WordPress có thể mang lại nhiều lợi ích, từ việc cải thiện chất lượng hình ảnh đến việc tối ưu hóa hiệu suất website. Tùy thuộc vào kiến thức kỹ thuật và yêu cầu của bạn, bạn có thể lựa chọn một trong ba giải pháp trên để tích hợp SVG vào website WordPress của mình một cách an toàn và hiệu quả. Plugin Safe SVG là một lựa chọn an toàn và dễ sử dụng. Việc thêm code trực tiếp vào functions.php cho phép bạn kiểm soát hoàn toàn quá trình, nhưng đòi hỏi kiến thức kỹ thuật cao hơn. Cuối cùng, plugin SVG Support là lựa chọn đơn giản và nhanh chóng để bắt đầu sử dụng SVG trong WordPress.

, , , ,

..