Cách thêm tệp hình ảnh SVG vào WordPress

Sẵn sàng nâng cấp đồ họa cho trang web WordPress của bạn? Hãy tưởng tượng một biểu tượng và logo có thể mở rộng vô hạn mà sắc nét trên mọi thiết bị, không bị pixel hóa hay méo mó. Hướng dẫn này sẽ chỉ cho bạn cách tải lên và quản lý tệp SVG trong WordPress bằng cách sử dụng WP Media Folder, và nó được tạo ra cho bất kỳ ai, ngay cả khi bạn không phải là lập trình viên.

Trong hướng dẫn từng bước này, chúng tôi sẽ giải thích những lợi ích của tệp SVG, lý do tại sao các nhà thiết kế yêu thích chúng và tại sao chúng tuyệt vời cho SEO và hiệu suất trang. Bạn sẽ học được nhiều phương pháp dễ dàng để kích hoạt tải lên SVG: từ việc sử dụng các plugin đáng tin cậy đến các điều chỉnh mã đơn giản, cùng với các chiến lược thông minh để giữ cho trang web của bạn an toàn.

Chúng tôi sẽ sử dụng WP Media Folder, plugin quản lý phương tiện mạnh mẽ từ JoomUnited. 

Tại sao SVG lại tuyệt vời cho đồ họa có thể mở rộng

Khả năng mở rộng – SVG là các tệp đồ họa vector. Điều đó có nghĩa là bạn có thể phóng to, thu nhỏ hoặc phóng to chúng mà không làm giảm chất lượng đối với logo, biểu tượng hoặc thiết kế đáp ứng.

Nhẹ và thân thiện với SEO – Các tệp SVG thường có kích thước nhỏ hơn hình ảnh raster và là XML dựa trên văn bản, do đó các công cụ tìm kiếm có thể đọc trực tiếp các yếu tố chính (văn bản thay thế, tiêu đề, v.v.).

Tạo kiểu & Hoạt ảnh – Bạn có thể thao tác với SVG thông qua CSS hoặc JavaScript. Muốn hiệu ứng di chuột hoặc hoạt ảnh? Dễ thôi.

Khả năng truy cập – Khi được thiết lập đúng cách, SVG chứa các thẻ văn bản và vai trò có thể truy cập mà trình đọc màn hình có thể hiểu được, đây là một lý do thuyết phục khác để sử dụng chúng.

Giải pháp để thêm SVGs trong WordPress

WordPress chặn SVG theo mặc định do rủi ro bảo mật (SVG là XML, có thể bao gồm mã độc hại), Tuy nhiên, có ba cách đáng tin cậy để kích hoạt hỗ trợ SVG:

1. Sử dụng Plugin

 a) WPCode + đoạn mã SVG

• Cài đặt plugin WPCode miễn phí.
• Thêm đoạn mã 'Allow SVG Files Upload' từ thư viện của nó và kích hoạt nó.
• Theo mặc định, chỉ có Quản trị viên mới có thể tải lên SVGs.

 b) Plugin hỗ trợ SVG

• Cài đặt "Hỗ trợ SVG" qua Plugins > Thêm mới, kích hoạt nó.
• Trong cài đặt của nó, kiểm tra "Hạn chế đối với Người quản trị" và/hoặc "Bật Chế độ Nâng cao" (kết xuất nội tuyến, kiểu CSS).
• Tải lên SVG của bạn qua Media > Thêm mới hoặc kéo và thả.

c) Tùy chọn khác:

• SVG Safe bởi Darrell Doyle, cũ hơn nhưng vẫn được sử dụng.
• SVG Support vệ sinh tải lên để ngăn chặn rủi ro XSS/XXE .
• HappyFiles/CatFolders thêm tải lên SVG với khử trùng và xem trước.

2. Thêm đoạn mã vào functions.php

Bạn có thể sử dụng mã sau: 

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

Vị trí: ThemeTệp functions.php của theme!).

Nhược điểm: Không có chức năng khử trùng mặc định — tiềm ẩn rủi ro nếu không được kết hợp với phần mềm khử trùng. Và chức năng tải lên chỉ dành cho Quản trị viên (bạn có thể tùy chỉnh điều này).

3. Cân nhắc về bảo mật

 SVG = XML, có thể chứa:

• Tấn công XSS (JavaScript).
• Tấn công XXE (các cuộc gọi thực thể bên ngoài).

Thực hành tốt nhất:

• Hãy sử dụng các plugin như SVG Support, SVG Safe, HappyFiles với tính năng làm sạch dữ liệu tích hợp sẵn.
• Hãy khử trùng bằng các công cụ trực tuyến (ví dụ: SVG Sanitizer Test của Darryll Doyle) trước khi tải lên.
• Hạn chế tải lên SVG chỉ cho Admin hoặc người dùng đáng tin cậy.

WP Media Folder và tại sao nó quan trọng đối với SVGs trên WordPress

WP Media Folder là một trình quản lý thư viện media mạnh mẽ

- Cấu trúc thư mục/thư mục con

-Bộ lọc nâng cao, sắp xếp, kéo & thả

 - Đổi tên, tạo dấu nước, thay thế hàng loạt, xem trước, tải xuống

- Tương thích với nhiều công cụ như Page Builders, WooCommerce và WPML.

Mặc dù bản thân WP Media Folder không cho phép sử dụng tệp SVG, nhưng nó sẽ cho phép chúng tôi sắp xếp, duy trì và quản lý bất kỳ loại tệp nào bao gồm cả tệp SVG.

Kết thúc: Nâng cao Trang web của bạn với SVGs và WP Media Folder

Dừng vật lộn với các thư mục phương tiện lộn xộn và các tệp hình ảnh không được tối ưu hóa. Thay vào đó, hãy mở khóa tiềm năng đầy đủ của các tệp SVG, nhẹ, có thể tìm kiếm và thích ứng, với các công cụ tổ chức trực quan của WP Media Folder. 

Dù bạn là người sáng tạo nội dung, nhà thiết kế hay chủ doanh nghiệp nhỏ, công nghệ này đều nằm trong tay bạn mà không cần viết bất kỳ mã nào. Trang web của bạn sẽ tải nhanh hơn, xếp hạng cao hơn và trông tuyệt đẹp! Bạn còn chờ gì nữa? Hãy truy cập vào đây và sở hữu ngay một bản sao cho riêng mình.