Trong thời đại số hóa ngày nay, việc tạo ra nội dung hấp dẫn và độc đáo cho trang web là điều cực kỳ quan trọng để thu hút người dùng. Một trong những xu hướng nổi bật hiện nay là sử dụng video làm hình ảnh nổi bật (Featured Image) trong các bài viết hoặc trang web. Đặc biệt, với theme GeneratePress, người dùng có thể dễ dàng tích hợp video vào vị trí này để nâng cao trải nghiệm người đọc và gia tăng tính tương tác.
Video không chỉ giúp truyền tải thông điệp một cách sinh động mà còn tạo sự chú ý mạnh mẽ hơn so với hình ảnh tĩnh. Khi sử dụng video làm Featured Image, bạn không chỉ làm mới giao diện website mà còn có thể cải thiện đáng kể thứ hạng SEO. Các công cụ tìm kiếm thường ưu tiên các trang có nội dung đa dạng và phong phú. Do đó, việc tích hợp video không chỉ thu hút khách truy cập mà còn giúp tăng cường khả năng hiển thị của website trên các nền tảng tìm kiếm.
Trong bài viết này, hãy cùng Quicksite khám phá cách thực hiện việc này một cách hiệu quả nhất trên GeneratePress, giúp bạn dễ dàng tạo ra những trang web ấn tượng và chuyên nghiệp.
Bước 1: chép đoạn code sau vào flie Function.php của child theme
Mã code
<?php
function quicksite_video_replace_featured_image() {
$post_id = get_the_id();
if (get_post_format($post_id) === 'video' && (is_archive() || is_home() )) {
$video_url = get_post_meta( $post_id, 'video', true );
if ( !empty( $video_url ) ) {
echo '<div class="post-image">'. wp_oembed_get( $video_url ).'</div>'; // Chèn video từ URL
}
} return;
}
add_action( 'generate_before_entry_title', 'quicksite_video_replace_featured_image' );
Phân tích đoạn code
- Hàm
quicksite_video_replace_featured_image:- Đầu tiên, hàm này lấy ID của bài viết hiện tại bằng
get_the_id(). - Sử dụng
get_post_format($post_id)để kiểm tra định dạng của bài viết. Nếu định dạng là ‘video’ và đang ở trang lưu trữ (archive) hoặc trang chính (home), tiếp tục thực hiện các bước tiếp theo. get_post_meta($post_id, 'video', true)sẽ lấy URL video từ trường tùy chỉnh có tên ‘video’ trong bảng dữ liệu của bài viết.- Nếu biến
$video_urlkhông rỗng, hàm sẽ chèn video vào trang bằng cách sử dụngwp_oembed_get($video_url), điều này giúp nhúng video từ URL vào trong thẻ<div>với lớp CSSpost-image.
- Đầu tiên, hàm này lấy ID của bài viết hiện tại bằng
- Hàm
add_action:- Cuối cùng, hàm
add_actionđược sử dụng để gắn hàmquicksite_video_replace_featured_imagevào hookgenerate_before_entry_title. Điều này có nghĩa là hàm sẽ được thực thi trước tiêu đề của bài viết (entry title) trong các trang được chỉ định.
- Cuối cùng, hàm
Lưu ý
- Đoạn mã này sẽ chỉ hoạt động trên các bài viết có định dạng video và trên trang lưu trữ hoặc trang chính.
- Nếu không có video được cung cấp, không có gì sẽ được hiển thị.
- Việc sử dụng
wp_oembed_get()đảm bảo rằng video sẽ được hiển thị đúng cách, hỗ trợ các dịch vụ như YouTube, Vimeo, v.v.
Bước 2: bật chức năng trường tùy chỉnh trong Gutenberg Blocks Editor
Click vào chấm ba chấm theo chiều dọc bên góc phải, màn hình trang edit Gutenberg, kéo xuống chọn Preferences. Ở phần Adanvanced Tab chọn bật Custom Fields.
Bạn có thể tham khảo chi tiết trong bài viết này!
Bước 3: thêm trường tùy chỉnh, gắn URL và sửa template thành video
Đầu tiên bạn nhấn vào nút ADD CUSTOM FIELD.
Ở phần Name bạn điền vào: VIDEO.
Phần Value là URL cần làm Featured Image.
Ở phần Format bạn chỉnh thành: VIDEO.
Rồi như vậy là xong!
Bước 4: Tận hưởng thành quả
Việc sử dụng video từ Youtube làm Featured Image cho website được xây dựng bằng GeneratePress mang lại nhiều lợi ích vượt trội. Đầu tiên, nó giúp tăng tính hấp dẫn và thu hút người xem ngay từ cái nhìn đầu tiên. Video có khả năng truyền tải thông điệp mạnh mẽ hơn hình ảnh tĩnh, từ đó nâng cao trải nghiệm người dùng. Hơn nữa, việc tích hợp video từ Youtube có thể cải thiện thời gian tải trang, vì bạn không cần lưu trữ video trực tiếp trên server của mình.
Tuy nhiên, nếu bạn muốn tùy chỉnh sâu hơn cho việc hiển thị Featured Image, như thay đổi kích thước, bố cục hoặc hiệu ứng, bạn cần xem xét việc mua bản Premium của GeneratePress. Phiên bản này cung cấp nhiều công cụ và tính năng nâng cao, giúp bạn dễ dàng tùy chỉnh giao diện và tối ưu hóa SEO cho website của mình. Hãy tận dụng sự linh hoạt mà GeneratePress mang lại để xây dựng một trang web nổi bật và thu hút nhiều lượt truy cập hơn.
