Cách tạo Shortcode trong WordPress

1.Shortcode trong WordPress là gì?

Đơn giản Shortcode tiếng việt là mã ngắn, Sử dụng để thay thế một nội dung hoặc một chức nắng của một function mà bạn đã định nghĩa trước đó. Như các bài viết mình đã giới thiệu trước về WordPress thì Shortcode là một chức năng sẽ được đăng ký với function. Nó được sử dụng trong Content, Widget hoặc trong chính file code của chúng ta.

2. Làm thế nào để tạo một shortcode?

Để tạo một Shortcode các bạn phải Register Shortcode đó với function của WordPress. Có 2 bước chính để tạo 1 Shortcode.

1 - Thiết lập function thực thi code trong shortcode.

2 - Tạo một tên shortcode dựa vào function đã tạo cho nó.

Chúng ta có một ví dụ đơn giản là hiển thị ra dòng chức Hello World bằng Shortcode.

function hello_world() {
echo "Hello World!";
}

Sau khi tạo Function cho Shortcode. Chúng ta tạo tên cho Shortcode tương ứng với Function đã tạo, Tên Shortcode tương tự như một Namespace để chúng ta dễ quản lí và dễ gọi ShortCode.

add_shortcode( 'call_hello', 'hello_world' );

Lúc này nếu bạn viết [call_hello] vào nội dung bài viết thì nó sẽ hiển thị nội dung được viết trong function hello_world. Chúng ta sẽ có kết quả là dòng chữ "Hello World!" hiển thị ra màn hình.

3. Shortcode có tham số

Phức tạp hơn 1 chút, chúng ta sẽ thêm tham số vào Shortcode để có thể xử lí những bài toán phức tạp hơn. Cũng rất đơn giản và tương tự như đưa tham số vào các function.

Ví dụ chúng ta có một Shortcode để hiển thị ra social icon và link.

Với các Shortcode có tham số, chúng ta phải định nghĩa các tham số sẽ được truyền vào, sau đó sẽ đến phần sử lí để hiển thị các tham số hoặc if else nếu các tham số đó là các điều kiện.

<?php
// Social
if(!function_exists('shortcode_social')){
    function shortcode_social($atts, $content){
        $icon = $link = ';
        $attr = shortcode_atts( array(
            'icon' => 'fa-facebook',
            'link' => '#',
        ), $atts );

        echo '<a href="'. $link .'"><i class="fa '.$icon.'"></i>'. $content .'</a>';
    }
    add_shortcode('social', 'shortcode_social');
}

Như function shortcode_social trên đây chúng ta có thể thấy đây là một Shortcode để hiển thị ra một social icon gồm có link, icon và content. Các tham số truyền vào chúng ta sẽ có thể set giá trị mặc định cho nó.

Khi chúng ta gọi Shortcode social chúng ta sẽ truyền tham số vào như sau:

[social icon="fa-facebook" link="https://www.facebook.com/"]Facebook[/social]

Đoạn shortcode trên đây sẽ hiển thị ra một liên kết đến Facebook, với icon là icon Facebook và có text là Facebook

<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i>Facebook</a>

Rất đơn giản phải không các bạn.

4. Cách hiển thị shortcode

Sau khi chúng ta đã định nghĩa các function và register shortcode thì việc quan trọng nhất là hiển thị shortcode đó ra như thế nào. Chúng ta có 2 cách chủ yếu hay sử dung để hiển thị ra shortcode.

1 - Khi viết trong content hoặc trong widget. Chúng ta sẽ sử dụng với cấu trúc: [name param1="" param2=""]. Với các Shortcode không có tham số thì chúng ta chỉ cần viết [nameShortCode] là được.

Chú ý: nếu viết Shortcode vào Widget các bạn phải thêm một đoạn mã vào file function.php như sau:

add_filter('widget_text', 'do_shortcode');

2 - Khi viết trong file code của chúng ta. Để hiển thị được Shortcode trong file code. Chúng ta cần sử dụng thêm function do_shortcode.

Ví dụ:

<?php do_shortcode('[name param1="" param2=""]'); ?>
Or
<?php do_shortcode('[nameShortCode]'); ?>

Như vậy là mình đã giới thiệu xong các để tạo một Shortcode trong WordPress. Rất mong với bài viết này có thể giúp các bạn sử dụng được shortcode để làm việc với WordPress dễ dàng hơn.