• Về minhduy.vn
  • Đăng ký Hosting
  • Thiết kế Website
  • Khuyến mãi HOT
Hướng Dẫn Sử Dụng Dịch Vụ - Minh Duy Solutions
  • Trang chủ
  • Hosting
    • Hướng dẫn Hosting cPanel
    • Hướng dẫn Hosting DirectAdmin
  • Tên miền
  • Website
    • Hướng dẫn WordPress
    • Hướng dẫn Webmaster
  • Email Doanh Nghiệp
    • Office 365
    • Google Work Space
    • Email Zimbra
  • VPS – Máy chủ
    • Hướng dẫn Linux
    • Hướng dẫn DirectAdmin
  • Hướng dẫn chung
  • Góc ICT
No Result
View All Result
  • Trang chủ
  • Hosting
    • Hướng dẫn Hosting cPanel
    • Hướng dẫn Hosting DirectAdmin
  • Tên miền
  • Website
    • Hướng dẫn WordPress
    • Hướng dẫn Webmaster
  • Email Doanh Nghiệp
    • Office 365
    • Google Work Space
    • Email Zimbra
  • VPS – Máy chủ
    • Hướng dẫn Linux
    • Hướng dẫn DirectAdmin
  • Hướng dẫn chung
  • Góc ICT
No Result
View All Result
Hướng Dẫn Sử Dụng Dịch Vụ - Minh Duy Solutions
No Result
View All Result
Home Hướng dẫn Website Hướng dẫn WordPress

Tạo Slider tùy chỉnh với ACF Pro Flatsome

Minh Duy Solutions by Minh Duy Solutions
17/06/2023
Reading Time: 3 mins read
A A
0
luu ban nhap tu dong 3849
726
SHARES
2.3k
VIEWS
Share on FacebookShare on Twitter
4.5/5 - (146 bình chọn)

luu ban nhap tu dong 3849

Tạo Slider trong Flatsome đơn giản, dễ cập nhật, tương thích với các thiết bị với ACF Pro

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ọn Location phù hợp
Chọn Location phù hợp

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 Desktop - Tablet
Field dành cho Desktop – Tablet

Field dành cho 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 --->

 

Tags: WordPressflatsomeSlider
Share290Tweet182
Minh Duy Solutions

Minh Duy Solutions

Bài viết liên quan

stop wordpress user registration spam
Hướng dẫn WordPress

Hướng dẫn xoá hàng loạt user spam trên WordPress

23/05/2025
1.5k
thanh top woo c
Hướng dẫn Website

Hướng dẫn ẩn thanh Edit Product che mất tùy chọn khi đăng sản phẩm của WooComerce

24/09/2024
1.5k
flatsome theme 1
Hướng dẫn Website

Hướng dẫn tắt UXBuilder ở 1 số post type theme Flatsome

24/09/2024
1.6k
flatsome theme 1
Hướng dẫn Website

Bật UX Builder cho Custom post type trên theme Flatsome

24/09/2024
1.7k
Contact Form 7
Hướng dẫn Website

Chống spam cho plugin Contact Form 7

19/06/2024
1.5k
Contact Form 7
Hướng dẫn WordPress

Hướng dẫn cách truyền tiêu đề bài viết, sản phẩm vào Contact Form 7

19/06/2024
1.6k

Để lại một bình luận Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

No Result
View All Result

Recommended.

smtp la gi 1

Cấu hình SMTP cho WordPress mà không cần dùng plugin

12/03/2022
1.6k

Hướng dẫn nâng cấp lên MariaDB 10 từ MySQL 5.6 trên VPS cài DirectAdmin

22/09/2021
1.5k

Trending.

cach tao doi quoc gia cho tai khoan google 4082

Cách tạo (đổi quốc gia) cho tài khoản Google

24/01/2024
19.6k
cach tao doi quoc gia cho tai khoan google 4082

Cách xóa hồ sơ thanh toán tài khoản Google

24/01/2024
4.8k
57acc582dde37df0a76107d2fb2448d8

Cách Ngắt Link Ảnh Trong Adobe Illustrator, Đơn Giản, Hiệu Quả

04/10/2022
15.4k
cach sua loi co ve nhu ban o quoc gia khac voi nguoi quan ly gia dinh google 4097 3

Cách sửa lỗi Có vẻ như bạn ở quốc gia khác với người quản lý gia đình Google

24/01/2024
2.4k

Hướng dẫn yêu cầu Canva hủy gói đăng ký và yêu cầu hoàn tiền Canva

12/04/2025
1.7k
Wiki Minh Duy Solutions

WIKI.MINHDUY.VN

Chuyên trang hướng dẫn sử dụng dịch vụ của Minh Duy Solutions

DMCA.com Protection Status

Danh mục

  • aaPanel
  • Góc ICT
  • Thiết Kế Đồ Hoạ
  • SEO
  • Hướng dẫn WHMCS
  • Hướng dẫn Hosting
  • Hướng dẫn WordPress
  • Email Zimbra
  • Hướng dẫn DirectAdmin
  • Hướng dẫn Hosting cPanel
  • Office 365
  • Hướng dẫn Website
  • Hướng dẫn Linux
  • Hướng dẫn Hosting DirectAdmin
  • Google Work Space
  • Hướng dẫn Webmaster
  • Hướng dẫn máy chủ
  • Hướng dẫn Email Doanh Nghiệp
  • Hướng dẫn Tên miền
  • Hướng dẫn chung
  • Uncategorized

Thẻ

AFC apt-get update apt-get upgrade category chủ thể cPanel debian DirectAdmin email doanh nghiệp Environment Variables giải nén Google Workspace G Suite hosting ioncube khôi phục mật khẩu linux nginx nmap nodejs npm Office 365 OneDrive Outlook out of memory path Paypal phpmyadmin SMTP. GMail SSH sudo swap Symbolic Link tar tar.gz thông báo tên miền tên miền ubuntu user whois WooCommerce WordPress wordpress cơ bản wp rocket Zimbra
  • Về minhduy.vn
  • Đăng ký Hosting
  • Thiết kế Website
  • Khuyến mãi HOT

Copyright © 2021 Hướng dẫn Minh Duy Solutions

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist

×
    No Result
    View All Result
    • Trang chủ
    • Hosting
      • Hướng dẫn Hosting cPanel
      • Hướng dẫn Hosting DirectAdmin
    • Tên miền
    • Website
      • Hướng dẫn WordPress
      • Hướng dẫn Webmaster
    • Email Doanh Nghiệp
      • Office 365
      • Google Work Space
      • Email Zimbra
    • VPS – Máy chủ
      • Hướng dẫn Linux
      • Hướng dẫn DirectAdmin
    • Hướng dẫn chung
    • Góc ICT

    Copyright © 2021 Hướng dẫn Minh Duy Solutions