Tạo các ô bài viết liên quan đến WordPress

Tìm hiểu cách tự động thêm các bài đăng có liên quan vào cuối nội dung WordPress của bạn. Chúng tôi cũng sẽ tạo một mã ngắn đơn giản, vì vậy bạn có thể chèn các lưới bài đăng nhỏ có liên quan trực tiếp vào nội dung của mình, bất cứ nơi nào bạn muốn. Nó sẽ phản hồi và cũng sẽ hoạt động với mọi loại bài đăng và phân loại.

Chúng tôi sẽ làm điều này

Chúng tôi sẽ không đề cập đến các hình ảnh động ở đây. Nhưng bạn có thể tìm hiểu cách thêm hoạt ảnh vào lưới Bài đăng liên quan của mình trong hướng dẫn hoạt ảnh WordPress của chúng tôi.

Nó sẽ hoạt động như thế nào

Hướng dẫn này chủ yếu sử dụng PHP và CSS. Chúng ta sẽ tạo một hàm cốt lõi có nhiều tham số, chẳng hạn như “phân loại” và “number_of_posts”. Chức năng cốt lõi này sẽ tạo một đối tượng WP_Query và sử dụng một vòng lặp WordPress tiêu chuẩn để chạy các bài đăng kết quả thông qua tệp mẫu PHP / HTML dễ chỉnh sửa. Chúng tôi sẽ thiết lập một trình xử lý hành động để chúng tôi có thể tự động thêm các bài đăng có liên quan vào cuối tất cả các bài đăng.

Chúng tôi sẽ giữ phần lớn mã của chúng tôi tách biệt với tệp functions.php của chủ đề con, vì vậy sẽ dễ dàng sử dụng lại mã trong các dự án WordPress khác.

Bắt đầu

quan trọng Đảm bảo rằng bạn đang sử dụng một chủ đề con tùy chỉnh, vì bạn sẽ cần chỉnh sửa tệp functions.php của chủ đề con của mình .

Trước hết, chúng tôi sẽ tạo một số tệp giữ chỗ / giàn giáo và kết nối chúng với chủ đề con. Trong thư mục của chủ đề con tùy chỉnh của bạn, hãy tạo một thư mục con mới có tên là bài đăng liên quan đến wpt . Trong thư mục con mới này, hãy tạo hai tệp văn bản mới / trống có tên là liên quan-posts-frontend.cssliên quan-post-template.php . Quay lại thư mục chủ đề con của bạn, tạo một tệp văn bản có tên wpt-Related-posts.php và dán đoạn mã sau vào đó.

/**
 * WP Tutorials Related Posts (WPTRP)
 *
 * https://wp-tutorials.tech/add-functionality/create-wordpress-related-posts-tiles/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
/**
 * Enqueue the CSS for related posts.
 */
function wptrp_enqueue_assets() {
   global $wptrp_have_assets_been_enqueued;
   if (is_null($wptrp_have_assets_been_enqueued)) {
      $base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
      $version = wp_get_theme()->get('Version');
      wp_enqueue_style('wptrp-frontend', $base_url . 'related-posts-frontend.css', null, $version);
      // If you want to enqueue more CSS/JavaScript, do it in here...
      // ...
      $wptrp_have_assets_been_enqueued = true;
   }
}
/**
 * Core logic to generate Related Posts HTML.
 */
function wptrp_get_related_posts(int $post_id = 0, string $taxonomy = 'category', int $number_of_posts = 3, bool $is_title_required = true) {
   // Code will go in here...
   // ...
   // ...
   return '

Hello World

'; } /** * Automatically add related posts to the end of single post content. */ function wptrp_add_related_posts($content) { if (!empty($post_id = get_the_ID())) { // Add the related-posts HTML to the end of whatever's already // in $content. $content .= wptrp_get_related_posts($post_id); } return $content; } add_filter('the_content', 'wptrp_add_related_posts'); /** * Register a shortcode called wpt_related_posts so we can inject related posts * wherever we want to. */ function wpt_do_shortcode_related_posts($atts) { $html = ''; if (is_admin()) { // Don't do anything. } elseif (wp_doing_ajax()) { // Don't do anything. } else { // Process the parameters passed to our shortcode. $args = shortcode_atts( array( 'class' => '', 'post_id' => get_the_ID(), 'taxonomy' => 'category', 'count' => 3, 'show_title' => true, ), $atts ); // Make sure that $post_id is a positive integer. if (($post_id = intval($args['post_id'])) <= 0) { $html .= sprintf( '

ERROR: %s

', esc_html('No post_id set', 'wp-tutorials') ); } else { // Call our main function and return the HTML. $html .= wptrp_get_related_posts( $post_id, sanitize_title($args['taxonomy']), intval($args['count']), filter_var($args['show_title'], FILTER_VALIDATE_BOOLEAN) ); } } return $html; } add_shortcode('wpt_related_posts', 'wpt_do_shortcode_related_posts');

Đó là giàn giáo đủ để thiết lập mọi thứ. Bây giờ chúng ta cần liên kết đến tệp này từ functions.php. Mở tệp functions.php của chủ đề con của bạn và thêm phần sau vào đó:

/**
 * WP Tutorials Related Posts
 */
require_once 'wpt-related-posts.php';

Lưu mọi thứ, chỉnh sửa một số nội dung trên trang web của bạn và thêm mã ngắn wpt_osystem_posts . Lưu nội dung của bạn và xem trước - bạn sẽ thấy Hello World nơi bạn đặt shortcode của mình.

Được rồi - chúng tôi đang tiến bộ.

Tệp hỗ trợ

Tệp mẫu (liên quan-post-template.php) là chìa khóa ở đây, bởi vì chúng tôi sẽ “bao gồm” nó nhiều lần khi chúng tôi lặp lại các bài đăng liên quan. Vì vậy, sẽ hữu ích khi tạo một mẫu hoạt động ngay bây giờ, thay vì sau này. Mở liên quan-post-template.php trong thư mục con wpt-liên quan đến các bài viết và dán nội dung sau vào đó.
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
$permalink = get_the_permalink();
$post_title = get_the_title();
?>

<?php echo $post_title; ?>

Đây là một tệp đơn giản và bạn có thể làm những gì bạn muốn tại đây. Lưu ý rằng bạn có thể sử dụng các hàm vòng lặp WordPress tiêu chuẩn như the_title (), get_the_permalink (), v.v.

Trong khi chúng ta đang ở đó, hãy mở liên quan-posts-frontend.css trong cùng một thư mục con và dán nội dung sau vào đó. Một lần nữa, bạn có thể đặt những gì bạn muốn vào đây - đây chỉ là để giúp bạn bắt đầu với một số bố cục đáp ứng cơ bản.

/*
 * WPT Related Posts
 * https://wp-tutorials.tech/add-functionality/create-wordpress-related-posts-tiles/
 */
.related-posts {
    padding:  2rem;
}
.related-posts article .inner {
    width:  100%;
    position:  relative;
}
.related-posts article h3 {
    position:  absolute;
    left:  0;
    bottom:  0;
    margin-bottom:  0;
    line-height: 1.5em;
    width:  100%;
    background-color:  #ffffffa0;
}
.related-posts article a,
.related-posts article img {
    display:  block;
}
.related-posts article h3 a {
    padding:  1rem;
}
.related-posts article .featured-image a img {
    width:  100%;
    height:  15em;
    object-fit:  cover;
}
@media(max-width: 919px) {
    .related-posts article:not( :last-child ) {
        padding-bottom:  2rem;
    }
}
@media(min-width: 920px) {
    .related-posts .posts-container {
        display: flex;
        justify-content: space-between;
        gap:  2rem;
    }
    .related-posts article {
        flex-grow: 1;
        flex-basis: 0;
        padding:  0;
    }
}

Chức năng cốt lõi

Logic của hàm cốt lõi sẽ như thế này
  • Kiểm tra / khử trùng các thông số đầu vào
  • Tạo một chuỗi HTML để giữ tiêu đề, dựa trên các thuật ngữ phân loại được liên kết với bài đăng chính
  • Tạo một $query_argsmảng sẽ đưa vào WP_Query
  • Nếu truy vấn có bất kỳ bài đăng nào…
    • Đối với mỗi bài đăng trong truy vấn…
      • Gọi $query->the_post()
      • Mở một <article>phần tử
      • Bao gồm tệp mẫu
      • Thêm vào </article>
    • Gọi wp_reset_postdata()
  • Trở lại $html
Đây là đoạn mã lớn… Mở wpt-Related-posts.php và thay thế toàn bộ nội dung bằng cái này:
/**
 * WP Tutorials Related Posts (WPTRP)
 *
 * https://wp-tutorials.tech/add-functionality/create-wordpress-related-posts-tiles/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
/**
 * Enqueue the CSS for related posts.
 */
function wptrp_enqueue_assets() {
   global $wptrp_have_assets_been_enqueued;
   if (is_null($wptrp_have_assets_been_enqueued)) {
      $base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
      $version = wp_get_theme()->get('Version');
      wp_enqueue_style('wptrp-frontend', $base_url . 'related-posts-frontend.css', null, $version);
      // If you want to enqueue more CSS/JavaScript, do it in here...
      // ...
      $wptrp_have_assets_been_enqueued = true;
   }
}
/**
 * Core logic to generate Related Posts HTML.
 */
function wptrp_get_related_posts(int $post_id = 0, string $taxonomy = 'category', int $number_of_posts = 3, bool $is_title_required = true) {
   $html = '';
   $post_type = get_post_type($post_id);
   $file_name = 'wpt-related-posts/related-post-template.php';
   // Make sure our assets (CSS) are enqueued.
   wptrp_enqueue_assets();
   // Make a list of term ids and also a term string for our title.
   // You can use get_the_term_list() to make the title, but we're doing it
   // manually here so you can see how you can add extra/custom SEO to your
   // term links, if you want.
   $term_names = '';
   $term_ids = array();
   $terms = get_the_terms($post_id, $taxonomy);
   if (is_array($terms)) {
      foreach ($terms as $term) {
         $term_ids[] = $term->term_id;
         if (!empty($term_names)) {
            $term_names .= ', ';
         }
         $term_names .= sprintf(
            '%s',
            esc_url(get_term_link($term, $taxonomy)),
            esc_html($term->name)
         );
      }
   }
   // The parameters that will drive our main WP_Query and our loop.
   // 'post__not_in' stops us including the main post in the results.
   $query_args = array(
      'post_type' => $post_type,
      'post_status' => 'publish',
      'posts_per_page' => $number_of_posts,
      'orderby' => 'rand',
      'post__not_in' => array($post_id),
      'tax_query' => array(
         array(
            'taxonomy' => 'category',
            'field' => 'term_id',
            'terms' => $term_ids,
         ),
      ),
   );
   // DIAGNOSTICS. Uncomment this to print some useful stuff in the HTML.
   // $html .= '
';
   // $html .= print_r($term_ids, true);
   // $html .= print_r($query_args, true);
   // $html .= '
'; $query = new WP_Query($query_args); if ($query->have_posts()) { // If you wantto, you can add extra props here... // e.g. $props=' data-aos="slide-up"' $props = ''; $html .= sprintf('
', $props); if ($is_title_required) { $html .= sprintf( '

%s: %s

', esc_html__('Related Posts', 'wp-tutorials'), $term_names ); } // Start processing the posts that come back from our WP_Query. $html .= '
'; while ($query->have_posts()) { $query->the_post(); $html .= sprintf('', get_the_id()); // Include the template file. ob_start(); include $file_name; $html .= ob_get_clean(); $html .= ''; // #post-999 } $html .= '
'; // .posts-container $html .= '
'; // .related-posts wp_reset_postdata(); } return $html; } /** * Automatically add related posts to the end of single post content. */ function wptrp_add_related_posts($content) { if (!empty($post_id = get_the_ID())) { // Add the related-posts HTML to the end of whatever's already // in $content. $content .= wptrp_get_related_posts($post_id); } return $content; } add_filter('the_content', 'wptrp_add_related_posts'); /** * Register a shortcode called wpt_related_posts so we can inject related posts * wherever we want to. */ function wpt_do_shortcode_related_posts($atts) { $html = ''; if (is_admin()) { // Don't do anything. } elseif (wp_doing_ajax()) { // Don't do anything. } else { // Process the parameters passed to our shortcode. $args = shortcode_atts( array( 'class' => '', 'post_id' => get_the_ID(), 'taxonomy' => 'category', 'count' => 3, 'show_title' => true, ), $atts ); // Make sure that $post_id is a positive integer. if (($post_id = intval($args['post_id'])) <= 0) { $html .= sprintf( '

ERROR: %s

', esc_html('No post_id set', 'wp-tutorials') ); } else { // Call our main function and return the HTML. $html .= wptrp_get_related_posts( $post_id, sanitize_title($args['taxonomy']), intval($args['count']), filter_var($args['show_title'], FILTER_VALIDATE_BOOLEAN) ); } } return $html; } add_shortcode('wpt_related_posts', 'wpt_do_shortcode_related_posts');
Lưu tệp và kiểm tra nó - bây giờ bạn sẽ thấy các bài đăng liên quan ở cuối các bài đăng đơn lẻ của mình và mã ngắn cũng sẽ hoạt động.

Thắng lợi!

Chơi với các tùy chọn mã ngắn - bạn có thể thấy chúng trong lệnh gọi tới shortcode_atts ().

Đọc qua wptrp_get_related_posts()và xác định vị trí các phần tử logic chính. Có thể tạo $query_argsvà chuyển nó vào WP_Query cho phép bạn thực hiện vô số nội dung tùy chỉnh trong WordPress.

Bỏ ghi chú phần chẩn đoán và tải lại nội dung trong giao diện người dùng - kiểm tra kho thông tin hữu ích.

Mở rộng đánh dấu trong tệp mẫu để bao gồm nhiều tiện ích SEO hơn, chẳng hạn như đánh dấu lược đồ.

Đó là nó! Hãy vui vẻ với các bài đăng liên quan xung quanh blog / trang web / cửa hàng của bạn.