Hiển thị mô tả ngắn trong WordPress

25 Tháng sáu, 2024

Khi hiển thị bài viết ở trang lưu trữ hay trang chủ, ngoài tiêu đề và ảnh đại diện, thứ mà không thể thiếu chính là mô tả ngắn (excerpt).

Hiển thị mô tả ngắn

Thay vì hiển thị toàn bộ nội dung bài viết, mô tả ngắn giúp trích một đoạn trong nội dung hiển thị để người đọc hiểu qua được nội dung của bài viết một cách đơn giản và ngắn gọn nhất. Bạn có thể hiển thị mô tả ngắn bằng các cách sau đây:

the_excerpt()

Bạn có thể xem để hiểu sâu hơn về the_excerpt():

function the_excerpt() {
 
    /**
     * Filters the displayed post excerpt.
     *
     * @since 0.71
     *
     * @see get_the_excerpt()
     *
     * @param string $post_excerpt The post excerpt.
     */
    echo apply_filters( 'the_excerpt', get_the_excerpt() );
}

Khi bạn dùng the_excerpt() sẽ hiển thị một đoạn mô tả ngắn với các tag, nôm na dễ hiểu nhất như sau. Ta có một đoạn nội dung bài viết hiển thị dưới dạng HTML như sau:

<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend dolor et bibendum malesuada. Mauris molestie semper arcu vitae aliquet. Vivamus imperdiet, sapien et varius bibendum, massa felis ornare nisl, ornare fringilla elit metus a elit. Nullam mattis molestie nunc id porta. Maecenas aliquam tortor nibh, at tincidunt nulla pretium vel. Duis justo ligula, egestas ac metus eget, egestas efficitur libero. Quisque id ligula eu augue tristique scelerisque. Nam tincidunt quam ac pretium pulvinar. Maecenas ac erat nisl. Aliquam accumsan, mauris eu viverra consectetur, sem neque accumsan ex, vitae suscipit lectus justo at ex. Ut ligula sapien, tincidunt nec semper id, imperdiet a tellus. Donec bibendum massa sapien, in pretium diam commodo id.
</p>
<p>
Vivamus imperdiet mi est, et tincidunt turpis luctus sed. In hac habitasse platea dictumst. Quisque et sodales est, at faucibus nunc. Ut ultrices tellus nisl. Integer semper, orci nec aliquet sollicitudin, ante nisl mattis neque, sed imperdiet ligula arcu eu lectus. Proin augue eros, fringilla sed risus at, luctus maximus elit. Vestibulum id sollicitudin eros, sit amet lacinia sapien. Vivamus quis iaculis turpis, at sodales augue. Aenean accumsan magna id justo egestas, nec gravida augue pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc purus nulla, ullamcorper et ante rutrum, volutpat sagittis sem.
</p>

the_excerpt() sẽ trả về hiển thị ở dạng mô tả ngắn như sau:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend dolor et bibendum malesuada. Mauris molestie semper arcu vitae aliquet. Vivamus imperdiet, sapien et varius bibendum, massa felis ornare nisl, ornare fringilla elit metus a elit. Nullam mattis molestie nunc id porta. Maecenas aliquam tortor nibh, at tincidunt nulla pretium vel. Duis justo ligula, egestas […]</p>
Hiển thị mô tả ngắn trong Wordpress

Đúng vậy, nó đã tự sinh ra thẻ <p>, khá là phiền phức với những bạn để mô tả ngắn trong một thẻ khác, vậy chúng ta chuyển phương án sang cách thứ 2.

get_the_excerpt()

Bạn có thể xem để hiểu sâu hơn về get_the_excerpt():

function get_the_excerpt( $post = null ) {
    if ( is_bool( $post ) ) {
        _deprecated_argument( __FUNCTION__, '2.3.0' );
    }
 
    $post = get_post( $post );
    if ( empty( $post ) ) {
        return '';
    }
 
    if ( post_password_required( $post ) ) {
        return __( 'There is no excerpt because this is a protected post.' );
    }
 
    /**
     * Filters the retrieved post excerpt.
     *
     * @since 1.2.0
     * @since 4.5.0 Introduced the `$post` parameter.
     *
     * @param string $post_excerpt The post excerpt.
     * @param WP_Post $post Post object.
     */
    return apply_filters( 'get_the_excerpt', $post->post_excerpt, $post );
}

Copy đoạn sau ở nơi muốn hiển thị mô tả ngắn

<?php echo get_the_excerpt() ?>

get_the_excerpt() sẽ trả về hiển thị ở dạng mô tả ngắn như sau:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend dolor et bibendum malesuada. Mauris molestie semper arcu vitae aliquet. Vivamus imperdiet, sapien et varius bibendum, massa felis ornare nisl, ornare fringilla elit metus a elit. Nullam mattis molestie nunc id porta. Maecenas aliquam tortor nibh, at tincidunt nulla pretium vel. Duis justo ligula, egestas […]										
Hiển thị mô tả ngắn trong Wordpress
Có thể để ý rằng, không còn tag <p>, các chữ sát nhau hơn.

Mình hay dùng cách này nhất vì gọi ra sẽ không sợ ảnh hưởng bất kì HTML như nào, các bạn có thể tham khảo.

excerpt(x)

Mặc định gọi mô tả ngắn của WordPress là 55 từ, mình sẽ hướng dẫn bạn đổi số lượng từ mô tả ngắn ở bên dưới nhưng sẽ là cho toàn trang. Vậy chỗ bạn muốn hiển thị 10 từ, chỗ bạn muốn hiển thị 20 từ thì sao? Đây chính là phương án mình chỉ cho các bạn, tại file function.php, các bạn copy đoạn code sau:

function excerpt($limit) {
  $excerpt = explode(' ', get_the_excerpt(), $limit);
  if (count($excerpt) >= $limit) {
      array_pop($excerpt);
      $excerpt = implode(" ", $excerpt) . '...';
  } else {
      $excerpt = implode(" ", $excerpt);
  }
  $excerpt = preg_replace('`\[[^\]]*\]`', '', $excerpt);
  return $excerpt;
}
function content($limit) {
    $content = explode(' ', get_the_content(), $limit);
    if (count($content) >= $limit) {
        array_pop($content);
        $content = implode(" ", $content) . '...';
    } else {
        $content = implode(" ", $content);
    }
    $content = preg_replace('/\[.+\]/','', $content);
    $content = apply_filters('the_content', $content); 
    $content = str_replace(']]>', ']]>', $content);
    return $content;
}

Copy đoạn sau ở nơi muốn hiển thị mô tả ngắn với x là số lượng từ:

<?php echo excerpt(x) ?>

VD: <?php echo excerpt(20) ?> sẽ cho chúng ta kết quả như sau:

Sẽ hiển thị đúng 20 từ rồi trả về ... ở đuôi
Sẽ hiển thị đúng 20 từ rồi trả về … ở đuôi

Tùy biến mô tả ngắn

Kiểm tra bài viết có mô tả ngắn không?

Tại sao mình lại nói như vậy, khi bạn gọi the_excerpt(), mặc định sẽ lấy mô tả ngắn mà bạn cài trong chỉnh sửa bài viết, nó nằm ở đây, gọi là tóm tắt:

Kiểm tra tóm tắt trong trình duyệt gutenberg
Kiểm tra tóm tắt trong trình duyệt gutenberg

Nhưng không phải lúc nào ai cũng viết vào tóm tắt, chính vì vậy với những trường hợp không có thì sẽ lấy đoạn đầu tiên của nội dung bài viết.

Vậy mình muốn kiểm tra xem bài viết có mô tả ngắn hay không ta làm như sau:

if ( ! has_excerpt() ) { //Nếu không có mô tả ngắn
    //Làm gì đó
 } else { //Nếu không thì - Tức là có mô tả ngắn
     the_excerpt(); //Hiển thị mô tả ngắn
 }

Thay đổi số lượng từ mô tả ngắn

Mặc định Worpdress sẽ hiển thị 55 từ, vậy nếu bạn muốn hiển thị 20 từ cho đẹp thì sao? Copy đoạn sau vào function.php:

function wpdocs_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 );

Thay đổi dấu kết dòng  […]

Cuối mô tả ngắn ví dụ bạn muốn đổi thành … , vẫn là copy vào file function.php:

function wpdocs_excerpt_more( $more ) {
    return '...';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );
guest
0 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Tin tức liên quan
Hướng dẫn xóa san-pham , danh-muc-san-pham trong đường dẫn sản phẩm Woocommerce
Với mặc định của Woocommerce, chi tiết sản phẩm sẽ có dạng domain/san-pham/ten-san-pham và danh mục sản phẩm sẽ ở dạng domain/danh-muc-san-pham/ten-danh-muc. Một phần đường dẫn như vậy sẽ...
Hướng dẫn lấy đường dẫn các page Woocommerce 3.x
Chắc hẳn ai dùng Woocommerce đều sẽ muốn hiển thị đường dẫn của trang tài khoản, cửa hàng, thanh toán, giỏ hàng,.. Có rất nhiều phương án xử lý...
Custom Plus & Minus Quantity trong Woocommerce
Như bạn đã biết thì nút thay đổi số lượng của Woocommerce để default không mấy là đẹp mắt và khiến người dùng khó tương tác trong việc thay...