Jetpack Related Posts

Related Posts (bài viết liên quan bài viết gốc) là một tính năng rất hay, mà mình nghĩ là nên thêm vào cho blog :]] nó giúp khách vào site đọc thêm các bài viết liên quan tới bài viết đang xem, mà thường thì ai quan tâm bài viết đang xem, thì sẽ dễ ấn tượng với các bài viết liên quan, dễ click vào đọc hơn, đây cũng là một hình thức níu chân khách vào site một cách rất là “lịch sự” :]]

Giới thiệu về Jetpack Related Posts

Ban đầu mình dùng thử vài plugin, thật sự thì không ấn tượng lắm, về cơ bản thì bài viết liên quan thường nó sẽ dựa vào thư mục viết bài, tags, ngữ cảnh, nội dung bài viết, mỗi plugin đa phần dựa vào các thông số đó, nó sẽ xem cái nào liên quan nhất để hiện ra, ví dụ, cùng thư mục 1 điểm, cùng tag 2 điểm, cùng nội dung 3 điểm, sau đó nó xem hết các bài, điểm bài nào cao nhất thì hiện ra ở phần related posts, chính vì thế, thường nó sẽ không chính xác, tất nhiên nếu người viết bài, khi từ bài viết đầu tiên, tạo các tag, thư mục chuẩn thì sẽ giúp nhiều cho việc này 😛 chính vì phải lọc rất nhiều thông số nên dùng related posts thường sẽ hiện không chính xác bài viết và khá nặng cho WordPress

Ban đầu mình thử Yet Another Related Posts Plugin thấy cũng tạm, tuy thế do cái blog này, mình hoàn toàn không dùng tags :)) thành ra kết quả tìm kiếm các bài viết related posts khá là tệ, giống như mình viết phần nhiều về WordPress, tối ưu tăng tốc các kiểu, ấy thế mà nó cứ nện ra cái bài về Tenda AC6 Wifi Router Và Wifi Extender, trong khi bài này nó ếu có bà con gì với các thứ khác cả 😛 

Google các kiểu thì ra tính năng Related Posts trong bộ plugin Jetpack, đọc vào phát ấn tượng ngay:

Tính năng Related Posts quét tất cả các bài đăng của bạn, phân tích chúng và cho phép bạn hiển thị các bài đăng theo ngữ cảnh mà khách truy cập của bạn có thể muốn đọc sau khi chúng đã hoàn tất với bất kỳ bài đăng nào mà họ đang xem.

Không giống như nhiều plugin đăng bài liên quan khác, chúng tôi thực hiện phân tích, xử lý và phục vụ từ hệ thống của chúng tôi, vì vậy máy chủ của bạn không cần làm thêm gì cả (đó là lý do tại sao nhiều plugin như YARPP hoặc Related Posts thường bị cấm bởi các máy chủ web, nhưng Jetpack Related Posts được cho phép)Jetpack

Không như 99% các plugin có tính năng related posts khác, Jetpack dùng server của họ để phân tích, thành ra về lý thuyết, server của bạn chỉ nhận đúng 1 cái kết quả trả về về, mà cái này thì đã được Jetpack sử lý sạch sẽ, thành ra dùng Jetpack Related Posts cực kì nhẹ nhàng và mượt mà

Thật sự dùng thử khá là ấn tượng, bài viết liên quan nó hiện ra rất chuẩn xác, đưa chuột vào ảnh nó hiện ra nội dung ngắn của bài viết, đỡ khoảng không gian thừa, nhìn rất sạch sẽ, gọn gàng, như ở cái bài viết về GeneratePress nó hiện ra 3 bài viết liên quan, trong đó có GeneratePress Child Theme, hay như bài viết về Webinoly nó hiện ra EasyEngine, Centmin Mod, WP Rocket và Rocket-Nginx ở bài viết liên quan mới bá đạo chứ :]] giao diện mặc định hiện ra cũng khá hợp lý, 3 bài viết liên quan nhất tới bài viết gốc, mình nghĩ thế cũng là đủ rồi, hiện nhiều mà kết quả sai thì cũng chẳng để làm gì 😀

Theo nhiều bài test tốc độ, thì truy xuất vào database của Jetpack Related Posts đâu đó chỉ là 1 cái select lấy kết quả, trung bình mất chưa tới 0.01s cho việc này :]] bản thân Jetpack Related Posts cũng được tất cả các dịch vụ hosting share khuyên dùng thì mình nghĩ đúng là không cần bàn về tốc độ và hiệu năng của nó nữa, rất nhẹ và hiệu quả

Coi kĩ lại thì khi cài Jetpack Related Posts vào nó load thêm cái file ?relatedposts=1 ở mỗi bài post

https://bibica.net/gioi-thieu-va-danh-gia-ve-runcloud/?relatedposts=1

Mà cái này thì chỉ là 1 đoạn text ngắn để hiện nội dung ra 

{"version":"20150408","show_thumbnails":true,"show_date":false,"show_context":true,"layout":"grid","headline":"Related Posts","items":[{"id":849,"url":"https:\/\/bibica.net\/webinoly-mot-su-thay-hoan-hao-cho-easyengine\/","url_meta":{"origin":3304,"position":0},"title":"Webinoly m\u1ed9t s\u1ef1 thay th\u1ebf ho\u00e0n h\u1ea3o cho\u00a0EasyEngine\u00a0","date":"07\/12\/2017","format":false,"excerpt":"Webinoly l\u00e0 m\u1ed9t *UNIX script d\u00e0nh cho h\u1ec7 \u0111i\u1ec1u h\u00e0nh Ubuntu gi\u00fap b\u1ea1n t\u1ef1 \u0111\u1ed9ng c\u00e0i \u0111\u1eb7t m\u1ed9t webserver s\u1eed d\u1ee5ng Nginx + MariaDB (MySQL) + PHP + HTTP \/ 2 ho\u00e0n ch\u1ec9nh ph\u1ee5c v\u1ee5 ri\u00eang cho WordPress. (b\u1ea1n ch\u1ec9 c\u1ea7n g\u00f5 t\u1ed5ng c\u1ed9ng \u0111\u00fang 2 d\u00f2ng l\u1ec7nh l\u00e0 xong)","rel":"nofollow","context":"In \"Review\"","img":{"src":"https:\/\/i1.wp.com\/bibica.review\/wp-content\/uploads\/2017\/12\/12-7-2017-6-38-24-PM-1-e1512735586246_nmkq4r_vadkae.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":708,"url":"https:\/\/bibica.net\/centmin-mod-lemp-web-stack\/","url_meta":{"origin":3304,"position":1},"title":"Centmin Mod LEMP Web Stack","date":"05\/12\/2017","format":false,"excerpt":"Centmin Mod l\u00e0 m\u1ed9t *UNIX script d\u00e0nh cho h\u1ec7 \u0111i\u1ec1u h\u00e0nh CentOS 6 & 7 gi\u00fap b\u1ea1n t\u1ef1 \u0111\u1ed9ng c\u00e0i \u0111\u1eb7t m\u1ed9t webserver s\u1eed d\u1ee5ng Nginx, MariaDB, PHP-FPM & CSF Firewall","rel":"nofollow","context":"In \"Review\"","img":{"src":"https:\/\/i1.wp.com\/bibica.review\/wp-content\/uploads\/2017\/12\/Centmin-Mod-LEMP-Web-Stack_tv4wcx.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1654,"url":"https:\/\/bibica.net\/cloud-vps-vultr\/","url_meta":{"origin":3304,"position":2},"title":"Cloud VPS Vultr","date":"13\/12\/2017","format":false,"excerpt":"Vultr l\u00e0 m\u1ed9t trong c\u00e1c d\u1ecbch v\u1ee5 Cloud VPS c\u00f3 ph\u1ea7n c\u1ee9ng m\u1ea1nh m\u1ebd, t\u1ed1c \u0111\u1ed9 truy c\u1eadp t\u1eeb Vi\u1ec7t Nam v\u00e0 gi\u00e1 t\u1ed1t nh\u1ea5t hi\u1ec7n nay, recommend c\u00e1c b\u1ea1n d\u00f9ng th\u1eed, th\u00e0nh ra Cloud VPS Vultr l\u00e0 b\u00e0i \u0111\u1ea7u ti\u00ean trong chuy\u00ean m\u1ee5c\u00a0Advertisement :D","rel":"nofollow","context":"In \"Advertisement\"","img":{"src":"https:\/\/i1.wp.com\/bibica.review\/wp-content\/uploads\/2017\/12\/Vultr_ivuhgm.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}]}

Thậm chí nó còn minification luôn cái file này, bằng cách xóa hết các khoảng trắng, kí tự thừa

Tuy nó nhẹ và hiệu quả nhưng tùy chọn của nó thì hơi nghèo nàn, chỉ có đúng 5 tùy chọn là hiện hoặc tắt tiêu đề, hiện ẩn ảnh thumbnails, category, tag và ngày tháng, kèm theo đó là vị trí hiện theo chiều ngang hay dọc, so với các plugin related posts khác thì tùy chọn của nó hơi ít, cũng không trách được, vì nó chỉ là 1 tính năng nhỏ trong hơn 30 tính năng của bộ sản phẩm Jetpack 

Tuy là không hiện tùy chọn ra cho bạn chọn, nhưng thực tế thì họ cũng đã viết đủ các tính năng thêm vào tại trang chủ để bạn có thể sửa lại theo ý thích

Mình lược dịch sơ, bạn nào có nhu cầu thì dùng, cá nhân mình thì mặc định là đủ dùng rồi, chỉ sửa một tẹo màu sắc với vị trí các thứ một tí cho thích mắt là được 😀

1. Thay đổi số bài viết hiện ra

Mặc định là 3, thay vào 6 hay 10 gì đó thì tùy 😛

function jetpackme_more_related_posts( $options ) {
 $options['size'] = 6;
 return $options;
}
add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_more_related_posts' );

2. Hiển thị tác giả bài đăng

Nếu blog của bạn có nhiều tác giả viết bài, cần hiện tên tác giả ra thì thêm dòng dưới:

/**
 * Display the post author after the existing Related Posts context.
 *
 * @param string $context Context displayed below each related post.
 * @param string $post_id Post ID of the post for which we are retrieving Related Posts.
 *
 * @return string $context Context, including information about the post author.
 */
function jeherve_related_authors( $context, $post_id ) {
    // Get the author ID.
    $post_author = get_post_field( 'post_author', $post_id );
 
    // Get the author's display name.
    $author_display_name = get_the_author_meta( 'display_name', $post_author );
 
    // Add the author name after the existing context.
    if ( isset( $author_display_name ) && ! empty( $author_display_name ) ) {
        return sprintf(
            __( '%1$s<span class="jp-relatedposts-post-author">By %2$s</span>', 'my-plugin-slug' ),
            $context,
            esc_html( $author_display_name )
        );
    }
 
    // Final fallback.
    return $context;
}
add_filter( 'jetpack_relatedposts_filter_post_context', 'jeherve_related_authors', 10, 2 );

3. Sử dụng shortcode

Bạn có thể sử dụng shortcode để hiện bài đăng liên quan ở vị trí tùy thích, mặc định thì nó được hiện ở cuối bài

[jetpack-related-posts]

Cứ copy dòng đó vào chỗ muốn hiện ra là được

4. Sử dụng kết quả tùy chỉnh

Nói sao nói, plugin dù có tốt thế nào, thì nó không thể nào hiểu chính xác hết được, như ở bài viết A, bạn muốn hiện ra kết quả là bài viết liên quan đầu tiên là B chứ không phải X, Y, Z thì có thể dùng code bên dưới

function jetpackme_append_related_post( $hits, $post_id ) {
    // $post_id is the post we are currently getting related posts for
        if ( 3214 == $post_id ) {
            // Add 1036 to the front of the hits array
        array_unshift( $hits, array( 'id' => 1403 ) );
            // Remove the last element of the array
            array_pop( $hits );
        }
 
    return $hits;
}
add_filter( 'jetpack_relatedposts_filter_hits', 'jetpackme_append_related_post', 20, 2 );

Ví dụ cụ thể 3214 là ID bài viết này, 1403 là ID bài viết về “Jetpack Image CDN” 😀 kéo chuột xuống cuối bài bạn sẽ thấy nó hiện ra ở vị trí đầu tiên của phần related posts 

5. Thay đổi kích thước ảnh thumbnail

function jetpackchange_image_size ( $thumbnail_size ) {
 $thumbnail_size['width'] = 250;
 $thumbnail_size['height'] = 250;
// $thumbnail_size['crop'] = true;
 return $thumbnail_size;
}
add_filter( 'jetpack_relatedposts_filter_thumbnail_size', 'jetpackchange_image_size' );

Hơi khó hiểu, vì ban đầu khi mình coi thông tin từ trang chủ thì họ nói là không thể thay đổi được kích thước ảnh thumbnail vì vấn đề liên quan tới code gì đó, nhưng sau 1 thời gian search thì vẫn thấy thay đổi được 😛 bạn có thể thay đổi giá trị width và height từ 250 thành giá trị nào đó mà bạn muốn 😀

Các tính năng khác thì bạn tham khảo thêm ở trang chủ là được, họ viết khá đầy đủ rồi

Mặc định thì khi bạn cài Jetpack Related Posts vào, nó sẽ tự quét các bài viết để tạo các bài viết liên quan, như thèng bibica.review thì mất đâu đó 5-10 phút là nó quét xong, hiện related posts ra rồi 😛 tuy thế, nếu vì lý do nào đó, bạn thấy bài nào còn chưa được quét, chưa hiện related posts ra thì có thể set lại Manage Connection để Jetpack họ quét lại

Nhiều người không thích dùng plugin related posts, phần vì nó nặng, phần vì họ thích tự tùy chỉnh bài viết của họ, thực ra thì khi viết bài, họ đã tự link tới các bài viết liên quan cả rồi, nên thực tế với các tay viết bài chuyên nghiệp, họ không thèm dùng các plugin related posts, tuy thế với Jetpack Related Posts, mình khuyên là nên dùng 😀 

Jetpack Related Posts là một sản phẩm tuyệt vời, tuyệt nhất là Jetpack họ dùng server riêng để phân tích các thứ liên quan tới related posts, thành ra nó rất nhẹ và chính xác, ít nhất so với các plugin mình từng thử thì nó hiện ra chính xác và nhẹ nhất, tuy thế tùy chọn nó quá nghèo nàn, nếu họ chịu làm thêm các phần tùy chọn thêm vào, không phải add code bằng tay thì mình nghĩ sẽ tuyệt vời hơn

Update 12/04/2018:

Thật sự dùng 1 thời gian, cá nhân rất có thiện cảm với bộ Jetpack, gần như các thứ họ làm, đều là server <->  server, thành ra phía người dùng rất nhẹ, gần như tốn cực ít tài nguyên, như Related Posts là một tính năng cực nặng, dùng qua bộ Jetpack thì mỗi bài viết chỉ load cái file text bé tí hiện nội dung, thế là xong, chưa kể Related Posts của họ rất chính xác chứ không phải hiện ra lung tung 😀 nếu bới ra thì họ bắt dùng domain của họ, kiểu wp.com, không cho end user tự config domain lại, còn lại thì thú thực mình cũng không biết chê cái gì 

Vote mạnh bà con dùng thèng này 😀

Update 25/03/2018:

Bổ sung thay đổi kích thước ảnh thumbnail

Update 02/06/2023

Jetpack Related Posts
Jetpack Related Posts

Hiện tại mình đã đổi Jetpack Related Posts sang chế độ tối thiểu nhất có thể, chỉ là các dòng text thuần túy, siêu cấp đơn giản, nhưng vẫn cực kì chính xác, vì vẫn sử dụng cơ chế quét của Jetpack

Bạn vẫn cài Jetpack, bật Related posts như bình thường

Related posts

Sử dụng Code Snippets tạo 1 file php với nội dung:

/* Jetpack Related Posts */

/* This is required to remove the CSS and JS enqueued in the header */
function jetpackme_no_related_posts( $options ) {
    if ( is_single() ) {
        $options['enabled'] = false;
    }
    return $options;
}

add_filter( 'jetpack_relatedposts_filter_options', 'jetpackme_no_related_posts' );

/* Create shortcode for displaying related posts anywhere in the post */
function labnol_related_shortcode( $atts ) {

    $related_posts = "";

    if ( class_exists( 'Jetpack_RelatedPosts' ) && method_exists( 'Jetpack_RelatedPosts', 'init_raw' ) ) {

        $related = Jetpack_RelatedPosts::init_raw()
            ->set_query_name( 'jetpackme-shortcode' )
            ->get_for_post_id(
                get_the_ID(),
                array( 'size' => 5 ) // How many related posts?
            );

        if ( $related ) {

            foreach ( $related as $result ) {
                $related_post = get_post( $result[ 'id' ] );
                $url = get_permalink($related_post->ID);
                $title = $related_post->post_title;
                $related_posts .= "<li><a href='" . $url . "'>$title</a></li>";
            }
            $related_posts = '<ol>' . $related_posts . '</ol>';
        }

    }

    return $related_posts;
}

/* Create a new shortcode for Jetpack related posts */
add_shortcode( 'labnol_related', 'labnol_related_shortcode' );

/* Do not load the one-big Jetpack concatenated CSS file */
add_filter('jetpack_implode_frontend_css', '__return_false');

/* Dequeue the default styles and jQuery for Jetpack module */
function add_labnol_scripts() {
    if (!is_admin()) {
        wp_dequeue_script('jetpack-related_posts');
        wp_dequeue_style('jetpack-related_posts');
    }
}

add_action("wp_enqueue_scripts", "add_labnol_scripts", 20);

Lúc này nó sẽ ngắt hiện Related Posts trên site, muốn hiện nó ở đâu thì có thể thêm bằng shortcode hoặc php vào theme

Cụ thể mình đang dùng theme GeneratePress thì điền vào content-single.php

content-single.php
content-single.php

Cho nó hiện ra dưới nội dung bài viết

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback.
Notes: However, those deemed to be spam or solely promotional will be deleted.

You can create a Gravatar account, add avatar, then use that email to comment here, your account will have a more beautiful Avatar, easier to recognize with other members.

Please use real emails, you can receive notifications when comments are replied