Cách tạo Shortcode từ A tới Z trong wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cách tạo Shortcode từ A tới Z trong wordpress

Shortcode là gì? tại sao phải sử dụng shortcode?
tạo shortcode wordpress

Shortcode dịch theo như đúng nghĩa tiếng việt là code ngắn hay coi là một quãng code ngắn. Đoạn code ngắn này sẽ thực thi những tác vụ gì này mà bạn đã định sẵn trong quá trinh tạo shortcode, tỉ dụ hiển thị video youtube chằng hạn.

Bạn cũng đều có thể thực thi shortcode này mọi lúc mọi nơi ngoại trừ excerpt và widget, nhưng mình sẽ chỉ dẫn bạn khắc phục, đọc bài này: Chèn shortcode vào widget text trong wordpress

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

  • add_shortcode
  • shortcode_atts
  • do_shortcode
  • shortcode_parse_atts
  • remove_shortcode
  • strip_shortcodes

Cách tạo shortcode

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

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

Toàn bộ code trong bài viết này mình viết vào functions.php của theme.
Sử dụng hàm add_shortcode để tạo shortcode, với cú pháp:

 add_shortcode  (    $tag     ,     $func    )    ;   

Trong đó:

  • $tag: chuỗi xác định tên shortcode, VD: myshortcode khi sử dụng: [myshortcode]
  • $func: hàm sử lý shortcode.
   //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'     )    ;   

– Hàm sử lý shortcode này sẽ in ra chữ “Hello World!”, nhớ rằng bạn có thể sử lý bất cứ công việc gì hiển thị ra frontend hoặc chỉ sử lý dữ liệu. Chèn mã shortcode vào nội dung bài viết, bây giờ hàm sử lý shortcode được gọi, thí dụ mình sẽ thêm chuỗi sau vào bài viết.

 [test_shortcode] 

Khi view bài viết, chuỗi này sẽ có thay thế bởi chữ “Hello World!”. Nhưng có 1 vấn đề là chuỗi này luôn nằm ngay đầu bài viết vì echo .

– Tại sao lại vậy? lý do trước hiển thị nội dung bài viết, wordpress kiểm tra và sử lý toàn bộ shortcode có trong bài viết rồi mang vào mảng các nội dung được tách bởi shortcode theo đúng thứ tự rồi cuối cùng ghép lại với nhau. Vì lệnh echo là in chuỗi ngay ra frontend, nên kết quả là hiển thị ở đầu nội dung bài viết.
– Để tránh điều đó hàm phải trả về giá trị. Sửa lại hàm trên như sau:

   function   create_shortcode  (    )     {     return     "Hello World!"    ;     }   

Về tương lai khi viết shortcode tránh dùng echo hay print_r, var_dump,printf.

Tương tự, ta áp dụng thêm một xíu kiến thức về Loop và Query để tạo một shortcode hiển thị 10 bài tình cờ nhé.

    10, 'orderby' =>  'rand' ));   ob_start(); if ( $random_query-> have_posts() ) : " 
    "; while ( $random_query-> have_posts() ) : $random_query-> the_post();?>  
  1. <?php the_permalink ( ) ; ?> ">
  2.   < ?php endwhile; "
"; endif; $list_post = ob_get_contents(); //Lấy toàn bộ nội dung phía trên thả 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 nhìn thấy có ob_start, ob_end_clean và ob_get_contents, 2 lệnh này có tác dụng lấy nội dung in ra của php dẫn vào biến nó thực sự hữu dụng nếu nội dung sử lý phức tạp html bạn không thể dùng nhiều echo sẽ gây rối mắt và khó kiểm xoát. Xem ví dụ đơn giản mình lưu chuỗi HTML vào biến, thỏa sức thiết kế HTML và không sợ đụng tới php.

    <   ?php   ob_start    (    )    ;     ?>       <  table border  =    "1"    >       <  tr  >       <  td  >   row   1    -  col1   </ td  >       <  td  >   row   1    -  col2   </ td  >       </ tr  >       <  tr  >       <  td  >   row   2    -  col1   </ td  >       <  td  >   row   2    -  col2   </ td  >       </ tr  >       </ table  >       <   ?php   $html    =    ob_get_contents    (    )    ;     ob_get_clean    (    )    ;     echo     $html    ;     ?>    

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

Ở phần trước chúng ta chỉ tìm hiểu qua cách tạo một shortcode đơn giản, tức là nó chỉ hiển thị y chóc những gì ta đã viết vào shortcode mà không cho phép chỉnh lại theo ý muốn của người sử dụng. Nếu bạn mong muốn cho người sử dụng cũng có thể có thể tự sửa lại những gì hiển thị ra thì tại đây chúng ta phải sử dụng các tham số.

Ở ví dụ trước chúng ta cho hiển thị 10 bài viết ngẫu nhiên. Nhưng nếu khi sử dụng tham số chúng ta cũng có thể cho người dùng tùy biến lại tham số cấp phép hiển thị con số bài viết và có thể tùy chọn thứ tự xắp xếp theo ý muốn.

Để tạo shortcode có chứa tham số, ta 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ào shortcode, còn $content là nội dung được bọc trong shortcode.

Tưởng tượng mã shortcode viết giống mã XML chỉ khác ký hiệu thẻ (tag). Đây là thí dụ về truyền tham số nói ở trên:

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

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

Ví dụ khác, tính tổng 2 số:

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

Và khi viết shortcode ta sẽ viết như sau:

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

– Kết quả sẽ trả về là “Tổng là 80“. Right?

Một tỉ dụ khác 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 sử lý shortcode theo thứ tự do vậy muốn dùng tham số thứ 2 thì tham số 1 bắt buộc phải khai báo.

Cách viết shortcode vào file PHP

Shortcode chỉ thực thi trong môi trường trình soạn thảo wordpress, trong môi trường code nó sẽ không hiểu, để chạy shortcode trong code php bạn sử dụng hàm do_shortcode.

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

Cách viết shortcode vào widget Text

Xem bài viết này: https://www.hoangweb.com/wordpress-site/chen-shortcode-vao-widget-text-trong-wordpress

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

Chúng ta đã biết thẻ html ví dụ input, div chúng có thuộc tính riêng không phải mọi thứ các tính chất của các thẻ đều dùng được nghĩ nhau. Thẻ Input có tính chất value, nhưng div thì không.

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

    <   ?php add_shortcode  (    'get_hello'    ,    'echo_hello'    )    ;     function   echo_hello  (    $prop    ,    $content    )    {     //note: $args xác định các tính chất 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 tính chất (key của mảng $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.

Chúng ta có hàm strip_shortcodes để loại bỏ tất cả những mã shortcode trong chuỗi được truyền vào.

   echo   strip_shortcodes  (  get_the_content  (    )    )    ;   

Sử dụng shortcode có sẵn

Trong phiên bản wordpress gần đây, có bổ trợ sẵn một vài shortcode tiện ích. Xem tất cả những shortcode đã cài đặt kể cả mặc định và những shortcodes tạo thêm bởi plugin…với công cụ sau:
https://wordpress.org/plugins/shortcode-reference

Nếu bạn có nhu cầu thiết kế web WordPress sử dụng shortcodes, hãy liên hệ với Hoàng nhé!
Chúc bạn học tốt.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ với bạn bè bằng cách nhấn nút chia sẻ ở bên dưới. Theo dõi chúng tôi trên Twitter và Facebook

Bài viết Cách tạo Shortcode từ A tới Z trong wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang