Làm thế nào hiển thị bài viết liên quan trong theme GeneratePress?

Bạn đang tìm cách hiển thị các bài đăng liên quan trong theme GeneratePress? Trong hướng dẫn này, chiasefree sẽ hướng dẫn tất cả những thứ cần thiết để hiển thị các bài đăng liên quan. Nếu bạn đang sử dụng chủ đề GeneratePress trong blog của mình thì tôi nghĩ bạn đã có một quyết định tuyệt vời.

Làm thế nào để hiển thị các bài viết liên quan trong chủ đề GeneratePress?

Hiện tại, 1 trong số trang web cảu chiasefree đang sử dụng theme GeneratePress Premium và mình rất hài lòng với chủ đề này. Cảm ơn đội ngũ đằng sau nó đã phát triển 1 theme quá tốt.

Với các tính năng tối thiểu, GeneratePress là một theme tải nhanh với nhiều tính năng vượt trội.

Trong khi cài đặt theme GeneratePress mặc định, nó có kích thước nhỏ hơn 30 kb. Đó là lý do tại sao có những thứ bị thiếu trong theme GP.

Xem thêm bài đánh giá nhanh về theme GeneratePress mà chiasefree đã chia sẻ cách đây không lâu.

Nội dung chính

1 Cách hiển thị các bài viết liên quan trong theme GeneratPress
2 Các bước để hiển thị các bài viết liên quan trong theme GeneratePress
3 Kết luận

Cách hiển thị các bài viết liên quan trong theme GeneratPress

Sử dụng plugin bài viết liên quan có sẵn trong thư viện WordPress.org.
Sử dụng mã tùy chỉnh trong functions.php trong child theme.
Với Kỹ thuật Code + Plugin.

Trong các bài viết liên quan này trong bài viết theme GeneratePress, chúng ta sẽ sử dụng các bước thứ 3 để đạt được các bài viết liên quan bên dưới bài viết đơn giản.

Cá nhân tôi đã sử dụng phương pháp này trong blog của mình để hiển thị các bài viết liên quan. Bạn có thể tìm thấy nó sau nội dung trong một bài đăng.

Các bước để hiển thị các bài viết liên quan trong theme GeneratePress

Để hiển thị các bài đăng có liên quan trong Chủ đề GeneratePress, tôi đã sử dụng Plugin WP Show Posts và Elements Modules từ theme. Hãy đi vào chi tiết.

Cài đặt Plugin WP Show Posts.
Kích hoạt Elements Modules.
Style Bài viết liên quan.
Mở bài viết có liên quan trong tab mới.

1. Sử dụng Plugin WP Show Posts

Plugin WP Show Posts được phát triển bởi Tom Usborne, người đứng sau theme GeneratePress. Mình có thể sử dụng plugin này mà không ảnh hưởng đến tốc độ trang của trang web.

Vì vậy, hãy bắt đầu ngay sau đây

Cài đặt plugin WP Show Posts.

Đi tới WP Show Posts trong thanh bên và nhấp vào Add new.

Đặt tên cho danh sách mới related. Như trong ảnh chụp màn hình bên dưới.

Đi tới Posts -> Post type chọn post. Taxonomy chọn category. Post per page: 3 hoặc 5 tùy vào cách bạn muốn hiển thị. Hãy nhớ Shortcode là Post Id của bạn. Post ID cần thiết trong bước 4.

Chuyển đến phần Columns -> Columns để giá trị là 3. Columns gutter để là 2em.

Tiếp đến Images -> các bạn check vào Images. Trong phần Image width (px) và Image height (px) chọn lần lượt là 211 và 150. Image alignment chọn Center. Image Location để là Above title.

Bước tiếp theo phần Content -> Content type để là None. Excerpt length (words) chọn giá trị 30. Check vào Include title. Title Elements chọn p. Để mặc định tất cả các mục khác còn lại.

Tới phần Meta -> bỏ chọn tất cả cài đặt.

Đi đến phần cuối cùng More settings -> Check vào Exclude current , Ignore sticky posts và để nguyên tất cả các cài đặt.

2. Sử dụng Elements Module trong GeneratePress

Bây giờ, hãy bắt đầu các bước thứ hai để hiển thị các bài đăng liên quan trong theme GeneratePress Premium.

Kích hoạt Elements Module. Đi tới Appearance -> GeneratePress -> Elements -> Activate

Và sau đó đi tới Appearance -> Elements -> Add New

Chọn Loại phần tử là Hook. Đặt tên nó là Related Post hoặc Bài viết liên quan gì đó nếu bạn thích.

Dán code bài đăng có liên quan sau vào Hook.

<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

<h2>Related Posts</h2>

<?php

if ( is_single() ) {

$cats = get_the_category();

$cat = $cats[0];

} else {

$cat = get_category( get_query_var( 'cat' ) );

}

$cat_slug = $cat->slug;

$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );

wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );

</div>

Chỉ sử dụng mã này nếu bạn cần hiển thị các bài đăng có liên quan theo thẻ Tags

<div class="wpsp-related-posts1  grid-container">
	<h2>Related Posts</h2>
<?php    
if ( is_single() ) {
        $tags =  get_the_tags();
        $tags_list = [];
        foreach ($tags as $tag)
            $tags_list[] = $tag->slug;
        $tag_string = implode( ', ', $tags_list);
    } else {
        $tag_string = get_tag( get_query_var( 'tag' ) );
    }

    $list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
    wpsp_display( $list->ID, 'tax_term="' . $tag_string . '"' );
    ?>
</div>

<h2>Related Posts</h2>

<?php

if ( is_single() ) {

$tags = get_the_tags();

$tags_list = [];

foreach ($tags as $tag)

$tags_list[] = $tag->slug;

$tag_string = implode( ', ', $tags_list);

} else {

$tag_string = get_tag( get_query_var( 'tag' ) );

}

$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );

wpsp_display( $list->ID, 'tax_term="' . $tag_string . '"' );

</div>

Đi tới Cài đặt Hook và chọn hook để hiển thị after_content và check vào Execute PHP.

Tiếp theo tới phần Display Rules , trong phần Location chọn All Singular và Exclude chọn Pages

Nhấn vào Publish

3. Theme css cho bài viết liên quan

Bây giờ, đã đến lúc làm đẹp cho các bài đăng có liên quan bằng cách sử dụng CSS.

Đến Appearance -> Customize -> Additional CSS

Dán mã sau vào phần CSS bổ sung. Bạn có thể điều chỉnh phong cách tùy theo nhu cầu của mình.

.wpsp-related-posts1 {
    background-color: #fff;
    padding: 24px 20px 10px 20px;
    margin-top: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

.wpsp-related-posts1 {

background-color: #fff;

padding: 24px 20px 10px 20px;

margin-top: 10px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;

}

Nếu bạn muốn hiển thị các bài đăng liên quan trong danh sách số (không phải bài đăng liên quan đến hình thu nhỏ) thì bạn chỉ cần điều chỉnh một số cài đặt như đã đề cập bên dưới từ cài đặt plugin WP Show Posts ở trên và sử dụng mã CSS.

Đi tới phần Posts -> Posts per page để là 5 hoặc 10 (tùy ý bạn)
Chuyển đến phần Columns -> Columns dưới dạng là 1
Bỏ chọn Images option từ menu images.

.wpsp-related-posts1 {
    background-color: #fff;
    padding: 15px 20px 50px 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
    counter-reset: wplogout-list;
}

#wpsp-2938 p{
    counter-increment: wplogout-list;
    margin-bottom: -25px;
}

#wpsp-2938 p:before { 
    content: counter(wplogout-list) ". ";
    color: #1b78e2;
}

.wpsp-related-posts1 {

background-color: #fff;

padding: 15px 20px 50px 20px;

margin-top: 20px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;

counter-reset: wplogout-list;

}

#wpsp-2938 p{

counter-increment: wplogout-list;

margin-bottom: -25px;

}

#wpsp-2938 p:before {

content: counter(wplogout-list) ". ";

color: #1b78e2;

}

Kết quả cho bài viết liên quan theo danh sách

4. Mở các bài đăng có liên quan trong tab mới

Hãy mở từng bài đăng WordPress trong tab mới. (Đây là phần không bắt buộc)

Với mã JavaScript này, bạn có thể mở từng bài đăng trên trang trống.

Như đã đề cập ở trên, hãy vào Appearance -> Elements -> Add New

Chọn Loại phần tử là Hook. Đặt tên nó là Bài đăng có liên quan mở trong Tab Mới.

Dán Mã JavaScript sau vào

<script>
	jQuery(function($){
		$( document ).on( 'click', '#wpsp-2938 a', function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});
});
</script>

jQuery(function($){

$( document ).on( 'click', '#wpsp-2938 a', function(e) {

e.preventDefault();

var url = $(this).attr('href');

window.open(url, '_blank');

});

</script>

Lưu ý: Trong đoạn mã trên, tại #wpsp-2938, vui lòng dán mã shortcode post id được tạo bởi Plugin WP Show Posts trong khi tạo Danh sách mới ở bước 1.

Đi tới cài đặt Hook và chọn hook để hiển thị trong wp_footer và để trống tất cả các cài đặt khác.

Tiếp theo qua tab Display Rules và phần Location chịn All Singular và Exclude chọn Pages.

Cuối cùng nhấn vào nút Publish

Kết luận

Tôi hy vọng bài viết hiển thị các bài viết có liên quan trong theme GeneratePress này sẽ giúp bạn đạt được mục tiêu của mình là hiển thị các bài viết có liên quan trong một bài đăng.

Nếu bạn đang tìm kiếm thêm các hướng dẫn liên quan đến theme GP thì không nên bỏ qua Series theme GeneratePress này.

Nếu bạn có bất kỳ kỹ thuật khác hoặc bất kỳ vấn đề xin vui lòng bình luận.

Bạn nghĩ sao về bài viết này?

Lưu ý:
→ Vui lòng bình luận bằng tiếng Việt có dấu.
→ Hãy dùng tên và email thật của bạn khi comment.
→ Không sử dụng keyword trong ô Name.
→ Nếu có ý định Spam link thì hãy quên đi nhé.
→ Tất cả bình luận đều được kiểm duyệt vì thế hãy cẩn thận trước khi comment.
Xin cám ơn!

Không Tên

Share this post

Tags

Làm thế nào để hiển thị các bài viết liên quan trong chủ đề GeneratePress?

Cách hiển thị các bài viết liên quan trong theme GeneratPress

Các bước để hiển thị các bài viết liên quan trong theme GeneratePress

1. Sử dụng Plugin WP Show Posts

2. Sử dụng Elements Module trong GeneratePress

3. Theme css cho bài viết liên quan

4. Mở các bài đăng có liên quan trong tab mới

Kết luận

Add Comment Hủy

Không Tên

Share this post

Tags

Cách hiển thị các bài viết liên quan trong theme GeneratPress

Các bước để hiển thị các bài viết liên quan trong theme GeneratePress

1. Sử dụng Plugin WP Show Posts

2. Sử dụng Elements Module trong GeneratePress

3. Theme css cho bài viết liên quan

4. Mở các bài đăng có liên quan trong tab mới

Kết luận

Bạn có thể thích...

Tút hướng dẫn quản lý, trỏ tên miền ở Name.com

Hướng dẫn quản lý, trỏ tên miền ở Porkbun

Hướng dẫn quản lý, trỏ tên miền ở Z.com

Add Comment Hủy