Hướng dẫn tạo shortcode trong WordPress

1
25

Hiện nay shortcode khá là phổ biến, bạn có thể thấy rất nhiều plugin shortcode khác nhau, nhưng nếu bạn có nhu cầu sử dụng một shortcode nhất định mà phải cài cả một bộ plugin thì có vẻ hơi thừa. Trong bài viết này, WpGuide sẽ hướng dẫn các bạn tạo shortcode trong WordPress đơn giản và dễ hiểu nhất.

Shortcode là gì?

Shortcode là một đoạn mã đặc biệt dùng để thay thế một nội dung nào đó đã được định nghĩa trước trong quá trình tạo shortcode (một số CMS có gọi là BBCode). Trong WordPress, shortcode có dạng [shortcode-abc][/shortcode-abc], nó gồm 2 cặp thẻ gần giống như thẻ html, đôi khi chúng ta có thể bỏ thẻ đóng cũng được. Bạn có thể sử dụng shortcode ở trong bài viết, trong theme, hoặc bất kỳ đâu ngoại trừ phần Expert (phần văn bản rút gọn) và Widget.

Chúng ta sẽ cùng tạo một vài shortcode cho dễ hiểu nhé.

Hướng dẫn tạo Shortcode

Đầu tiên bạn tạo một plugin mới theo bài hướng dẫn mình đã viết nhé, tên plugin tùy bạn chọn thôi, mình sẽ demo luôn cái plugin mình tạo lần trước. Bạn cũng có thể viết code vào file functions.php của theme luôn cho tiện cũng được.

Có 2 phần quan trọng khi tạo shortcode:

  • Thiết lập function thực thi shortcode
  • Thêm shortcode theo function đã viết bên trên
function wpg_my_shortcode() {
    $res = 'Nội dung shortcode';
    return $res;
}
add_shortcode( 'my_shortcode', 'wpg_my_shortcode' ); 

Với đoạn code trên bạn đã tạo một shortcode tên là my_shortcode với nội dung được định nghĩa trong hàm wpg_my_shortcode(). Trong hàm wpg_my_shortcode mình không dùng echo để in ra nội dung vì khi đó nội dung bạn viết sẽ luôn hiển thị đầu tiên trong văn bản.

Bây giờ bạn thử sử dụng kiến thức về WP_Query để viết shortcode giúp hiển thị ra 5 bài viết mới nhất nhé

function create_shortcode_wpg_posts() {
    $wpg_query = new WP_Query(array(
                 'posts_per_page' => 5,
                 'orderby' => 'asc',
    )); //Query

    ob_start();
    if ( $wpg_query->have_posts() ) : //Kiểm tra xem có bài viết hay không
        // Start the loop.
        while ( $wpg_query->have_posts() ) : $wpg_query->the_post();
        //Hiển thị nội dung
        ?>
            <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
         <?php
        // End the loop.
        endwhile;
    endif;
    $wpg_posts = ob_get_contents();
    ob_end_clean();

    return $wpg_posts;
}
add_shortcode('wpg_display_posts', 'create_shortcode_wpg_posts');

 

Bạn có thể tham khảo đoạn code trên đây, bạn dùng shortcode [wpg_display_posts] để sử dụng nhé.

Hàm ob_start() và ob_end_clean() mình dùng ở đây để có thể sử dụng hàm ob_get_contents() để lưu cả đoạn HTML ở giữa 2 hàm ob_start() và ob_end_clean() vào một biến rồi sau đó return lại. Có một vài cách để làm việc này nhưng sử dụng 2 hàm này mình thấy là nhanh gọn và phù hợp nhất.

Tạo shortcode có tham số

Vấn đề ở đây là không phải lúc nào bạn cũng muốn in ra 5 bài viết, bạn muốn truyền tham số vào shortcode để nó có thể in ra số lượng bài viết tùy lúc hay bạn muốn in ra những bài viết mới của một chuyên mục nào đó. Chính vì vậy chúng ta phải tạo shortcode có thể truyền tham số được.

Để tạo một shortcode có tham số chúng ta dùng đoạn code sau:

 
function wpg_my_shortcode( $args, $content ) { 
    $res = $args['value']; 
    return $res; 
} 
add_shortcode( 'my_shortcode', 'wpg_my_shortcode' ); 

Sau đó bạn có thể sử dụng thử bằng cách gọi shortcode [my_shortcode value=”abc”]Nội dung bên trong[/my_shortcode].

Trong function wpg_my_shortcode() có gọi 2 biến $args và $content, trong đó $args là danh sách tham số khi bạn gọi shortcode, còn $content là phần nội dung bên trong shortcode được gọi. Khi bạn truyền nhiều tham số vào shortcode thì $args sẽ tự thêm giá trị vào, còn không thì giá trị đó sẽ là rỗng (empty). Ví dụ trong shortcode trên bạn có tham số value và giờ mình thêm tham số value1 khi gọi shortcode thì lúc này ta có giá trị của value1 trong function xử lý là $args[‘value1’], khi bạn chưa truyền tham số cho value1 thì $args[‘value1’] sẽ không có giá trị gì cả.

Bây giờ hãy viết lại đoạn shortcode [wpg_display_posts] ở trên nhé

function create_shortcode_wpg_posts($args, $content) {
    $wpg_query = new WP_Query(array(
                 'posts_per_page' => $args['posts_per_page'],
                 'post_type' => 'post', 
                 'cat' => $args['cat'],
                 'offset' => $args['offset'],
                 'order' => $args['order'],
                 'meta_key' => $args['meta_key'],
                 'orderby' => $args['orderby'],
    ));

    ob_start();
    if ( $wpg_query->have_posts() ) : //Kiểm tra xem có bài viết hay không
        // Start the loop.
        while ( $wpg_query->have_posts() ) : $wpg_query->the_post();
        //Hiển thị nội dung
        ?>
             <h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
        <?php 
        // End the loop. 
        endwhile; 
     endif; 
    $wpg_posts = ob_get_contents(); 
    ob_end_clean();
    return $wpg_posts; 
} 
add_shortcode('wpg_display_posts', 'create_shortcode_wpg_posts');

Đoạn shortcode trên mình đã sử dụng những tham số khá cơ bản của WP_Query, nếu chưa hiểu những tham số đó là gì bạn có thể đọc lại bài WP_Query và cách sử dụng nhé, bạn cũng có thể thêm vào tùy yêu cầu của riêng mình.

Tóm lại biến $args (kiểu array) sẽ chứa danh sách tham số được truyền vào khi gọi shortcode, giá trị của tham số sẽ là $args[‘tên_tham_số’] và biến $content sẽ chứa nội dung nằm trong cặp thẻ shortcode

Gọi shortcode trong file PHP

Để gọi shortcode trong file php bạn sử dụng hàm do_shortcode()


echo do_shortcode('[wpg_my_shortcode]'); //Gọi shortcode, shortcode có tham số như bình thường

Sử dụng shortcode trong Widget

Mặc định WordPress không cho phép bạn sử dụng shortcode trong widget, nếu muốn bạn có thể add_filter hàm do_shortcode vào là sử dụng được


add_filter('widget_text', 'do_shortcode');

Lời kết

Shortcode là một công cụ khá hay giúp bạn thực thi một cái gì đó trong đoạn văn bản, mình thường sử dụng shortcode để thực thi php trong bài viết. Với shortcode bạn có thể rút ngắn được thời gian viết bài đi rất nhiều.

Bạn có thể down plugin đã viết trong bài này tại đây

Nếu có gì chưa hiểu hãy để lại comment nhé và đừng quên bài viết sau nhé. Thank you

1 BÌNH LUẬN

BÌNH LUẬN

Please enter your comment!
Please enter your name here