Tổng hợp Code phải dùng

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;
}

 

Về tôi

Minh Anh

Xin chia sẻ những phần việc nhỏ ở các dự án đã triển khai để tiện sử dụng lại ở những dự án khác, giúp rút ngắn thời gian hoàn thành sản phẩm, giảm chi phí cho đối tác và khách hàng.
0 0 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest
0 Góp ý
Phản hồi nội tuyến
Xem tất cả bình luận

Danh mục bài viết

Khám phá những nội dung mới nhất

0
Rất thích suy nghĩ của bạn, hãy bình luận.x