Việc thêm đồ họa và hình minh họa tùy chỉnh vào thiết kế trang web Divi của bạn thực sự có thể giúp nâng cao sức hấp dẫn trực quan. Tuy nhiên, việc tìm kiếm nội dung hình ảnh phù hợp hoặc thuê nhà thiết kế không phải lúc nào cũng khả thi. May mắn thay, Divi giúp bạn dễ dàng tạo hình ảnh và hình minh họa vector của riêng mình ngay trong trình tạo.
Trong hướng dẫn này, chúng tôi sẽ khám phá cách triển khai SVG thực sự mà không ảnh hưởng đến trang web của bạn.
Ngay cả khi bạn không có kinh nghiệm thiết kế, bạn vẫn có thể tạo các hình ảnh vector chuyên nghiệp, chất lượng cao để thực sự đưa trang web Divi của bạn lên một tầm cao mới về mặt hình ảnh.
Giới thiệu về SVG và công dụng của nó
SVG là viết tắt của Đồ họa vectơ có thể mở rộng. Đây là định dạng hình ảnh vector dựa trên XML được sử dụng rộng rãi, được thiết kế để mô tả đồ họa vector hai chiều. Không giống như các định dạng hình ảnh raster (chẳng hạn như JPEG hoặc PNG) sử dụng pixel để thể hiện hình ảnh, SVG sử dụng các phương trình toán học để xác định hình dạng, đường kẻ và màu sắc, khiến nó trở thành định dạng không phụ thuộc vào độ phân giải và có khả năng mở rộng cao.
Tạo trang web tuyệt vời
Với trình tạo trang miễn phí tốt nhất Elementor
Bắt đầu bây giờDưới đây là một số ứng dụng chính của SVG trong thiết kế trang web:
- Đồ họa đáp ứng: Hình ảnh SVG không phụ thuộc vào độ phân giải, có nghĩa là chúng có thể được tăng hoặc giảm tỷ lệ mà không làm giảm chất lượng. Điều này làm cho chúng trở nên hoàn hảo cho thiết kế web đáp ứng, nơi nội dung điều chỉnh để phù hợp với các kích thước và độ phân giải màn hình khác nhau.
- Biểu tượng và Logo: SVG thường được sử dụng cho các biểu tượng, logo và các thành phần đồ họa khác trên trang web. Vì các tệp SVG có kích thước nhỏ và có thể dễ dàng tùy chỉnh cũng như hoạt hình bằng CSS và JavaScript nên chúng là lựa chọn phổ biến để tạo giao diện người dùng tương tác và hấp dẫn trực quan.
- Màn hình Retina và High-DPI: SVG lý tưởng để hiển thị đồ họa sắc nét và sắc nét trên màn hình có độ phân giải cao (số chấm trên mỗi inch) như màn hình Retina, nơi hình ảnh raster truyền thống có thể xuất hiện pixel khi tăng tỷ lệ.
- Hoạt ảnh: SVG cho phép tạo các hoạt ảnh phức tạp trực tiếp trong mã XML bằng cách sử dụng các công cụ như hoạt ảnh CSS hoặc thư viện JavaScript như Snap.svg và GreenSock Animation Platform (GSAP). Điều này cho phép thêm các yếu tố động và tương tác vào trang web.
- Khả năng truy cập: Trình đọc màn hình và công nghệ hỗ trợ có thể dễ dàng truy cập hình ảnh SVG vì cấu trúc XML cơ bản có thể được chú thích bằng văn bản mô tả, giúp trang web trở nên toàn diện hơn và dễ sử dụng hơn cho người khuyết tật.
- Lợi ích SEO: Công cụ tìm kiếm có thể phân tích cú pháp và lập chỉ mục nội dung trong tệp SVG, điều này có thể cải thiện việc tối ưu hóa công cụ tìm kiếm (SEO) bằng cách cung cấp thêm ngữ cảnh cho trình thu thập thông tin của công cụ tìm kiếm.
- Trực quan hóa dữ liệu tương tác: SVG có thể được sử dụng để tạo trực quan hóa dữ liệu tương tác, chẳng hạn như biểu đồ và đồ thị, có thể giúp truyền tải thông tin hiệu quả trên trang web.
Tóm lại, SVG là một định dạng linh hoạt và mạnh mẽ để tạo và hiển thị đồ họa vector trên các trang web. Khả năng mở rộng quy mô liền mạch, hoạt động tốt với nhiều kích thước và độ phân giải màn hình khác nhau cũng như hỗ trợ hoạt ảnh và tính tương tác khiến nó trở thành một công cụ có giá trị trong thiết kế và phát triển web hiện đại.
Cách sử dụng hình ảnh vector một cách an toàn với WordPress
Trong phần này, chúng ta sẽ xem xét hai phương pháp sử dụng SVG an toàn trong WordPress: thủ công và thông qua plugin. Sự lựa chọn tốt nhất cho nhu cầu của bạn sau đó sẽ được đưa ra cho bạn để lựa chọn. Chúng ta hãy bắt đầu ngay bây giờ!
Thêm hỗ trợ SVG theo cách thủ công và vệ sinh mã của bạn
Với một đoạn mã nhỏ, hỗ trợ SVG có thể được thêm vào WordPress chỉ trong vài phút. Điều này sẽ khiến bạn gặp phải những lo ngại về an toàn mà chúng tôi đã nêu rõ. Cần thực hiện các hành động sau để triển khai SVG theo cách an toàn hơn:
- Thực hiện các thay đổi đối với tệp tin.php của bạn để bật hỗ trợ SVG.
- Không cho phép các vai trò người dùng mong muốn tải tệp svg lên WordPress.
- Trước khi tải lên bất kỳ tệp SVG nào, hãy vệ sinh tất cả chúng.
Nhìn chung, không khó để hoàn thành bước một và hai. Bước đầu tiên là kết nối với trang web của bạn bằng Giao thức truyền tệp (FTP) và tìm thư mục gốc cho WordPress. Tìm tệp tin.php của bạn ở đó, mở nó và dán đoạn mã sau vào đó.
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}
$filetype = wp_check_filetype( $filename, $mimes );
return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];
}, 10, 4 );
function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );Với điều này, bạn có thể tải các tệp SVG lên WordPress và xem chúng trong thư viện phương tiện của mình, phục vụ hai mục đích. Sau khi thêm mã, hãy đóng tệp tin.php. và lưu các sửa đổi.
Bây giờ chúng tôi cần ngăn chặn những người có nội dung tải lên mà chúng tôi không tin cậy bị hỏng, mọi thứ trở nên khó khăn hơn một chút. Ví dụ: bạn có thể tin tưởng vào các biên tập viên và tác giả của mình để tải lên các tệp chính xác nhưng không tin vào những người đóng góp của bạn. Có hai cách tiếp cận bạn có thể thực hiện ở đây:
- Thiết lập vai trò người dùng duy nhất cho người dùng bị hạn chế hoặc không có quyền truy cập vào Thư viện phương tiện.
- Để hạn chế các loại tệp mà mỗi vai trò người dùng có thể tải lên, hãy cài đặt một plugin như Hạn chế tải lên WP .
Đúng là cả hai chiến lược đều có nhược điểm, đó là một trong những lý do khiến việc triển khai SVG thủ công có thể gặp khó khăn. Nhưng nếu chọn chiến lược ngăn chặn việc tải lên SVG độc hại, bạn cũng cần đảm bảo rằng mình không vô tình sử dụng chiến lược đó.
Tốt nhất, bạn nên sử dụng công cụ khử trùng trước khi tải bất kỳ SVG nào lên trang web của mình. Thao tác này sẽ lấy tệp của bạn, kiểm tra xem liệu nó có chứa bất kỳ điều gì đáng nghi ngờ hay không và sau đó xóa nó nếu có. Cuối cùng, bạn sẽ có một tệp SVG gọn gàng mà cuối cùng bạn có thể gửi lên WordPress.
Sử dụng Plugin SVG an toàn
Chúng tôi dự định chứng minh mức độ khó khăn khi triển khai SVG an toàn bằng cách sử dụng phương pháp nói trên. Điều này là cần thiết để bạn có thể hiểu đầy đủ chức năng của plugin Safe SVG .
plugin cho SVG an toàn. Tóm lại, những khó khăn chúng tôi nêu trước đây đều được plugin này giải quyết, bao gồm:
- Giúp bạn có thể tải lên SVG.
- Xác minh rằng SVG của bạn hiển thị trong Thư viện phương tiện.
- Làm sạch mã nguồn của mỗi SVG bạn tải lên để tránh các lỗi bảo mật. Plugin này về cơ bản là plug-and-play và sử dụng con đường đơn giản nhất để bảo mật việc triển khai SVG trong WordPress. Chúng tôi khuyên bạn nên thử nếu bạn quyết tâm sử dụng SVG.
Tạo hoạt ảnh SVG bằng CSS và Plugin
Nếu bạn bắt đầu công việc tích hợp SVG vào WordPress, chắc chắn bạn sẽ muốn tối đa hóa lợi tức đầu tư của mình. Điều này có nghĩa là khi thích hợp, bạn nên tạo hoạt ảnh cho SVG của mình bằng CSS. Có hai cách tiếp cận bạn có thể thực hiện mà chúng ta đã thảo luận trước đây:
- SVG có thể được tạo hoạt ảnh thủ công bằng CSS giống như bất kỳ phần tử nào khác.
- Sử dụng các chương trình như SVGator để tạo và tạo hoạt ảnh cho SVG.
Nếu bạn sẵn sàng thử một số điều mới, việc thêm một vài hình ảnh động vào chỗ này chỗ kia có thể cải thiện đáng kể trải nghiệm người dùng trên trang web của bạn. Tuy nhiên, việc thêm video hoặc GIF sẽ tệ hơn đáng kể đối với thiết bị di động so với việc sử dụng SVG và CSS để đạt được điều này.
Phần kết luận
Với khả năng xây dựng đồ họa vector tùy chỉnh trực tiếp trong trình tạo Divi , bạn có một cách mạnh mẽ để tạo hình minh họa và biểu tượng cho trang web của mình mà không cần bất kỳ chuyên môn thiết kế nào. Việc triển khai những đồ họa gốc này có thể mang lại cho trang của bạn và bài đăng một tính thẩm mỹ cá nhân hóa, độc đáo hơn. Bạn sẽ ngạc nhiên về mức độ chuyên nghiệp của đồ họa vector DIY của bạn!
