Cách thêm hình thu nhỏ vào liên kết bài viết trước và bài tiếp theo trong WordPress
Bạn có muốn hiển thị hình thu nhỏ với các liên kết bài viết trước và bài tiếp theo trong WordPress không?
Ở cuối mỗi bài đăng, WordPress hiển thị liên kết đến bài viết trước và bài tiếp theo để dễ dàng điều hướng. Việc thêm hình thu nhỏ vào các liên kết này sẽ khiến chúng hấp dẫn hơn với người đọc.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách sử dụng hình thu nhỏ với các liên kết bài viết trước và bài tiếp theo trong WordPress.
Tại sao hiển thị hình thu nhỏ với các liên kết bài trước và bài tiếp theo?
Blog WordPress của bạn cung cấp một số tính năng hữu ích để giúp khách truy cập tìm thấy nội dung mới và điều hướng xung quanh trang web của bạn.
Các tính năng này bao gồm menu điều hướng, thanh tìm kiếm và tiện ích lưu trữ bài đăng.
Một tính năng điều hướng hữu ích khác được tìm thấy ở cuối mỗi bài đăng trên blog trong WordPress. Ở đó bạn sẽ tìm thấy các liên kết đến các bài đăng blog trước và tiếp theo trên trang web của bạn.
Các liên kết này xây dựng sự tương tác của người dùng vì khi khách truy cập của bạn đọc xong một bài đăng trên blog, họ sẽ tìm kiếm thứ khác để đọc. Tuy nhiên, các liên kết sẽ trông tương tác hơn nếu bạn thêm hình thu nhỏ.
Như đã nói, chúng ta hãy xem cách thêm hình thu nhỏ vào liên kết bài đăng trước và bài tiếp theo trong WordPress.
Sử dụng hình thu nhỏ với các liên kết bài viết trước và bài tiếp theo trong WordPress
Để thêm hình thu nhỏ vào liên kết bài đăng trước và bài đăng tiếp theo, bạn sẽ phải thêm mã vào tệp chủ đề WordPress của mình. Nếu bạn chưa từng làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về cách sao chép và dán mã trong WordPress.
Thêm mã vào tệp tin.php của chủ đề của bạn
Bước đầu tiên là thêm đoạn mã sau vào tệp tin.php. Trong plugin dành riêng cho trang web hoặc bằng cách sử dụng plugin đoạn mã.
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 của mình, chức năng 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 đăng trước và tiếp theo bằng hình thu nhỏ.
Thêm mã vào mẫu single.php trong chủ đề của bạn
Tiếp theo, bạn cần mở tệp single.php của chủ đề. Tệp này đã bao gồm mã thêm liên kết bài đăng trước và bài đăng tiếp theo mà không có hình thu nhỏ. Trước tiên bạn sẽ cần phải xóa mã đó.
Ví dụ: đây là ảnh chụp màn hình tệp single.php của chủ đề Twenty TwentyOne. Tìm phần có nhãn // Điều hướng bài đăng trước/tiếp theo.
Bây giờ bạn cần xóa mã trong phần đó bắt đầu bằng the_post_navigation cho đến hết vòng lặp. Sau đó, bạn nên dán đoạn mã sau vào vị trí của nó:
wpb_posts_nav();
Đảm bảo bạn lưu tệp khi hoàn tất.
Thêm mã CSS vào biểu định kiểu chủ đề của bạn
Để tạo kiểu cho các liên kết trước và tiếp theo, bạn sẽ cần thêm CSS tùy chỉnh vào biểu định kiểu của chủ đề. Bạn có thể tìm hiểu thêm trong hướng dẫn của chúng tôi về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn.
Thêm mã này vào tệp style.css của chủ đề của bạn hoặc sử dụng tùy biến chủ đề 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 của bạn.
Xem trước các liên kết trước và tiếp theo bằng hình thu nhỏ
Bây giờ, khi bạn xem một bài đăng trên trang web của mình, bạn sẽ thấy các liên kết trước đó và tiếp theo ở cuối bài đăng hiện có hình thu nhỏ.
Nếu một trong những bài đăng được liên kết chưa có hình ảnh nổi bật thì bạn sẽ không thấy hình thu nhỏ. Để tìm hiểu cách thêm hình thu nhỏ vào bài đăng, hãy xem hướng dẫn của chúng tôi về cách thêm hình ảnh nổi bật hoặc đăng hình thu nhỏ trong WordPress.
Thay thế: Hiển thị các bài viết phổ biến với hình thu nhỏ
Một cách khác để thu hút độc giả của bạn sau khi họ đọc một bài đăng là hiển thị danh sách các bài đăng phổ biến sau mỗi bài viết. Điều này sẽ giúp người đọc có cơ hội xem nội dung hay nhất của bạn, thay vì chỉ các bài viết trước và tiếp theo đã được xuất bản.
Các bài đăng phổ biến của bạn chứa nội dung thành công nhất của bạn. Hiển thị chúng cho khách truy cập sẽ tạo dựng niềm tin, cải thiện bằng chứng xã hội và đảm bảo rằng khách truy cập ở lại trang web của bạn lâu hơn.
Khi bạn xem phương pháp đầu tiên trong hướng dẫn của chúng tôi về cách hiển thị bài đăng theo lượt xem trong WordPress, bạn sẽ biết việc thêm các bài đăng phổ biến bằng cách sử dụng plugin MonsterInsights dễ dàng như thế nào.
Tiện ích bài đăng phổ biến của MonsterInsights cung cấp nhiều chủ đề hấp dẫn cũng như nhiều tùy chọn tùy chỉnh.
Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm tiện ích tùy chỉnh sau bài đăng trong WordPress, nơi bạn có thể tìm hiểu cách thêm nhiều loại nội dung khác nhau vào cuối mỗi bài đăng trên blog.
Chúng tôi hy vọng hướng dẫn này đã giúp bạn tìm hiểu cách sử dụng hình thu nhỏ với các liên kết bài đăng trước và bài đăng tiếp theo 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 dành cho WordPress của chúng tôi.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.