14. Sử dụng WordPress Setting API toàn tập – P1

Để xây dựng plugin thì bạn cần hội đủ nhiều yếu tố như là siêng năng, chịu khó , nghiên cứu và bên cạnh đó cần phải nhờ tới sự hỗ trợ của các API do hệ thống WordPress cung cấp. Nó là tập hợp các hàm nằm bên trong core của WordPress, hỗ trợ cho bạn rất nhiều thứ trong quá trình viết mới một plugin cũng như kế thừa plugin từ một plugin khác có sẵn. Như vậy ở bài Sử dụng WordPress Options API toàn tập, tôi đã hướng dẫn bạn sử dụng Options API một cách bài bản và chi tiết nhất. Bạn cần phải nắm vững các kiến thức bên trong bài, thì mới theo kịp được bài này vì các API luôn có một mối liên kết với nhau nhất định, chúng xhỗ trợ lẫn nhau để tạo nên sức mạnh cho WordPress. Trong bài Sử dụng WordPress Setting API toàn tập thì bạn sẽ được giới thiệu và học cách sử dụng thêm một API mới.

1/ WordPress Setting API là gì?

Nó là tập hợp các hàm có sẵn trong core của WordPress , Nhiệm vụ của Setting API là cung cấp cho bạn đầy đủ các phương thức cần thiết để tạo ra các phần tử trong form.

Như bạn đã biết thì ở bài trước tôi đã hướng dẫn bạn cách thêm vào csdl, cụ thể là thêm một field mới vào table wp_options, với giá trị là một con số và giá trị cũng có thể là một chuỗi.

Nhưng với cách thức đó bạn chỉ có thể thêm vào những giá trị cố định mà bạn đã trực tiếp khao báo trong plugin mà thôi, một ngày đẹp trời nào đó bạn muốn thay đổi các giá trị đó , thì chẳng lẽ mở source ra sửa trực tiếp trên code hay sao?

Giả sử giờ tôi muốn plugin của tôi có một page để quản lý và chỉnh sửa các giá trị trong plugin thì có làm được hay không ? Câu trả lời là hoàn toàn có thể làm được điều đó rất dễ dàng với sự hỗ trợ của Setting API.

Vậy Setting API có nhiệm vụ gì ? Vâng nó sẽ cung cấp cho bạn các phương thức xử lý dữ liệu từ form trước khi nạp dữ liệu vào table wp_options.

Tóm lại Setting API, là một tập hợp hàm của hệ thông WordPress ,và nó giúp bạn xử lý dữ liệu đưa sang page options,php để xử lý và ràng buộc các điều kiện rồi trả về trang quản lý plugin rồi mới nạp dữ liệu vào table wp_options.

2/ Các phương thức trong WordPress Setting API

Setting API cung cấp cho bạn tất cả là 10 phương thức , và bây giờ việc của bạn & tôi là tìm hiểu từng phương thức để xem cách hoạt động của nó là gì.

Danh sách các phương thức:

· register_setting(): Đăng ký mới một cài đặt và gọi lại các hàm bên trong nó.

· settings_field(): Đăng ký một thiết lập mới ở trong trang quản lý plugin

· add_settings_section(): Tạo ra các phân đoạn cặp thẻ h3 để phân tách dòng trên page.

Do trong bài này tôi chỉ hướng dẫn bạn khai báo và sử dụng 3 phương thức mà tôi vừa nêu ra, nên còn 7 phương thức khác tôi sẽ trình bày ở bài kế tiếp.

3/ Tạo mới Setting Page trong WordPress Admin

Để làm việc với Setting API thì bận cần phải tạo mới một trang quản lý các thiết lập của plugin, cách tạo mới một menu thì tôi đã hướng dẫn ở bài Tạo mới WordPress admin menu page, nếu bạn quên thì có thể xem lại. Do kiến thức đã được học nên tôi sẽ không nhắc lại quá nhiều mong bạn thông cảm.

Nhưng trước khi tạo mới menu Setting Page thì bạn cần tạo mới một cấu trúc plugin như sau.

Cấu trúc plugin

– includes — — frontend.php — — backend.php – views – lionel-setting.php

Đây là cấu trúc folder lionel-setting và plugin có tên mới là Lionel Setting Page.

Nội dung file lionel-setting.php:

<?php

/**

* @package Lionel Setiing Page

* @version 0.1

Plugin Name: Lionel Setting Page

Plugin URI: http://laptrinhweb.org

Description: Đây là một plugin dùng để tương tác vói Setting API.

Author: Lionel

Version: 0.1

Author URI: None

define('LIONEL_SETTING_PLUGIN_URL', plugin_dir_url(__FILE__));

define('LIONEL_SETTING_PLUGIN_DIR', plugin_dir_path(__FILE__));

define('LIONEL_SETTING_INCLUDES_DIR', plugin_dir_path(__FILE__));

if(!is_admin()){

require LIONEL_SETTING_INCLUDES_DIR. 'includes/frontend.php';

new LionelFrontend();

}else{

require LIONEL_SETTING_INCLUDES_DIR. 'includes/backend.php';

new LionelBackend();

}

Trước khi active plugin Lionel Setting Page thì bạn cần phải deactive plugin Lionel Options API Demo, để không gặp phải lỗi trùng class.

Phần này chỉ xử lý trong khu vực admin nên bạn chỉ cần làm việc với file backend.php là đủ rồi.

Đầu tiên bạn cần tạo ra biến toàn cục $_menuSlug do trong ví dụ bạn cần phải sử dụng biến này khá nhiều nên bạn set giá trị mặc định cho nó và đặt ở cơ chế biến toàn cục để có thể gọi tới bất cứ phương thức nào trong class.

Nôi dung file backend.php:

<?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'));

}

//=====================================================

// 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 vào folder views nằm trong folder includes của plugin bạn tạo file setting-page.php, file này sẽ là nơi xử lý mã nguồn html và hiển thị nội dung. Để khởi tạo một menu mới trong vùng admin thì bạn phải gọi Hook admin_menu và gán phương thức (action) để nó thực thi thao tác tạo menu.

lionel-add-new-menu-setting-api

Đây là kết quả trình duyệt trả về.

3/ Phương thức register_setting()

Phương thức register_setting() có tất cả là 3 tham số.

Cú pháp:

1	register_setting($option_group,$option_name,$sanitize_callback);

Tham số:

· $option_group: Tên của nhóm setting

· $option_name: Giá trị này sẽ được đưa vào cột option_name trong table wp_options.

· $sanitize_callback: Hàm dùng để xử lý dữ liệu trước khi lưu vào database

Bây giờ , tôi sẽ có một ví dụ để các bạn nắm bắt và hiểu luồng xử lý của phương thức hoạt động ra sao.

Tôi sẽ tạo ra phương thức register_setting_and_field(), phương thức này có nhiệm vụ đăng ký các thiết lập vào trong hệ thống WordPress, đồng thời nó cũng giúp bạn tạo ra các input giúp bạn nhập dữ liệu theo đúng quy tắc mà WordPress đề ra.

Ở tham số thứ nhất là tên lionel_setting_options, và ở tham số thứ hai có tên là lionel_option, lưu ý tham số thứ hai sẽ được lưu vào cột option_name trong table wp_options, tham số thứ ba là một hàm giúp bạn kiểm tra dữ liệu trước khi lưu giá trị vào database, và tôi đặt tên nó là validate_setting().

<?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'));

}

//=====================================================

// 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')

);

}

//=====================================================

// Phương thức validate_setting

//=====================================================

public function validate_setting(){

}

//=====================================================

// 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 bạn đã tạo xong phương thức dùng để xử lý các thiết lập trong plugin của bạn , để nó hoạt động thì bạn cần phải đăng ký nó vào hệ thống WordPress bằng hàm add_action(). Hook được ưu tiên gọi khi load trang admin để xử lý là admin_init mà tôi đã đề cập ở bài trước.

<?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')

);

}

//=====================================================

// Phương thức validate_setting

//=====================================================

public function validate_setting(){

}

//=====================================================

// 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';

}

Lúc này bạn truy cập vào http://localhost/wordpress/wp-admin/admin.php?page=lionel-my-setting, F5 lại xem có điều gì xảy ra không ? kết quả trình duyệt trả về là một trang trắng và chỉ có cái tiêu đề như lúc vừa tạo menu xong.

Để kiểm tra thì nếu bạn đang dùng chrome thì bấm F12, với Firefox cũng vậy nhé. Sau khi bạn bấm F12 thì bạn rê chuột vào My Setting Page thì sẽ thấy rằng ngoài cái tiêu đề ra thì không có điều gì xảy ra cả. Tôi đang sử dụng trình duyệt Chrome.

lionel-register-setting

Vậy câu hỏi đặt ra, phương thức register_setting() giúp bạn làm điều gì? Để thấy rõ được tác dụng của nó thì bạn cần phải xử lý code trong file setting-page.php mà tạo vừa tạo trong folder includes.

Nếu bạn tinh ý thì sẽ nhận ra rằng phần heading (Tiêu đề) hiển thị không giống với một số page trong vùng admin, do đó bạn cần điều chỉnh để nó có thể hiển thị giống với giao diện các page khác.

Nội dung file setting-page.php:

<h2>My Setting page</h2>

</div>

Bao bọc trong cặp thẻ h2 là cặp thẻ div có class là wrap, sau đó bạn F5 và sẽ thấy phàn tiêu đề đã hiển thị giống với các page còn lại trong vùng admin.

lionel-edit-style-setting-page

Kế tiếp trong file này luôn, bạn cần tạo ra một form dùng để nhập liệu để lưu vào database. Lưu ý kỹ phần action của form nha, nếu bạn muốn lưu dữ liệu vào table wp_options thì sẽ điền vào là options.php. Tức là khi bạn gừi dữ liệu từ Lionelg Setting sang page options.php, những phương thức nằm bên trong nó sẽ nhận dữ liệu từ form của bạn, và lưu các dữ liệu đó vào trong table wp_options mà bạn không cần phải thao tác thêm bất kì dòng code nào nửa.

ID của form bạn nên đặt theo dạng tiền tố, để sau này có xử lý jquery trong form thì sẽ không sợ lỗi đụng chạm tên các selector với nhau nửa, tôi đặt là lionel_setting_form.

<h2>My Setting page</h2>

</form>

</div>

Lúc này ở phía dưới tiêu đề page tôi muốn có một dòng mô tả giới thiệu hoặc hướng dẫn sử dụng gì đó đại loại, thì thêm vào dòng đó như thế nào? Quá đơn giản luôn ngay phía dưới thẻ h2 bạn sử dụng cặp thẻ <p> bao bọc dòng nội dung đó là được.

<h2>My Setting page</h2>

<p>Đây là trang thiết lập cấu hình plugin Lionel Setting</p>

</form>

</div>

lionel-edit-paragrah-plugin

Tạo form xong rồi, kế tiếp bạn cần sử dụng tới phương thức settings_fields(), vậy dùng nó để làm gì ? Nó sẽ tạo ra một số input ẩn nằm trong form mà bạn vừa tạo ra, vậy các input ẩn này có nhiệm vụ gì ?

Phương thức này chỉ có một tham số được truyền vào và tham số đó chính là tên tham số đầu tiên trong phương thức register_setting() mà bạn đã khai báo ở phía trên.

<h2>My Setting page</h2>

<p>Đây là trang thiết lập cấu hình plugin Lionel Setting</p>

<?php settings_fields('lionel_setting_options'); ?>

</form>

</div>

Bạn F5 trình duyệt và bấm F12 để xem kết quả có giống hình không.

lionel-input-hidden

Ô input đầu tiên nó chứa giá trị là tên Option Group, còn input thứ hai có giá trị là update có nghĩa là cập nhật dữ liệu, mà bạn cũng đừng quá quan tâm các input ẩn này làm gì, vì giờ nói suông bạn sẽ không hiểu đâu. Bạn hiểu đơn giản là nó tạo ra các input ẩn để thực hiện việc xử lý và nạp dữ liệu vào database theo đúng chuẩn của WordPress.

Phương thức này chỉ tác dụng khi sử dụng cùng lúc với register_setting(), nếu không có phương thức này thì sẽ không hoạt động được.

3/ Phương thức add_settings_section()

Phương thức add_settings_section(), giúp bạn tạo ra các phân đoạn trong vùng nhập liệu của form.

Cú pháp:

1	add_settings_section( $id, $title, $callback, $page );

Tham số:

· $id: id của section.

· $title: Tên của section.

· $callback: Hàm xử lý cho phần section khi cần thiết

· $page: Page hoặc menu_slug mà chúng ta muốn section hiển thị

lionel-add-section

Nhìn hình chắc hẳn bạn hiểu được ý nghĩa của section là gì rồi hen. Bây giờ tôi sẽ có một ví dụ nhỏ để bạn hiểu phương cách sử dụng phương thức này.

1	add_settings_section('lionel_main_section', 'Setting Title', '', $this->_menuSlug);

Tham số đầu tiên là id của section, phần này sẽ giúp bạn xác định đc vị trí hiển thị của section trong view, tham số thứ hai là tên hiển thị của section, còn tham số thứ ba thì bạn để rỗng, tham số thứ tư là tên page hoặc slug.

Bạn không cần tạo thêm bất kì phương thức nào, mà sẽ khai báo dòng code ở trong phương thức register_setting_and_field() luôn.

<?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);

}

//=====================================================

// Phương thức validate_setting

//=====================================================

public function validate_setting(){

}

//=====================================================

// 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';

}

Như vậy là chưa đủ đâu , bạn cần phải sử dụng thêm phương thức do_settings_section(), phương thức này chỉ được gọi ra khi bạn khai báo nó ở trong form, nó có nhiệm vụ hiển thị phần Section mà bạn vừa đăng ký vào hệ thống WordPress. Và nó chỉ có một tham số duy nhất được truyền vào là tên page hoặc slug của page bạn muốn show section.

<h2>My Setting page</h2>

<p>Đây là trang thiết lập cấu hình plugin Lionel Setting</p>

<?php settings_fields('lionel_setting_options'); ?>

<?php do_settings_sections($this->_menuSlug); ?>

</form>

</div>

lionel-add-new-section-setting-title

Như vậy, bạn đã biết cách tạo một section để phân đoạn vùng form nhập liệu rồi đấy.

3/ Kết bài

Như vậy, tôi vừa hướng dẫn bạn cách đăng ký một thiết lập mới và gọi làm hàm, tạo mới một section phân đoạn trong vùng nhập liệu của form, thiết lập các input ẩn để hỗ trợ cập nhật dữ liệu và lưu vào database. Hy vọng thông qua bài Sử dụng WordPress Setting API toàn tập, bạn cũng đã phần nào hiểu được khả năng hỗ trợ mà Setting API mang lại. Hẹn gặp lại bạn ở P2 trong chủ đề Setting API toàn tập.

Series Navigation<< Sử dụng WordPress Options API toàn tập Sử dụng WordPress Setting API toàn tập – P2 >>

Nguồn: laptrinhweb.org

Previous13. Sử dụng WordPress Options API toàn tập Next15. Sử dụng WordPress Setting API toàn tập – P2

Last updated 4 years ago