23. Sử dụng WordPress Shortcode API

Shortcode API là một tập hợp các hàm trong core của WordPress. nó là những đoạn code ngắn dùng để thực thi những hành động đã được gán trong các phương thức mà bạn đã định sẵn tạo ra Shortcode. Nó được sử dụng khá là linh hoạt trong themes, Widget, và được chèn cả vào trong nội dung của bài viết.

Trước khi bắt tay tìm hiểu một vấn đề nào đó của WordPress thì tôi khuyên bạn nên tìm và đọc tài liệu trên trang chủ và sau đó có thể google thêm nếu vẫn chưa thông ass, à nhầm thông não. vì document trên trang chủ rất là quan trọng, mọi thứ liên quan tới Shortcode API .

Đều nằm trong đường dẫn https://codex.wordpress.org/Shortcode_API, tôi cũng mới bắt đầu nghiên cứu về nó nên cũng chưa hiểu rõ cốt lõi cho lắm, nếu bài Sử dụng WordPress Shortcode API không đáp ứng được nhu cầu tìm hiểu của bạn thì tôi sẽ cố gắng bổ sung bài ngay sau khi tôi đã thông thạo về nó.

Tôi sẽ hướng dẫn bạn hai cách tạo ra một Shortcode đơn giản, sử dụng lập trình hướng thủ tục (function) và lập trình hướng đối tượng (OOP) tuy nhiên cả hai ví dụ đều dừng lại ở mức căn bản thôi nhé. Chủ yếu để bạn hiểu quy trình tạo ra một Shortcode và đó là mục đích mà tôi muốn hướng đến trong bài.

1/ Cấu trúc plugin kenshin shortcode

Thông thương các phương thức dùng để định nghĩa tạo ra Shortcode thường được viết trong file functions.php nằm trong themes, nhưng tôi không muốn đụng vào nó vì sẽ phát sinh ra nhiều vấn đề lắm.

Tôi lựa chọn cách an toàn để hướng dẫn bạn bằng việc tạo mới một plugin để thao tác cho nó tiện.

Cấu trúc plugin

kenshin-shortcode – shortcode – includes – kenshin-shortcode.php (File xử lý chính của plugin)

Nội dung file kenshin-shortcode.php:

<?php

/**

* @package Kenshin Shortcode API

* @version 0.1

Plugin Name: Kenshin Shortcode API

Plugin URI: http://laptrinhweb.org

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

Author: Kenshin

Version: 0.1

Author URI: None

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

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

define('KENSHIN_SHORTCODE_INCLUDES_DIR', KENSHIN_SHORTCODE_PLUGIN_DIR .'/includes');

define('KENSHIN_SHORTCODE_DIR', KENSHIN_SHORTCODE_PLUGIN_DIR . '/shortcode');

if(!is_admin()){

require_once KENSHIN_SHORTCODE_INCLUDES_DIR. '/frontend.php';

new KenshinFrontend();

}else{

require_once KENSHIN_SHORTCODE_INCLUDES_DIR. '/backend.php';

new KenshinBackend();

}

Folder shortcode là nơi chứa các file xử lý tạo ra Shortcode tuy nhiên lúc này bạn chưa cần quan tâm tới nó đâu, lát nữa tôi sẽ trình bày về nó sau. Nhìn chung cái cấu trúc của file xử lý chính plugin là quá quen thuộc với bạn rồi hen, nên tôi sẽ không giải thích nửa.

Tôi sẽ sử dụng lại themes Twenty Thirteen để minh họa các ví dụ vể Shortcode cho nó tiện, chứ themes Twenty Ten mà tôi dùng ở bài Sử dụng WordPress The Loop nó rối tung lên hết rồi.

2/ Tạo mới Shortcode bằng lập trình hướng thủ tục

Phương thức add_shortcode() có bao gồm tất cả là hai tham số và nhiệm vụ của nó là xác định tên Shortcode mà bạn truyền vào ở tham số đầu tiên, và tham số thứ hai là phương thức xử lý hiển thị dữ liệu vào bài viết hoặc ở các khu vực khác được nhúng Shortcode vào.

Cú pháp:

1	add_shortcode( $tag , $func );

Tham số:

· $tag: Tên Shortcode mà bạn gán vào

· $func: Phương thức được định nghĩa xử lý dữ liệu cho Shortcode.

Lúc này tôi sẽ viết phương thức ks_create_shortcode_simple(), đây là phương thức xử lý chính cho Shortcode mà tôi sắp khai báo. Tôi cũng đặt tên cho Shortcode là ks_create_shortcode. Và tôi có đoạn code xử lý như sau.

<?php

/**

* @package Kenshin Shortcode API

* @version 0.1

Plugin Name: Kenshin Shortcode API

Plugin URI: http://laptrinhweb.org

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

Author: Kenshin

Version: 0.1

Author URI: None

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

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

define('KENSHIN_SHORTCODE_INCLUDES_DIR', KENSHIN_SHORTCODE_PLUGIN_DIR .'/includes');

define('KENSHIN_SHORTCODE_DIR', KENSHIN_SHORTCODE_PLUGIN_DIR . '/shortcode');

if(!is_admin()){

require_once KENSHIN_SHORTCODE_INCLUDES_DIR. '/frontend.php';

new KenshinFrontend();

}else{

require_once KENSHIN_SHORTCODE_INCLUDES_DIR. '/backend.php';

new KenshinBackend();

}

add_shortcode('ks_create_shortcode', 'ks_create_shortcode_simple');

function ks_create_shortcode_simple(){

$str = 'Đây là ví dụ về Shortcode API của Kenshin';

return $str;

}

Tôi sẽ xử lý vấn đề này ngay tại file xử lý chính của plugin. Sau khi khởi tạo Shortcode ks_create_shortcode thì để kiểm tra xem nó có hoạt động không thì bạn vào vùng admin vào khu vực post bài viết, edit một bài bất kì và đưa vào nội dung một đoạn là [ks_create_shortcode], đây là cú pháp để gọi Shortcode ra.

tao-moi-shortcode

Update bài viết và sau đó ra trang chủ kiểm tra xem có kết quả giống hình này không nha.

show-shortcode-homepage

Vậy là Shortcode ks_create_simple đã được khởi tạo và nạp vào hệ thống WordPress để sử dụng rồi đấy. Tuy nhiên cách viết này chưa thật sự tối ưu cho lắm, giả sử bạn có 10 Shortcode chả lẽ bạn khai báo theo kiểu này chắc chết luôn quá.

3/ Tạo mới Shortcode bằng lập trình hướng đối tượng

Với cách viết thông thường ở trên thì chưa gọi là tối ưu nên tôi sẽ hướng dẫn bạn cách viết theo kiểu lập trình hướng đối tượng, tạo ra các class và các phương thức và gọi tới nó khi cần sử dụng là xong.

Luc này tôi mới dùng tới folder shortcode, tôi tạo ra hai file là main.php và text.php, file main.php chính là file cha chứa các khai báo Shortcode, và file text.php là file con dùng để xử lý dữ liệu nội dung cho Shortcode, nói lý thuyết suông chắc bạn sẽ không hiểu tí nửa tôi sẽ dùng code để ví dụ là bạn sẽ nắm rõ vấn đề ngay.

Nội dung file main.php:

<?php

class Kenshin_Main_Run_Shortcode{

public function __construct(){

// Gọi tới phương thức text() để khởi tạo và nạp shortcode vào hệ thống

$this->text();

}

public function text(){

require_once KENSHIN_SHORTCODE_DIR. '/text.php';

new Kenshin_Text_Shortcode();

}

Như bạn thấy đấy, tôi có một phương thức là text() bên trong nó sẽ gọi tới file text.php và khởi tạo đối tượng và ở hàm khởi tạo tôi gọi tới phương thức text bằng $this để nạp Shortcode vào hệ thống WordPress.

Nội dung file text.php:

<?php

class Kenshin_Text_Shortcode{

public function __construct(){

add_shortcode('ks_sc_text', array($this,'show'));

}

public function show(){

$str = 'Đây là ví dụ về Shortcode API của Kenshin';

return $str;

}

U như kỹ tôi lại edit một bài viết và ở phần nội dung tôi truyền vào [ks_sc_text], và save lại và tôi có kết quả như hình.

show-shortcode-homepage

Kế tiếp tôi sẽ tạo thêm file date.php và tôi có đoạn code như sau.

<?php

class Kenshin_Date_Shortcode{

public function __construct(){

add_shortcode('ks_sc_date', array($this, 'show'));

}

public function show(){

$str = date('l jS \of F Y h:i:s A');

return $str;

}

Lúc này file main.php tôi sẽ bổ sung thêm vài dòng code.

<?php

class Kenshin_Main_Run_Shortcode{

public function __construct(){

// Gọi tới phương thức text() để khởi tạo và nạp shortcode vào hệ thống

$this->text();

$this->date();

}

public function text(){

require_once KENSHIN_SHORTCODE_DIR. '/text.php';

new Kenshin_Text_Shortcode();

}

public function date(){

require_once KENSHIN_SHORTCODE_DIR. '/date.php';

new Kenshin_Date_Shortcode();

}

Và tôi lại edit bài viết cho vào nội dung đoạn mã của Shortcode Date là [ks_sc_date], update bài viết và F5 lại trang chủ và tôi có kết quả như hình.

show-two-shortcode-homepage

Như vậy với cấu trúc lập trình hướng đối tượng thì bạn thấy rằng việc quản lý các phương thức tạo ra Shortcode là rất tiện đúng không. Câu hỏi đặt ra tạo Shortcode được rồi vậy thì xóa nó đi như thế nào ?

Lúc này tôi sẽ giới thiệu bạn thêm phương thức strip_shortcodes(), nó có tác dụng giúp bạn loại bỏ các Shortcode ra khỏi nội dung trong bài viết, phương thức này được kết hợp cùng với Hook Actionvà chính xác là Hook the_content.

<?php

class Kenshin_Main_Run_Shortcode{

public function __construct(){

// Gọi tới phương thức text() để khởi tạo và nạp shortcode vào hệ thống

$this->text();

$this->date();

add_action('the_content', array($this, 'remove_all_shortcode'));

}

public function text(){

require_once KENSHIN_SHORTCODE_DIR. '/text.php';

new Kenshin_Text_Shortcode();

}

public function date(){

require_once KENSHIN_SHORTCODE_DIR. '/date.php';

new Kenshin_Date_Shortcode();

}

public function remove_all_shortcode($content){

$content = strip_shortcodes($content);

return $content;

}

Tôi viết phương thức remove_all_shortcode() ở file main.php như sau.

Hủy toàn bộ Shortcode trong nội dung bài viết rồi thì sẽ trả về kết quả của nội dung bài viết mới nhé, chứ không return $content về là mất trắng toàn bộ nội dung của toàn bộ bài viết luôn đó.

4/ Lời kết

Các phương thức hỗ trợ của Shortcode API còn rất nhiều, nhưng tôi chỉ hướng dẫn bạn vài phương thức hay được dùng mà thôi, còn lại bạn tự tìm hiểu lấy hoặc đợi tôi nghiên cứu thêm và bổ sung các phương thức vào bài Sử dụng WordPress Shortcode API, hầu như bây giờ thì website nào mà được xây dựng bằng mã nguồn WordPress đều sử dụng Shortcode để trang trí bài viết, các Box thông báo linh tinh gì đó, bạn nên sử dụng nó một cách linh hoạt chứ đừng lạm dụng nó quá nhiều sẽ làm site của bạn load chậm và nặng hơn.

Series Navigation<< Sử dụng WordPress The Loop Sử dụng WordPress Template Tags toàn tập >> Nguồn: laptrinhweb.org

Previous22. Sử dụng WordPress The Loop Next24. Sử dụng WordPress Template Tags toàn tập

Last updated 4 years ago