Theo dõi Yestech trên goole news

Hướng dẫn phân trang cho portfolio flatsome theme

huong dan phan trang cho portfolio flatsome theme

Sau đây là cách phân trang cho portfolio flatsome theme. Trước tiên bạn cần biết phân trang là gì?

Tầm quan trọng của phân trang trong website như thế nào?

Phân trang trong website wordpress đóng vai trò quan trọng trong việc hiển thị và quản lý nội dung, đồng thời cải thiện trải nghiệm người dùng. Dưới đây là một số tầm quan trọng của phân trang trong website:

  1. Cải thiện tốc độ tải trang: Khi một trang web chứa nhiều nội dung, phân trang cho phép phân chia nội dung thành các trang con nhỏ hơn. Điều này giúp giảm thiểu tải trọng dữ liệu cần tải khi mở trang, giúp trang web tải nhanh hơn và giảm thời gian chờ đợi của người dùng.
  2. Tăng khả năng tìm kiếm: Phân trang giúp sắp xếp nội dung thành các trang riêng biệt và đánh số, giúp người dùng dễ dàng tìm kiếm và truy cập đến trang cụ thể. Điều này cung cấp khả năng tìm kiếm tốt hơn trong trang web và cải thiện trải nghiệm người dùng.
  3. Dễ dàng duyệt và xem nội dung: Phân trang giúp người dùng dễ dàng duyệt qua nội dung trong trang web. Họ có thể chuyển đến trang tiếp theo hoặc trang trước, hoặc chọn trực tiếp một trang cụ thể. Điều này giúp người dùng có khả năng kiểm soát và tiếp cận nội dung một cách linh hoạt hơn.
  4. Quản lý nội dung: Phân trang là một cách hiệu quả để quản lý nội dung trong trang web, đặc biệt là khi có một lượng lớn dữ liệu. Bằng cách chia nội dung thành các trang con, việc quản lý, sắp xếp và cập nhật trang web trở nên thuận tiện hơn.
  5. Tối ưu hóa SEO: Sử dụng phân trang cung cấp cho các công cụ tìm kiếm thông tin về cấu trúc và sắp xếp nội dung trong trang web. Điều này có thể cải thiện khả năng tìm thấy và xếp hạng trang web trong kết quả tìm kiếm, giúp tăng lượng truy cập và tương tác từ người dùng.
Tìm hiểu thêm  Hướng dẫn thêm sản phẩm đã xem vào trang chi tiết sản phẩm

Xem thêm định nghĩa phân trang trên wiki

Cách phân trang cho portfolio flatsome theme

 

flatsome/inc/post-types/post-type-ux-portfolio.php

Và thêm bên dưới 2 dòng code

add_permastruct( 'featured_item_category', $items_link . '/%featured_item_category%' , false);
// Thêm vào 2 dòng code sau
$query = 'index.php?featured_item_category=$matches[1]&paged=$matches[2]';
add_rewrite_rule('^'.$items_link.'/([^/]+)/page/?([0-9]{1,})/?$', $query, 'top');

add_permastruct( 'featured_item', $items_link . '/%featured_item_category%/%featured_item%', false);

Chỉnh sửa template Archive portfolio flatsome để có phân trang 

Tại thư mục theme tạo file có tên: taxonomy-featured_item_category.php
Với code như sau:
<?php
/**
 * Featured Item category template.
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */

get_header(); 
$queried_object = get_queried_object();

$sub_terms = null;
if( $queried_object->parent == 0 ){
    $sub_terms = get_terms( array(
        'taxonomy'   => 'featured_item_category',
        'hide_empty' => false,
        'parent' => $queried_object->term_id
    ));
}else{
    $sub_terms = get_terms( array(
        'taxonomy'   => 'featured_item_category',
        'hide_empty' => false,
        'parent' => $queried_object->parent
    ));
}

?>
<?php
    do_action('page_breadcrumbs_balico');
?>

<div class="portfolio-page-wrapper portfolio-archive page-featured-item">
    <?php if ( is_active_sidebar( 'sidebar-before-portfolio' ) ) { ?>
            <?php dynamic_sidebar('sidebar-before-portfolio'); ?>
    <?php } ?>

    <?php
    get_template_part( 'template-parts/portfolio/archive-portfolio-title', get_theme_mod( 'portfolio_archive_title', '' ) );
    ?>
    <div id="content" role="main" class="page-wrapper">

    <?php if($sub_terms) : ?>
        <div class="container">
            <div class="tabbed-content">
                <ul class="nav-du-an" >
                    <?php foreach($sub_terms as $sub): 
                    
                        $active = $sub->term_id == $queried_object->term_id ? 'active' : '';
                        ?>
                    <li class="<?php echo $active ?> has-icon">
                        <a title="<?php echo $sub->name ?>" href="<?php echo get_term_link($sub)?>"><?php echo $sub->name ?></a>
                    </li>
                    <?php endforeach ?>
                </ul>
            </div>
        </div>
    <?php endif ?>

    <?php  if ( have_posts() ) : ?>

        <?php
            // Create IDS
            $ids = array();
            while ( have_posts() ) : the_post();
                array_push($ids, get_the_ID());
            endwhile; // end of the loop.
            $ids = implode(',', $ids);
        ?>
        <?php
        $cat        = false;
        $filter     = get_theme_mod( 'portfolio_archive_filter', 'left' );
        $filter_nav = get_theme_mod( 'portfolio_archive_filter_style', 'line-grow' );

        if ( $filter == 'disabled' || is_tax() ) $filter = 'disabled';

        // Check if category.
        if ( is_tax() ) $cat = get_queried_object()->term_id;

        // Height.
        $height = get_theme_mod( 'portfolio_height', 0 ) ? get_theme_mod( 'portfolio_height', 0 ) : '';

        echo flatsome_apply_shortcode( 'ux_portfolio', array(
            'image_height' => $height,
            'filter'       => $filter,
            'filter_nav'   => $filter_nav,
            'type'         => 'row',
            'ids' => $ids,
            'cat'          => $cat,
            'orderby'      => get_theme_mod( 'portfolio_archive_orderby', 'menu_order' ),
            'order'        => get_theme_mod( 'portfolio_archive_order', 'desc' ),
            'col_spacing'  => get_theme_mod( 'portfolio_archive_spacing', 'small' ),
            'columns'      => get_theme_mod( 'portfolio_archive_columns', 4 ),
            'columns__md'  => get_theme_mod( 'portfolio_archive_columns_tablet', 3 ),
            'columns__sm'  => get_theme_mod( 'portfolio_archive_columns_mobile', 2 ),
            'depth'        => get_theme_mod( 'portfolio_archive_depth', 0 ),
            'depth_hover'  => get_theme_mod( 'portfolio_archive_depth_hover', 0 ),
            'image_radius' => get_theme_mod( 'portfolio_archive_image_radius', 0 ),
            'image_size'   => get_theme_mod( 'portfolio_archive_image_size', 'medium' ),
        ) );
        ?>
            
        <?php flatsome_posts_pagination(); ?>
        
    <?php else : ?>
        
            <?php get_template_part( 'template-parts/posts/content','none'); ?>
        
    <?php endif; ?>
    </div>
    <?php if ( is_active_sidebar( 'sidebar-after-portfolio' ) ) { ?>
            <?php dynamic_sidebar('sidebar-after-portfolio'); ?>
    <?php } ?>
</div>

<?php get_footer(); ?>

 

Tìm hiểu thêm  Code tạo trang custom login Wordpress