28. Tìm hiểu WordPress Meta boxes
PreviousCustom Post Type pages are “not found” (ok)Next28+. CÁCH TỰ TẠO MỘT META BOX ĐƠN GIẢN TOÀN TẬP (ok)
Last updated
Was this helpful?
Last updated
Was this helpful?
WordPress Metaboxes là một phần cũng khá là quan trọng và nó là kiến thức bắt buộc bạn phải biết, nó có tính năng khá giống với Custom Field trong WordPress, khác ở chỗ là bạn sẽ phải hoàn tạo ra ra nó chứ không dùng lại những gì có sẵn ở các vùng như Post, Page, Comment và ở một số vị trí khác, hôm nay tôi sẽ hướng dẫn bạn tạo mới WordPress Metaboxes căn bản.
1/ WordPress Metaboxes là gì ?
Bạn có thể gọi Metaboxes với tên thân mât là cái hộp, cái khung cũng được chứ thật chất mà nói, nó chính là các khung nhập liệu và các giá trị mà bạn nhập vào chính là các dữ liệu được đưa vào database.
Vậy câu hỏi đưa ra dữ liệu đưa vào database là dữ liệu loại gì ? toàn bộ dữ liệu sẽ được đưa vào table wp_options, và dữ liệu này không liên quan gì tới các phần như là category, tags, mà nó là một loại dữ liệu riêng biệt.
Ok, luyên thuyên thế là đủ rồi, bạn chỉ cần hiểu Metaboxes chính là các textbox, selectbox và là các thành phần form html khác dùng để nhập liệu và nó sẽ hỗ trợ cho cả hai kiểu bài viết là Post & Page.
2/ Tạo mới WordPress Metaboxes
Vẫn như thường lệ tôi sẽ tạo mới một plugin và tôi có cấu trúc plugin như sau.
cau-truc-plugin-kenshin-metaboxes
Nội dung file kenshin-metaboxes.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
<?php
/**
* @package Kenshin Metaboxes
* @version 0.1
*/
/*
Plugin Name: Metaboxes Plugin
Plugin URI: http://laptrinhweb.org
Description: Đây là một plugin dùng để tương tác với Metaboxes.
Author: Kenshin
Version: 0.1
Author URI: None
*/
define('KENSHIN_METABOXES_PLUGIN_URL', plugin_dir_url(__FILE__));
define('KENSHIN_METABOXES_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('KENSHIN_METABOXES_INCLUDES_DIR', KENSHIN_METABOXES_PLUGIN_DIR .'/includes');
define('KENSHIN_METABOXES_DIR', KENSHIN_METABOXES_PLUGIN_DIR . '/metaboxes');
if(!is_admin()){
require_once KENSHIN_METABOXES_INCLUDES_DIR. '/frontend.php';
new KenshinFrontend();
}else{
require_once KENSHIN_METABOXES_INCLUDES_DIR. '/backend.php';
new KenshinBackend();
}
Để tạo mới Metaboxes thì tôi sẽ hướng dẫn bạn khai báo phương thức add_meta_boxes(), phương thức có tất cả là 6 tham số.
Cú pháp:
1
add_meta_box( $id, $title, $callback, $post_type, $context,$priority, $callback_args);
Tham số:
· $id: Là ID mà bạn đặt tên cho metaboxes
· $title: Tiêu đề của box
· $callback : Phương thức dùng để xử lý các tính năng như tạo ra các thành phần form html
· $post_type: Mặc định wordpress sẽ có 2 post type là post và page, nếu bạn có sử dụng Custom Post riêng thì điền chính xác tên Custom Post vào.
· $context: Hình thức hiển thị ở screen options, gồm 3 options là normal, advanced, side.
· $priority: Nơi mà box hiển thị ở form.
· $callback_args: Mảng các tham số truyền vào.
Lưu ý: Để có thể khai báo và nạp Box vào hệ thống WordPress thì bạn cần phải gọi nó vào Hook Action có cùng tên với phương thức và chỉ khác là có thêm es là add_meta_boxes().
Vậy tôi có nội dung file main.php như sau.
1
2
3
4
5
6
7
8
<?php
class Kenshin_Metaboxes_Main{
public function __construct(){
echo '<br />' . __METHOD__;
}
}
Sau đó bạn vào file xử lý chính của plugin nạp file này vào và khởi tạo đối tượng bằng tên của class.
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
<?php
/**
* @package Kenshin Metaboxes
* @version 0.1
*/
/*
Plugin Name: Metaboxes Plugin
Plugin URI: http://laptrinhweb.org
Description: Đây là một plugin dùng để tương tác với Metaboxes.
Author: Kenshin
Version: 0.1
Author URI: None
*/
define('KENSHIN_METABOXES_PLUGIN_URL', plugin_dir_url(__FILE__));
define('KENSHIN_METABOXES_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('KENSHIN_METABOXES_INCLUDES_DIR', KENSHIN_METABOXES_PLUGIN_DIR .'/includes');
define('KENSHIN_METABOXES_DIR', KENSHIN_METABOXES_PLUGIN_DIR . '/metaboxes');
if(!is_admin()){
require_once KENSHIN_METABOXES_INCLUDES_DIR. '/frontend.php';
new KenshinFrontend();
}else{
require_once KENSHIN_METABOXES_INCLUDES_DIR. '/backend.php';
new KenshinBackend();
require_once KENSHIN_METABOXES_DIR . '/main.php';
new Kenshin_Metaboxes_Main();
}
Sau đó bạn F5 lại trình duyệt xem trình duyệt có trả về kết quả là Kenshin_Metaboxes_Main::__construct, tức là bạn đang gọi tới nó, ok lúc này thì tôi sẽ xử lý công đoạn tạo mới metboxes.
Bạn cần khởi tạo 2 biến toàn cục là $_metabox_name & metabox_options. 2 biến này dùng để làm gì thì lát nửa tôi sẽ giải thích sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
class Kenshin_Metaboxes_Main {
private $_metabox_name = 'ks_metaboxes_option';
private $_metabox_options = array();
public function __construct(){
$metaOptions = array();
$this->_metabox_options = get_option($this->_metabox_name,$metaOptions);
}
}
Biến toàn cục thứ nhất sẽ lưu vào table wp_options, biến toàn cục thứ hai có nhiệm vụ kiểm tra xem box đó ở trạng thái true hoặc false.
Kế tiếp chúng ta sẽ xử lý và tạo box mới ở file simple.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
class Kenshin_Metaboxes_Simple {
public function __construct(){
}
public function create(){
}
public function callback(){
}
}
Phương thức __construct() là nơi nạp Action Hook add_meta_boxes() vào hệ thống, và phương thức create() là vị trí sử dụng phương thức add_meta_box(), cuối cùng là phương thức callback() dùng để tạo ra các thành phần form html dùng để nhập liệu và nạp vào database.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
class Kenshin_Metaboxes_Simple{
public function __construct(){
add_action('add_meta_boxes', array($this, 'create'));
}
public function create(){
add_meta_box('ks-mb-simple', 'Kenshin Metaboxes', array($this, 'callback'), 'post');
}
public function callback(){
echo "<p>Welcome to Metaboxes</p>";
}
}
Các tham số của phương thức add_meta_box() thì tôi đã trình bày ở phía trên nên sẽ không nhắc lại, ở đây tôi chỉ sử dụng 4 tham số mà thôi, bao gồm ID, Title, Callback , Post_Type và nội dung file simple.php tạm thời chỉ là tạo ra một Metaboxes có dòng text là “Welcome to metaboxes” chứ chẳng có gì ghê gớm cả :D, còn phần tạo ra các form dùng để nhập liệu thì tôi sẽ hướng dẫn trong một bài khác.
Lúc này để Metaboxes được nạp vào database cũng như là kích hoạt nó để nó hiển thị ra thì bạn cần nạp và khởi tạo đối tượng trong file main.php như sau.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
class Kenshin_Metaboxes_Main {
private $_metabox_name = 'ks_metaboxes_option';
private $_metabox_options = array();
public function __construct(){
$metaOptions = array(
'ks-mb-simple' => true
);
$this->_metabox_options = get_option($this->_metabox_name, $metaOptions);
if ( $this->_metabox_options['ks-mb-simple'] == true) $this->simple();
}
public function simple(){
require_once KENSHIN_METABOXES_DIR .'/simple.php';
new Kenshin_Metaboxes_Simple();
}
}
Do chúng ta sẽ nạp metaboxes vào database và chính xác là nó sẽ nằm trong table wp_options, nên tôi sẽ dùng phương thức get_option() để lấy chính xác dữ liệu mà ta đã đưa vào, sau đó kiểm tra nếu bằng cách xem ID mà bạn gán cho metaboxes bằng true thì bạn cho phép nạp vào hệ thống và hiển thị nó trong vùng Post.
Bạn kiểm tra bằng cách, vào vùng Post vào biên tập bài viết mới hoặc click edit bất kì bài viết nào đó cũng được , bạn nhìn lên góc bên phải khu vực đó thấy Screen Options như hình.
metaboxes-add-post
Lúc này bạn nhìn xuống phía dưới sẽ thấy phần metaboxes hiện ra như hình.
kenshin-metaboxes
Bạn nắm box này kéo thả vào vị trí nào cũng được, cứ thoải mái con gà cồ đi hen Vậy là tôi vừa hướng dẫn bạn tạo mới một metaboxes đơn giản chỉ đởn thuần là hiển thị một dòng text.
3/ Lời kết
Bạn thấy đấy việc tạo ra metaboxes đâu nhất thiết phải dùng tới các plugin hỗ trợ khác đâu, mà bạn vẫn tự code và sử dụng các phương thức hỗ trợ vẫn tạo ra được các box mới theo ý bạn đấy thôi. Đừng lạm dụng vào plugin vì điều đó sẽ khiến bạn không còn là một Developer nửa, hãy tự lập trình và tập thói quen đọc tài liệu trên trang chủ WordPress hoặc xem các bài tuts của tôi, Kết thúc bài Tìm hiểu WordPress Metaboxes thì tôi muốn truyền tải thông điệp đến bạn rằng, mọi thứ chỉ mới bắt đầu hãy chờ đợi những điều thú vị hơn ở bài kế tiếp.
Series Navigation<< Sử dụng WordPress Custom Post Type căn bảnTương tác database với WordPress Meta boxes >>
Nguồn: laptrinhweb.org
