Hướng dẫn Customizer của WordPress – Phần 2

Hướng dẫn Customizer của WordPress – Phần 2

Hướng dẫn tạo upload option, color picker option, checklist option dropdown option cho Customizer của WordPress.

Trong phần 1, bạn đã biết được cách tự tạo một option trong Customizer và cách lôi dữ liệu được chọn trong option ra ngoài theme, điều đó có nghĩa là bạn đã nắm được cách thức hoạt động trong Customizer.

Có thể bạn sẽ hỏi là, làm thế nào để tạo một option in các category trong WordPress ra, làm sao để tạo được một cái color picker,….Và đó chính là những gì mà mình sẽ hướng trong phần 2 này.

Các kiểu option đặc biệt

1. Kiểu checkbox

checkbox-customizer
Ảnh. Hướng dẫn Customizer của WordPress – Checkbox Customizer

Kiểu này nghĩa là bạn sẽ có những giá trị thiết lập sẵn, và khi khách chọn vào cái nào thì sẽ chọn giá trị đó.

Đầu tiên ta có code add setting như sau:

Và cuối cùng là code thêm control hiển thị trong customizer.

Bạn có thể thấy, nó chỉ khác đoạn code thêm control như trong phần 1 ta tìm hiểu là tham số type có giá trị là checkbox thay vì là text. Nghĩa là ta có loại option là checkbox.

Thường thì dùng kiểu này ta sẽ không cho nó hiển thị ra ngoài theme mà sẽ sử dụng nó như một điều kiện rẽ nhánh. Tức là nếu tùy chọn được chọn thì nó sẽ có giá trị bằng 1 mà không được trọn thì nó sẽ có giá trị rỗng. Như vậy ta có như sau:

2. Kiểu Radio Checkbox

radio-customizer
Ảnh. Hướng dẫn Customizer của WordPress – Radio Checkbox
Kiểu radio checkbox nghĩa là sẽ có nhiều tùy chọn và bạn chỉ được chọn 1 tùy chọn duy nhất.

Ví dụ mình muốn hỏi khách có muốn hiển thị Logo không thì mình có code tạo option như sau:

Bạn lưu ý trong phần tạo control, mình có type là radio và có thêm một tham số tên là choices. Trong tham số này, giá trị bên trái là giá trị mà nó sẽ lưu vào database và sẽ được gọi ra bằng get_theme_mod (yes, no), còn bên phải là chữ hiển thị tương ứng với giá trị đó trong Customizer (Yes, No).

3. Kiểu dạng Dropdown List

dropdownlist-customizer
Ảnh. Hướng dẫn Customizer của WordPress – Dropdownlist
Kiểu này sẽ có một danh sách với các giá trị có sẵn và chọn một trong các giá trị đó, cách hoạt động tương tự như Radio Checkbox nhưng mà hiển thị gọn gàng hơn.

4. Kiểu Color Picker

color-customizer

Kiểu này sẽ hiển thị ra một bảng tùy chọn mã màu và xuất ra giá trị là mã màu được chọn.

5. Kiểu chọn danh sách Pages

Kiểu này tương tự như kiểu Dropdown List nhưng giá trị của nó là các Pages đang có trong website của bạn và xuất ra giá trị là slug của page đó.

6. Kiểu upload ảnh

upload-customizer

Nó sẽ tạo một form upload ảnh trong Customizer để người dùng có thể upload bất cứ cái gì lên, giá trị sẽ xuất ra là đường dẫn của file được upload lên.

Toàn bộ code trong bài

Lời kết

Trong phần này bạn có thể đã hiểu được thêm một vài loại option khác nữa nhằm sử dụng trong nhiều mục đích khác nhau. Nếu bạn vẫn chưa thỏa mãn được những gì mà WordPress hỗ trợ sẵn, thì trong phần sau mình sẽ hướng dẫn bạn cách tự làm một form option của riêng mình.

WordPress FAQ  » Học WordPress > Lập trình WordPress > WordPress API


 WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress  |  Thuat ngu WordPress    |  Theme WordPress  |  Lap trinh Themes |  Lap trinh plugin

Ảnh. Hướng dẫn Customizer của WordPress – Phần 2
Ảnh. Hướng dẫn Customizer của WordPress – Phần 2

Chia sẻ bài viết

Bình luận