Cách thêm tệp hình ảnh SVG trong WordPress

Bạn đã sẵn sàng nâng cấp đồ họa cho trang web WordPress của mình chưa? Hãy tưởng tượng một logo và biểu tượng có thể mở rộng vô hạn, hiển thị sắc nét trên mọi thiết bị, không bị vỡ ảnh hay biến dạng. Hướng dẫn này sẽ chỉ cho bạn chính xác cách tải lên và quản lý tệp SVG trong WordPress bằng WP Media Folder, và nó được thiết kế cho tất cả mọi người, 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 nén các lợi ích của các tệp SVG, 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 hiệu suất SEO và trang. Bạn sẽ tìm hiểu nhiều phương pháp dễ thực hiện để 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ữ an toàn cho trang web của bạ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à 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 to hoặc thu nhỏ chúng mà không mất chất lượng cho logo, biểu tượng hoặc thiết kế đáp ứng.

Nhẹ & SEO - thân thiện với các 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 trực tiếp các yếu tố chính (văn bản alt, tiêu đề, v.v.).

Kiểu dáng & Hoạt hình - Bạn có thể điều khiển SVG qua CSS hoặc JavaScript. Muốn có hiệu ứng di chuột hoặc hoạt hình? Dễ.

Khả năng truy cập - Thiết lập đúng, SVG có chứa các thẻ và vai trò văn bản có thể truy cập mà màn hình có thể diễn giải, chỉ là một lý do vững chắc khác để sử dụng chúng.

Các giải pháp để thêm SVG 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 + SVG Snippet

• Cài đặt plugin WPCode miễn phí.
• Thêm đoạn 'Cho phép các tệp SVG tải lên' 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 SVG.

b) Plugin hỗ trợ SVG

• Cài đặt "Hỗ trợ SVG" qua các plugin> Thêm mới, kích hoạt nó.
• Trong các cài đặt của nó, hãy kiểm tra "Hạn chế cho quản trị viên" và/hoặc "Kích hoạt chế độ nâng cao" (kết xuất nội tuyến, kiểu dáng CSS).
• Tải lên SVG của bạn thông qua Media> Thêm mới hoặc kéo & thả.

C) Các tùy chọn khác :

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

2. Thêm đoạn mã vào chức năng.php

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

hàm enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'hình ảnh/svg+xml'; trả lại $ mimes; } add_filter ('upload_mimes', 'enable_svg_upload'); 

Trong đó: các chức năng của Theme theme !).

Hạn chế: Không có vệ sinh theo mặc định, trừ khi kết hợp với chất khử trùng. Và tải lên giới hạn cho quản trị viên (bạn có thể tùy chỉnh điều đó).

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

 Svg = xml, có thể chứa:

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

Thực tiễn tốt nhất:

• Sử dụng các plugin như hỗ trợ SVG, SVG Safe, HappyFiles với vệ sinh được xây dựng - trong.
• Vệ sinh thông qua các công cụ trực tuyến (ví dụ: thử nghiệm khử trùng SVG của Darryll Doyle) trước khi tải lên.
• Hạn chế tải lên SVG cho quản trị viên hoặc người dùng đáng tin cậy.

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

WP Media Folder là người quản lý thư viện phương tiện mạnh mẽ

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

-Chét kế hoạch, sắp xếp, kéo và thả

 - Đổi tên, hình mờ, thay thế số lượng lớn, xem trước, tải xuống

- Tương thích với nhiều công cụ như Trình xây dựng trang, WooC Commerce và WPML.

Mặc dù chính WP Media Folder không cho phép sử dụng các 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ác tệp SVG.

Gói lên: Nâng cao trang web của bạn với WP Media Folder

Ngừng đấu vật với các thư mục truyền thông 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 toàn bộ tiềm năng của SVG, nhẹ, có thể tìm kiếm và thích nghi, 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 tạo nội dung, nhà thiết kế hay chủ doanh nghiệp nhỏ, nó sẽ đặt công nghệ mạnh mẽ trong tay bạn mà không cần 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? Tới đây và nhận bản sao của riêng bạn.