Bạn cần thêm thêm file SVG trong WordPress của mình nhưng không thể? Mặc định, WordPress cho phép bạn tải lên tất cả các định dạng file hình ảnh, âm thanh và video phổ biến, nhưng SVG không nằm trong số đó. Bỏi vì có những lo ngại về bảo mật tiềm ẩn, nhưng có khá nhiều cách để sử dụng SVG một cách an toàn. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách dễ dàng thêm SVG vào WordPress.
SVG là gì?
SVG hoặc Scalable Vector Graphics là một định dạng file mô tả đồ họa vector bằng ngôn ngữ đánh dấu XML. Lợi ích chính của SVG là cho phép bạn phóng to hình ảnh mà không mất chất lượng hoặc có bất kỳ hiện tượng pixelation nào.
SVG hoạt động như thế nào?
Scalable Vector Graphics (SVG) là một công nghệ hiển thị hình vẽ hai chiều bằng cách sử dụng XML. File SVG khác với các định dạng hình ảnh thông thường như PNG, GIF hoặc JPEG.
Nếu bạn lấy một file hình ảnh png hoặc jpeg và phóng to, bạn sẽ thấy rằng hình ảnh sẽ bắt đầu mờ và trở nên vỡ hình.
Scalable Vector Graphics không sử dụng pixel. Thay vào đó, SVG sử dụng một bản đồ hai chiều xác định đồ họa bạn đang xem. Khi bạn phóng to, hình ảnh không bị vỡ pixel.
Điều này cho phép bạn phóng to Scalable Vector Graphics mà không mất chất lượng. Quan trọng nhất, hình ảnh SVG có thể nhỏ hơn đáng kể so với các định dạng jpg hoặc png.
Scalable Vector Graphics thường được sử dụng cho icons, icon fonts, website logos, và hình ảnh brand. Ứng dụng của SVG rất nhiều và phổ biến, bạn có thể thêm các file SVG vào WordPress cho logo công ty, biểu tượng hoặc các đồ họa khác.
Tuy nhiên, file SVG ẩn chứa những nguy cơ và rủi ro tiềm ẩn; điều này có thể ảnh hưởng đến trang web của bạn hoặc công ty. Đó là lý do tại sao WordPress không hỗ trợ tải lên file SVG theo mặc định.
Nếu bạn tải lên một hình ảnh SVG trong WordPress, bạn sẽ thấy thông báo lỗi sau:
"Sorry, this file type is not permitted for security reasons."
Vấn đề bảo mật liên quan đến SVG trong WordPress
File SVG chứa code trong ngôn ngữ đánh dấu XML, tương tự như HTML. Trình duyệt hoặc phần mềm chỉnh sửa SVG của bạn phân tích mã nguồn ngôn ngữ đánh dấu XML để hiển thị kết quả trên màn hình.
Tuy nhiên, điều này mở ra khả năng tồn tại các lỗ hổng XML trên trang web của bạn. Những lỗ hổng này có thể được sử dụng để truy cập trái phép vào dữ liệu người dùng, khởi động cuộc tấn công brute force hoặc các cuộc tấn công cross-site scripting (XXS).
Các phương pháp Vietnix sẽ chia sẻ trong bài viết này sẽ cố gắng làm sạch các file SVG để cải thiện tính bảo mật. Tuy nhiên, các plugin này không thể hoàn toàn ngăn chặn các mã độc hại được tải lên hoặc đưa vào.
Giải pháp tốt nhất là chỉ sử dụng các file SVG được tạo bởi các nguồn đáng tin cậy và chỉ hạn chế tải lên SVG cho những người dùng đáng tin cậy.
Để tìm hiểu thêm về bảo mật, hãy xem hướng dẫn toàn diện về bảo mật WordPress cho người mới bắt đầu.
Nói đến điều này, hãy cùng xem cách sử dụng file SVG một cách dễ dàng và an toàn trong WordPress bằng một trong ba phương pháp sau.
Cách 1. Thêm file SVG trong WordPress bằng cách sử dụng WPCode (Được khuyến nghị)
Cách 2. Thêm file SVG trong WordPress bằng cách sử dụng SVG Support
Cách 3. Thêm file SVG trong WordPress bằng cách sử dụng Safe SVG
Cách 1. Thêm file SVG trong WordPress bằng cách sử dụng WPCode (Được khuyến nghị)
Cách đơn giản và dễ dàng nhất để cho phép tải lên file SVG an toàn vào WordPress là sử dụng WPCode, plugin code snippets mạnh mẽ nhất hiện có.
WPCode đi kèm với thư viện code snippets được pre-configured lớn có thể thay thế nhiều plugin chỉ dùng một lần trên trang web của bạn, từ vô hiệu hóa trang đính kèm, sử dụng Classic Post Editor, cho đến việc cho phép tải lên file SVG.
Đầu tiên, bạn cần cài đặt và kích hoạt plugin miễn phí WPCode. Để biết hướng dẫn chi tiết, hãy xem hướng dẫn từng bước của Vietnix về cách cài đặt một plugin WordPress.
Khi kích hoạt, bạn nên di chuyển đến Code Snippets > Add Snippet in your WordPress. Chỉ cần tìm kiếm từ khóa “svg” và di chuột qua “Allow SVG Files Upload.”
Sau đó, bạn có thể nhấp vào “Use snippet.”
Tiếp theo, bạn sẽ được chuyển đến trang “Edit Snippet” nơi WPCode đã thiết lập sẵn tất cả các cài đặt cần thiết để code chạy.
Bạn chỉ cần bật sang “Active” và sau đó nhấn nút “Update.”
Bây giờ, bạn sẽ có thể tải lên các file SVG mà không gặp thông báo lỗi hoặc cảnh báo từ WordPress.
Sau đó, bạn có thể xử lý nó giống như bất kỳ hình ảnh nào khác trên trang web WordPress của bạn.
Mặc định, WPCode snippet chỉ cho phép người dùng với vai trò quản trị viên thêm các file SVG vào WordPress.
Bạn cũng có thể cấp quyền cho tất cả các vai trò người dùng khác bằng cách đơn giản là xóa dòng 14-16 trong đoạn code.
Bạn cũng có thể “comment them out” (vô hiệu hóa dòng lệnh) bằng cách thêm hai dấu gạch chéo “//” vào đầu mỗi dòng đó, biến chúng thành màu nâu nhạt. WPCode sẽ không thực thi bất kỳ phần nào của snippet mà nó xem như bình luận thay vì code.
Bạn có thể thấy một ví dụ về điều này trong dòng 11-13 trong hình ảnh dưới đây.
Dù cách nào, khi code bị loại bỏ, tất cả người dùng đều có thể tải lên file SVG vào trang web WordPress của bạn. Chỉ cần đảm bảo nhấp vào “Update” để lưu bất kỳ thay đổi nào bạn thực hiện.
Cách 2. Thêm file SVG trong WordPress bằng cách sử dụng SVG Support
Phương pháp này sử dụng plugin SVG Support và cho phép bạn hiển thị inline SVG trong các bài viết và trang WordPress, cũng như kiểm soát người nào có quyền tải lên file SVG.
Đầu tiên, bạn cần cài đặt và kích hoạt plugin SVG Support. Khi kích hoạt, bạn cần truy cập Settings > SVG Support để cấu hình, cài đặt plugin.
Trên trang cài đặt, bạn cần chọn vào ô bên cạnh tùy chọn “Restrict to Administrators?” . Điều này sẽ chỉ cho phép người quản trị trang tải lên các file SVG trong WordPress.
Tùy chọn tiếp theo là bật chế độ nâng cao. Bạn chỉ cần chọn tùy chọn này nếu bạn muốn sử dụng các tính năng nâng cao như CSS animations và hiển thị inline SVG.
Đừng quên nhấp vào nút lưu thay đổi để lưu cài đặt của bạn.
Bây giờ, bạn có thể tạo một bài viết mới hoặc chỉnh sửa một bài viết đã tồn tại. Trong trình soạn bài viết, bạn sẽ tải lên file SVG của mình giống như bạn tải lên bất kỳ file hình ảnh nào khác. Chỉ cần thêm một khối hình ảnh vào trình soạn và sau đó tải lên file SVG.
Bây giờ bạn đã có thể tải lên và nhúng các file SVG trong WordPress.
Cách 3. Thêm file SVG trong WordPress bằng cách sử dụng Safe SVG
Phương pháp này cũng sử dụng một plugin và cho phép bạn thực hiện việc làm sạch các file SVG được tải lên WordPress.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Safe SVG. Plugin này hoạt động ngay sau khi cài đặt và bạn khồn cần thiết lập bất cứ gì để sử dụng. Bạn có thể tiến hành và bắt đầu tải lên các file SVG ngay lập tức.
Nhược điểm là plugin này cho phép mọi người tải lên file SVG bởi tất cả người dùng có thể viết bài trên trang web WordPress của bạn.
Để kiểm soát người nào có thể tải lên file, bạn sẽ cần mua phiên bản cao cấp của plugin.
Lời kết
Vietnix hy vọng bài viết này đã giúp bạn hiểu cách thêm file SVG trong WordPress một cách an toàn và nhanh chóng. Bạn cũng có thể muốn xem bài viết của Vietnix về cách khắc phục các vấn đề hình ảnh phổ biến nhất trong WordPress và các plugin và công cụ SEO tốt nhất.
