Bài viết liên quan giống Jetpack không có Jetpack trong Genesis

Mô-đun Bài viết liên quan của Jetpack có tùy chọn “bố cục lớn và trực quan” hiển thị các bài đăng liên quan ở cuối nội dung như sau:

Hướng dẫn này cung cấp các bước để hiển thị ba bài đăng có liên quan được tạo kiểu tương tự bên dưới phần nhận xét về các bài đăng đơn lẻ trong Genesis dựa trên mã của Nick Croft và các cải tiến của Andrea và Chinmoy và một chức năng duy nhất cho truy vấn danh mục và truy vấn thẻ của Lee Anthony.

Chúng tôi sẽ sử dụng CSS Grid với dự phòng Flexbox để sắp xếp các bài viết có liên quan trong các cột.

Bước 1

Thêm phần sau vào functions.php của chủ đề con :

// Adds custom image size for images in Related Posts section.
add_image_size( 'related', 400, 222, true );

add_action( 'genesis_after_loop', 'sk_related_posts', 12 );
/**
 * Outputs related posts with thumbnail.
 *
 * @author Nick the Geek
 * @url http://designsbynickthegeek.com/tutorials/related-posts-genesis
 * @global object $post
 */
function sk_related_posts() {
    global $do_not_duplicate;

    // If we are not on a single post page, abort.
    if ( ! is_singular( 'post' ) ) {
        return;
    }

    global $count;
    $count = 0;

    $related = '';

    $do_not_duplicate = array();

    // Get the tags for the current post.
    $tags = get_the_terms( get_the_ID(), 'post_tag' );

    // Get the categories for the current post.
    $cats = get_the_terms( get_the_ID(), 'category' );

    // If we have some tags, run the tag query.
    if ( $tags ) {
        $query    = sk_related_tax_query( $tags, $count, 'tag' );
        $related .= $query['related'];
        $count    = $query['count'];
    }

    // If we have some categories and less than 3 posts, run the cat query.
    if ( $cats && $count <= 2 ) {
        $query    = sk_related_tax_query( $cats, $count, 'category' );
        $related .= $query['related'];
        $count    = $query['count'];
    }

    // End here if we don't have any related posts.
    if ( ! $related ) {
        return;
    }

    // Display the related posts section.
    echo '<div class="related">';
        echo '<h3 class="related-title">Related</h3>';
        echo '<div class="related-posts">' . $related . '</div>';
    echo '</div>';
}

/**
 * The taxonomy query.
 *
 * @since  1.0.0
 * 
 * @param  array  $terms Array of the taxonomy's objects.
 * @param  int    $count The number of posts.
 * @param  string $type  The type of taxonomy, e.g: `tag` or `category`.
 *
 * @return string
 */
function sk_related_tax_query( $terms, $count, $type ) {
    global $do_not_duplicate;

    // If the current post does not have any terms of the specified taxonomy, abort.
    if ( ! $terms ) {
        return;
    }

    // Array variable to store the IDs of the posts.
    // Stores the current post ID to begin with.
    $post_ids = array_merge( array( get_the_ID() ), $do_not_duplicate );

    $term_ids = array();

    // Array variable to store the IDs of the specified taxonomy terms.
    foreach ( $terms as $term ) {
        $term_ids[] = $term->term_id;
    }

    $tax_query = array(
        array(
            'taxonomy'  => 'post_format',
            'field'     => 'slug',
            'terms'     => array(
                'post-format-link',
                'post-format-status',
                'post-format-aside',
                'post-format-quote',
            ),
            'operator' => 'NOT IN',
        ),
    );

    $showposts = 3 - $count;

    $args = array(
        $type . '__in'        => $term_ids,
        'post__not_in'        => $post_ids,
        'showposts'           => $showposts,
        'ignore_sticky_posts' => 1,
        'tax_query'           => $tax_query,
    );

    $related  = '';

    $tax_query = new WP_Query($args);

    if ( $tax_query->have_posts() ) {
        while ( $tax_query->have_posts() ) {
            $tax_query->the_post();

            $do_not_duplicate[] = get_the_ID();

            $count++;

            $title = get_the_title();

            $related .= '<div class="related-post">';

            $related .= '<a href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . genesis_get_image(array( 'size' => 'related', 'attr' => array( 'class' => 'related-post-image' ) )) . '</a>';

            $related .= '<div class="related-post-info"><a class="related-post-title" href="' . get_permalink() . '" rel="bookmark" title="Permanent Link to ' . $title . '">' . $title . '</a>';

            $related .= '<div class="related-post-date">' . do_shortcode( '[post_date]' ) . '</div>';

            $related .= '<div class="related-post-tags">' . do_shortcode( '[post_tags before="Tags: "]' ) . '</div>';

            $related .= '<div class="related-post-categories">' . do_shortcode( '[post_categories before="Categories: "]' ) . '</div></div>';

            $related .= '</div>';
        }
    }

    wp_reset_postdata();

    $output = array(
        'related' => $related,
        'count'   => $count,
    );

    return $output;
}

Tạo lại hình thu nhỏ.