Thu Gọn Tiêu Đề Bài Viết WordPress: CSS, PHP và Plugin Cho Giao Diện Chuẩn Digital Marketing

Thu gọn tiêu đề bài viết WordPress có 3 phương pháp: dùng CSS (text-overflow: ellipsis hoặc line-clamp), giới hạn số từ qua functions.php, hoặc dùng plugin chuyên dụng như WP Trim Titles. Mỗi cách tác động lên lớp hiển thị khác nhau và không ảnh hưởng đến thẻ title gốc của SEO trong digital marketing.

Tại sao cần thu gọn tiêu đề bài viết WordPress trong digital marketing?

Tiêu đề quá dài làm vỡ bố cục Grid/List trên trang danh mục, đặc biệt trên thiết bị di động — nơi chiếm hơn 70% lượng truy cập. Khi các khối bài viết không đồng đều chiều cao, giao diện mất cân đối, ảnh hưởng trực tiếp đến tỷ lệ thoát trang và CTR trong chiến dịch digital marketing.

>>>> PhucT Digital nhận làm website với cam kết rõ ràng ngay từ đầu: đúng thiết kế, đúng tính năng, đúng thời hạn — không có lý do nào để trì hoãn hay phát sinh thêm chi phí.

Ba lý do cụ thể cần xử lý:

• Responsive trên di động: Tiêu đề dài chiếm diện tích màn hình nhỏ, đẩy nội dung và CTA xuống dưới vùng hiển thị, làm giảm tương tác.
• Cân đối layout: Các dòng tiêu đề đồng đều giúp Grid/List trông chỉn chu. Đặc biệt cần thiết cho giao diện dùng Flatsome theme hoặc các theme tùy biến cao.
• Bảo toàn SEO: Kỹ thuật CSS và PHP chỉ tác động lên lớp hiển thị, không thay đổi thẻ title gốc — Google vẫn đọc đầy đủ tiêu đề trong mã nguồn.

Xem thêm: Cách Tạo Biểu Mẫu Tải File Lên Trong WordPress An Toàn, Hiệu Quả

Cách thu gọn tiêu đề WordPress bằng CSS không ảnh hưởng SEO là gì?

CSS là phương pháp an toàn nhất vì chỉ tác động lên lớp hiển thị. Thẻ <title>, thẻ <h1> trong bài viết và dữ liệu mà Yoast SEO hoặc Rank Math đọc đều giữ nguyên tiêu đề đầy đủ.

Rút gọn tiêu đề trên một dòng với dấu ba chấm (ellipsis)

Đoạn mã dưới đây đảm bảo tiêu đề chỉ hiển thị một dòng, phần thừa ẩn đi và thay bằng dấu “…”:

.post-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

Xem thêm: Tạo Redirect 301 WordPress: 5 Cách Chuyển Hướng URL Hiệu Quả

Rút gọn tiêu đề trên nhiều dòng bằng kỹ thuật Line Clamp

Kỹ thuật này giữ lại 2–3 dòng tiêu đề, truyền đủ thông tin trong khi vẫn đồng đều bố cục. Thay .entry-title bằng class CSS đúng của giao diện đang dùng (kiểm tra bằng công cụ Inspect của trình duyệt):

.entry-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Số dòng muốn hiển thị */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

Cách giới hạn số từ tiêu đề WordPress qua functions.php là gì?

Phương pháp này can thiệp trực tiếp vào cách WordPress truy xuất dữ liệu từ cơ sở dữ liệu qua filter the_title. Phù hợp cho website có hàng nghìn bài viết vì giảm tải hiển thị ở mức PHP thay vì CSS.

Giới hạn tiêu đề bài viết theo số từ

Thêm đoạn mã sau vào file functions.php trong thư mục theme để giới hạn tiêu đề ở mức 10 từ. Điều kiện is_admin() và in_the_loop() đảm bảo chỉ rút gọn ngoài frontend, không ảnh hưởng trang quản trị:

function phuct_shorten_title( $title, $id = null ) {
  if ( is_admin() || !in_the_loop() ) return $title;
  if ( get_post_type( $id ) === 'post' ) {
    return wp_trim_words( $title, 10, '...' );
  }
  return $title;
}
add_filter( 'the_title', 'phuct_shorten_title', 10, 2 );

Giới hạn tiêu đề sản phẩm WooCommerce theo số từ

Đoạn mã dưới đây áp dụng riêng cho post type product, không ảnh hưởng trang chi tiết sản phẩm (!is_single()), giữ nguyên tiêu đề đầy đủ ở trang đơn để tối ưu SEO:

add_filter( 'the_title', 'shorten_woo_product_title', 10, 2 );
function shorten_woo_product_title( $title, $id ) {
  if ( get_post_type( $id ) === 'product' && !is_single() ) {
    return wp_trim_words( $title, 7, '...' );
  }
  return $title;
}

Plugin nào hỗ trợ thu gọn tiêu đề WordPress không cần lập trình?

Năm plugin chuyên dụng cho người không am hiểu lập trình:

1. WP Trim Titles: Thiết lập giới hạn ký tự hoặc số từ cho tiêu đề tại bất kỳ vị trí nào trên giao diện.
2. Advanced Post Titles: Hỗ trợ thêm tiền tố, hậu tố và cắt tỉa tiêu đề theo điều kiện từng chuyên mục.
3. Advanced Excerpt: Kiểm soát độ dài đoạn trích bài viết và tự động thêm ký hiệu thay thế cho phần bị ẩn.
4. Easy Custom Auto Excerpt: Hơn 40 kiểu nút “Xem thêm”, hỗ trợ trang chủ và trang danh mục.
5. Read More Without Refresh: Tải nội dung bổ sung mà không reload trang, cải thiện trải nghiệm người dùng trên di động.

Xem thêm: WP Rocket là gì? Plugin Caching cần thiết cho Digital Marketing

Cách rút gọn nội dung bài viết trong trình soạn thảo WordPress thủ công

Chèn block More trong Gutenberg

Chèn block More (Đọc thêm) vào vị trí muốn ngắt nội dung khi bài viết đang ở trang lưu trữ. WordPress tự động hiển thị chỉ phần trước block More, người dùng phải nhấp vào bài viết để đọc đầy đủ — tăng pageviews mà không cần plugin.

Thiết lập hiển thị Excerpt trong Reading Settings

Vào Settings > Reading. Tại mục “For each post in a feed, include”, chọn Excerpt thay vì Full text. Cách này áp dụng toàn website, giảm tải trang lưu trữ và tránh trùng lặp nội dung.

Những lưu ý kỹ thuật nào cần tránh khi thu gọn tiêu đề để không hại SEO?

• • Giữ nguyên thẻ title và H1: Mọi kỹ thuật CSS hay functions.php chỉ áp dụng cho thẻ hiển thị trong danh mục (thường là H2, H3 trong Grid). Thẻ <title> và <h1> trong trang bài viết phải giữ nguyên đầy đủ từ khóa.
  • Luôn dùng dấu ba chấm (…): Thông báo rõ cho người dùng rằng tiêu đề bị rút ngắn, tránh nhầm lẫn về nội dung bài viết.
  • Áp dụng nhất quán toàn website: Dùng cùng một quy tắc (số dòng hoặc số từ) cho tất cả chuyên mục để giao diện đồng đều trong digital marketing tổng thể.