Hi! anh em mình là Thịnh DEV đây đã lâu không viết về lập trình rồi, hôm nay mình rảnh nên thực hành và hướng dẫn luôn anh em cách tạo ra slide cho web wordpress bằng Advanced Custom Fields PRO, bởi gần đây trên mạng nhiều anh em tìm hiểu
Để làm được điều này chúng ta cần:
Plugin Advanced Custom Fields PRO tải tại đây => TẢI VỀ , yên tâm sạch 100%
Javascript/ Framework js. ở đây mình dùng Owlcarousel2, anh em dùng cái nào cũng được nhé Bootstrap cũng được
HTML/CSS cơ bản
PHP cơ bản
Đó là những kiến thức và công cụ để cho chúng ta tạo ra slider nếu các anh em chưa hiểu thì hãy lên google tìm hiểu thêm nhé, ở đây mình chỉ hướng dẫn làm và có code tham khảo :D
Nào chúng ta hãy bắt tay thực hiện
if( function_exists('acf_add_options_page') ) {
acf_add_options_page(array(
'page_title' => 'Slider', // Title hiển thị khi truy cập vào Slider
'menu_title' => 'Slider', // Tên menu hiển thị ở khu vực admin
'menu_slug' => 'theme-settings', // Url hiển thị trên đường dẫn của Slider
'capability' => 'edit_posts',
'redirect' => false
));
}
Vào admin để kiểm tra anh em sẽ thấy xuất hiện menu tùy chỉnh như hình phía dưới!.
Lưu ý nó trắng trơn chưa có gì đâu chỉ có dòng chữ Create a Custom Field Group sau đó anh em click vào dòng chữ ấy để di chuyển và làm việc với Custom Field
Chúng ta bắt đầu thêm group field và thêm các field mong muốn.
Mình sẽ đặt group field là Slider nhé muốn nó hiển thị ở cái Slider mà vừa mình tạo ra thì chúng ta nhìn ở khu vực location các anh em chọn Options Page và lưu lại như hình phía dưới.
Tiếp theo ta thêm các field vào bằng cách + Add Field
Chú ý: chúng ta có thể tạo các nhiều field với Field Type là Image tuy nhiên nó không tối ưu và code nhiều dòng vì Slider thường có nhiều ảnh ví dụ muốn có 10 ảnh chạy thì phải tạo ra nhiều Field và nó sẽ giới hạn việc up ảnh muốn nhiều hơn thì lại phải thêm mới
Thay vào đó chúng ta sử dụng Field Type là Repeater
Trong nó ta chọn Add Field ở chỗ Sub Fields tạo ra 2 Field mới:
+ Image
+ Link
Như ảnh dưới đây:
Sau khi thêm xong chúng ta lưu và vào Slider se thấy hiển thị như hình dươi và ấn vào thêm ảnh + link thôi
Xong bước cấu hình plugin ACF anh em muốn có một slider chạy thì làm sao? ở đây mình sẽ chia làm 2 phần nhé
Mã html tĩnh:
<div id="home" class="slide-anh owl-carousel owl-theme">
<div class="single-hs-item">// các bạn có thể copy 2 cái và thêm ảnh vào chạy thử
<a href="link">
<img src="anh">
</a>
</div>
</div>
Mã css:
.slide-anh {position: relative;}
.owl-carousel .owl-nav button.owl-prev {background-color: #333;position: absolute;left: 0;top: 50%;
color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;}
.owl-carousel .owl-nav button.owl-next {background-color: #333;position: absolute;right: 0;top: 50%;color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;
}
.owl-theme .owl-nav {margin-top: 0;}
.owl-dots {position: absolute;left: 0;right: 0; bottom: 20px;}
.owl-theme .owl-dots .owl-dot span {width: 15px;height: 15px; border-radius: 50%}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #333;}
.single-hs-item img{
width: 100%
}
@media only screen and (max-width: 600px) {
.owl-carousel .owl-nav button.owl-next {
top: auto;
margin: 0;
bottom: 0px;
}
.owl-carousel .owl-nav button.owl-prev {
top: auto;
margin: 0;
bottom: 0px;
}
.owl-dots {
bottom: 10px;
left: 50px;
right: 50px;
}
}
Đối với thư viện OWL các bạn copy code bên dưới như sau:
Bỏ ở header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
Bỏ ở Footer:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.slide-anh').owlCarousel({
loop:true,
margin:0,
padding:0,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:false
},
1000:{
items:1,
nav:true,
dots: true,
loop:false
}
}
})
</script>
2 Get dữ liệu ra bằng PHP
Để get dữ liệu ra chúng ta có code php sau:
Ở đây mình sai Repeater ACF và code thêm cho nó các bạn có thể đọc tài liệu về nó trong plugin ACF để hiểu thêm nhé
Chúng ta có dòng code php như sau:
<div id="home" class="slide-anh owl-carousel owl-theme">
<?php if ( have_rows('slider_anh','option') ):?>
<?php while ( have_rows('slider_anh','option') ) : the_row(); ?>
<div class="single-hs-item">
<?php $image=get_sub_field('image','option'); ?>
<?php $link=get_sub_field('link','option'); ?>
<?php if($image): ?>
<?php if($link): ?>
<a href="<?php echo $link['url']; ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'];?>"></a>
<?php else : ?>
<a href="#"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'];?>"></a>
<?php endif ?>
<?php else : ?>
<p>Chưa cập nhập..</p>
<?php endif ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
Ở code trên mình có thể giải thích như sau
- Chỗ bôi đỏ chính là cái Repeater có Field Name mà mình đã đặt tên ở phần cấu hình ACF
- Chỗ bôi xanh chính là Field Name của sub_field thuộc Repeater trên
- Vòng lặp trên có nghĩa cơ bản la kiểm trả điều kiện các biến trên tồn tại hay không nếu tồn tại thì xuất dữ liệu ra.
Trên đây là tất cả những gì mình hướng dẫn anh em tạo ra slider cho website wordpress bằng ACF. Chúc anh em thành công! Nếu thấy bổ ích hãy truy cập blog của mình thường xuyên mình sẽ có nhiều bài về lập trinh hay nữa :D
Để làm được điều này chúng ta cần:
Plugin Advanced Custom Fields PRO tải tại đây => TẢI VỀ , yên tâm sạch 100%
Javascript/ Framework js. ở đây mình dùng Owlcarousel2, anh em dùng cái nào cũng được nhé Bootstrap cũng được
HTML/CSS cơ bản
PHP cơ bản
Đó là những kiến thức và công cụ để cho chúng ta tạo ra slider nếu các anh em chưa hiểu thì hãy lên google tìm hiểu thêm nhé, ở đây mình chỉ hướng dẫn làm và có code tham khảo :D
Nào chúng ta hãy bắt tay thực hiện
Hướng dẫn tạo slider bằng plugin Advanced Custom Fields PRO chi tiết
Mình sẽ làm theo trình tự từ các kiến thức nên trên để các anh em nắm rõ sử sử dụng Advanced Custom Fields PRO => Javascript/ Framework js => HTML/CSS => get dữ liệu ra bằng PHPĐầu tiên tải và cài plugin Advanced Custom Fields PRO
Và copy đoạn code này dưới đây vào file function.php để tạo ra một option theme lấy tên là slider, cái này tùy anh em đặt nhéif( function_exists('acf_add_options_page') ) {
acf_add_options_page(array(
'page_title' => 'Slider', // Title hiển thị khi truy cập vào Slider
'menu_title' => 'Slider', // Tên menu hiển thị ở khu vực admin
'menu_slug' => 'theme-settings', // Url hiển thị trên đường dẫn của Slider
'capability' => 'edit_posts',
'redirect' => false
));
}
Vào admin để kiểm tra anh em sẽ thấy xuất hiện menu tùy chỉnh như hình phía dưới!.
Chúng ta bắt đầu thêm group field và thêm các field mong muốn.
Mình sẽ đặt group field là Slider nhé muốn nó hiển thị ở cái Slider mà vừa mình tạo ra thì chúng ta nhìn ở khu vực location các anh em chọn Options Page và lưu lại như hình phía dưới.
Tiếp theo ta thêm các field vào bằng cách + Add Field
Chú ý: chúng ta có thể tạo các nhiều field với Field Type là Image tuy nhiên nó không tối ưu và code nhiều dòng vì Slider thường có nhiều ảnh ví dụ muốn có 10 ảnh chạy thì phải tạo ra nhiều Field và nó sẽ giới hạn việc up ảnh muốn nhiều hơn thì lại phải thêm mới
Thay vào đó chúng ta sử dụng Field Type là Repeater
Trong nó ta chọn Add Field ở chỗ Sub Fields tạo ra 2 Field mới:
+ Image
+ Link
Như ảnh dưới đây:
Sau khi thêm xong chúng ta lưu và vào Slider se thấy hiển thị như hình dươi và ấn vào thêm ảnh + link thôi
Xong bước cấu hình plugin ACF anh em muốn có một slider chạy thì làm sao? ở đây mình sẽ chia làm 2 phần nhé
1 Tạo ra slide bằng html css + js
Mã html tĩnh:
<div id="home" class="slide-anh owl-carousel owl-theme">
<div class="single-hs-item">// các bạn có thể copy 2 cái và thêm ảnh vào chạy thử
<a href="link">
<img src="anh">
</a>
</div>
</div>
Mã css:
.slide-anh {position: relative;}
.owl-carousel .owl-nav button.owl-prev {background-color: #333;position: absolute;left: 0;top: 50%;
color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;}
.owl-carousel .owl-nav button.owl-next {background-color: #333;position: absolute;right: 0;top: 50%;color: #fff;font-size: 30px;margin: -40px 0 0;border-radius: 0;height: 50px;width: 50px;
}
.owl-theme .owl-nav {margin-top: 0;}
.owl-dots {position: absolute;left: 0;right: 0; bottom: 20px;}
.owl-theme .owl-dots .owl-dot span {width: 15px;height: 15px; border-radius: 50%}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #333;}
.single-hs-item img{
width: 100%
}
@media only screen and (max-width: 600px) {
.owl-carousel .owl-nav button.owl-next {
top: auto;
margin: 0;
bottom: 0px;
}
.owl-carousel .owl-nav button.owl-prev {
top: auto;
margin: 0;
bottom: 0px;
}
.owl-dots {
bottom: 10px;
left: 50px;
right: 50px;
}
}
Bỏ ở header:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
Bỏ ở Footer:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script>
$('.slide-anh').owlCarousel({
loop:true,
margin:0,
padding:0,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:1,
nav:false
},
1000:{
items:1,
nav:true,
dots: true,
loop:false
}
}
})
</script>
2 Get dữ liệu ra bằng PHP
Để get dữ liệu ra chúng ta có code php sau:
Ở đây mình sai Repeater ACF và code thêm cho nó các bạn có thể đọc tài liệu về nó trong plugin ACF để hiểu thêm nhé
Chúng ta có dòng code php như sau:
<div id="home" class="slide-anh owl-carousel owl-theme">
<?php if ( have_rows('slider_anh','option') ):?>
<?php while ( have_rows('slider_anh','option') ) : the_row(); ?>
<div class="single-hs-item">
<?php $image=get_sub_field('image','option'); ?>
<?php $link=get_sub_field('link','option'); ?>
<?php if($image): ?>
<?php if($link): ?>
<a href="<?php echo $link['url']; ?>"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'];?>"></a>
<?php else : ?>
<a href="#"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'];?>"></a>
<?php endif ?>
<?php else : ?>
<p>Chưa cập nhập..</p>
<?php endif ?>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
</div>
Ở code trên mình có thể giải thích như sau
- Chỗ bôi đỏ chính là cái Repeater có Field Name mà mình đã đặt tên ở phần cấu hình ACF
- Chỗ bôi xanh chính là Field Name của sub_field thuộc Repeater trên
- Vòng lặp trên có nghĩa cơ bản la kiểm trả điều kiện các biến trên tồn tại hay không nếu tồn tại thì xuất dữ liệu ra.
Trên đây là tất cả những gì mình hướng dẫn anh em tạo ra slider cho website wordpress bằng ACF. Chúc anh em thành công! Nếu thấy bổ ích hãy truy cập blog của mình thường xuyên mình sẽ có nhiều bài về lập trinh hay nữa :D
