Tổng hợp những đoạn Code PHP cần dùng khi thiết kế Website WordPress sử dụng Theme Flatsome kết hợp với Plugin ACF Pro
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;
}
