Bạn có muốn thêm thumbnails vào các liên kết bài viết trước và sau trong WordPress? Dưới cuối mỗi bài viết, WordPress hiển thị các liên kết đến bài viết trước và sau để dễ dàng điều hướng. Thêm thumbnails vào các liên kết này sẽ làm cho chúng hấp dẫn hơn đối với độc giả của bạn. Trong bài viết này, Vietnix sẽ chỉ cho bạn cách sử dụng thumbnails với liên kết bài viết trước và sau trong WordPress.
Cách thêm thumbnails vào các liên kết bài viết trước và sau trong WordPress
Để thêm thumbnails vào các liên kết bài viết trước và sau của bạn, bạn sẽ phải thêm code vào các file của theme WordPress của bạn. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của Vietnix về cách sao chép và dán code trong WordPress.
Thêm code vào file functions.php của theme
Bước đầu tiên là thêm đoạn code sau vào file functions.php của bạn, trong một plugin cụ thể của trang web hoặc bằng cách sử dụng một plugin code chú thích.
function wpb_posts_nav(){
$next_post = get_next_post();
$prev_post = get_previous_post();
if ( $next_post || $prev_post ) : ?>
<div class="wpb-posts-nav">
<div>
<?php if ( ! empty( $prev_post ) ) : ?>
<a href="<?php echo get_permalink( $prev_post ); ?>">
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__prev">
<?php echo get_the_post_thumbnail( $prev_post, [ 100, 100 ] ); ?>
</div>
</div>
<div>
<strong>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></svg>
<?php _e( 'Previous article', 'textdomain' ) ?>
</strong>
<h4><?php echo get_the_title( $prev_post ); ?></h4>
</div>
</a>
<?php endif; ?>
</div>
<div>
<?php if ( ! empty( $next_post ) ) : ?>
<a href="<?php echo get_permalink( $next_post ); ?>">
<div>
<strong>
<?php _e( 'Next article', 'textdomain' ) ?>
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></svg>
</strong>
<h4><?php echo get_the_title( $next_post ); ?></h4>
</div>
<div>
<div class="wpb-posts-nav__thumbnail wpb-posts-nav__next">
<?php echo get_the_post_thumbnail( $next_post, [ 100, 100 ] ); ?>
</div>
</div>
</a>
<?php endif; ?>
</div>
</div> <!-- .wpb-posts-nav -->
<?php endif;
}Sau khi bạn lưu các thay đổi, hàm này có thể được gọi từ mẫu nơi bạn muốn hiển thị các liên kết bài viết trước và sau với thumbnails.
Thêm code vào file single.php của theme
Tiếp theo, bạn cần mở file single.php của theme của bạn. File này đã bao gồm code thêm các liên kết bài viết trước và sau code không có thumbnails. Đầu tiên, bạn cần phải xóa code đó.
Ví dụ, đây là một ảnh chụp màn hình của file single.php trong theme Twenty TwentyOne. Tìm phần được đánh dấu // Previous/next post navigation.
Bây giờ bạn cần xóa code trong phần đó bắt đầu từ the_post_navigation cho đến cuối của vòng lặp. Sau đó, bạn nên dán đoạn code sau vào chỗ đó:
wpb_posts_nav();Đảm bảo bạn lưu file khi hoàn tất.
Thêm code CSS vào Your Theme’s Style Sheet
Để tùy chỉnh kiểu dáng cho các liên kết bài viết trước và sau, bạn cần thêm code CSS tùy chỉnh vào bảng kiểu dáng của theme WordPress của bạn. Bạn có thể tìm hiểu thêm thông tin trong hướng dẫn của Vietnix về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn.
Thêm code sau vào file styles.css của theme hoặc sử dụng tùy chỉnh theme WordPress:
.wpb-posts-nav {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 50px;
align-items: center;
max-width: 1200px;
margin: 100px auto;
}
.wpb-posts-nav a {
display: grid;
grid-gap: 20px;
align-items: center;
}
.wpb-posts-nav h4,
.wpb-posts-nav strong {
margin: 0;
}
.wpb-posts-nav a svg {
display: inline-block;
margin: 0;
vertical-align: middle;
}
.wpb-posts-nav > div:nth-child(1) a {
grid-template-columns: 100px 1fr;
text-align: left;
}
.wpb-posts-nav > div:nth-child(2) a {
grid-template-columns: 1fr 100px;
text-align: right;
}
.wpb-posts-nav__thumbnail {
display: block;
margin: 0;
}
.wpb-posts-nav__thumbnail img {
border-radius: 10px;
}Đừng quên lưu các thay đổi.
Xem trước các liên kết bài viết trước và sau với thumbnails
Bây giờ khi bạn xem một bài viết trên trang web của mình, bạn sẽ thấy rằng các liên kết bài viết trước và sau ở cuối bài viết giờ đã có thumbnails.
Nếu một trong những bài viết liên kết chưa có ảnh đại diện, bạn sẽ không thấy thumbnails. Để biết cách thêm thumbnails vào một bài viết, xem hướng dẫn của chúng Vietnix về cách thêm ảnh đặc sắc hoặc thumbnails bài viết trong WordPress.
Để xây dựng website chuyên nghiệp trên nền tảng WordPress, việc hiểu rõ về code hỗ trợ là điều rất quan trọng. Tuy nhiên, để tối ưu hóa trải nghiệm và giữ chân người dùng trên website, bạn cần phải tìm kiếm và cài đặt thêm các plugin hỗ trợ cho website
Hiện tại, chỉ cần đăng ký gói WordPress Hosting có giá từ 53.000VND/Tháng bạn sẽ được tặng miễn phí bộ theme và plugin có giá trị lên đến 26.000.000 rất hữu ích cho quá trình xây dựng website.
Vietnix đang cung cấp nhiều gói hosting khác nhau, trong đó nổi bật với gói WordPress Hosting được Vietnix thiết kế chuyên biệt và tối ưu cho nền tảng WordPress, vì vậy bạn có thể yên tâm rằng website bán hàng của mình sẽ sở hữu tốc độ tải nhanh chóng, hiệu suất cao, ổn định và bảo mật.
Nếu bạn đang tìm kiếm dịch vụ WordPress Hosting chất lượng với sự hỗ trợ chuyên nghiệp, bạn có thể xem xét sử dụng dịch vụ của Vietnix, với nhiều ưu điểm nổi bật:
- Tốc độ tải trang nhanh chóng: Sử dụng ổ cứng NVMe siêu tốc kết hợp với công nghệ LiteSpeed Enterprise, Vietnix đảm bảo tốc độ tải trang dưới 1 giây.
- Đội ngũ kỹ thuật chuyên nghiệp: Đội ngũ kỹ thuật của Vietnix sẵn sàng giúp bạn tìm ra lỗi và vấn đề trên website và tối ưu hóa mã nguồn WordPress một cách hiệu quả.
- An toàn dữ liệu: Hệ thống sao lưu tự động 4 lần/ngày giúp giảm thiểu rủi ro mất mát dữ liệu, đảm bảo dữ liệu của bạn an toàn và không làm gián đoạn hoạt động kinh doanh.
- Ổn định và an toàn: Hạ tầng hiện đại tích hợp công nghệ Firewall chống DDoS độc quyền của Vietnix giúp website luôn ổn định và an toàn.
- WordPress Toolkit dễ dàng: Hỗ trợ tạo website WordPress một cách dễ dàng thông qua WordPress Toolkit chỉ với một cú nhấp chuột.
Phương án thay thế: Hiển thị bài viết phổ biến với thumbnails
Một cách khác để thu hút độc giả sau khi họ đọc một bài viết là hiển thị danh sách các bài viết phổ biến sau mỗi bài viết. Điều này sẽ giúp độc giả của bạn xem được nội dung tốt nhất của bạn, thay vì chỉ là các bài viết trước và sau đã được xuất bản.
Những bài viết phổ biến của bạn chứa nội dung thành công nhất. Hiển thị chúng cho khách truy cập sẽ xây dựng lòng tin, cải thiện chứng minh xã hội và đảm bảo khách truy cập của bạn ở lại trang web của bạn lâu hơn.
Khi bạn kiểm tra phương pháp đầu tiên trong hướng dẫn của Vietnix về cách hiển thị bài viết theo lượt xem trong WordPress, bạn sẽ tìm hiểu cách dễ dàng thêm bài viết phổ biến bằng cách sử dụng plugin MonsterInsights.
Bạn cũng có thể muốn xem hướng dẫn của Vietnix về cách thêm widget tùy chỉnh sau bài viết trong WordPress, nơi bạn có thể tìm hiểu cách thêm nhiều loại nội dung vào cuối mỗi bài viết blog.
Lời kết
Vietnix hy vọng hướng dẫn này đã giúp bạn học cách thêm thumbnails vào các liên kết bài viết trước và sau trong WordPress. Bạn cũng có thể muốn tìm hiểu cách tăng tốc hiệu suất WordPress hoặc xem danh sách các plugin truyền thông xã hội tốt nhất cho WordPress.
