Shortcode WordPress là gì? Tạo Shortcode WordPress đơn giản

|

Shortcode là tính năng nổi bật của WordPress, giúp bạn thêm nội dung, chức năng tùy biến linh động vào bài viết, trang hay sidebar. Bài viết dưới đây ThemeNest sẽ hướng dẫn thêm Shortcode WordPress và tạo Shortcode WordPress. Cùng theo dõi nhé!

Tạo Shortcode WordPress đơn Giản
Tạo Shortcode WordPress đơn Giản

Shortcode WordPress là gì?

Shortcode WordPress Là Gì
Shortcode WordPress Là Gì

Shortcode dịch ra Tiếng Việt là mã ngắn, sử dụng thay thế một nội dung hay chức năng của function mà bạn đã định nghĩa trước đó. Thường được chèn vào nội dung, text, themes (Chèn vào file PHP), Widget.

Hiện nay, những Shortcode phổ biến đều có những Plugin hỗ trợ. Bạn chỉ cần tìm và cài Plugin là có thể sử dụng những shortcode đúng mong muốn.

Khi nào sử dụng Shortcode trong WordPress?

Khi Nào Sử Dụng Shortcode Trong WordPress
Khi Nào Sử Dụng Shortcode Trong WordPress

WordPress có một số bộ lọc và kiểm tra bảo mật được tích hợp sẵn. Để ngăn chặn mã độc xâm hại như:

  • Bài đăng trên WordPress.
  • Trang WordPress.
  • Các tiện ích WordPress.
  • Chủ đề WordPress.

Shortcode thường sử dụng cho:

  • Chèn đồ họa.
  • Nhúng tệp video.
  • Thêm phòng trưng bày hoặc thanh trượt đáp ứng.
  • Tạo đối tượng macro.
  • Tạo biểu mẫu khảo sát trong WordPress.
  • Thêm các nút.

Không nên dùng Shortcode khi nào?

Những Shortcode cụ thể không cần thiết nếu như bạn chỉ tạo tính năng trên 1 bài viết hay trang cụ thể. Nếu như bạn sử dụng Shortcode đó trong nhiều bài viết hay trang khác nhau thì bạn có thể sử dụng một Plugin để thêm Shortcode.

Một số hàm thao tác với Shortcode

Một Số Hàm Thao Tác Với Shortcode
Một Số Hàm Thao Tác Với Shortcode
  • add_shortcode
  • shortcode_atts
  • do_shortcode
  • shortcode_parse_atts
  • remove_shortcode
  • strip_shortcodes

Hướng dẫn thêm Shortcode vào WordPress

Hướng Dẫn Thêm Shortcode Vào WordPress
Hướng Dẫn Thêm Shortcode Vào WordPress

Hướng dẫn chèn Shortcode vào Bài viết/Trang

Để chèn Shortcode vào bài viết hay trang thì bạn tiến hành chọn Bài viết/Trang mong muốn.

Đối với trình soạn thảo Gutenberg thì bạn chọn khối cần thêm và tìm và chèn khối Shortcode.

Chèn Shortcode Vào Bài Viết
Chèn Shortcode Vào Bài Viết

Điền Shortcode Của Bạn Muốn Vào Bài Viết

Điền Shortcode Của Bạn Muốn Vào Bài Viết
Điền Shortcode Của Bạn Muốn Vào Bài Viết

Sau khi chọn khối Shortcode thì bạn chỉ cần nhập tên Shortcode cần dùng là được. Tên Shortcode có thể được khai báo bởi những Pluginn như: chèn mẫu liên hệ, Contact Form 7, WP Call Buton để chèn nút gọi hay bạn cũng có thể viết shortcode, chi tiết phần tiếp theo.

Chèn Shortcode trong WordPress Slidebar Widget

Để chèn shortcode vào Slidebar ở phần tùy biến Widget thì bạn thêm Widget Văn bản (Text) và phần nội dung văn bản bạn nhập Shortcode vào là xong.

Chèn Shortcode Trong WordPress Slidebar Widget
Chèn Shortcode Trong WordPress Slidebar Widget

Sau khi bạn điền xong thì nhớ nhấn “Lưu thay đổi“.

Chèn Shortcode vào Theme WordPress

WordPress cho chỉnh sửa những tệp .php trong theme. Nếu như bạn muốn dùng shortcode ở phần nào trong Theme thì thực hiện như sau:

  1. Đăng nhập vào trang chủ WordPress, chọn “Giao diện” rồi nhấn vào “Sửa giao diện“.
Chọn Sửa Giao Diện Trong Trang Quản Trị WordPress
Chọn Sửa Giao Diện Trong Trang Quản Trị WordPress
  1. Tìm đến tệp .php tương ứng rồi chèn vào đoạn mã sau vào:
<?php echo do_shortcode("[ten_shortcode]"); ?>

Như thế là xong.

Cách tạo Shortcode WordPress

Cách Tạo Shortcode WordPress
Cách Tạo Shortcode WordPress

Để tạo Shortcode gồm có 2 bước chính:

  1. Thiết lập function thực thi code trong Shortcode.
  1. Tạo một tên Shortcode dựa vào function đã tạo cho nó.

Để hình dung Shortcode thì mình đưa ra ví dụ như thế này:

 //Khởi tạo function cho shortcode
function create_shortcode() {
    echo "Hello World!";
}
    //Tạo shortcode tên là [test_shortcode] và sẽ thực thi code từ function create_shortcode
add_shortcode( ‘test_shortcode’, ‘create_shortcode’ );

Tức là nếu như bạn viết [test_shortcode] vào nội dung bài viết thì sẽ hiển thị cụm từ Hello World! thay cho đoạt shortcode mà bạn vừa viết.

Nhưng có một điểm là chữ Hello World! luôn luôn ở đầu bài viết do mình sử dung echo. Nếu như muốn hiển thị ngay đúng vị trí đặt Shortcode thì bạn nên dùng cú pháp return thay cho echo. Bạn có thể sửa echo “Hello World!” thành return “Hello World!” nhé và sau này khi viết shortcode, tránh dùng echo.

Tạo shortcode hiển thị 10 bài ngẫu nhiên:

function create_shortcode_randompost() {
    $random_query = new WP_Query(array(
        ‘posts_per_page’ => 10,
        ‘orderby’ => ‘rand’
    ));


    ob_start();
    if ( $random_query->have_posts() ) :
        "<ol>";
        while ( $random_query->have_posts() ) :
            $random_query->the_post();?>


                <li><a href="<?php the_permalink(); ?>"><h5><?php the_title(); ?></h5></a></li>


        <?php endwhile;
        "</ol>";
    endif;
    $list_post = ob_get_contents(); //Lấy toàn bộ nội dung phía trên bỏ vào biến $list_post để return


    ob_end_clean();


    return $list_post;
}
add_shortcode(‘random_post’, ‘create_shortcode_randompost’);

Đoạn code trên bạn có nhìn thấy ob_start, ob_end_clean và ob_get_contents, hai lệnh này có tác dụng xuất nội dung in ra của php đưa vào biến nó thực sự hữu dụng nếu nội dung sử lý phức HTML bạn không thể dùng nhiều echo sẽ gây rối mắt và khó kiểm soát.

Bây giờ thì bạn viết shortcode [random_post] vào đúng vị trí cần hiện thị danh sách bài ngẫu nhiên là xong.

Tạo Shortcode sử dụng tham số

Tạo Shortcode Sử Dụng Tham Số
Tạo Shortcode Sử Dụng Tham Số

Phần vừa rồi ta vừa tạo Shortcode đơn giản tức là hiển thị y nguyên những gì mà bạn đã viết vào shortcode mà không có quyền chỉnh sửa theo ý muốn. Nếu như bạn có nhu cầu chỉnh sửa thì sử dụng các tham số.

Ví dụ trên là mình mới tạo hiển thị 10 bài ngẫu nhiên. Nhưng khi sử dụng tham số thì người dùng tùy biến lại tham số hiển thị bài viết và có thể tùy chọn thứ tư sắp xếp theo ý muốn.

Để tạo shortcode có chứa tham số, tạo lại shortcode như sau:

function create_shortcode_thamso($args, $content) {
    return "Đây là số ". $args[‘thamso1’];
}
add_shortcode( ‘shortcode_thamso’, ‘create_shortcode_thamso’ );

Trong đó:

  • Tham số $args chứa mảng thuộc tính được truyền vòa shortcode.
  • Tham số $content là nội dung được bọc trong Shortcode.

Bạn cứ nghĩ mã Shortcode cũng viết giống như mã XML chỉ có khác ký hiệu thẻ (tag). Dưới đây là ví dụ về truyền tham số:

[shortcode_thamso thamso1="100]Đây là biến $content[/shortcode_thamso]

Như thế:

  • $args[‘thamso1’] có giá trị 100.
  • $content có giá trị là chuỗi trong cặp mở và kết của shortcode =”Đây là biến $content”.

Tương tự, ThemeNest lấy ví dụ tính tổng số thông qua shortcode:

< ?php
function create_shortcode_tinhtong($args, $content) {
        $tong = $args['term1'] + $args['term2'];
        return "Tổng là ".$tong;
}
add_shortcode( 'tinhtong', 'create_shortcode_tinhtong' );
?>

Khi viết Shortcode thì sẽ viết lại như sau:

[tinhtong term1="50" term2="30"]

Khi đó kết quả trả về là “Tổng là 80”. Right?

Ví dụ khác về sử dụng biến $content.

function create_shortcode_content($args, $content) {
        return strtoupper($content); //In hoa toàn bộ content trong shortcode
}
add_shortcode('shortcode_content', 'create_shortcode_content');

Để ý tham só của hàm xử lý Shortcode theo thứ tự vì thế muốn dùng tham số thứ 2 thì tham số 1 phải khai báo.

Cách viết Shortcode vào File PHP

Cách Viết Shortcode Vào File Php
Cách Viết Shortcode Vào File Php

Shortcode chỉ thực thi trong trình soạn thảo WordPress chứ chèn những trường hợp khác thì sẽ không tiếp nhận. Vì thế nếu như muốn chèn Shortcode vào một File PHP thì bạn sử dụng hàm do_shortcode() để nó thực thi. Ví dụ như:

<?php echo do_shortcode('[test_shortcode]'); ?>

Cách viết Shortcode vào Widget Text

Cách Viết Shortcode Vào Widget Text
Cách Viết Shortcode Vào Widget Text

Mặc định thì Widget Text không cho chèn Shortcode vào, nếu như mà bạn muốn thực thi thì chì cần filter lại là xong. Chèn đoạn mã sau vào file functions.php:

add_filter('widget_text', 'do_shortcode');

Khai báo cố định các thuộc tính của Shortcode

Khai Báo Cố định Các Thuộc Tính Của Shortcode
Khai Báo Cố định Các Thuộc Tính Của Shortcode

Thẻ HTML ví dụ input, div đều cố thuộc tính riêng không tất cả thuộc tính các thẻ đều dùng được cho nhau. Thẻ Input thì có thuộc tính value nhưng div thì không.

Cách sử lý này mang tính lập trình đơn, Wordptess cung cấp hàm shortcode_atts để khai báo những thuộc tính của 1 shortcode.

< ?php
add_shortcode('get_hello','echo_hello');
function echo_hello($prop,$content){
     //note: $args xác định các thuộc tính mặc định, ngoài các thuộc tính này ra không chấp nhận.	
 	$args=array('thuoctinh1'=>'A1','thuoctinh2'=>'A2');
      $d=shortcode_atts($args,$prop);
       extract($d);		
    return 'text-here';
}
?>

Tham số $prop chứa thuộc tính truyền vào shortcode được lọc bởi $args. Nếu thuộc tính trong $prop trong $prop không có trong $args thì lấy thuộc tính mặc định có trong $args.

Loại bỏ Shortcode trong chuỗi nội dung

Loại Bỏ Shortcode Trong Chuỗi Nội Dung
Loại Bỏ Shortcode Trong Chuỗi Nội Dung

Có hàm strip_shortcodes để loại bỏ những mã Shortcode trong chuỗi được truyền vào.

echo strip_shortcodes(get_the_content());

Plugin Shortcode WordPress

Plugin Shortcode WordPress
Plugin Shortcode WordPress

Shortcodes Ultimate

Shortcodes Ultimate là một giải pháp rất phổ biến trong những Plugin Shortcode WordPress miễn phí.

Những tính năng chính:

  • Hơn 40 Shortcode trông chuyên nghiệp.
  • Shortcode bổ sung, Shortcode tùy chỉnh, giao diện bổ sung cho Shortcode plugin.
  • Trình chỉnh sửa CSS tùy chỉnh.
  • Tiện ích tùy chỉnh.

Link tải: https://wordpress.org/plugins/shortcodes-ultimate/

Shortcodes Ultimate
Shortcodes Ultimate

Shortcodes by Angie Makes

Shortcodes by Angie Makes đi kèm với những yếu tố hữu ích và đẹp mắt cho người dùng đó là: danh sách và phần, cột đến tab, nội dung liên kết. Mỗi shortcode rất dễ tùy chỉnh bạn chỉ cần thay thế nội dung mặc định bằng nội dung riêng của mình.

Link tải: https://wordpress.org/plugins/wc-shortcodes/

Shortcodes By Angie Makes
Shortcodes By Angie Makes

Fruitful Shortcodes

Fruitful Shortcodes hơi khác với những Plugin khác, xuất hiện trong thanh công cụ của trình soạn thảo, mỗi mã có biểu tượng riêng. Sau khi cài đặt Plugin thì bạn sẽ tìm thấy tất cả những Shortcode được liệt kê trong trình chỉnh sửa và bạn chọn những mã mà mình cần.

Link tải: https://pluginarchive.com/wordpress/fruitful-shortcodes

Fruitful Shortcodes
Fruitful Shortcodes

WP Shortcode by MyThemeShop

WP Shortcode by MyThemeShop cung cấp những nút đơn giản, liên kết với video, bố cục, tab, cột, google map và những thứ mà bạn sử dụng mặc định.

Link tải: https://wordpress.org/plugins/wp-shortcode/

Wp Shortcode By Mythemeshop
Wp Shortcode By Mythemeshop

Supreme Shortcodes

Supreme Shortcodes là một Plugin cao cấp tuyệt vời và đáng tin cậy cung cấp gói Shortcode thuộc bất kỳ loại nào và bất kỳ mục đích nào. Bất cứ chức năng nào mà bạn muốn thêm vào Website thì Plugin cũng đều làm nên đơn giản.

Link tải: https://www.supremewptheme.com/supreme-shortcodes/

Supreme Shortcodes
Supreme Shortcodes

Như vậy là bài viết trên Themenest đã giới thiệu cách tạo Shortcode cơ bản, có sử dụng tham số. Thực sự Shortcode WordPress là một tính năng rất mạnh mẽ giúp bạn có thể chèn một cái gì đó nhanh chóng. Nhưng cũng nên cẩn thận bởi vì nếu như bạn sử dụng nhiều bài, sau này bạn không muốn dùng nữa thì lúc đó rất rồi. Nếu như có cách nào hay hơn hãy chia sẻ dưới bài viết để mọi người cùng biết nhé!

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với ThemeNest thông qua các kênh sau:

  • Hotline: 0902 170 180
  • Email: sales@themenest.vn

ThemeNest hiện đang có chương trình khuyến mãi dành cho khách hàng mua theme wordpress. ThemeNest sẽ hỗ trợ quý khách 24/24 với chất lượng theme tốt nhất!

Có tất cả 0 bình luận

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0902 170 180