15. Sử dụng WordPress Setting API toàn tập – P2
Như vậy sau khi kết thúc bài Sử dụng WordPress Settings API toàn tập – P1 thì trong bài hôm nay chúng ta sẽ tiếp tục tìm hiểu các phương thức còn lại của Setting API, nội dung trong bài sẽ hướng dẫn bạn tạo ra các phần tử form để nhập liệu, sau khi nhập liệu sẽ xử lý và đưa dữ liệu vào database. Ở bài Sử dụng WordPress Setting API toàn tập – P2 thì bạn sẽ hiểu thêm một số phương thức cũng như cách xử lý dữ liệu từ form và lưu vào database.
Kết thúc bài trước thì bạn đã biết cách tạo ra một phân đoạn nằm trong vùng nhập liệu của form, kế tiếp tôi & bạn sẽ tìm hiểu cách tạo ra các phần tử bẻn trong form, nếu đây đơn thuần là html thông thường thì nó đơn giản, nhưng tôi muốn nhấn mạnh với bạn rằng, chúng ta đang làm việc trên hệ thống của WordPress, mà muốn nhập liệu vào form rồi gửi dữ liệu sang page options.php xử lý để lưu vào database thì bạn cần phải tuân thủ một số quy tắc mà WordPress đặt ra. Do đó bạn cần phải sử dụng thêm các phương thức khác thuộc nhóm Setting API để đạt đúng chuẩn quy tắc nhập liệu của WordPress.
1/ Phương thức add_settings_field()
Phương thức này giúp bạn tạo ra các phần tử của form, nó bao gồm tất cả là 6 tham số , nhưng bạn chỉ cần quan tâm tới 5 tham số sau là đủ rồi.
Cú pháp:
1
add_settings_field($id, $title, $callback, $page, $section, $args);
Tham số:
· $id: Giá trị của thuộc tính id trong phần tử HTML.
· $title: Tiêu đề của phần tử.
· $callback: Hàm callback sử dụng tạo ra phần tử HTML
· $section : ID của section mà để gán phần tử form vào
· $page : Tên page hoặc menu slug của trang
Tôi sẽ tạo ra một phần tử texbox trong form dùng để nhập tiêu đề website.
1
2
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug);
Ở tham số đầu tiên là ID của phần tử form tôi truyền vào giá trị là lionel_new_title, ở tham số thứ hai là tên label hiển thị trong form, tham số thứ ba là phương thức dùng để xử lý khởi tạo textbox, tham số thứ tư là nơi hiển thị phần tử của form trên page nào.
Nội dung file backend.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
5
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
public function __construct(){
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug);
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting(){
}
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]" value=" />';
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Tội tạo mới phương thức new_title_input() để thể hiện đoạn code hiển thị textbox, vậy ở đây bạn chỉ cần chú ý phần khai báo name=”lionel_option[lionel_new_title], bạn cần phải kết hợp với tham số thứ hai ở phương thức register_setting(), và tham số đầu tiên của phương thức add_settings_field().
Do bạn cần phải xác định vị trí textbox hiển thị ở phân đoạn section nào , để tiện khai báo và tái sử dụng thì bạn tạo biến $mainSection = ‘lionel_main_section’ , biến này sẽ là tham số thứ năm được truyền vào trong phương thức đang làm việc.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
public function __construct(){
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
$mainSection = 'lionel_main_section';
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug, $mainSection);
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting(){
}
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]" value="" />';
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Sau khi đã tạo xong một texbox và hiển thị nó ở khu vực section được chỉ định, thì lúc này tôi sẽ tạo thêm một texbox nửa, và tôi có đoạn code xử lý như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
public function __construct(){
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
$mainSection = 'lionel_main_section';
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
$extSection = 'lionel_ext_section';
add_settings_section('lionel_ext_section', 'Slogan', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug, $mainSection);
add_settings_field('lionel_new_slogan','
Slogan Title', array($this, 'new_slogan_input'), $this->_menuSlug, $extSection);
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting(){
}
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]" value="" />';
}
//=====================================================
// Phương thức new_slogan_input
//=====================================================
public function new_slogan_input(){
echo '<input type="text" name="lionel_option[lionel_new_slogan]" value="" />';
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Textbox mà tôi vừa tạo thêm có hiển thị là Slogan, nó nằm trong khu vực section mới có tên là Slogan. Bạn quay lại trình duyệt truy cập vào link http://localhost/wordpress/wp-admin/admin.php?page=lionel-my-setting để xem kết quả.
lionel-add-setting-field
Page Lionel Setting đã hiển thị ra 2 ô textbox và hiển thị ở hai vị trí phân đoạn section khác nhau. Khi bạn dùng phương thức add_settings_field() để khởi tạo ra các phần tử form thì hệ thống WordPress sẽ tự động bao bọc các phần tử đó trong cặp thẻ table.
Vấn đề lúc này, để lưu dữ liệu vào database thì bạn cần có một nút nhấn submit giống như ở các page khác, vậy thì tạo ra nó có khó không ? câu trả lời là khai báo phần hiển thị nút nhấn html ở file setting-page.php.
1
2
3
4
5
6
7
8
9
10
11
<div class="wrap">
<h2>My Setting page</h2>
<p>Đây là trang thiết lập cấu hình plugin Lionel Setting</p>
<form method="post" action="options.php" id="lionel_setting_form" enctype="multipart/form-data" >
<?php settings_fields('lionel_setting_options'); ?>
<?php do_settings_sections($this->_menuSlug); ?>
<p class="submit">
<input type="submit" name="submit" class="button button-primary" value="Save Changes">
</p>
</form>
</div>
Để tạo ra các nút nhấn có phần hiển thị giống với các page khác thì cách nhanh nhất là bạn F12 view đến nút nhấn đó rồi copy code html rồi paste vào sử dụng là được, do phần này khá đơn giản nên tôi sẽ không giải thích.
# Phương thức validate_setting():
Kế tiếp là phần xử lý dữ liệu để lưu vào database, lúc này bạn sẽ bắt đầu làm việc với phương thức validate_setting(), nó sẽ giúp bạn kiểm soát dữ liệu truyền vào trước khi bạn tiến hành lưu nó vào database.
Nếu bạn muốn lấy được dữ liệu thì cần có một tham số được truyền vào, tham số này chính là tham số chứa dữ liệu của [lionel_new_title], [lionel_new_slogan] ở textbox, bạn có thể truyền tham số vào phương thức với tên biến bất kì mà bạn muốn, tôi sẽ đặt là $data_input.
Để kiểm tra thì bạn cần in cái biến $data_input xem bạn nhận được dữ liệu gì sau khi nhập liệu trong form và nhấn nút Save changes.
1
2
3
4
5
6
7
8
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting($data_input){
echo '<pre>';
print_r($data_input);
echo '</pre>';
}
Tôi F5 trình duyệt và tiến hành nhập liệu bất cứ giá trị nào vào 2 ô texbox, sau đó nhấn nút để quá trình xử lý dữ liệu được khởi tạo và trình duyệt sẽ tự động F5 lại page cho bạn.
http://localhost/wordpress/wp-admin/admin.php?page=lionel-my-setting&settings-updated=true
Lúc này bạn sẽ thấy đường dẫn của bạn đã được nối thêm một giá trị là settings-updated=true, có nghĩa là đã cập nhật rồi, nhưng với cách này thì làm sao bạn thấy được dữ liệu gửi qua như thế nào. Do đó ngay phía dưới chỗ bạn in $data_input bạn sử dụng phương thức die() dừng xử lý code sau khi in dữ liệu ra và không lưu dữ liệu vào database.
lionel-validate_setting_api
Sau khi tôi nhập liệu xong và bấm nút lưu lại thì do tác dụng của phương thức die() nên bạn có thể thấy rằng nó gửi dữ liệu sang page options.php, dữ liệu hiện tại thuộc dạng array(mảng), phần tử đầu tiên chứa giá trị mà tôi nhập vào textbox thứ nhất, phần tử thứ hai chứa giá trị mà tôi nhập vào textbox thứ hai.
Vấn đề bây giờ bạn cần giải quyết là làm thế nào để lưu 2 giá trị này vào field lionel_option trong table wp_options ? Vì lúc nãy bạn đã nhấn nút để lưu dữ liệu nên nó đã tạo ra field lionel_option rồi, nhưng giá trị ở cột option_name là rỗng, vì dữ liệu bạn thêm vào vẫn chưa được xử lý để lưu vào.
Để lưu được dữ liệu thì khá là đơn giản, bạn chỉ cần return $data_input để nó nhận các kết quả trả về.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
public function __construct(){
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
$mainSection = 'lionel_main_section';
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
$extSection = 'lionel_ext_section';
add_settings_section('lionel_ext_section', 'Slogan', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug, $mainSection);
add_settings_field('lionel_new_slogan','
Slogan Title', array($this, 'new_slogan_input'), $this->_menuSlug, $extSection);
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting($data_input){
return $data_input;
}
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]" value="" />';
}
//=====================================================
// Phương thức new_slogan_input
//=====================================================
public function new_slogan_input(){
echo '<input type="text" name="lionel_option[lionel_new_slogan]" value="" />';
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Tôi quay lại trang lúc nãy bấm F5 và nhập liệu các giá trị vào, bấm nút save changes để kết thúc quá trình lưu dữ liệu vào database. Bạn kiểm tra bằng cách truy cập vào phpmyadmin tìm đến table wp_options xem kết quả có giống hình không nhen.
lionel-validate-setting-run
Tên của 2 field mà bạn khai báo ở trên đã được thêm vào database và nó ứng với giá trị mà bạn đã khai báo ở textbox. Vậy là bạn đã lưu được dữ liệu vào trong table wp_options, vậy giờ lấy giá trị của nó ra và hiển thị giá trị vào các ô textbox? Chắc hẳn bạn còn nhớ một phương thức thuộc nhóm Options API mà tôi đã trình bày ở các bài trước, nó cung cấp cho bạn một phương thức get_option(), giúp bạn lấy ra bất cứ giá trị của filed nào mà bạn đã chỉ định.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
private $_setting_option;
public function __construct(){
//=====================================================
// Biến toàn cục $_setting_option giúp bạn lấy ra các giá trị trong field lionel_option
//=====================================================
$this->_setting_option = get_option('lionel_option', array());
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
$mainSection = 'lionel_main_section';
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
$extSection = 'lionel_ext_section';
add_settings_section('lionel_ext_section', 'Slogan', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'new_title_input'), $this->_menuSlug, $mainSection);
add_settings_field('lionel_new_slogan','
Slogan Title', array($this, 'new_slogan_input'), $this->_menuSlug, $extSection);
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting($data_input){
return $data_input;
}
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]" value="" />';
}
//=====================================================
// Phương thức new_slogan_input
//=====================================================
public function new_slogan_input(){
echo '<input type="text" name="lionel_option[lionel_new_slogan]" value="" />';
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Bạn cần khởi tạo một biến toàn cục mới có tên là $_setting_option , biến toàn cục này sẽ hứng giá trị mà phương thức get_option() mang lại. Do bạn cần lấy ra các giá trị bên trong field lionel_option thì ở tham số đầu tiên bạn điền vào là lionel_option, tham số thứ hai có giá trị là mảng nên bạn cần khai báo cho nó sẵn một array rỗng.
Để lấy ra được giá trị thì ở hai phương thức new_title_input(), new_slogan_input(), phần value bạn sẽ bắt đầu sử dụng tới nó, ngay tại đó bạn khai báo như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//=====================================================
// Phương thức new_title_input
//=====================================================
public function new_title_input(){
echo '<input type="text" name="lionel_option[lionel_new_title]"
value="'.$this->_setting_option['lionel_new_title'].'" />';
}
//=====================================================
// Phương thức new_slogan_input
//=====================================================
public function new_slogan_input(){
echo '<input type="text" name="lionel_option[lionel_new_slogan]"
value="'.$this->_setting_option['lionel_new_slogan'].'" />';
}
Thuộc tính $this->_setting_option[”] sẽ có một array chính là tham số đầu tiên của phương thức add_settings_field() , là tên id mà bạn đã khai báo.
Để kiểm tra , thì bạn cần phải F5 trình duyệt xem kết quả là 2 ô textbox có chứa giá trị mà bạn vừa nhập liệu vào database, có giữ lại giá trị mà bạn vừa truyền vào không.
lionel-get-option-api-field-lionel-option
Bạn có thể kiểm tra thêm bằng cách nhập giá trị mới xem textbox có giữ lại giá mới hay không. nếu textbox hiển thị dữ liệu mới thì bạn đã lưu dữ liệu vào database thành công rồi đấy.
4/ Phương thức add_settings_error()
Phương thức giúp bạn hiển thị các thông báo lỗi nhập liệu và khi cập nhật dữ liệu thành công, nó bao gồm 4 tham số.
Cú pháp:
1
add_settings_error($setting, $code, $message, $type);
Tham số:
· $setting: menu slug của trang.
· $code: Giá trị này sẽ kết hợp với chuỗi ‘setting-error-‘ để tạo ra thuộc tính id trong mã HTML.
· $message: Chuỗi thông báo lỗi
· $type: Kiểu thông báo, có 2 giá trị error và updated
Lúc này tôi sẽ kiểm tra hai textbox với điều kiện chỉ cho phép nhập liệu với giá trị tối đa là 20 ký tự, nếu vượt quá số ký tự thì sẽ hiển thị thông báo lỗi.
Để kiểm tra độ dài của ký tự thì bạn cần phải tạo ra một phương thức xử lý vấn đề này như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
//===============================================
//Kiem tra chieu chieu dai cua chuoi
//===============================================
private function stringMaxValidate($val, $max){
$flag = false;
$str = trim($val);
if(strlen($str) <= $max){
$flag = true;
}
return $flag;
}
Kế tiếp do giá trị thông báo lỗi trong WordPress có kiểu dữ liệu là array nên tôi sẽ khởi tạo biến $errors = array(), tức là mặc định giá trị sẽ là môt array rỗng.
Để tối ưu code hơn, tôi sẽ gộp 2 textbox kia thành 1 phương thức duy nhất và xác định chúng bằng tham số thứ 6 trong phương thức add_settings_field().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?php
class LionelBackend {
private $_menuSlug = 'lionel-my-setting';
private $_setting_option;
public function __construct(){
//=====================================================
// Biến toàn cục $_setting_option giúp bạn lấy ra các giá trị trong field lionel_option
//=====================================================
$this->_setting_option = get_option('lionel_option', array());
//=====================================================
// Gọi Hook admin_menu xử lý và khởi tạo menu mới
//=====================================================
add_action('admin_menu', array($this, 'settingMenu'));
//=====================================================
// Gọi Hook admin_init để khởi tạo và xử lý phương thức
//=====================================================
add_action('admin_init', array($this, 'register_setting_and_field'));
}
//=====================================================
// Phương thức register_setting_and_field
//=====================================================
public function register_setting_and_field(){
register_setting(
'lionel_setting_options',
'lionel_option',
array($this, 'validate_setting')
);
$mainSection = 'lionel_main_section';
add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);
$extSection = 'lionel_ext_section';
add_settings_section('lionel_ext_section', 'Slogan', '', $this->_menuSlug);
add_settings_field('lionel_new_title','
Site Title', array($this, 'create_form'), $this->_menuSlug, $mainSection, array('name'=>'new_title_input'));
add_settings_field('lionel_new_slogan','
Slogan Title', array($this, 'create_form'), $this->_menuSlug, $extSection, array('name'=>'new_slogan_input'));
}
public function create_form($args){
if($args['name']== 'new_title_input'){
echo '<input type="text" name="lionel_option[lionel_new_title]"
value="' . $this->_setting_option['lionel_new_title'] . '"/>';
echo '<p class="description">Nhập vào một chuỗi không quá 20 ký tự</p>';
}
if($args['name']== 'new_slogan_input'){
echo '<input type="text" name="lionel_option[lionel_new_slogan]"
value="' . $this->_setting_option['lionel_new_slogan'] . '"/>';
echo '<p class="description">Nhập vào một chuỗi không quá 20 ký tự</p>';
}
}
//=====================================================
// Phương thức validate_setting
//=====================================================
public function validate_setting($data_input){
$errors = array();
if($this->stringMaxValidate($data_input['lionel_new_title'], 20) == false){
$errors['lionel_new_title'] = "Tiêu đề quá số ký tự cho phép";
}
if($this->stringMaxValidate($data_input['lionel_new_slogan'], 20) == false){
$errors['lionel_new_slogan'] = "Slogan quá số ký tự cho phép";
}
// Nếu $errors lớn hơn 0 tức là xảy ra lỗi.
if(count($errors)>0){
$data_input = $this->_setting_options;
$strErrors = '';
foreach ($errors as $key => $val){
$strErrors .= $val . '<br/>';
}
//die();
// Xuất ra thông báo lỗi khi xảy ra lỗi
add_settings_error($this->_menuSlug, 'my-setting', $strErrors,'error');
}else{
// Xuất ra thông báo thành công
add_settings_error($this->_menuSlug, 'my-setting', 'Cap nhat du lieu thanh cong','updated');
}
//die();
return $data_input;
}
//=====================================================
// Kiểm tra độ dài ký tự
//=====================================================
private function stringMaxValidate($val, $max){
$flag = false;
$str = trim($val);
if(strlen($str) <= $max){
$flag = true;
}
return $flag;
}
//=====================================================
// Phương thức settingMenu (Khởi tạo menu Lionel Setting)
//=====================================================
public function settingMenu(){
add_menu_page(
'My Setting Page',
'Lionel Setting',
'manage_options'
,$this->_menuSlug,
array($this, 'settingPage')
);
}
//=====================================================
// Phương thức settingPage gọi tới views hiển thị nội dung
//=====================================================
public function settingPage(){
require_once LIONEL_SETTING_VIEWS_DIR . '/setting-page.php';
}
}
Để hiển thị thông báo lỗi thì trong file setting-page.php bạn sẽ phải gọi thêm phương thức settings_errors( $this->_menuSlug, false, false ), false để hiển thị cả phần error lẫn phần update.
1
2
3
4
5
6
7
8
9
10
11
12
<div class="wrap">
<h2>My Setting page</h2>
<?php settings_errors( $this->_menuSlug, false, false );?>
<p>Đây là trang thiết lập cấu hình plugin Lionel Setting</p>
<form method="post" action="options.php" id="lionel_setting_form" enctype="multipart/form-data" >
<?php settings_fields('lionel_setting_options'); ?>
<?php do_settings_sections($this->_menuSlug); ?>
<p class="submit">
<input type="submit" name="submit" class="button button-primary" value="Save Changes">
</p>
</form>
</div>
Bây giờ nếu cập nhật thành công sẽ có thông báo trả về, và dữ liệu không được lưu vào database. Còn lại nếu dữ liệu nhập vào hợp lệ thì trình duyêt sẽ thông báo “Cap nhat du lieu thanh cong”.
5/ Kết bài
Hy vọng thông qua bài Sử dụng WordPress Setting API toàn tập – P2 thì bạn đã hiểu rõ quy tắc nhập liệu từ form để lưu dữ liệu vào database do WordPress đề ra nó phức tạp như thế nào. Tuy nhiên đây vẫn chưa được gọi là vấn đề khó nhất, con đường chinh phục WordPress còn rất dài, bạn nên chuẩn bị sẵn tâm lý mà đón nhận những vấn đề khó hơn ở căc bài kế tiếp.
Series Navigation<< Sử dụng WordPress Setting API toàn tập – P1Khái niệm về WordPress Widget API >>
Nguồn: laptrinhweb.org
Xem thêm ví dụ 1:
https://gist.github.com/DavidWells/4653358
Xem thêm ví dụ 2:
https://wordpress.stackexchange.com/questions/261560/adding-an-html-editor-to-plugin-settings-page
Xem thêm ví dụ 3:
Last updated
Was this helpful?
