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.
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
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
Đ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.
1 2 3 4 5 6 7 8 |
.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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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
1 2 3 4 5 6 7 8 9 |
<script> jQuery(function($){ $( document ).on( 'click', '#wpsp-2938 a', function(e) { e.preventDefault(); var url = $(this).attr('href'); window.open(url, '_blank'); }); }); </script> |
Đ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.
Add Comment