Shortcode, nghe tên thôi bạn cũng hiểu 1 phần rồi phải không "short"=> ngắn, 'code' => mã. Mã ngắn, thôi đọc không hay lắm, đặt là mã đặc biệt giúp hiện một nội dung có sẵn và là một tính năng khá hay trong Wordpress, giúp chúng ta có thể chèn bất kỳ nội dung vào bài viết, php, widget. ví dụ như quảng cáo, thông điệp....

Cơ bản

Bạn có thể viết shortcode trong file functions.php

// Tạo shortcode
function lar_shortcode() {
    return 'Đây là 1 đoạn thông báo ngắn';
}
add_shortcode( 'lar', 'lar_shortcode' );

Bản chất nó là như bên dưới, chỉ là WP tách hàm lar_shortcode ra. Bạn có thể viết ngắn gọn như sau.

add_shortcode( 'lar', function(){
    return 'Đây là 1 đoạn thông báo ngắn';
});

Với lar là tên của shortcode.

Sử dụng Shortcode:

[lar]

Tạo 1 bài viết rồi thêm shortcode [lar].

Kết quả khi ra ngoài.

Thử chèn <div class="alert alert-danger> bọc nội dung.

add_shortcode( 'lar', function(){
        return '<div class="alert alert-danger">Đây là 1 đoạn thông báo ngắn</div>';
});

Bạn thấy khá đơn giản phải không, nếu chỉ có 1 thẻ div thì bình thường nhưng giờ mình muốn chèn 1 khối html vào thì sao ? Mà đã dùng hàm thì chỉ return thôi, echo là ăn gian đấy .

Ta sẽ dùng .= để nối biến cho mỗi dòng nhé.

add_shortcode( 'lar', function(){

        $result = '';
        $result .='<div class="alert alert-success">';
            $result .= '<strong>Chính xác!</strong> Đây là 1 đoạn thông báo ngắn';
            $result .= '<a href="#" class="alert-link"> Đọc ngay</a>';
        $result .= '</div>';

       return $result;
});

Nâng cao

Việc chèn shortcode không chỉ đơn thuần là chèn nội dung có sẵn, mà ta cần giá trị vào cho nó, ví dụ show 10 bài viết nổi bật, 2 bài viết mới nhất, thì số 10,2 sẽ là những giá trị thay đổi. Khi đó Shortcode sẽ có dạng sau:

Cấu trúc:

[ten_shortcode thamso1 thamso2]noidung[/ten_shortcode]

Ví dụ:

[lar sl=10]Hiện nội dung theo ý muốn[/lar]

Lúc này sẽ có thẻ đóng [/lar] bạn lưu ý

add_shortcode( 'lar', function($args, $content){
       return $args['sl'].' '.$content;
});

$args['sl'] là tham số trong shortcode, viết liền, không viết hoa hoặc kiểu lạc đà: toiYeuWP
$content là nội dung

Trong Backend

Ngoài Frontend

Một ví dụ khác:
Tính tổng giá trị 2 số và in đậm kết quả

[lar number1="5" number2="10"]kết quả[/lar]

add_shortcode( 'lar', function($args, $content){
       return '<strong>'.$content.': </strong> '.( $args['number1'] + $args['number2'] ;
});

Kết quả: 15

cách viết ở dạng khác

Viết shortcode ở trong PHP

<?php echo do_shortcode('[lar number1="5" number2="10"]kết quả[/lar]') ?>

Viết shortcode ở trong Widget text

Thêm trong functions.php

add_filter('widget_text','do_shortcode')
add_filter( 'widget_text', 'shortcode_unautop');

Một số ứng dụng

  1. Lấy video youtube

Tham số: width, height, id

[youtube width="100%" height="450" id="MhQKe-aERsU"]
add_shortcode('youtube', function($args, $content){
    $content = '<iframe width="'.$args['width'].'" height="'.$args['height'].'" src="https://www.youtube.com/embed/'.$args['id'].'" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
    return $content;
});
  1. Danh sách bài viết mới nhất
[get_posts number="10" orderby="rand"]
add_shortcode('get_posts', function($args,$content){
    $query = new WP_query([
        'posts_per_page' => isset($args['number']) ? $args['number'] : 5,
        'orderBy'         => isset($args['orderby']) ? $args['orderby'] : 'rand',
    ]);
    ?>
    <?php if ( $query->have_posts() ): ?>
        <ul>
            <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                 <li><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
            <?php endwhile; ?>
        </ul>
    <?php endif;
});

Cám ơn bạn đọc bài viết. Chúc bạn một ngày mới tới tốt lành.