Tạo theme options page trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Tạo theme options page trong wordpress

Theme option cấp phép bạn lưu các cài đặt cần thiết của theme như logo, mầu sắc, thông tin header, footer…Ở bài viết trước mình liệt kê 1 loại những theme option framework đầy sức mạnh để thiết kế wordpress theme. Tuy nhiên bạn cũng có thể có thể tạo riêng theme option đơn giản phục vụ cho nhu cầu bình dân của bạn.
option theme

Hướng dẫn cơ bản

Chép code sau vào functions.php.

 add_action( 'admin_init', 'register_settings' ); function register_settings(){ //đăng ký các fields settings register_setting( 'my-settings-group', 'phone' ); register_setting( 'my-settings-group', 'company_address' ); }  

Hàm register_setting dùng để đăng ký options, mọi thứ các options được sử lý trong form cần đăng ký vào 1 nhóm đặt tên tùy ý bạn, mình đặt là “my-settings-group”.

Ví dụ trên dễ dàng là tạo 2 field lưu số điện thoại và địa điểm công ty. Trước hết tạo Menu page để hiển thị form options.

     

– Xem cách tạo Menu Page nếu chưa biết tại đây.

Hiển thị theme option form để lưu thay đổi cài đặt.

     

Theme Settings


<input type="text" name="phone" value=" "/>


Bạn cũng đều có thể tham khảo thêm trên WordPress Codex: http://codex.wordpress.org/Creating_Options_Pages

– Các bạn download code mẫu này ở file đính kèm rồi mở functions.php include nó vào.

 //functions.php ..... include('sample-theme-option-hoangweb.php');  

Hạn chế của cách đây là muốn thêm option khác phải can thiệp vào code. Vậy có cách nào chẳng cần chỉnh sửa code mà thêm động được các options mới không? Bạn xem cách dưới nhé.

Tạo Theme options động (Dynamic theme options)

Mình có tham khảo một vài plugin và custom riêng của mình một bộ code này, các bạn tải ở phía dưới giúp mình ha.

Custom Option Plus

Mình mới tìm ra plugin này cũng tương đối hay, cho các ai không rành về code vẫn cũng có thể tạo được các options riêng của mình. Mặc định plugin custom option plus không bổ trợ TinyMCE để bạn nhập chuỗi HTML, tuy vậy mình có sửa lại đôi chút để tích hợp trình soạn thảo WYSIWYG sử dụng trong plugin.
custom-option-plus
Để lấy một option bạn sử dụng hàm get_custom . VD:

     

Thay ‘name’ với tên option bạn thiết lập vào trường *Name.

Easy Theme Options (Quản lý nhóm Tab Theme options)

Easy Theme Options cung cấp biện pháp khá linh hoạt, tạo theme options với đúng nghĩa của nó như wordpress sử dụng mặc định. Bạn cũng có thể có thể tạo nhiều options và chia vào các nhóm với mục tiêu sử dụng theo ý muốn. Hiện tại để thêm option mới bạn sửa trực diện vào plugin tuy nhiên để cho linh hoạt bạn có thể viết riêng vào từng theme trong file functions.php
Sau khi cài đặt plugin Easy Theme Options, bạn được sử dụng sẵn đầy đặn một số kiểu trường dữ liệu như text input, textarea, password, checkbox, selectBox, radio…
Thiết lập Theme option bạn Truy cập vào Appearance-> Theme Options các options hiển thị như hình dưới đây:
Tạo wordpress theme options
Plugin có chỉ dẫn mở rộng cấp phép lưu thêm options bạn tự định nghĩa. Tạo mới tab và chèn thêm field vào tab bạn đều thi hành trong file options.php

Để tạo một tab bạn khai báo vào biến $eto_custom_tabs , và nhóm các fields vào tab bạn liệt kê vào biến $eto_custom_meta_fields . Ví dụ: mình thêm tab ‘new tab’

 $eto_custom_tabs = array( array( 'label'=>  __('new tab', 'eto'), 'tab1' ) );  

Bạn cũng có thể có thể sửa tiền tố chung cho plugin và cũng chính là tên cho option bởi biến $prefix .

Mỗi tab có id riêng, vì viết chung fields cho những tabs nên các fields của tab bạn cần liệt kê theo thứ tự nằm ở trong tab mở và tab đóng như thế này.

 $eto_custom_meta_fields = array( /* -- TAB 1 -- */ array( 'tab1', // Use data in $eto_custom_tabs 'type' =>  'tab_start' ), /* Your fields here */ ... array( 'type' =>  'tab_end' // Close Tab ) );  

Tạo trường Options

Plugin bổ trợ đầy đặn các trường của form, và trường tùy biến khác tạo bởi plugin như hiển thị label Title.
Title

 array( 'label'=>  'Title', 'title', 'type' =>  'title' ),  

Text input field

 array( 'label'=>  'Text Input', 'desc' =>  'A description for the field.', 'textinput', 'type' =>  'text' ),  

Demo:
easy-theme-options

Password input field

 array( 'label'=>  'Password Input', 'desc' =>  'A description for the field.', 'password', 'type' =>  'password' ),  

Textarea field

 array( 'label'=>  'Textarea', 'desc' =>  'A description for the field.', 'textarea', 'type' =>  'textarea' ),  

Checkbox field

 array( 'label'=>  'Checkbox Input', 'desc' =>  'A description for the field.', 'checkbox', 'type' =>  'checkbox' ),  

Select Box

 array( 'label'=>  'Select Box', 'desc' =>  'A description for the field.', 'select', 'type' =>  'select', 'options' =>  array ( 'one' =>  array ( 'label' =>  'Option One', 'value' =>  'one' ), 'two' =>  array ( 'label' =>  'Option Two', 'value' =>  'two' ), 'three' =>  array ( 'label' =>  'Option Three', 'value' =>  'three' ) ) ),  

Thêm thẻ option cho select mỗi option có chuỗi hiển thị và giá trị của nó, làm như đoạn code trên.
Radio Group

 array ( 'label' =>  'Radio Group', 'desc' =>  'A description for the field.', 'radio', 'type' =>  'radio', 'options' =>  array ( 'one' =>  array ( 'label' =>  'Option One', 'value' =>  'one' ), 'two' =>  array ( 'label' =>  'Option Two', 'value' =>  'two' ), 'three' =>  array ( 'label' =>  'Option Three', 'value' =>  'three' ) ) ),  

Tương tự cách tạo select, thành phần radio có tính năng giống select gồm nhiều giá trị lựa chọn.
Checkbox Group

 array ( 'label' =>  'Checkbox Group', 'desc' =>  'A description for the field.', 'checkbox_group', 'type' =>  'checkbox_group', 'options' =>  array ( 'one' =>  array ( 'label' =>  'Option One', 'value' =>  'one' ), 'two' =>  array ( 'label' =>  'Option Two', 'value' =>  'two' ), 'three' =>  array ( 'label' =>  'Option Three', 'value' =>  'three' ) ) ),  

Nhóm checkbox gồm nhiều checkbox có giá trị gộp chung vào biến lấy kết quả từ form nên có thuộc tính name trùng lặp kiểu giá trị mảng. Kiểm tra thẻ HTML của checkbox group bạn sẽ thấy nội dung kiểu như sau, ví dụ:

                    

Add a Taxonomy list

 array( 'label' =>  'Category', 'category', 'type' =>  'tax_select' )  

Một số kiểu dữ liệu khác

Trường chọn category .

 array( 'label' =>  'Category', 'category', 'type' =>  'tax_select' ),  

Danh sách posts

 array( 'label' =>  'Post List', 'desc' =>  'A description for the field.', 'post_type' =>  'post_list', 'post_type' =>  array('post','page') ),  

Bạn cũng có thể có thể hiển thị thêm post type nếu muốn.
Date Field – chọn ngày tháng

 array( 'label' =>  'Date', 'desc' =>  'A description for the field.', 'date', 'type' =>  'date' ),  

Image Upload – chọn ảnh

 array( 'label' =>  'Image', 'desc' =>  'A description for the field.', 'image', 'type' =>  'image' ),  

Slider Field

 array( 'label' =>  'Slider', 'desc' =>  'A description for the field.', 'slider', 'type' =>  'slider', 'min' =>  '0', 'max' =>  '100', 'step' =>  '5' ),  

Sửa giá trị min-max giới hạn giá trị trong khoảng cho slider.
Color Picker – chọn mầu

 array( 'label' =>  'Color Picker', 'desc' =>  'A description for the field.', 'colorpicker', 'type' =>  'colorpicker' ),  

Ngoài ra, bạn cũng cũng đều có thể định nghĩa kiểu trường riêng, bằng phương pháp thêm vào file includes/eto_functions.php , tìm tên trường có sẵn trong plugin và để bắt chiếc học cách viết.

Lấy giá trị trường Option

Có 2 cách lấy giá trị theme option, do cách lưu dữ liệu mã hóa chung vào chuỗi và toàn bộ dữ liệu options có trong plugin được lưu vào tên option ‘eto_settings’, bạn cũng đều có thể lấy chúng bởi hàm get_option .

 // Easy Theme Options $eto_options = get_option('eto_settings'); global $eto_options;  

Thêm đoạn code trên vào hook wp_head và tạo dữ liệu global bạn cũng có thể có thể trích xuất option từ file theme. Tên option và giá trị chứa trong mảng $eto_options, ví dụ: xác định tên option muốn lấy giá trị.

 echo $eto_options["eto_slogan"]  

Plugin thiết kế thêm tính năng cho bạn import/export dữ liệu options, truy cập Settings-> ETO Import/ Export .
eto-import-export
Copy Chuỗi mã hóa thông tin options tại mục Export Options và copy vào mục trên ‘Import Options’ ở site wordpress có cài plugin này để backup toàn bộ dữ liệu options.

Đối với trường image, plugin có thiết kế hàm riêng giúp bạn hiển thị ảnh hoặc lấy URL ảnh. Cấu trúc:

 eto_image($field_id, $width = '', $height = '')  

Ví dụ: nếu field id = “logo” ta có:

 eto_image('eto_logo')  

Hàm trên echo tag img, nhưng nếu bạn chỉ mong lấy URL ảnh, chúng ta sử dụng hàm eto_get_image .

 echo eto_get_image('eto_logo')  

Shortcode

Một vài shortcode cho bạn chèn linh hoạt vào widget text hay nội dung bài viết. Cú pháp:
[option > . Trong đó: thay ‘field_id’ bởi thuộc tính id bằng id của field bạn sẽ hiển thị nội dung.

Để hiển thị ảnh trực tiếp vào posts/pages bạn dùng shortcode image: [image > .

Để thu được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng đều có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Tạo theme options page trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang