Cách tạo Shortcode trong WordPress

Shortcode trong WordPress và là một trong những thứ làm cho nền tảng này trở nên hoạt động hiệu quả và thân thiện với người dùng.

Shortcode là gì?

Shortcode = Shortcut + Code (Phím tắt + mã)

Thông thường, shortcode được sử dụng bên trong cặp dấu ngoặc vuông như thế này: [myshortcode].

Mỗi shortcode thực hiện một chức năng cụ thể trong một trang web, nó có thể đơn giản là định dạng lại nội dung hoặc phức tạp hơn là định lại cấu trúc của website.

Ví dụ, khi bạn đưa một video từ thư viện vào nội dung bài viết của mình, bạn sẽ dùng: [video src="my-video.mp4"], khi đó WordPress sẽ thay thế chuỗi [video ...] bằng video thực trong thư viện của bạn.

Cách tạo Shortcode trong WordPress

Trong bài viết này, mình sẽ tạo một ví dụ đơn giản về shortcode,  bạn có thể thêm các đoạn mã bên dưới vào file functions.php

#1 Thẻ tự đóng [hello]

add_shortcode( 'hello', 'hello_callback' );
function hello_callback( $atts ) {
    return "Hello";
}

Khi dùng shortcode này sẽ in ra từ Hello.

#2 Thẻ với các thuộc tính [hello color="blue"]

add_shortcode( 'hello', 'hello_callback' );
function hello_callback( $atts ) {
    $color = $atts['color'];
    return "<span style='color: $color;'>Hello</span>";
}

Khi sử dụng shortcode này sẽ in ra từ Hello có màu xanh da trời, bạn có thể thay thế màu tuỳ thích vào thuộc tính color.

Để đặt giá trị mặc định cho thuộc tính ta dùng shortcode_atts(...):

add_shortcode( 'hello', 'hello_callback' );
function hello_callback( $atts ) {
    /** Đặt giá trị mặc định. */
    $a = shortcode_atts( [
        'color' => 'black'
    ], $atts );

    $color = $a['color'];
    return "<span style='color: $color;'>Hello</span>";
}

#3 Thẻ có nội dung

add_shortcode( 'hello', 'hello_callback' );
function hello_callback( $atts, $contents = null ) {
    /** Đặt giá trị mặc định. */
    $a = shortcode_atts( [
        'color' => 'black'
    ], $atts );

    $color = esc_attr( $a['color'] );
    return "<span style='color: $color;'>Hello ". esc_attr( $contents )."</span>";
}

Nhìn đoạn code trên bạn có thể thấy nội dung nằm ở đối số thứ 2 trong callback.

Sử dụng bằng cách:[hello]hieuwp[/hello], kết quả: Hello hieuwp.

#4 Cách gọi một callback cho nhiều shortcode

Trong trường hợp này bạn hãy sử dụng đối số thứ 3 để phân biệt các thẻ shortcode với nhau.

Ví dụ mình triển khai 2 shortcode [hello] và [world] trong một callback như sau:

add_shortcode( 'hello', 'hello_callback' );
add_shortcode( 'world', 'hello_callback' );
function hello_callback( $atts, $contents = null, $tag ) {
    if ( 'hello' === $tag ) {
        return "Hello";
    }
    return "World";
}