Tips and TricksTutorial

Hướng dẫn rút gọn tiêu đề wordpress 2021

Thấy trong group nhiều bạn hỏi về việc rút gọn tiêu đề wordpress ở cả bài viết hoặc rút gọn tiêu đề sản phẩm hiển thị trong woocommerce.

Thì hôm nay mình sẽ share cho các bạn một đoạn function để có thể giải quyết được vấn đề này nhé.

Function rút gọn tiêu đề wordpress

Bạn chỉ cần copy đoạn function này vào trong file function.php của mình là được rồi nhé.

add_filter( 'the_title', 'short_title_product', 10, 2 );
function short_title_product( $title, $id ) {
    if (get_post_type( $id ) === 'product' & !is_single() ) {
        return wp_trim_words( $title, 7 ); // thay đổi số từ bạn muốn thêm
    } else {
        return $title;
    }
}

rut gon tieu de trong worpdress

Tương tự như vậy bạn hoàn toàn có thể áp dụng cho title của bài post.

Copy function sau:

add_filter( 'the_title', 'shorten_post_title', 10, 2 );
function shorten_post_title( $title, $id ) {
    if (get_post_type( $id ) === 'post' & !is_single() ) {
        return wp_trim_words( $title, 14 ); // thay đổi số từ bạn muốn hiển thị
    } else {
        return $title;
    }
}

Hoặc các bạn có thể sử dụng CSS sau để website có thể load nhẹ hơn nhé.

.title{
     overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

*Lưu ý: .title có thể 1 số theme class này không giống nên các bạn xem class tiêu đề là gì thì thay bằng class của mình nhé

Hiện tại theme flatsome cũng có hỗ trợ làm chiều cao hiển thị của các sản phẩm bên ngoài trang chủ và shop page bằng nhau, bạn có thể tích vào ô Equalize Items trong tùy biến danh mục sản phẩm của Flatsome nhé.

Các bạn vào Tùy biến ~> WooCommerce ~> Danh mục sản phẩm ~> kéo xuống dưới 1 đoạn rồi tick vào ô mình khoanh đỏ nhé.

rút gọn tiêu đề wordpress

Ở trên là các cách rút gọn tiêu đề wordpress ở cả tiêu đề bài viết cũng như tiêu đề sản phẩm trong wordpress. Nếu có thắc mắc hoặc code không chạy thì các bạn hãy comment phía dưới mình sẽ hỗ trợ miễn phí nhé.

Xem thêm: Mã giảm giá Hawk Host 50% trọn đời

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Back to top button