Hiển thị dạng Slider

<?php $iddanhmuc = ''; $category_link = get_category_link( $iddanhmuc ); $term = get_term_by( 'id', $iddanhmuc, 'product_cat' ); $slug = $term->slug; ?>
<a href="<?php echo esc_url( $category_link ); ?>"><?php echo $term->name; ?></a>
<div class="homeproducts row row-<?php if(!wp_is_mobile()) : ?>small<?php else : ?>xsmall<?php endif; ?> equalize-box align-equal slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav large-columns-5 medium-columns-4 small-columns-2"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
                <?php
                if(!wp_is_mobile()) :
                $args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => $slug, 'orderby' => 'date' );
                else :
                $args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => $slug, 'orderby' => 'date' );	
                endif;
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
                <div class="col">
                    <div class="col-inner proinner box-shadow-1 box-shadow-2-hover">
                        <div class="product-small box <?php echo flatsome_product_box_class(); ?>">
                            <div class="box-image">
                                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                                <div class="image-cover" style="padding-top: 100%">
                                    <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
                                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?>
                                    </a>
                                </div>
                            </div>
                            <div class="box-text box-text-products text-left ">
                                <h3 class="product-title"><a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>"><?php the_title(); ?></a></h3>
                                <span class="price-wrapper"><?php echo $product->get_price_html(); ?></span>    
                                <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
                                <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
                                <div style="clear: both"></div>
                            </div>
                        </div>
                    </div> 
                </div>
                <?php endwhile; ?>
                <?php wp_reset_query(); ?>
            </div>

Hiển thị dạng Grid

<?php $iddanhmuc = ''; $category_link = get_category_link( $iddanhmuc ); $term = get_term_by( 'id', $iddanhmuc, 'product_cat' ); $slug = $term->slug; ?>
<div class="row row-small">
<?php
                if(!wp_is_mobile()) :
                $args = array( 'post_type' => 'product', 'posts_per_page' => 12, 'product_cat' => $slug, 'orderby' => 'date' );
                else :
                $args = array( 'post_type' => 'product', 'posts_per_page' => 6, 'product_cat' => $slug, 'orderby' => 'date' );	
                endif;
                $loop = new WP_Query( $args );
                while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
                <div class="col">
                    <div class="col-inner proinner box-shadow-1 box-shadow-2-hover">
                        <div class="product-small box <?php echo flatsome_product_box_class(); ?>">
                            <div class="box-image">
                                <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                                <div class="image-cover" style="padding-top: 100%">
                                    <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
                                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?>
                                    </a>
                                </div>
                            </div>
                            <div class="box-text box-text-products text-left ">
                                <h3 class="product-title"><a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>"><?php the_title(); ?></a></h3>
                                <span class="price-wrapper"><?php echo $product->get_price_html(); ?></span>    
                                <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
                                <?php do_action( 'woocommerce_after_add_to_cart_button' ); ?>
                                <div style="clear: both"></div>
                            </div>
                        </div>
                    </div> 
                </div>
                <?php endwhile; ?>
                <?php wp_reset_query(); ?>
</div>

Bài viết Hiển thị sản phẩm của một danh mục ở trang bất kỳ đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

1. Tạo Slider hình ảnh với hai phiên bản Desktop – Tablet và Mobile

Bước 1: Tạo Field Group và đặt tên, ví dụ: Slider

Chú ý chọn Location phù hợp để tiến hành gọi các trường thông tin của Field ra bằng code PHP ở bước sau.

Bước 2: Tạo 2 Field với Field Type là Repeater tương ứng với 2 phiên bản Desktop – Tablet và Mobile

Field dành cho Mobile

Ở mỗi Field, tạo các Sub Field tương ứng

• Hình ảnh: Field Type là Image và Return Format là Image URL
• Link: Field Type là Text hoặc URL

Bước 3: Code PHP để gọi các trường ra ngoài và hiển thị

Sử dụng đoạn code sau và đặt vào vị trí hiển thị ở Template đã chọn ở Bước 1

<!--- Home Slider --->
<div class="homeslider row row-collapse row-full-width slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
    <?php if(!wp_is_mobile()) : ?>
        <?php if(have_rows('desktop_slider')) : ?>
            <?php while(have_rows('desktop_slider')) : the_row(); ?>
            <div class="col large-12">
                <?php if(get_sub_field('link_slider')) : ?><a href="<?php the_sub_field('link_slider'); ?>"><?php endif; ?>
                <img src="<?php the_sub_field('hinhanh_slider'); ?>" style="width:100%">	
                <?php if(get_sub_field('link_slider')) : ?></a><?php endif; ?>
            </div>	
            <?php endwhile; ?>
        <?php endif; ?>
    <?php endif; ?>
    <?php if(wp_is_mobile()) : ?>
        <?php if(have_rows('mobile_slider')) : ?>
            <?php while(have_rows('mobile_slider')) : the_row(); ?>
            <div class="col large-12">
                <?php if(get_sub_field('link_slider')) : ?><a href="<?php the_sub_field('link_slider'); ?>"><?php endif; ?>
                <img src="<?php the_sub_field('hinhanh_slider'); ?>" style="width:100%">	
                <?php if(get_sub_field('link_slidermb')) : ?></a><?php endif; ?>
            </div>	
            <?php endwhile; ?>
        <?php endif; ?>
    <?php endif; ?>
</div>
<!--- End Home Slider --->

Bài viết Tạo Slider tùy chỉnh với ACF Pro đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Chọn danh sách bài viết bằng ACF Pro (Advanced Custom Fields Pro)

Để thực hiện được việc này, tất nhiên là website của bạn phải được cài ACF Pro và đã có bài viết được đăng với đầy đủ thông tin: Tiêu đề, Ngày đăng, Ảnh Thumbnail, Nội dung chi tiết, . . .

Bước 1: Tạo Field Group

• Tạo một Filed Group với tên bất kỳ (Ví dụ: Chọn bài viết)
• Rules: Vị trí hiển thị danh sách, có thể là Trang, Chi tiết bài viết, Danh mục bài viết, . . .

Thêm một trường mới

• Field Label: Nhãn của trường (Ví dụ: Bài viết xem nhiều)
• Field Name: Tên của trường (Ví dụ: baiviet_xemnhieu) – Sử dụng khi code PHP
• Field Type: Repeater – Lặp lại, để có thể chọn nhiều bài

Thêm trường con (Sub Field)

• Field Label: Nhãn của trường con (Ví dụ: Chọn bài viết)
• Field Name: Tên của trường con (Ví dụ: chon_baiviet) – Sử dụng khi code PHP
• Field Type: Post Object
• Filter by Post Type: Bài viết (Posts)
• Return Format: Post ID

Sau khi thực hiện xong thì bấm Đăng (Hoặc Public, Update – Cập nhật)

Bước 2: Chọn danh sách bài viết cần hiển thị

Tùy cấu hình Field Group lúc đầu bạn muốn hiển thị danh sách này ở đâu thì bạn sẽ vào đó để Chọn danh sách bài viết (Bài viết, Trang, Danh mục bài viết, . . .)

Code để hiển thị danh sách bài viết được chọn

Một số Element của bài viết cần hiển thị

• Tiêu đề: the_title();
• Ảnh Thumbnail: the_post_thumbnail();
  
• Nội dung ngắn: the_excerpt();
• Link chi tiết: the_permalink();
• Ngày đăng: get_the_date();
• Tác giả: get_the_author();

Code để hiển thị

<?php if(have_rows('baiviet_xemnhieu')) : ?> 
    <ul class="mostpopular">
        <?php while(have_rows('baiviet_xemnhieu')) : the_row(); 
        $idpost = get_sub_field('chon_baiviet'); // Khai báo Post ID 
        $post = get_post($idpost);
        setup_postdata($post);
        ?> 
            <li>
            <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('thumbnail'); ?><?php the_title(); ?></a>
            </li>
        <?php wp_reset_postdata(); ?>
        <?php endwhile; ?> 
    </ul>
<?php endif; ?>

Đặt đoạn code này vào vị trí cần hiển thị bài viết và sửa bố cục cho phù hợp

Một số mẫu hiển thị khi sử dụng Theme Flatsome

Hiển thị dạng danh sách

Đây là kiểu hiển thị truyền thống với Hình ảnh bên trái; nội dung bao gồm Tiêu đề, Nội dung ngắn, Ngày đăng, Xem thêm nằm bên phải

<?php if(have_rows('baiviet_xemnhieu')) : ?> 
    <div class="row row-small mostpopular">
        <?php while(have_rows('baiviet_xemnhieu')) : the_row(); 
        $idpost = get_sub_field('chon_baiviet'); // Khai báo Post ID 
        $post = get_post($idpost);
        setup_postdata($post);
        ?> 
            <div class="col large-4 small-4" >
                <a href="<?php the_permalink(); ?>">
                    <?php echo get_the_post_thumbnail(); ?>		
                </a>
            </div>
            <div class="col large-8 small-8">
                <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                <?php if(!wp_is_mobile()) : ?><div class="homeexpert"><?php  the_excerpt(); ?></div><?php endif; ?>
            </div>
        <?php wp_reset_postdata(); ?>
        <?php endwhile; ?> 
    </div>
<?php endif; ?>

Hiển thị dạng ô Grid

Để hiển thị kiểu này, bạn sử dụng đoạn code dưới đây:

<?php if(have_rows('baiviet_xemnhieu')) : ?> 
    <div class="row row-small mostpopular">
        <?php while(have_rows('baiviet_xemnhieu')) : the_row(); 
        $idpost = get_sub_field('chon_baiviet'); // Khai báo Post ID 
        $post = get_post($idpost);
        setup_postdata($post);
        ?> 
            <div class="col large-4 small-12 postgrid">
                <div class="col-inner box-shadow-1 box-shadow-3-hover">
                    <div class="box has-hover box-default box-text-bottom">
                        <div class="box-image">
                            <div class="image-zoom image-cover" style="padding-top: 75%">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                <div class="overlay" style="background-color:rgba(0, 0, 0, 0)"></div>
                            </div>
                        </div>
                        <div class="box-text text-left" style="background-color:rgba(255, 255, 255, 0);">
                            <div class="box-text-inner">
                            <h3 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                            <div class="homeexpert"><?php  the_excerpt(); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php wp_reset_postdata(); ?>
        <?php endwhile; ?> 
    </div>
<?php endif; ?>

Hiển thị dạng Slider

Sử dụng đoạn code dưới đây để hiển thị list bài ra như trên:

<?php if(have_rows('baiviet_xemnhieu')) : ?> 
    <div class="mostpopular row row-small slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
        <?php while(have_rows('baiviet_xemnhieu')) : the_row(); 
        $idpost = get_sub_field('chon_baiviet'); // Khai báo Post ID 
        $post = get_post($idpost);
        setup_postdata($post);
        ?> 
            <div class="col large-4 small-12 postgrid">
                <div class="col-inner box-shadow-1 box-shadow-3-hover">
                    <div class="box has-hover box-default box-text-bottom">
                        <div class="box-image">
                            <div class="image-zoom image-cover" style="padding-top: 75%">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                <div class="overlay" style="background-color:rgba(0, 0, 0, 0)"></div>
                            </div>
                        </div>
                        <div class="box-text text-left" style="background-color:rgba(255, 255, 255, 0);">
                            <div class="box-text-inner">
                            <h3 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                            <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                            <div class="homeexpert"><?php  the_excerpt(); ?></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <?php wp_reset_postdata(); ?>
        <?php endwhile; ?> 
    </div>
<?php endif; ?>

Để có được bố cục đẹp mắt thì tất nhiên bạn cần phải sử dụng thêm CSS để trang trí cho danh sách hiển thị này. Tùy vào thẩm mỹ của mỗi người sẽ có được giao diện với màu sắc, bố cục khác nhau.

Gạch thẻ ốp tường https://gachtham.net/gach-the-op-tuong/

Gạch ốp chân tường https://thudoceramic.com/gach-the-chan-tuong/

Lời kết:

Trên đây là những chia sẻ từ kinh nghiệm cá nhân của mình đã áp dụng cho những dự án mà mình đã triển khai. Đây có thể chưa phải là phương án tối ưu nhất và có nhiều cách khác nhau để thực hiện được yêu cầu tương tự. Hi vọng bài viết này sẽ giúp ích được cho bạn, rút ngắn phần nào thời gian trong quá trình triển khai dự án.

Chúc bạn thành công!

Bài viết Hiển thị danh sách bài viết được chọn bằng ACF Pro đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.