Cách tải SVG lên WordPress: 2 phương pháp

Bạn muốn tìm hiểu cách tải SVG lên WordPress? Chúng tôi sẽ trình bày trong hướng dẫn này các phương pháp để đạt được điều này..

Quản trị viên web và nhà thiết kế web phải sử dụng các định dạng tệp phương tiện khác nhau trong công việc của họ. Một trong những định dạng phổ biến nhất hiện nay là SVG, một định dạng vector dựa trên XML. Thật không may, không phải tất cả các trình duyệt và nền tảng đều hỗ trợ SVG, vì vậy trước tiên bạn phải bật hỗ trợ SVG theo cách thủ công.

Bài viết này sẽ trình bày các bước tải tệp SVG lên trang web WordPress bằng cách sử dụng plugin Hỗ trợ SVG. Chúng tôi cũng sẽ trả lời một số câu hỏi liên quan đến các vấn đề bảo mật xung quanh định dạng tệp phương tiện cụ thể này và tại sao SVG đáng sử dụng.

Để bắt đầu, hãy làm quen với SVG và cách thức hoạt động của nó.

Nhưng trước khi bắt đầu, nếu bạn chưa bao giờ cài đặt WordPress, hãy tìm hiểu Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

SVG là gì?

Đồ họa Vectơ có thể mở rộng (SVG) là một định dạng hình ảnh đồ họa vector dựa trên văn bản XML. Mặc dù các định dạng hình ảnh phổ biến như JPG và PNG được tạo thành từ rất nhiều hình vuông nhỏ gọi là pixel, định dạng này dựa trên ngôn ngữ đánh dấu XML để mô tả các thuộc tính hình ảnh.

Vào tháng 1 2022, 42% của tất cả các trang web trên toàn thế giới sử dụng SVG. Tỷ lệ phần trăm này đã tăng kể từ tháng 2021 năm XNUMX, khi chỉ 29,4% trang web đã sử dụng nó. Tương tự như các định dạng PNG và JPG, SVG phổ biến trong các trang web có lưu lượng truy cập cao như Google, Wikipedia và YouTube.

Một điều tuyệt vời khác về SVG là nó được hỗ trợ rộng rãi bởi tất cả các trình duyệt chính.

Dưới đây là danh sách các trình duyệt hỗ trợ định dạng tệp SVG:

hoa tiêu	Hỗ trợ một phần	Hỗ trợ đầy đủ
Giáp	–	Phiên bản 12-18, 79-96, 97
Firefox	Phiên bản 2	Các phiên bản 3-94, 95, 96-97
Firefox dành cho Android	–	Phiên bản 95
cơ rôm	–	Các phiên bản 4-96, 97, 98-100
Chrome dành cho Android	–	Phiên bản 96
Safari	Phiên bản 3.1	Phiên bản 3.2-15.1, 15.2, TP
Opera	–	Các phiên bản 10-81, 82
Opera mini	–	Tất cả các phiên bản
Opera Mobile	–	Phát hành 12-12.1, 64
Safari trên iOS	–	Phát hành 3.2-15.1, 15.2
Trình duyệt Android	Phiên bản 3-4.3	Phát hành 4.4-4.4.4, 96
UC Browser dành cho Android	–	Phiên bản 12.12
Internet Samsung	–	Phát hành 4-14.0, 15.0
Trình duyệt QQ	–	Phiên bản 10.4
Trình duyệt Baidu	–	Phiên bản 7.12
Trình duyệt KaiOS	–	Phiên bản 2.5

SVG hoạt động như thế nào?

SVGs sử dụng XML để tạo ra hình ảnh vectơ hai chiều. Không giống như JPG và PNG, đồ họa vector không có pixel. Thay vào đó, hành vi của chúng được mô tả trong các tệp văn bản XML.

Vì lý do này, SVG có thể được tìm kiếm, lập chỉ mục, tập lệnh, sửa đổi và nén giống như mã. Do đó, bất kỳ ai cũng có thể tạo chúng bằng trình soạn thảo văn bản hoặc phần mềm đồ họa vector.

WordPress có hỗ trợ SVG không?

Không có hỗ trợ SVG trong WordPress theo mặc định do các rủi ro bảo mật mà nó gây ra - chúng tôi sẽ đề cập sâu hơn các vấn đề bảo mật xung quanh SVG sau.

Đây là thông báo lỗi xuất hiện khi tải lên đồ họa SVG lên trang web WordPress:

Đây là một cuộc thảo luận hiện tại về việc biến SVG thành một phần của chức năng cốt lõi của WordPress. Cho đến lúc đó, chúng tôi phải sáng tạo và sử dụng các giải pháp khác để tải hình ảnh SVG lên WordPress.

Tại sao sử dụng WordPress SVG?

Bất chấp các vấn đề bảo mật của nó, nhiều người dùng vẫn sử dụng định dạng ảnh này vì nó có nhiều ưu điểm khác nhau. Dưới đây là một số lợi ích của việc sử dụng tệp SVG:

• Khả năng mở rộng: Vì SVG là định dạng hình ảnh vectơ, các tệp SVG duy trì chất lượng như nhau trên tất cả các độ phân giải màn hình. Lợi thế này cũng xuất hiện sau khi phóng to chúng, đó là lý do tại sao nhiều người sử dụng định dạng hình ảnh có thể mở rộng này cho các biểu tượng và logo.
• Kích thước tệp nhỏ hơn : Các tệp SVG giúp dễ dàng cải thiện hiệu suất trang web vì chúng chiếm ít không gian lưu trữ web hơn và tải nhanh hơn nhiều so với các hình ảnh khác.
• SEO thân thiện : Google lập chỉ mục các tệp SVG, cho phép chúng xuất hiện trên Tìm kiếm Hình ảnh của Google và cải thiện nỗ lực tìm kiếm của bạn. SEO. Với các loại hình ảnh khác, bạn bị giới hạn trong việc tối ưu hóa thuộc tính alt của chúng.
• SVG dựa trên mã có thể chỉnh sửa bằng trình soạn thảo văn bản hoặc phần mềm chỉnh sửa đồ họa vectơ. Bạn có thể tối ưu hóa tệp SVG cho các trang web hoặc thậm chí thêm hình ảnh động để làm cho đồ họa tương tác.

SVG trên WordPress và bảo mật

Vì SVG về cơ bản là một tệp văn bản XML, nó có các lỗ hổng có thể khai thác được mà không ảnh hưởng đến các định dạng hình ảnh khác. Do đó, mọi người có thể dễ dàng chiếm đoạt nó bằng mã độc để khởi chạy các cuộc tấn công Cross-Site Scripting (XSS) và XML External Entity (XXE) vào hệ thống của bạn.

Vì lý do này, bạn nên cẩn thận khi xử lý các tệp SVG và thêm chúng vào WordPress.

Để giảm thiểu rủi ro bảo mật, hãy đảm bảo khử trùng các tệp SVG trước khi tải chúng lên thư viện phương tiện WordPress. Quá trình này loại bỏ mã và lỗi đáng ngờ, làm cho hình ảnh an toàn cho trang web của bạn.

Bạn có thể xóa các tệp SVG đã tải lên bằng plugin SVG - chúng tôi sẽ trình bày các bước của nó sau. Tuy nhiên, chúng tôi khuyên bạn nên khử trùng nó hai lần với Kiểm tra chất vệ sinh SVG –

Một cách khác để bảo mật trang web WordPress của bạn là chỉ giới hạn tải lên SVG cho những người dùng đáng tin cậy. Người dùng được chọn nên biết các vấn đề bảo mật xung quanh định dạng SVG - điều này sẽ không khuyến khích họ lấy tệp SVG từ các nguồn đáng ngờ.

Cách tải tệp SVG lên WordPress bằng 2 phương pháp bảo mật

Về mặt kỹ thuật, có hai cách để thêm hỗ trợ SVG vào WordPress: sử dụng Plugin WordPress hoặc bằng cách kích hoạt nó theo cách thủ công. Cho dù bạn chọn cách nào, chúng tôi thực sự khuyên bạn chỉ nên giới hạn đặc quyền tải xuống cho quản trị viên và người dùng đáng tin cậy để giảm thiểu tải xuống độc hại.

Sử dụng một plugin WordPress

Trong hướng dẫn này, chúng tôi sẽ sử dụng Hỗ trợ SVG. Này Plugin WordPress sử dụng thư viện SVG sanitizer sẽ tự động kích hoạt khi tải tệp SVG lên thư viện phương tiện. Nó cũng dễ thiết lập và sử dụng miễn phí.

Dưới đây là các bước để định cấu hình hỗ trợ SVG:

1. ICài đặt plugin và kích hoạt nó.

2. Truy cập vào thiết lập -> hỗ trợ SVG từ bảng điều khiển WordPress của bạn.

3. Chọn hộp bên cạnh tùy chọn Hạn chế đối với quản trị viên để giới hạn đặc quyền tải lên. Làm tương tự cho tùy chọn Kích hoạt chế độ nâng cao nếu bạn muốn truy cập vào các tính năng nâng cao, chẳng hạn như kết xuất SVG nội tuyến và tạo kiểu CSS.

4. Sau khi lưu các thay đổi, bạn có thể bắt đầu tải tệp SVG lên thư viện phương tiện một cách an toàn.

Thêm hỗ trợ WordPress SVG theo cách thủ công

Phương pháp này liên quan đến việc chỉnh sửa tệp functions.php của trang web WordPress của bạn. Do đó, chúng tôi đặc biệt khuyên bạn nên làm theo các bước sau nếu bạn đã quen với PHP và hiểu đầy đủ về vấn đề bảo mật SVG.

Đảm bảo bạn sao lưu trang web WordPress của bạn trước khi thực hiện thay đổi để tránh mất dữ liệu trong trường hợp cấu hình sai.

Các bước sau sẽ giải thích cách bật SVG trong WordPress theo cách thủ công với sự trợ giúp của ứng dụng khách FTP như FileZilla.

1. Đi tới thư mục tệp của trang web của bạn tại máy chủ lưu trữ của bạn
2. Truy cập vào public_html -> wp-bao gồm. Cuộn xuống cho đến khi bạn tìm kiếm functions.php.

3. Nhấp chuột phải vào tệp này và chọn Xem / Chỉnh sửa để mở tệp và dán đoạn mã sau vào tệp:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Lưu các thay đổi và thử tải lên tệp SVG mới. Nếu quá trình thành công, thư viện phương tiện của bạn sẽ chấp nhận tải lên tệp.

Nhiều ưu điểm của tệp SVG góp phần vào sự phổ biến ngày càng tăng của loại tệp này. Thật không may, các tệp văn bản XML dễ bị chèn mã, đó là lý do chính khiến WordPress không bao gồm hỗ trợ SVG theo mặc định.

Điều đó nói rằng, có hai cách để trang web WordPress của bạn chấp nhận tệp SVG: sử dụng Plugin WordPress hoặc chỉnh sửa tập tin functions.php. Ngoài việc giới hạn đặc quyền tải lên, bạn sẽ có thể tải tệp SVG lên thư viện phương tiện của trang web một cách an toàn.

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo ressources bên dưới để có nhiều quyền sở hữu và kiểm soát hơn đối với trang web và blog của bạn.

• Cách tạo một plugin WordPress đơn giản
• Cách tạo một plugin Gutenberg Block WordPress đơn giản
• Cách đặt trang chủ của bạn trong WordPress
• Cách hiểu Bảng điều khiển WordPress
• Cách tạo một plugin WordPress đơn giản

Kết luận

Đó là hướng dẫn cho bạn cách tải SVG lên WordPress. Chúng tôi hy vọng bài viết này đã cung cấp cho bạn một số thông tin chi tiết về lợi ích và rủi ro của việc tải tệp SVG lên trang web WordPress. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, vui lòng cho chúng tôi biết trong vòng ý kiến.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Trong khi chờ đợi, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.   

...