Theme Customizer, tạo trường tùy chọn trong Tùy Biến WordPress

Tạo trường tùy chọn trong Tùy Biến theme WordPress khá tương tự với phần tạo vùng tùy chọn widget cho theme WordPress. Tuy nhiên trường trong phần Tùy Biến có thể gọi là nâng nao hơn. Bởi nó hạn chế việc nhập, tùy biến mà phải tuân theo một số điều kiện nhất định.

Bài viết này sẽ hướng dẫn và giải thích với các bạn về Tạo trường tùy chọn trong Tùy Biến theme WordPress.

Ví dụ thực tế và phân tích

Tạo file customizer

Trước hết bạn hãy vào thư mục theme mà bạn đang sử dụng. Và tạo một file có tên tùy chọn. Ở đây mình lấy demo là: inc/customizer.php

customizer.php file
customizer.php file

Sau khi tạo file customizer.php với code như trên. Bạn hãy vào file function và gọi nó ra:

Vây tại sao không viết luôn tại file function?

Việc chia ra một file khác sẽ giúp cho việc quản trị đơn giản hơn, đỡ bị rối rắm. Người ta thường có câu “Chia để trị” là lý do này.

Vào phần Tùy biến theme bạn sẽ được:

Admin
Admin

Đây chính là kết quả. Tuyệt chứ?

Kết quả của Tùy biến
Kết quả của Tùy biến

Nhưng vẫn còn một bước nữa!

Đó là show ra

Ở đây ‘heading-1’ chính là id mà cài cho từng trường ở bước bên trên và ‘Tiêu đề mặc định’ là giá trị mặc định khi chưa được set, chỉnh gì.

id của trường
id của trường

Ngoài ra, Customizer cho Hình Ảnh!

Ngoài ra dưới đây là phần code customizer cho image, hình ảnh trong WordPress, bạn có thể nhìn tại ảnh dưới đây:

Customizer cho Hình ảnh
Customizer cho Hình ảnh

Và đây là code tổng cho phần Customizer hình ảnh WordPress này!

Bạn có thể copy code này vào ngay file functions để test. Với câu lệnh để xuất ra dạng if else là:

Mở rộng

Mở rộng ra với việc tạo độ sâu cho menu như ví dụ dưới đây

Customizer với 3 nấc - sâu
Customizer với 3 nấc – sâu

Bạn có thể tham khảo code từ: https://gist.github.com/OriginalEXE/9a6183e09f4cae2f30b006232bb154af

Phần code tham khảo này cho phép bạn tạo đến 4, 5 nấc – sâu. Nó sử dụng kèm theo đó là js và css. Tuy nhiên cũng không phức tạp lắm để tùy chỉnh lại theo ý mình. Bạn hãy tham khảo và vọc code trên nhé.

Kết

Hi vọng bài hướng dẫn Tạo trường tùy chọn trong Tùy Biến theme WordPress này sẽ có ích với bạn.

Để lại comment cho mình biết ý kiến của bạn nhé.

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: