Thủ thuật Theme Flatsome, Thủ thuật wordpress

Hướng dẫn tạo chức năng hiển thị banner động theo thời gian trong ngày trên theme Flatsome với ACF

Đăng vào Tháng 9 26, 2024 bởi admin

admin

26/09/2024

5 Phút đọc

201 Lượt xem

Đánh giá

4.9/5 - (100 bình chọn)

Việc hiển thị các banner động thay đổi theo thời gian trong ngày có thể giúp website của bạn trở nên sống động và phù hợp hơn với trải nghiệm người dùng. Bài viết này sẽ hướng dẫn bạn cách tích hợp chức năng hiển thị banner động vào theme Flatsome bằng cách sử dụng Advanced Custom Fields (ACF) và tùy chỉnh mã PHP trong tệp functions.php. Với chức năng này, banner trên website sẽ tự động thay đổi dựa trên giờ trong ngày (buổi sáng, buổi chiều và buổi tối).

Lợi ích của việc hiển thị banner động:

Cá nhân hóa trải nghiệm người dùng: Khách hàng sẽ cảm thấy trang web luôn tươi mới khi banner tự động thay đổi theo từng thời điểm trong ngày.
Tăng tương tác người dùng: Banner động thu hút sự chú ý và giữ khách truy cập trên trang lâu hơn.
Tối ưu hóa hiệu suất website: Chức năng này không cần plugin phức tạp, giúp website của bạn duy trì tốc độ tải nhanh.

Hướng dẫn chi tiết tạo chức năng hiển thị banner động theo thời gian trong ngày

Bước 1: Cài đặt và cấu hình Advanced Custom Fields (ACF)

Cài đặt ACF: Đầu tiên, bạn cần cài đặt và kích hoạt plugin ACF trên trang quản trị WordPress.
Tạo trường tùy chỉnh trong ACF: Thay vì tạo trường thủ công thông qua giao diện, chúng ta sẽ tạo các trường tùy chỉnh trực tiếp qua mã trong functions.php.

Bước 2: Tích hợp mã PHP vào tệp `functions.php`

Để hiển thị banner động theo thời gian, bạn cần chèn đoạn mã sau vào tệp functions.php của theme Flatsome.

// Kiểm tra nếu ACF có được cài đặt không
if( function_exists('acf_add_options_page') ) {

    // Thêm trang Options Page để quản lý các banner
    acf_add_options_page(array(
        'page_title' => 'Quản lý Banner',
        'menu_title' => 'Banner',
        'menu_slug'  => 'banner-settings',
        'capability' => 'edit_posts',
        'redirect'   => false
    ));
}

// Thêm các trường tùy chỉnh vào trang quản lý Banner
if( function_exists('acf_add_local_field_group') ) {

    acf_add_local_field_group(array(
        'key' => 'group_banner_settings',
        'title' => 'Banner Settings',
        'fields' => array(
            array(
                'key' => 'field_morning_banner',
                'label' => 'Morning Banner',
                'name' => 'morning_banner',
                'type' => 'image',
                'instructions' => 'Upload banner cho buổi sáng (từ 6h đến 12h).',
                'return_format' => 'url',
                'preview_size' => 'medium',
                'library' => 'all',
            ),
            array(
                'key' => 'field_afternoon_banner',
                'label' => 'Afternoon Banner',
                'name' => 'afternoon_banner',
                'type' => 'image',
                'instructions' => 'Upload banner cho buổi chiều (từ 12h đến 18h).',
                'return_format' => 'url',
                'preview_size' => 'medium',
                'library' => 'all',
            ),
            array(
                'key' => 'field_night_banner',
                'label' => 'Night Banner',
                'name' => 'night_banner',
                'type' => 'image',
                'instructions' => 'Upload banner cho buổi tối (từ 18h đến 6h).',
                'return_format' => 'url',
                'preview_size' => 'medium',
                'library' => 'all',
            ),
        ),
        'location' => array(
            array(
                array(
                    'param' => 'options_page',
                    'operator' => '==',
                    'value' => 'banner-settings',
                ),
            ),
        ),
        'menu_order' => 0,
        'position' => 'normal',
        'style' => 'default',
        'label_placement' => 'top',
        'instruction_placement' => 'label',
    ));
}

// Hiển thị banner động dựa trên thời gian trong ngày
if( function_exists('get_field') ) {
    function display_dynamic_banner() {
        // Lấy thời gian hiện tại (giờ)
        $current_time = current_time('H');
        $banner_image = '';

        // Xác định banner dựa trên khung giờ
        if ($current_time >= 6 && $current_time < 12) {
            $banner_image = get_field('morning_banner', 'option');
        } elseif ($current_time >= 12 && $current_time < 18) {
            $banner_image = get_field('afternoon_banner', 'option');
        } else {
            $banner_image = get_field('night_banner', 'option');
        }

        // Hiển thị banner nếu có hình ảnh
        if($banner_image) {
            echo '<div class="dynamic-banner" style="text-align:center; margin: 20px 0;">';
            echo '<img src="' . esc_url($banner_image) . '" alt="Banner" style="max-width: 100%; height: auto;">';
            echo '</div>';
        }
    }

    // Hook vào vị trí trước phần header của theme Flatsome
    add_action('flatsome_before_header', 'display_dynamic_banner');
}

// Kiểm tra nếu ACF có được cài đặt không

if( function_exists('acf_add_options_page') ) {

// Thêm trang Options Page để quản lý các banner

acf_add_options_page(array(

'page_title' => 'Quản lý Banner',

'menu_title' => 'Banner',

'menu_slug' => 'banner-settings',

'capability' => 'edit_posts',

'redirect' => false

));

}

// Thêm các trường tùy chỉnh vào trang quản lý Banner

if( function_exists('acf_add_local_field_group') ) {

acf_add_local_field_group(array(

'key' => 'group_banner_settings',

'title' => 'Banner Settings',

'fields' => array(

array(

'key' => 'field_morning_banner',

'label' => 'Morning Banner',

'name' => 'morning_banner',

'type' => 'image',

'instructions' => 'Upload banner cho buổi sáng (từ 6h đến 12h).',

'return_format' => 'url',

'preview_size' => 'medium',

'library' => 'all',

array(

'key' => 'field_afternoon_banner',

'label' => 'Afternoon Banner',

'name' => 'afternoon_banner',

'type' => 'image',

'instructions' => 'Upload banner cho buổi chiều (từ 12h đến 18h).',

'return_format' => 'url',

'preview_size' => 'medium',

'library' => 'all',

array(

'key' => 'field_night_banner',

'label' => 'Night Banner',

'name' => 'night_banner',

'type' => 'image',

'instructions' => 'Upload banner cho buổi tối (từ 18h đến 6h).',

'return_format' => 'url',

'preview_size' => 'medium',

'library' => 'all',

'location' => array(

array(

'param' => 'options_page',

'operator' => '==',

'value' => 'banner-settings',

'menu_order' => 0,

'position' => 'normal',

'style' => 'default',

'label_placement' => 'top',

'instruction_placement' => 'label',

));

}

// Hiển thị banner động dựa trên thời gian trong ngày

if( function_exists('get_field') ) {

function display_dynamic_banner() {

// Lấy thời gian hiện tại (giờ)

$current_time = current_time('H');

$banner_image = '';

// Xác định banner dựa trên khung giờ

if ($current_time >= 6 && $current_time < 12) {

$banner_image = get_field('morning_banner', 'option');

} elseif ($current_time >= 12 && $current_time < 18) {

$banner_image = get_field('afternoon_banner', 'option');

} else {

$banner_image = get_field('night_banner', 'option');

}

// Hiển thị banner nếu có hình ảnh

if($banner_image) {

echo '<div class="dynamic-banner" style="text-align:center; margin: 20px 0;">';

echo '<img src="' . esc_url($banner_image) . '" alt="Banner" style="max-width: 100%; height: auto;">';

echo '</div>';

}

// Hook vào vị trí trước phần header của theme Flatsome

add_action('flatsome_before_header', 'display_dynamic_banner');

}

Bước 3: Cách hoạt động của mã

Tạo Options Page: Chức năng này sẽ tạo một trang trong phần quản trị WordPress để bạn có thể tải lên các banner tương ứng cho từng khung giờ: sáng (6h-12h), chiều (12h-18h), và tối (18h-6h).
Hiển thị banner: Mã sẽ tự động xác định thời gian hiện tại và hiển thị banner phù hợp dựa trên giờ trong ngày.

Bước 4: Tinh chỉnh CSS (nếu cần)

Nếu muốn tùy chỉnh giao diện banner, bạn có thể thêm các dòng CSS vào tệp style.css:

.dynamic-banner {
    text-align: center;
    margin: 20px 0;
}


.dynamic-banner img {
    max-width: 100%;
    height: auto;
}

.dynamic-banner {

text-align: center;

margin: 20px 0;

}

.dynamic-banner img {

max-width: 100%;

height: auto;

}

Với hướng dẫn trên, bạn đã có thể tích hợp chức năng hiển thị banner động theo thời gian vào theme Flatsome mà không cần sử dụng plugin bên ngoài. Điều này không chỉ giúp tối ưu hóa tốc độ trang web mà còn tạo trải nghiệm thân thiện hơn cho người dùng. Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn cách sử dụng ACF kết hợp với mã PHP để tạo ra các tính năng tùy chỉnh mạnh mẽ cho website WordPress của bạn.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

🔥 TOP 10+ ĐOẠN CODE FLATSOME CỰC HAY GIÚP WEBSITE MƯỢT, NHẸ, CHUẨN SEO

Bạn đang sử dụng theme Flatsome cho website WordPress? Bạn muốn tối ưu hiệu năng, giao diện và trải nghiệm người dùng mà không cần...
Sharecode chức năng quảng cáo bài viết wordpress

Bạn đang tìm kiếm giải pháp quảng bá bài viết hiệu quả ngay trên chính website WordPress của mình? Hãy khám phá ngay plugin MTWPGR...
Hướng Dẫn Tạo Gallery Video Highlight Chuyên Nghiệp Cho WordPress (Chuẩn YouTube, Chuẩn SEO)

🎁Nội dung miễn phí có giới hạnBài viết này sẽ miễn phí trong 6 ngày nữa. Sau thời gian này, bạn cần phải mua để...
Sharecode tạo uxbuider element đẹp wordpress

Để tạo một section khí thế, mãnh liệt, mạnh mẽ, đẹp và cực kỳ bắt mắt cho UX Builder/Flatsome, bạn cần kết hợp các yếu...
Code hệ thống điểm danh và affilate

Bạn đang muốn thêm tính năng điểm danh hàng ngày để tăng tương tác người dùng trên website WordPress? Bài viết này sẽ hướng dẫn...
Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Phần 1. Ẩn tài khoản admin khỏi danh sách người dùng trong Admin Mục tiêu của bài viết Chỉ cho phép tồn tại duy nhất...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Phần 1: Hướng dẫn Code chức năng kiểm tra link nội bộ Khi xây dựng một trang web trên nền tảng WordPress, việc tối ưu...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

1. Giới Thiệu Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Việc tự động cập nhật giá khi thay đổi số lượng...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử...