Hướng dẫn code tạo slider trong WordPress từ A-Z và mục tùy chỉnh chuyên nghiệp trong quản trị admin với Redux Framework.
1. Code tạo slider trong wordpress admin
Trước khi bắt đầu, bạn cần cài đặt Redux Framework theo hướng dẫn trong bài: Tạo theme options WordPress bằng Redux framework mới nhất. Mình đã sử dụng nhiều cách khác nhau để code tạo slider trong suốt hơn 10 năm làm developer, tuy nhiên để hướng dẫn các bạn, mình chọn Redux vì nó tạo ra mục quản lý rất chuyên nghiệp trong quản trị, lại rất dễ hiểu để code hiển thị ngoài frontend.
Mình sử dụng option slides của Redux, đây là chức năng cho phép bạn quản lý các hình ảnh trình chiếu với 4 thuộc tính chính: 1 trường upload hình ảnh, 1 trường tiêu đề, 1 trường mô tả và 1 trường url liên kết. Như vậy là đủ với template đang xây dựng của mình.
Bạn cũng có thể sử dụng thêm chức năng Slider để khách hàng có thêm các options cấu hình chuyên nghiệp hơn cho slide như chiều rộng, tốc độ trượt ảnh,… Sau đây là code tạo slider trong WordPress của mình:
$section = array(
'title' => esc_html__( 'Quản lý Slides', 'webshop' ),
'desc' => esc_html__( 'Drag and drop to reposition images slides. ', 'webshop' ),
'id' => 'ws_slides',
'icon' => 'el el-picture',
'fields' => array(
array(
'id' => 'slides-home',
'type' => 'slides',
'title' => esc_html__('Slides trang chủ', 'webshop'),
'desc' => esc_html__('Title: Advertisement name - Description: Detailed description of the advertisement - URL: Link to product page, category or partner website', 'eshopper')
)
// Thêm tùy chọn khác ở đây
),
);
Redux::set_section( $opt_name, $section );Giải thích đoạn code tạo trình quản lý slider trong WordPress:
'title' => esc_html__( 'Quản lý Slides', 'webshop' ): Đây là tiêu đề của phần tùy chọn. Nó sẽ được hiển thị trong giao diện quản lý tùy chọn để quản trị web xác định chức năng này dùng để cấu hình slider của theme. Bên trong mục này bạn có thể tạo nhiều options khác, ví dụ Slider logo các đối tác dưới chân trang web.'desc' => esc_html__( 'Drag and drop to reposition images slides.', 'webshop' ): Đây là mô tả cho phần tùy chọn, hiển thị phía dưới tiêu đề trong giao diện quản lý tùy chọn. Mô tả này mình giải thích cho quản trị web biết chức năng của phần tùy chọn “Slides Home” có thể kéo và thả để thay đổi vị trí của các hình ảnh trên slider.'id' => 'ws_slides': Đây là ID của phần tùy chọn. ID này là duy nhất và được sử dụng để xác định option Slider khi bạn muốn code hiển thị nó ra giao diện frontend.'icon' => 'el el-picture': Đây là lớp CSS của biểu tượng (icon) được sử dụng để hiển thị biểu tượng cho phần tùy chọn quản lý slides trong giao diện Theme Options đã được thiết lập.'fields' => array(...): Đây là một mảng chứa các tùy chọn cụ thể trong phần “Quản lý Slides”. Trong đoạn mã, chỉ có một tùy chọn duy nhất có kiểu là'slides'mình dùng để nhập các hình ảnh slide cho trang chủ. Nếu muốn tạo thêm phần đối tác, bạn chỉ cần copy mục này và tạo id, title, des mới vào phần mình đánh dấu// Thêm tùy chọn khác ở đây.Redux::set_section( $opt_name, $section );: Đoạn mã cuối cùng này sử dụng phương thứcset_section()của Redux Framework để định nghĩa một phần tùy chọn. Biến$opt_nameđược sử dụng để xác định tên của trang quản lý tùy chọn (Options Themes) mà phần này thuộc về. Biến$sectionchứa thông tin của phần tùy chọn định nghĩa ở trên.
2. Code hiển thị slider ra vị trí mong muốn
Sau khi hoàn thành việc code tạo slider trong wordpress admin, việc tiếp theo là hiển thị nó ra frontend tại bất kỳ vị trí nào bạn mong muốn.
Để tạo slider trong wordpress đúng như thiết kế, bạn cần phân tích HTML để tìm hiểu cách slider của bạn hiển thị. Đây là cấu trúc HTML phần slider dự án mình đang xây dựng:
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="height: 410px;">
<img class="img-fluid" src="wp-content/themes/webshop/assets/img/carousel-1.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 700px;">
<h4 class="text-light text-uppercase font-weight-medium mb-3">10% Off Your First Order</h4>
<h3 class="display-4 text-white font-weight-semi-bold mb-4">Fashionable Dress</h3>
<a href="" class="btn btn-light py-2 px-3">Shop Now</a>
</div>
</div>
</div>
<div class="carousel-item" style="height: 410px;">
<img class="img-fluid" src="wp-content/themes/webshop/assets/img/carousel-2.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 700px;">
<h4 class="text-light text-uppercase font-weight-medium mb-3">10% Off Your First Order</h4>
<h3 class="display-4 text-white font-weight-semi-bold mb-4">Reasonable Price</h3>
<a href="" class="btn btn-light py-2 px-3">Shop Now</a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#header-carousel" data-slide="prev">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a class="carousel-control-next" href="#header-carousel" data-slide="next">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div>Phân tích đoạn mã HTML trên, chúng ta thấy rằng slider này đang có 2 hình ảnh với toàn bộ thông tin được chứa trong 2 div có class="carousel-item". Nghĩa là nếu muốn thêm hình ảnh khác cho slider, chỉnh cần nhân số lượng div này lên là được.
2 div trên chỉ khác nhau đúng 1 class là active, class này xác định hình ảnh nào đang được hiển thị và nó được điều khiển bởi thư viện Jquery của template. Mỗi lần ấn vào 1 trong 2 nút bấm next và prev thì class active này sẽ tự động nhảy sang div carousel-item chứa hình ảnh đang hiển thị. Vì vậy, khi code, bắt buộc bạn cần phải code class active này cho div chứa hình ảnh đầu tiên. Toàn bộ code của mình như sau:
<?php global $ws_options; ?>
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<?php $i=0 ?>
<?php foreach( $ws_options['slides-home'] as $slide ): ?>
<?php
$img_src = $slide['image'];
$img_title = $slide['title'];
$img_description = $slide['description'];
$img_url = $slide['url'];
$img_alt = get_post_meta($slide['attachment_id'], '_wp_attachment_image_alt', true );
?>
<div class="carousel-item <?php echo ($i==0) ? 'active' : '' ?>" style="height: 420px;">
<img class="img-fluid" src="<?php echo $img_src; ?>" alt="<?php echo $img_alt ?>">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 700px;">
<h4 class="text-light text-uppercase font-weight-medium mb-3"><?php echo $img_description; ?></h4>
<h3 class="display-4 text-white font-weight-semi-bold mb-4"><?php echo $img_title; ?></h3>
<a href="<?php echo $img_url ?>" class="btn btn-light py-2 px-3"><?php printf(__('Shop Now'), 'eshopper') ?></a>
</div>
</div>
</div>
<?php $i++; ?>
<?php endforeach; ?>
</div>
<a class="carousel-control-prev" href="#header-carousel" data-slide="prev">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a class="carousel-control-next" href="#header-carousel" data-slide="next">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div>Giải thích đoạn code tạo slider trong WordPress trên:
<?php global $ws_options; ?>: Dòng này định nghĩa biến toàn cục$ws_options, cho phép bạn truy cập vào dữ liệu của biến này từ bất kỳ đâu trong mã PHP của trang web. Biến này được tạo khi bạn tạo Theme Options.<?php foreach( $ws_options['slides-home'] as $slide ): ?>: Đây là một vòng lặp foreach để lặp qua các slide trong mảng$ws_options['slides-home']được tạo ở trên.- Phần code trong vòng lặp
foreach: Mỗi lần lặp, dữ liệu của slide được lưu trữ trong các biến$img_src,$img_title,$img_description,$img_url,$img_alt. Đây là thông tin về ảnh, tiêu đề, mô tả, URL và thuộc tính alt của ảnh trong slide. <div class="carousel-item <?php echo ($i==0) ? 'active' : '' ?>" style="height: 420px;">: Đây là phần tử<div>đại diện cho một slide trong carousel. Nếu biến$icó giá trị 0 (đang ở slide đầu tiên), thì lớp"active"được thêm vào để xác định slide đầu tiên được hiển thị khi trang web tải lên.<?php $i++; ?>: Dòng này tăng giá trị của biến$ilên một sau mỗi lần lặp, để xác định slide tiếp theo sẽ được hiển thị (slide tiếp theo sẽ có$ikhác 0, do đó sẽ không có classactive). Tại một thời điểm chỉ có một hình ảnh được hiển thị, do đó luôn chỉ có 1 classactivetrong toàn bộ Slider.- Hai phần tử
<a>bên dưới (control-prev và control-next) sẽ thực hiện chuyển đổi giữa các slide khi người dùng nhấp vào các nút này.
Mỗi template sẽ sử dụng HTML và thư viện Jquery khác nhau để hiển thị slider, do đó, quan trọng là bạn hiểu được cách mình code để lấy thông tin từ option Slide Homes bên trên, từ đó tự code tạo slider trong WordPress của riêng bạn.
Tổng kết
Có vấn đề gì khi code tạo slider trong WordPress, bạn cứ bình luận ở bên dưới để mình và team dev hỗ trợ nhé.
Xem series bài viết: Lập trình WordPress
Trong đoạn code trên, mình không kiểm tra xem Redux đã được kích hoạt chưa. Nếu Redux được bạn nhúng trực tiếp vào theme thì không cần code kiểm tra. Còn trường hợp bạn để người dùng tự cài Redux ở mục Plugins thì nên có một đoạn if else để kiểm tra như bài Tạo Option thay đổi logo trong WordPress và yêu cầu người dùng kích hoạt plugin Redux để có thể tạo slider cho website.
