Tìm Hiểu Về Shortcode trong Wordpress

Shortcode API là một trong những tính năng được sử dụng phổ biến của Wordpress. Trong bài viết này chúng ta sẽ tìm hiểu cách về shortcode trong Wordpress và cách tạo một shortcode tuỳ ý.

Shortcode Là Gì

Shortcode là một loại code đặc biệt trong Wordpress có thể được chèn vào nội dung của trang hoặc bài viết và sẽ được chuyển hoá thành mã HTML khi trang hoặc bài viết tương ứng được hiển thị.

Ví dụ một shortcode như sau có thể được sử dụng để chèn link của trang fanpage facebook vào trong trang:

[fb_page]

Đoạn shortcode trên có tên là fb_page. Khi hiển thị nội dung của trang chứa đoạn code này thì Wordpress sẽ chuyển shortcode về mã HTML. Ví dụ đoạn shortcode ở trên có thể được chuyển về mã HTML như sau:

<a link="https://facebook.com/page/mypage">
  <img src="http://mypage.com/facebook_icon.png"> Go to our Facebook fanpage
</a>

Việc chuyển đổi từ shortcode về HTML sẽ được thực hiện bởi một hàm PHP được đăng ký với tên shortcode để tương ứng. Logic xử lý shortcode về mã HTML được đặt bên trong hàm PHP này và sẽ do chúng ta tự định nghĩa.

Thêm Shortcode Trong Wordpress

Việc thêm shortcode vào Wordpress được thực hiện thông qua đăng ký một hàm callback ứng với tên của shortcode. Để đăng ký hàm callback cho shortcode với tên như trên bạn dùng hàm add_shortcode. Việc đăng ký shortcode thường được đặt trong file functions.php bên trong thư mục của template tương ứng mà shortcode có thể sẽ được sử dụng:

add_shortcode('fb_page', 'fb_page_shortcode_callback');

Ở trên hàm add_shortcode là một hàm trong Wordpress dùng để đăng ký hàm callback cho một shortcode nhất định:

• fb_page là tên của shortcode. Khi viết shortcode chúng ta sẽ sử dụng tên này.
• fb_page_shortcode_callback là tên của hàm callback dùng để chuyển mã shortcode về mã HTML. Bạn có thể đặt tên cho hàm này tuỳ ý mà không cần theo format nào, ở đây tôi chọn fb_page_shortcode_callback để có thể dễ dàng nhận biết rằng hàm này dùng cho shortcode với tên là fb_page.

Tạo Hàm Callback Cho Shortcode

Tuy nhiên chúng ta cũng cần phải định nghĩa hàm callback fb_page_shortcode_callback này. Ví dụ nội dung của hàm callback này có thể như sau:

function fb_page_shortcode_callback() {
return "Test";
}

Giá trị trả về của hàm callback sẽ được dùng để thay thế cho mã shortcode. Bây giờ nếu bạn sử dụng shortcode [fb_page] trong bài viết hoặc trong nội dung của một trang bất kỳ thì khi hiển thị bài viết hoặc trang đó đoạn shortcode sẽ được thay thế bới chữ Test.

Bây giờ bạn cập nhật hàm trên thành như sau:

set_option("fb_page_link") = "http://facebook.com/wordpress";
set_option("fb_logo_img") = "http://example.net/fb_logo.png";
function fb_page_shortcode_callback() {
    $fb_page_link = get_option("fb_page_link");
    $fb_logo_img = get_option("fb_logo_img");
    return '<a link="' . $fb_page_link . '">' . '<img src="' . $fb_logo_img . '"> Go to our Facebook fanpage</a>';
}

Ở ví dụ trên đây hàm callback sử dụng hàm get_option() để lấy về giá trị của địa chỉ URL trang facebook page và địa chỉ URL của ảnh logo Facebook. Trước đó giá trị cho hai option này được gán cứng sử dụng hàm set_option() trong Wordpress. Nếu bạn sử dụng đoạn code trên cho hàm callback bạn nên tham khảo Option API trong Wordpress để viết một function cho phép người dùng có thể thiết lập giá trị của hai tuỳ chọn này trên trang admin. Tuy nhiên cũng có một cách khác đơn giản hơn đó là sử dụng thuộc tính của shortcode.

Thêm Thuộc Tính Cho Shortcode

Thuộc tính của shortcode giống như thuộc tính của một thẻ HTML. Các thuộc tính bổ sung thêm thông tin cho shortcode. Việc tạo thuộc tính cho shortcode là tuỳ ý và mỗi một shortcode có thể có từ 0 cho tới nhiều thuộc tính khác nhau.

Với ví dụ trên nếu cho phép sử dụng thuộc tính trong shortcode thì chúng ta có thể viết shortcode như sau:

[fb_page fb_page_link="http://facebook.com/my_page" fb_logo_url="http://example.net/fb_logo.png"]

Lúc này hàm callback cần được thay đổi để xử lý các thuộc tính của shortcode:

function fb_page_shortcode_callback($atts) {
    $fb_page_link = attrs["fb_page_link"];
    $fb_logo_img = attrs["fb_logo_img"];
    return '<a link="' . $fb_page_link . '">' . '<img src="' . $fb_logo_img . '"> Go to our Facebook fanpage</a>';
}

Ở hàm callback trên chúng ta sử dụng tham số $attrs, khi hàm callback này được gọi Wordpress sẽ truyền vào giá trị cho tham số này là một mảng chứa các thuộc tính có trong shortcode.

Để lấy ra giá trị của các thuộc tính trong shortcode, Wordpress cung cấp thêm hàm shortcode_atts(). Khi gọi hàm này chúng ta có thể truyền vào giá trị mặc định cho các thuộc tính, vú dụ như sau:

function fb_page_shortcode_callback($atts) {
    $data = shortcode_atts(array(
        "fb_page_link" => "https://facebook.com/wordpress",
        "fb_logo_img" => "https://image.flaticon.com/icons/svg/37/37409.svg",
    ), $attrs);
    $fb_page_link = attrs["fb_page_link"];
    $fb_logo_img = attrs["fb_logo_img"];
    return '<a link="' . $fb_page_link . '">' . '<img src="' . $fb_logo_img . '"> Go to our Facebook fanpage</a>';
}

Ví dụ trên nếu người dùng không thêm một trong hai hoặc cả hai thuộc tính fb_page_link và fb_logo_img thì hai giá trị mặc định được truyền vào tham số đầu tiên của hàm shortcode_attrs sẽ được sử dụng.

Thêm Nội Dung Cho Shortcode

Giống như thẻ HTML, chúng ta cũng có thể thêm nội dung vào bên trong shortcode. Tương tự như thuộc tính thì thêm nội dung cho shortcode là không bắt buộc. Tuy nhiên nếu thêm nội dung bạn cần sử dụng cặp thẻ đóng và mở của shortcode như sau:

[fb_page fb_page_link="http://facebook.com/my_page" fb_logo_url="http://example.net/fb_logo.png"]Go to our Facebook fanpage[/fb_page]

Lúc này hàm callback cũng cần cập nhật để thêm vào nội dung của shortcode.

function fb_page_shortcode_callback($atts, $content) {
    $data = shortcode_atts(array(
        "fb_page_link" => "https://facebook.com/wordpress",
        "fb_logo_img" => "https://image.flaticon.com/icons/svg/37/37409.svg",
    ), $attrs);
    $fb_page_link = attrs["fb_page_link"];
    $fb_logo_img = attrs["fb_logo_img"];
    return '<a link="' . $fb_page_link . '">' . '<img src="' . $fb_logo_img . '"> ' . $content . '</a>';
}

Ở hàm callback trên chúng ta sử dụng tham số thứ hai $content, khi hàm callbakc được gọi thì giá trị của tham số này sẽ chính là nội dung bên trong của shortcode.

Ở trên chúng ta đã tìm hiểu về Shortcode API trong Wordpress. Shortcode API là một API hữu dụng của Wordpress mà bạn nên cân nhắc sử dụng nó trong các lần phát triển template tới.