01/10/2018, 17:28

WordPress Plugin – Phần 3: Truyền attribute cho shortcode

Trong bài viết trước, Góc Kinh Nghiệm đã chia sẻ với các bạn shortcode. Trong bài viết này, chúng ta tìm hiểu thêm một tí về shortcode. Chúng ta sẽ tìm hiểu xem làm thế nào chúng ta truyền được attribute vào shortcode. 1. Attribute của shortcode là gì? Chúng ta xem đoạn mã HTML bên dưới ...

Trong bài viết trước, Góc Kinh Nghiệm đã chia sẻ với các bạn shortcode. Trong bài viết này, chúng ta tìm hiểu thêm một tí về shortcode. Chúng ta sẽ tìm hiểu xem làm thế nào chúng ta truyền được attribute vào shortcode.

1. Attribute của shortcode là gì?
Chúng ta xem đoạn mã HTML bên dưới

<a href="http://www.w3schools.com">This is a link</a>

Trong đoạn mã HTML trên thì href là attribute
Tương tự như vậy, shortcode của chúng ta cũng có attribute dạng như sau

[tap_viet_shortcode say_more='Góc Kinh Nghiệm']

Chúng ta nhìn vào đoạn mã trên say_more chính là attribute của shortcode tap_viet_shortcode
2. Cải tiến để truyền attribute cho shortcode
Chúng ta đã có function dùng cho shortcode nhưng nó chưa có tham số như sau

function print_xin_chao_ba_con_message() {
  $msg = get_option('xin_chao_ba_con_message');
  echo '<h1>'.$msg.'</h1>';
}

Chúng ta cải tiến, thêm tham số cho hàm như sau

function print_xin_chao_ba_con_message($atts = ') {
 extract( shortcode_atts(array('say_more' => 'Góc Kinh Nghiệm',), $atts ));
 $msg = get_option('xin_chao_ba_con_message');
 echo '<h1>'.$msg.' và '.$say_more.'</h1>';
}

Chúng ta có 4 điều mới trong hàm như sau
– Chúng ta có thêm tham số $atts vào hàm. Tham số $atts chứa tất cả attribute do chúng ta truyền vào.
– Chúng ta dùng hàm shortcode_atts để thiết lập giá trị mặc định cho attribute nếu chúng ta “lỡ quên” truyền attribute cho shortcode. Trong function mới, chúng ta thiết lập giá trị mặc định cho attribute say_more là “Góc Kinh Nghiệm”
– Chúng ta lại dùng hàm extract để lấy các giá trị của attribute do chúng ta truyền vào
– Sau khi extract để lấy giá trị của attribute, chúng ta add nó vào chuỗi xuất ra màn hình
3. Sử dụng shortcode mới
Chúng ta mở page Test shortcode của bài trước, bỏ vào chuỗi [tap_viet_shortcode say_more=”anh chị em”] như hình bên dưới

Sau khi save page, chúng ta có kết quả như sau

4. Đoạn mã sau cùng của chúng ta

<?php
/*
Plugin Name: Xin chào bà con
Description: Hiển thị một message đơn giản trên web
Version: 1.0
Author: Góc Kinh Nghiệm
Author URI: http://gockinhnghiem.com/
*/
register_activation_hook(__FILE__, 'xin_chao_ba_con_activation');
function xin_chao_ba_con_activation() 
{    
  // set new option    
 add_option('xin_chao_ba_con_message', 'WordPress plugin xin chào bà con cô bác', ', ');
}
add_action('get_template_part_loop', xin_chao_ba_con);
function xin_chao_ba_con()
{	
  $msg = get_option('xin_chao_ba_con_message'); 	
  echo '<h1>'.$msg.'</h1>';
}
function print_xin_chao_ba_con_message($atts = ')
{  
  extract( shortcode_atts(array('say_more' => 'Góc Kinh Nghiệm',), $atts ));  
  $msg = get_option('xin_chao_ba_con_message');  
  echo '<h1>'.$msg.' và '.$say_more.'</h1>';
}
add_shortcode('tap_viet_shortcode', 'print_xin_chao_ba_con_message');

Chúc các bạn thành công

Hãy cùng Góc Kinh Nghiệm tập viết WordPress plugin:
– Phần 1: Tạo plugin WordPress đơn giản
– Phần 2: Tạo shortcode trong plugin
– Phần 3: Truyền attribute cho shortcode


0