<?php // Lấy danh sách các tag của bài viết hiện tại
    $tags = wp_get_post_tags(get_the_ID());

    // Kiểm tra xem có tag nào không
    if ($tags) {
        // Lấy danh sách ID của các tag
        $tag_ids = array();
        foreach ($tags as $tag) {
            $tag_ids[] = $tag->term_id;
        }

        // Truy vấn các bài viết có chứa các tag giống nhau
        $related_args = array(
            'tag__in' => $tag_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 4,
            'orderby' => 'date',
            'order' => 'DESC'
        );

        $related_posts = new WP_Query($related_args);

        // Kiểm tra xem có bài viết trùng tag không
        if ($related_posts->have_posts()) {
            echo '<p class="relatedtitle" style="margin-top: 40px;">Bài viết liên quan</p>';
            echo '<div class="row row-normal relatedtagged">';
            while ($related_posts->have_posts()) {
                $related_posts->the_post(); ?>
                <div class="col large-6 medium-12 small-12">
                    <a href="<?php the_permalink(); ?>" title="">
                    <div class="col-inner radius5 box-shadow-2 box-shadow-3-hover">
                        <div class="row row-collapse align-middle">
                            <div class="col large-3 medium-4 small-4">
                                <div class="box has-hover">
                                    <div class="box-image radius5">
                                        <div class="image-cover image-zoom" style="padding-top: 100%">
                                            <?php the_post_thumbnail(); ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col large-9 medium-8 small-8">
                                <div class="col-inner" style="padding: 10px">
                                    <p class="title"><?php the_title(); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>	
                    </a>
                </div>
            <?php
            }
            echo '</div>';
            wp_reset_postdata(); // Đặt lại dữ liệu truy vấn
        } else {
            //echo 'Không có bài viết trùng tag.';
        }
    } else {
        //echo 'Bài viết này không có tag.';
    } ?>

Bài viết Hiển thị bài viết cùng Tag ở cuối bài viết đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Đặt đoạn code sau vào vị trí muốn hiển thị bài viết cùng danh mục

Bài cùng danh mục dạng danh sách

<!--- Bài viết liên quan dạng list --->
<div class="row row-small relatedposts list">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner relatedlist">
            <div class="title">Bài viết liên quan</div>
            <ul>
            <?php
            /*
             * Code hiển thị bài viết liên quan trong cùng 1 category
             */
            $categories = get_the_category(get_the_ID());
            if ($categories){
                $category_ids = array();
                foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
                $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array(get_the_ID()),
                    'posts_per_page' => 5, // So bai viet dc hien thi
                );
                $my_query = new wp_query($args);
                if( $my_query->have_posts() ):
                    while ($my_query->have_posts()):$my_query->the_post();
                        ?>
                        <li><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
                        <?php
                    endwhile;
                endif; wp_reset_query();
            }
            ?>
            </ul>
        </div>
    </div>
</div>

Kết quả:

Bài viết cùng danh mục dạng Grid

<!--- Bài viết liên quan dạng Grid --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
    <?php
    /*
     * Code hiển thị bài viết liên quan trong cùng 1 category
     */
    $categories = get_the_category(get_the_ID());
    if ($categories){
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 6, // So bai viet dc hien thi
        );
        $my_query = new wp_query($args);
        if( $my_query->have_posts() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Kết quả:

Bài cùng danh mục dạng slider

<!--- Bài viết liên quan dạng Slider --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
</div>
<div class="relatedslider row row-small row-slider 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": true, "autoPlay" : false}'>
    <?php
    /*
     * Code hiển thị bài viết liên quan trong cùng 1 category
     */
    $categories = get_the_category(get_the_ID());
    if ($categories){
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 6, // So bai viet dc hien thi
        );
        $my_query = new wp_query($args);
        if( $my_query->have_posts() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Kết quả:

Thêm CSS để làm đẹp cho các cách hiển thị này. Chúc bạn thành công!

Bài viết Hiển thị bài viết cùng danh mục ở trang chi tiết bài viết trong Flatsome đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Home Slider with Images

<!--- Slider --->
<?php if(!wp_is_mobile()) : if(have_rows('desktop_slider')) : ?>
<div class="homeslider row row-collapse row-full-width slider slider-nav-simple slider-nav-large slider-nav-light 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" : 6000}'>
    <?php while(have_rows('desktop_slider')) : the_row(); ?>
    <div class="col large-12 small-12">		
        <div class="box has-hover">
            <div class="image-box">
                <div class="image-cover" style="padding-top: 34%">
                    <?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'); ?>">
                    <?php if(get_sub_field('link_slider')) : ?></a><?php endif; ?>
                </div>
            </div>
        </div>		
    </div>
    <?php endwhile; ?>
</div>
<?php endif; else : if(have_rows('mobile_slider')) : ?>
<div class="homeslider row row-collapse row-full-width slider slider-nav-simple slider-nav-large slider-nav-light 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" : 6000}'>
    <?php while(have_rows('mobile_slider')) : the_row(); ?>
    <div class="col large-12 small-12">
        <div class="box has-hover">
            <div class="image-box">
                <div class="image-cover" style="padding-top: 56.25%">
                    <?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'); ?>">
                    <?php if(get_sub_field('link_slider')) : ?></a><?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <?php endwhile; ?>
</div>
<?php endif; endif; ?>
<!--- Slider --->

.flickity-page-dots .dot {
        background: #000;
        border: none;
        opacity: 1;
        width: 15px;
        height: 6px;
        border-radius: 5px;
}
.flickity-page-dots .dot.is-selected {
        width: 30px;
        background: #a91416;
}

Home Categories

<!--- Home Categories --->
<?php if(have_rows('cac_danhmucsp')) : ?>
<div class="homecategories row row-small slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav large-columns-6 medium-columns-3"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": <?php if(!wp_is_mobile()) : ?>false<?php endif; ?><?php if(wp_is_mobile()) : ?>true<?php endif; ?> , "rightToLeft": false, "autoPlay" : false}'>
    <?php if(!wp_is_mobile()) : ?>
        <?php $count = 0; $rows = 1; ?>	
    <?php endif; ?>	
    <?php if(wp_is_mobile()) : ?>
        <?php $count = 0; $rows = 2; ?>	
    <?php endif; ?>	
    <?php while(have_rows('cac_danhmucsp')) : the_row(); ?>		
        <?php if ($count % $rows==0) : ?>
        <div class="col shine <?php if(wp_is_mobile()) : ?>small-5<?php endif; ?>">
        <?php endif; ?>
            <div class="col-inner homecate text-center <?php if(wp_is_mobile()) : ?>box-shadow-1 mobilecate<?php endif; ?>">
                <a href="<?php the_sub_field('link_danhmucsp'); ?>"><img src="<?php the_sub_field('hinhanh_danhmucsp'); ?>" alt="<?php the_sub_field('tieude_danhmucsp'); ?>"></a>
                <a href="<?php the_sub_field('link_danhmucsp'); ?>"><p class="title"><?php the_sub_field('tieude_danhmucsp'); ?></p></a>
            </div>
        <?php if ($count % $rows == ($rows - 1) || $count == ($max_post - 1)) : ?>
        </div>
        <?php endif; $count = $count + 1; ?>
    <?php endwhile; ?>
</div>
<?php endif; ?>
<!--- End Home Categories --->

BreadCrumbs

Dán vào file header.php

<?php if(!is_front_page()) : ?>	
<div class="custombread">
    <div class="breadinner">
        <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
    </div>
</div>	
<?php endif; ?>

.custombread {
        background: #f2f2f2;
        margin-bottom: 20px;
}
.custombread .breadinner {
        margin: auto;
        max-width: 1270px;
        padding: 10px 15px;
}
.custombread p {
        margin-bottom: 0;
}
.page-wrapper {
        padding: 0;
}

Home About

<!--- Giới thiệu --->
<?php if(get_field('noidung_gioithieu')) : ?>
<div class="homeabout">
    <div class="row row-normal align-middle">
        <div class="col large-6 medium-6 small-12">
            <h2 class="hometitle uppercase"><?php the_field('tieude_gioithieu'); ?></h2>
            <?php the_field('noidung_gioithieu'); ?>
            <a href="<?php the_field('link_gioithieu'); ?>" class="button primary" style="border-radius: 5px">Xem thêm</a>
        </div>
        <div class="col large-6 medium-6 small-12">
            <?php if(get_field('videoid_gioithieu')) : ?>
                <div class="video video-fit mb">
                        <iframe title="<?php the_field('tieude_gioithieu'); ?>" src="https://www.youtube.com/embed/<?php the_field('videoid_gioithieu'); ?>?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
                </div>
            <?php else : ?>
                <div class="box has-hover">
                    <div class="box-image">
                        <div class="image-cover" style="padding-top: 75%">
                            <img src="<?php the_field('hinhanh_gioithieu'); ?>" alt="<?php the_field('tieude_gioithieu'); ?>">
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; ?>
<!--- Giới thiệu --->

.custombread {
background: #f2f2f2;
margin-bottom: 20px;
}
.custombread .breadinner {
margin: auto;
max-width: 1270px;
padding: 10px 15px;
}
.custombread p {
margin-bottom: 0;
}
.page-wrapper {
padding: 0;
}

Home Partners

<!--- Partners --->
<?php if(have_rows('cac_doitac')) : ?>
<div class="homepartners">
    <h2 class="hometitle uppercase text-center">
        <?php the_field('tieude_doitac'); ?>
    </h2>
    <div class="row row-normal slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav large-columns-6 medium-columns-5"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "<?php if(!wp_is_mobile()) : ?>left<?php else : ?>center<?php endif; ?>","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": false, "autoPlay" : false}'>
        <?php while(have_rows('cac_doitac')) : the_row(); ?>
        <div class="col small-9">
            <div class="box has-hover">
                <div class="box-image box-shadow-2 box-shadow-3-hover">
                    <div class="image-cover" style="padding-top: 100%">
                        <?php if(get_sub_field('link')) : ?><a href="<?php the_sub_field('link'); ?>"><?php endif; ?>
                            <img src="<?php the_sub_field('logo'); ?>">
                        <?php if(get_sub_field('link')) : ?></a><?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; ?>
    </div>
</div>
<?php endif; ?>
<!--- Partners --->

Thêm đoạn văn bản và Danh mục bài viết – Danh mục sản phẩm – Tags . . .

<?php $term = get_queried_object();
  if(get_field('noidung_cuoitrang', $term)) : ?>
    <div class="noidungcuoitrang">
    <?php the_field('noidung_cuoitrang', $term); ?>
    </div>
<?php endif; ?>

.noidungcuoitrang {
        background: #fff;
        padding: 20px 20px 1px 20px;
        border: 1px solid #ddd;
        margin-top: 15px;
}
.noidungcuoitrang ul, .noidungcuoitrang ol {
        margin-left: 18px;
}

Bài viết liên quan dạng list

<!--- Bài viết liên quan dạng list --->
<div class="row row-small relatedposts list">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner relatedlist">
            <div class="title">Bài viết liên quan</div>
            <ul>
            <?php
            /*
             * Code hiển thị bài viết liên quan trong cùng 1 category
             */
            $categories = get_the_category(get_the_ID());
            if ($categories){
                $category_ids = array();
                foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
                $args=array(
                    'category__in' => $category_ids,
                    'post__not_in' => array(get_the_ID()),
                    'posts_per_page' => 5, // So bai viet dc hien thi
                );
                $my_query = new wp_query($args);
                if( $my_query->have_posts() ):
                    while ($my_query->have_posts()):$my_query->the_post();
                        ?>
                        <li><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
                        <?php
                    endwhile;
                endif; wp_reset_query();
            }
            ?>
            </ul>
        </div>
    </div>
</div>

Bài viết liên quan dạng Grid

<!--- Bài viết liên quan dạng Grid --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
    <?php
    /*
     * Code hiển thị bài viết liên quan trong cùng 1 category
     */
    $categories = get_the_category(get_the_ID());
    if ($categories){
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 6, // So bai viet dc hien thi
        );
        $my_query = new wp_query($args);
        if( $my_query->have_posts() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Bài viết liên quan dạng Slider

<!--- Bài viết liên quan dạng Slider --->
<div class="row row-small relatedposts align-equal">
    <div class="col large-12" style="padding-bottom:0;">
        <div class="col-inner">
            <div class="title">Bài viết liên quan</div>
        </div>
    </div>
</div>
<div class="relatedslider row row-small row-slider 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": true, "autoPlay" : false}'>
    <?php
    /*
     * Code hiển thị bài viết liên quan trong cùng 1 category
     */
    $categories = get_the_category(get_the_ID());
    if ($categories){
        $category_ids = array();
        foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args=array(
            'category__in' => $category_ids,
            'post__not_in' => array(get_the_ID()),
            'posts_per_page' => 6, // So bai viet dc hien thi
        );
        $my_query = new wp_query($args);
        if( $my_query->have_posts() ):
            while ($my_query->have_posts()):$my_query->the_post();
                ?>
                <div class="col  small-12 postgrid">
                    <div class="col-inner box-shadow-2 box-shadow-3-hover">
                        <div class="box has-hover box-text-bottom">
                            <div class="box-image">
                                <div class="image-cover" style="padding-top: 56.25;">
                                    <a href="<?php the_permalink(); ?>" title="">
                                        <?php the_post_thumbnail(); ?>
                                    </a>
                                    <div class="overlay" style="background-color:rgb(0,0,0,0)"></div>						
                                </div>
                            </div>
                            <div class="box-text text-left" style="">
                                <div class="box-text-inner">
                                        <p style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="titlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></p>
                                        <p class="postdate"><i class="fa fa-calendar"></i><?php echo get_the_date() ?></p>
                                        <div class="homeexpert"><?php  the_excerpt(); ?></div>
                                        <a href="<?php the_permalink(); ?>" class="readmore">Xem thêm</a>
                                </div>
                            </div>
                        </div>
                    </div>	
                </div>
                <?php
            endwhile;
        endif; wp_reset_query();
    }
    ?>
</div>

Sản phẩm liên quan

<?php
/**
 * Related Products
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/related.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see       https://docs.woocommerce.com/document/template-structure/
 * @package   WooCommerce/Templates
 * @version     3.9.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Get Type.
$type             = get_theme_mod( 'related_products', 'slider' );
$repeater_classes = array();

if ( $type == 'hidden' ) return;
if ( $type == 'grid' ) $type = 'row';

 if ( get_theme_mod('category_force_image_height' ) ) $repeater_classes[] = 'has-equal-box-heights';
 if ( get_theme_mod('equalize_product_box' ) ) $repeater_classes[] = 'equalize-box';

$repater['type']         = $type;
$repater['columns']      = get_theme_mod( 'related_products_pr_row', 4 );
$repater['columns__md']  = get_theme_mod( 'related_products_pr_row_tablet', 3 );
$repater['columns__sm']  = get_theme_mod( 'related_products_pr_row_mobile', 2 );
$repater['class']        = implode( ' ', $repeater_classes );
$repater['slider_style'] = 'reveal';
$repater['row_spacing']  = 'small';


if ( $related_products ) : ?>

    <div class="related related-products-wrapper product-section">
        <?php
        $heading = apply_filters( 'woocommerce_product_related_products_heading', __( 'Related products', 'woocommerce' ) );

        if ( $heading ) :
            ?>
            <div class="product-section-title uppercase">
                <?php echo esc_html( $heading ); ?>
            </div>
        <?php endif; ?>

        <div class="products productlist row row-collapse row-solid  equalize-box align-equal row-slider slider slider-nav-simple slider-nav-large slider-nav-dark slider-style-normal slider-show-nav large-columns-5 medium-columns-3 small-columns-2"  data-flickity-options='{"imagesLoaded": true, "groupCells": "100%", "dragThreshold" : 5, "cellAlign": "left","wrapAround": true,"prevNextButtons": false,"percentPosition": true,"pageDots": true, "rightToLeft": true, "autoPlay" : false}'  style="border: 1px solid #ddd;">		
            <?php foreach ( $related_products as $related_product ) : ?>
                        <?php
                        $post_object = get_post( $related_product->get_id() );
                        setup_postdata( $GLOBALS['post'] =& $post_object ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited, Squiz.PHP.DisallowMultipleAssignments.Found
                        wc_get_template_part( 'content', 'product' );
                        ?>
            <?php endforeach; ?>
        </div>
    </div>

    <?php
endif;

wp_reset_postdata();

Đếm ngược thời gian có lặp lại

<div id="countdown"></div>
    <script>
        // Thiết lập thời gian ban đầu (giây)
        var seconds = 3600; // 1 giờ = 60 phút * 60 giây
        function countdown() {
            var countdownElement = document.getElementById("countdown");            
            // Hiển thị thời gian còn lại
            var hours = Math.floor(seconds / 3600);
            var minutes = Math.floor((seconds % 3600) / 60);
            var remainingSeconds = seconds % 60;
            countdownElement.innerHTML = "Thời gian còn lại: " + hours + " giờ " + minutes + " phút " + remainingSeconds + " giây";
            // Giảm thời gian mỗi giây
            seconds--;

            // Kiểm tra nếu đã hết thời gian
            if (seconds < 0) {
                countdownElement.innerHTML = "Hết thời gian!";
            } else {
                // Lặp lại hàm countdown mỗi giây
                setTimeout(countdown, 1000);
            }
        }
        // Bắt đầu đếm ngược khi trang web được tải
        countdown();
    </script>

Custom Footer

<?php if(have_rows('noidung_footer','option')) : ?>
<div class="customfooter" style="background: <?php the_field('maunen_footer','option'); ?>">
    <div class="row row-small dark">
        <?php while(have_rows('noidung_footer','option')) :  the_row(); ?>
        <div class="col small-12 <?php the_sub_field('chieurong_desktop'); ?> <?php the_sub_field('chieurong_tablet'); ?>">
            <p class="title"><?php the_sub_field('tieude'); ?></p>
            <?php the_sub_field('noidung'); ?>
        </div>
        <?php endwhile; ?>
    </div>
</div>
<?php endif; ?>

.customfooter {
        padding-top: 50px;
        padding-bottom: 20px;
}
.customfooter .col {
        padding-bottom: 10px;
}
.customfooter .title {
        text-transform: uppercase;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
        margin-bottom: 20px;
}
.customfooter .title span {
        border-bottom: 3px solid;
        padding-bottom: 8px;
}
.customfooter p {
        margin-bottom: 10px;
}
.customfooter ul {
        margin-left: 18px;
}

Bài viết Tổng hợp Code phải dùng đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Bước 1: Vào Theme Options > Blog > Blog Layout

Chuyển đến phần Posts Layout, cho 1 loại hiển thị bất kỳ, ví dụ List

Bước 2: Copy file PHP tương ứng với cái Posts Layout này từ Theme cha vào Theme con theo cấp thư mục tương ứng

Như ví dụ trên, cần Copy file archive-list.php từ thư mục Flatsome/template-parts/posts sang thư mục Child-theme/template-parts/posts (Nếu chưa có thì tạo thư mục theo cấp như này)

Xóa hết code ở đây và paste đoạn code dưới đây vào

<div class="custompostlist">
    <div class="row row-small">	
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
                <div class="col large-12 small-12 postlist">
                    <div class="col-inner box-shadow-1 box-shadow-2-hover itempost">
                        <div class="row row-collapse align-middle">
                            <div class="col large-3 medium-4 small-12">
                                <div class="box has-hover box-default">
                                    <div class="box-image">
                                        <div class="image-grayscale 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>
                            </div>
                            <div class="col large-9 medium-8 small-12">
                                <div class="col-inner">
                                    <h2 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                    <p class="postdate"><?php echo get_the_date() ?></p>
                                    <?php the_excerpt(); ?>
                                </div>
                            </div>
                        </div>						
                    </div>				
                </div>			
        <?php endwhile; ?>
    </div>
    <div class="navigation">
        <?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>
    </div>
    <?php else : ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h1>Not Found</h1>
    </div>
    <?php endif; ?>
</div>

Đoạn code này

<?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>

Là để phân trang, cần bổ sung thêm đoạn code sau vào file functions.php trong Child-theme

function wiki_wp_corenavi($custom_query = null, $paged = null) {
    global $wp_query;
    if($custom_query) $main_query = $custom_query;
    else $main_query = $wp_query;
    $paged = ($paged) ? $paged : get_query_var('paged');
    $big = 999999999;
    $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
    if($total > 1) echo '<div class="pagenavi">';
    echo paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, $paged ),
        'total' => $total,
        'mid_size' => '10', // Số trang hiển thị khi có nhiều trang trước khi hiển thị ...
        'prev_text'    => __('<i class="icon-angle-left"></i>','wiki'),
        'next_text'    => __('<i class="icon-angle-right"></i>','wiki'),
    ) );
    if($total > 1) echo '</div>';
}

Và đây là kết quả

Lưu ý

Các trường thông tin có thể cho hiển thị ra danh sách này khá nhiều, Ví dụ:

• 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();

  <div class="custompostlist">
      <div class="row row-small">	
          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
                  <div class="col large-12 small-12 postlist">
                      <div class="col-inner box-shadow-1 box-shadow-2-hover itempost">
                          <div class="row row-collapse align-middle">
                              <div class="col large-3 medium-4 small-12">
                                  <div class="box has-hover box-default">
                                      <div class="box-image">
                                          <div class="image-grayscale 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>
                              </div>
                              <div class="col large-9 medium-8 small-12">
                                  <div class="col-inner">
                                      <h2 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                      <p class="postdate"><?php echo get_the_date() ?></p>
                                      <?php the_excerpt(); ?>
                                  </div>
                              </div>
                          </div>						
                      </div>				
                  </div>			
          <?php endwhile; ?>
      </div>
      <div class="navigation">
          <?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>
      </div>
      <?php else : ?>
      <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
          <h1>Not Found</h1>
      </div>
      <?php endif; ?>
  </div>

   

Bài viết Hiển thị danh sách bài viết dạng List trong Flatsome bằng Code PHP tùy chỉnh đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.

Bước 1: Vào Theme Options > Blog > Blog Layout

Chuyển đến phần Posts Layout, cho 1 loại hiển thị bất kỳ, ví dụ List

Bước 2: Copy file PHP tương ứng với cái Posts Layout này từ Theme cha vào Theme con theo cấp thư mục tương ứng

Như ví dụ trên, cần Copy file archive-list.php từ thư mục Flatsome/template-parts/posts sang thư mục Child-theme/template-parts/posts (Nếu chưa có thì tạo thư mục theo cấp như này)

Xóa hết code ở đây và paste đoạn code dưới đây vào

<div class="custompostlist">
    <div class="row row-small">	
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	
                <div class="col large-4 small-12 postlist">
                    <div class="col-inner">
                        <div class="box has-hover   has-hover box-default box-text-bottom">
                            <div class="box-image">
                                <div class="image-grayscale image-cover" style="padding-top:56.25%;">
                                    <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">				
                                    <h2 style="margin-bottom:5px"><a href="<?php the_permalink() ?>" class="relatedtitlea" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
                                    <p class="postdate"><?php echo get_the_date() ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>			
        <?php endwhile; ?>
    </div>
    <div class="navigation">
        <?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>
    </div>
    <?php else : ?>
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h1>Not Found</h1>
    </div>
    <?php endif; ?>
</div>

Đoạn code này

<?php if (function_exists('wiki_wp_corenavi')) wiki_wp_corenavi(); ?>

Là để phân trang, cần bổ sung thêm đoạn code sau vào file functions.php trong Child-theme

function wiki_wp_corenavi($custom_query = null, $paged = null) {
    global $wp_query;
    if($custom_query) $main_query = $custom_query;
    else $main_query = $wp_query;
    $paged = ($paged) ? $paged : get_query_var('paged');
    $big = 999999999;
    $total = isset($main_query->max_num_pages)?$main_query->max_num_pages:'';
    if($total > 1) echo '<div class="pagenavi">';
    echo paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, $paged ),
        'total' => $total,
        'mid_size' => '10', // Số trang hiển thị khi có nhiều trang trước khi hiển thị ...
        'prev_text'    => __('<i class="icon-angle-left"></i>','wiki'),
        'next_text'    => __('<i class="icon-angle-right"></i>','wiki'),
    ) );
    if($total > 1) echo '</div>';
}

Và đây là kết quả

Lưu ý

Các trường thông tin có thể cho hiển thị ra danh sách này khá nhiều, Ví dụ:

• 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();

Bài viết Hiển thị danh sách bài viết dạng Grid trong Flatsome bằng Code PHP tùy chỉnh đã xuất hiện đầu tiên vào ngày Flatsome Tips For You.