Ở bài viết trước mình đã hướng dẫn các bạn thu gọn nội dung mô tả trong bài viết sản phẩm và mô tả danh mục sản phẩm trong woocommerce sử dụng flatsome. Tuy nhiên, nếu muôn rút gọn mô tả trong danh mục bài viết thì phải làm sao? Rất đơn giản, hãy thực hiện theo cách dưới đây.

Xem thêm: Hướng dẫn rút gọn mô tả sản phẩm trong woocommerce.

huong dan thu gon mo ta danh muc bai viet trong flatsome 1

Thật ra để thu gọn mô tả danh mục bài viết trong flatsome rất đơn giản, bạn chỉ cần chỉnh lại class trong code hướng dẫn ở bài trước. Tuy nhiên nhiều bạn không rành code sẽ không biết cách làm. Vì vậy mình sẽ share lại code đã tinh chỉnh, bạn chỉ cần copy và dán vào file function.php là được. Cách làm như sau:

Bước 1: Mở trình quản lý file trong hosting => tìm đến thư mục theme => chọn theme flatsome child (nên sử dụng bản child thay cho bản gốc để tránh làm lỗi code) => mở file function.php lên và dán đoạn code dưới đây vào.

Lưu ý: Nếu bạn không rành chỉnh sửa trong quản lý tập tin thì có thể nhờ kỹ thuật viên quản lý hosting hỗ trợ thêm vào.

Bước 2: Copy đoạn code sau và dán vào function.php

/*
 * Thêm nút Xem thêm vào phần mô tả của danh mục bài viết trong flatsome
 * Author: levantoan
*/
add_action('wp_footer','devvn_readmore_taxonomy_flatsome');
function devvn_readmore_taxonomy_flatsome(){
    if(is_category()):
        ?>
        <style>
            .category .blog-archive .taxonomy-description {
                overflow: hidden;
                position: relative;
                margin-bottom: 20px;
                padding-bottom: 25px;
            }
            .devvn_readmore_taxonomy_flatsome {
                text-align: center;
                cursor: pointer;
                position: absolute;
                z-index: 10;
                bottom: 0;
                width: 100%;
                background: #fff;
            }
            .devvn_readmore_taxonomy_flatsome:before {
                height: 55px;
                margin-top: -45px;
                content: "";
                background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
                background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
                background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
                display: block;
            }
            .devvn_readmore_taxonomy_flatsome a {
                color: #318A00;
                display: block;
            }
            .devvn_readmore_taxonomy_flatsome a:after {
                content: '';
                width: 0;
                right: 0;
                border-top: 6px solid #318A00;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                display: inline-block;
                vertical-align: middle;
                margin: -2px 0 0 5px;
            }
            .devvn_readmore_taxonomy_flatsome_less:before {
                display: none;
            }
            .devvn_readmore_taxonomy_flatsome_less a:after {
                border-top: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid #318A00;
            }
        </style>
        <script>
            (function($){
                $(document).ready(function(){
                    $(window).on('load', function(){
                        if($('.category .blog-archive .taxonomy-description').length > 0){
                            var wrap = $('.category .blog-archive .taxonomy-description');
                            var current_height = wrap.height();
                            var your_height = 200;
                            if(current_height > your_height){
                                wrap.css('height', your_height+'px');
                                wrap.append(function(){
                                    return '<div class="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';
                                });
                                wrap.append(function(){
                                    return '<div class="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';
                                });
                                $('body').on('click','.devvn_readmore_taxonomy_flatsome_show', function(){
                                    wrap.removeAttr('style');
                                    $('body .devvn_readmore_taxonomy_flatsome_show').hide();
                                    $('body .devvn_readmore_taxonomy_flatsome_less').show();
                                });
                                $('body').on('click','.devvn_readmore_taxonomy_flatsome_less', function(){
                                    wrap.css('height', your_height+'px');
                                    $('body .devvn_readmore_taxonomy_flatsome_show').show();
                                    $('body .devvn_readmore_taxonomy_flatsome_less').hide();
                                });
                            }
                        }
                   });
                })
            })(jQuery)
        </script>
    <?php
    endif;
}

* Thêm nút Xem thêm vào phần mô tả của danh mục bài viết trong flatsome

* Author: levantoan

add_action('wp_footer','devvn_readmore_taxonomy_flatsome');

function devvn_readmore_taxonomy_flatsome(){

if(is_category()):

<style>

.category .blog-archive .taxonomy-description {

overflow: hidden;

position: relative;

margin-bottom: 20px;

padding-bottom: 25px;

}

.devvn_readmore_taxonomy_flatsome {

text-align: center;

cursor: pointer;

position: absolute;

z-index: 10;

bottom: 0;

width: 100%;

background: #fff;

}

.devvn_readmore_taxonomy_flatsome:before {

height: 55px;

margin-top: -45px;

content: "";

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );

display: block;

}

.devvn_readmore_taxonomy_flatsome a {

color: #318A00;

display: block;

}

.devvn_readmore_taxonomy_flatsome a:after {

content: '';

width: 0;

right: 0;

border-top: 6px solid #318A00;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

display: inline-block;

vertical-align: middle;

margin: -2px 0 0 5px;

}

.devvn_readmore_taxonomy_flatsome_less:before {

display: none;

}

.devvn_readmore_taxonomy_flatsome_less a:after {

border-top: 0;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #318A00;

}

</style>

(function($){

$(document).ready(function(){

$(window).on('load', function(){

if($('.category .blog-archive .taxonomy-description').length > 0){

var wrap = $('.category .blog-archive .taxonomy-description');

var current_height = wrap.height();

var your_height = 200;

if(current_height > your_height){

wrap.css('height', your_height+'px');

wrap.append(function(){

return '<div class="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_show"><a title="Xem thêm" href="javascript:void(0);">Xem thêm</a></div>';

});

wrap.append(function(){

return '<div class="devvn_readmore_taxonomy_flatsome devvn_readmore_taxonomy_flatsome_less" style="display: none"><a title="Thu gọn" href="javascript:void(0);">Thu gọn</a></div>';

});

$('body').on('click','.devvn_readmore_taxonomy_flatsome_show', function(){

wrap.removeAttr('style');

$('body .devvn_readmore_taxonomy_flatsome_show').hide();

$('body .devvn_readmore_taxonomy_flatsome_less').show();

});

$('body').on('click','.devvn_readmore_taxonomy_flatsome_less', function(){

wrap.css('height', your_height+'px');

$('body .devvn_readmore_taxonomy_flatsome_show').show();

$('body .devvn_readmore_taxonomy_flatsome_less').hide();

});

}

});

})

})(jQuery)

</script>

<?php

endif;

}

Một số lưu ý:

Bạn có thể chỉnh chiều cao chữ được hiện ra bằng cách sửa đoạn: var your_height = 200 => thay số 200 bằng con số bạn cần.
Phần <style>css</style> bạn có thể tách riêng và dán vào file style.css cho gọn cũng được. (nếu không biết tách thì giữ nguyên).

Như vậy là đã xong. Bạn có thể F5 lại để xem thành quả (nhớ xóa cache nếu có dùng các plugin lưu cache). Chúc các bạn thành công!