Hướng dẫn chèn custom sliders wp
|
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: Nào chúng ta hãy bắt tay thực hiện 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 PROVà 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 )); } 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. 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 Trong nó ta chọn Add Field ở chỗ Sub Fields tạo ra 2 Field mới: 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 + jsMã html tĩnh: Đối với thư viện OWL các bạn copy code bên dưới như sau:
‘slider_anh’,’option’) ):?> slider_anh’,’option’) ) : the_row(); ?> Ở 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 : |
