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 vector. Điều đó có nghĩa là bạn có thể phóng to, phóng lớn hoặc thu nhỏ chúng mà không làm mất chất lượng cho logo, biểu tượng hoặc thiết kế đáp ứng.

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

Định kiểu & Hoạt hình – Bạn có thể điều khiển SVGs thông qua CSS hoặc JavaScript. Muốn hiệu ứng di chuột hoặc hoạt hình? Dễ dàng.

Truy cập – Được thiết lập đúng cách, SVG chứa thẻ văn bản và vai trò mà trình đọc màn hình có thể diễn giải, một lý do vững chắ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'); 

Ở đâu: Theme's functions.php (luôn sử dụng chủ đề con theme!).

Nhược điểm: Không vệ sinh theo mặc định — rủi ro trừ khi được ghép nối với một trình vệ sinh. Và tải lên bị giới hạn đối với Quản trị viên (bạn có thể tùy chỉnh điều đó).

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:

• Sử dụng plugin như SVG Support, SVG Safe, HappyFiles với tính năng khử trùng được tích hợp sẵn.
• Làm sạch qua các công cụ trực tuyến (ví dụ: Kiểm tra SVG Sanitizer 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. 

Cho dù bạn là người sáng tạo nội dung, nhà thiết kế hay chủ doanh nghiệp nhỏ, nó đều đưa công nghệ mạnh mẽ vào tay bạn mà không cần mã hóa. Trang web của bạn sẽ tải nhanh hơn, xếp hạng cao hơn và trông thật tuyệt vời! Bạn còn chờ đợi gì nữa? Đi đây và nhận bản sao của riêng bạn.