Trang chủ WordpressHướng dẫn Wordpress Toàn tập về shortcode trong WordPress

Toàn tập về shortcode trong WordPress

Bởi Thạch Phạm
Ngày đăng: Cập nhật cuối: 0 bình luận 2,K lượt xem

Shortcode là một chức năng được WordPress đưa vào nền tảng của họ kể từ phiên bản 2.5 trở đi. Cái tên nói lên tất cả, Shortcode nghĩa là thực thi một số hàm vĩ mô của blog bằng một đoạn code tượng trưng vào bài viết. Để dễ dàng hình dung, chúng ta có xem xét một ví dụ đơn giản sau đây.

Chúng ta muốn chèn một danh sách các bài viết mới nhất vào giữa bài viết, theo mặc định chúng ta chỉ có thể chèn vào file single.php và tất nhiên nó sẽ không hiển thị ở ngay giữa bài viết được, và đoạn code đó nó dài như thế này đây

<?php wp_get_archives(‘title_li=&type=postbypost&limit=10’); ?>

Nhưng khi áp dụng shortcode, chúng ta có thể gọi đoạn code trên bằng một đoạn code ngắn mà chúng ta đã tạo trước đó (xem cách tạo ở phần dưới)

Danh sách bài viết mới 

Vậy tại sao chúng ta phải sử dụng shortcode

  • Nhúng các đoạn mã PHP hoặc HTML vào bài viết một cách nhanh chóng.
  • Trang trí bài viết để trở nên chuyên nghiệp hơn.
  • Và còn rất nhiều lợi ích khác nữa tùy thuộc vào sự cần thiết của việc nhúng code vào bài viết.

Hướng dẫn tạo một shortcode cơ bản

Để tạo một shortcode cơ bản, ta cần làm 3 bước cơ bản như sau:

  1. Xác định function sẽ được gọi ra khi thực thi shortcode.
  2. Thiết lập tên cho shortcode.
  3. Thiết lập gọi function vào tên shortcode.

Khi tạo một shortcode, bạn chỉ cần làm việc với một file functions.php nằm trong thư mục theme.

Quay trở lại ví dụ trên, ở đây chúng ta sẽ bắt đầu làm một shortcode hiển thị những bài viết mới nhất. Đầu tiên là chúng ta sẽ tạo một function sẽ được gọi khi thực thi shortcode, nó có cấu trúc như sau:

<br /><br />function recent_posts_function() {<br />   query_posts(array(‘orderby’ =&gt; ‘date’, ‘order’ =&gt; ‘DESC’ , ‘showposts’ =&gt; 1));<br />   if (have_posts()) :<br />      while (have_posts()) : the_post();<br />         $return_string = ‘&lt;a href="’.get_permalink().’"&gt;’.get_the_title().’&lt;/a&gt;’;<br />      endwhile;<br />   endif;<br />   wp_reset_query();<br />   return $return_string;<br />}<br /><br />

Chúng ta có function rồi nhưng làm thế nào để WordPress hiểu là code gọi function đó thực thi? Đúng rồi, chúng ta phải thiết lập tên shortcode cho nó. Thêm đoạn sau vào file functions.php

<br /><br />function register_shortcodes(){<br />   add_shortcode(‘bai-viet-moi’, ‘recent_posts_function’);<br />}<br /><br />

Lúc này nó vẫn chưa có thể hoạt động được, chúng ta cần thêm một lệnh kích hoạt để shortcode được thực thi

 add_action( ‘init’, ‘register_shortcodes’); 

Khi chúng ta gõ nó sẽ hiển thị  bài viết mới nhất trong bài viết, chúng ta thử cái nào :D

Toàn tập về shortcode trong WordPress 19

Lúc này nó chỉ hiện một bài viết mới nhất thôi, vì ở code trên trong đoạn function chúng ta đâu có xác định số bài viết nó sẽ hiển thị đâu nhỉ :P, nếu các bạn muốn nó hiện số lượng bài viết tùy thích thì tiếp tục theo dõi phần nâng cao dưới đây.

Shortcode nâng cao

Tham số trong shortcode

Như ví dụ trên, chúng ta đã làm thành công một chức năng gọi bài viết mới trong bài viết bằng shortcode, nhưng nó chỉ hiển thị có một bài thôi. Nếu chúng ta muốn tùy chỉnh số bài viết hiển thị ra thì cần xác định các tham số cho chúng, và thật may mắn là shortcode cũng cho phép chúng ta thêm các thông số cần thiết vào shortcode bằng hàm shortcode_atts(). Hàm này cho phép chúng ta thêm các giá trị vào shortcode để loại bỏ giá trị mặc định khi hiển thị. Hàm thứ hai là hàm extract() cho phép chúng ta truy xuất các giá trị mà chúng ta đã xác định.

Chúng ta cùng xem đoạn code hiển thị các bài viết mới bằng số lượng nhất định.

 function recent_posts_function($atts){<br />   extract(shortcode_atts(array(<br />      ‘posts’ =&gt; 1,<br />   ), $atts));<br /><br />   $return_string = ‘&lt;ul&gt;’;<br />   query_posts(array(‘orderby’ =&gt; ‘date’, ‘order’ =&gt; ‘DESC’ , ‘showposts’ =&gt; $posts));<br />   if (have_posts()) :<br />      while (have_posts()) : the_post();<br />         $return_string .= ‘&lt;li&gt;&lt;a href="’.get_permalink().’"&gt;’.get_the_title().’&lt;/a&gt;&lt;/li&gt;’;<br />      endwhile;<br />   endif;<br />   $return_string .= ‘&lt;/ul&gt;’;<br /><br />   wp_reset_query();<br />   return $return_string;<br />} 

Ở code trên các bạn có thể thấy hàm shortcode_atts() gồm một biến tên là posts và có giá trị là 1. Lúc này, giá trị 1 là giá trị mặc định nếu chúng ta viết shortcode theo cách thông thường. Và muốn thêm số bài viết cần hiển thị thì phải thêm giá trị nhất định vào trong shortcode. Shortcode đầy đủ bao gồm tên shortcode, tên biến và giá trị. Ví dụ như sau:


Như thế, nó sẽ hiển thị 3 bài viết mới nhất. Chúng ta cùng xem ảnh nhé :P

Toàn tập về shortcode trong WordPress 20

Sử dụng mảng trong shortcode

Nếu ai đã từng học PHP thì có thể đã biết về cách hoạt động của mảng trong PHP. Trong shortcode cũng vậy, chúng ta có thể khai báo nhiều mảng một chiều hoặc mảng nhiều chiều để thêm nhiều nội dung khác nhau. Tiếp nối ví dụ trên, chúng ta sẽ sử dụng mảng để tạo một tiêu đề dành cho shortcode. Xem ảnh để dễ hình dung hơn

Toàn tập về shortcode trong WordPress 21

<br />function recent_posts_function($atts, $title = null) {<br />   extract(shortcode_atts(array(<br />      ‘posts’ =&gt; 1,<br />   ), $atts));<br /><br />   $return_string = ‘&lt;/pre&gt;<br />&lt;h2&gt;’.$title.’&lt;/h2&gt;<br />&lt;pre&gt;<br />’;<br />   $return_string .= ‘&lt;/pre&gt;<br />&lt;ul&gt;<br />&lt;ul&gt;’;&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;query_posts(array(‘orderby’ =&gt; ‘date’, ‘order’ =&gt; ‘DESC’ , ‘showposts’ =&gt; $posts));&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;if (have_posts()) :&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;while (have_posts()) : the_post();&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;$return_string .= ‘<br />	&lt;li&gt;&lt;a href="’.get_permalink().’"&gt;’.get_the_title().’&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;’;&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;endwhile;&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;<br />&lt;ul&gt;endif;&lt;/ul&gt;<br />&lt;/ul&gt;<br />&amp;nbsp;<br />&lt;ul&gt;$return_string .= ‘&lt;/ul&gt;<br />&lt;pre&gt;<br />’;<br /><br />   wp_reset_query();<br />   return $return_string;<br />}<br />

Nếu bạn đã từng học qua lập trình PHP thì có thể nhìn thấy đoạn khai báo tham số $title trong hàm recent_posts_function và truy xuất giá trị của tham số $title bằng $return_string. Và do vậy, khi dùng shortcode, chúng ta phải thêm giá trị của tham số $title vào.

Danh sách bài viết mới

Chèn shortcode vào widget, comment

Shortcode có thể chèn vào bất cứ đâu ngoài bài viết. Chúng ta có thể thử với widget và comment nhé

Cho đoạn  vào widget xem sao. Dùng widget Text nhé.

Toàn tập về shortcode trong WordPress 22

Và xem kết quả thử nào :D

Toàn tập về shortcode trong WordPress 23

Ủa híc híc, làm sao thế này :(, sao nó không hiện lên như trong bài viết nhỉ?….À đúng rồi, mặc định là WordPress chỉ cho phép thực thi ở trong bài viết mà thôi, chúng ta cần dùng một function để kích hoạt nó hiển thị ở widget.

add_filter('widget_text', 'do_shortcode');

Được rồi, xem nào, để coi lần này mày còn hiện ra dòng chữ loằng ngoằn kia không nhé :D

Toàn tập về shortcode trong WordPress 24

Hehe, cuối cùng cũng phải hiện ra thôi :D

Những plugin về shortcode nên sử dụng

Xem ra một quy trình tạo một shortcode cũng hơi phức tạp, điều này đòi hỏi bạn phải có một khoản kiến thức nhất định về PHP và HTML. Tuy nhiên nếu bạn không thông thạo lắm về quy trình tạo shortcode thì có thể sử dụng các plugin hỗ trợ, mình sẽ giới thiệu các plugin cung cấp những shortcode có sẵn và các plugin hỗ trơ  tạo code mạnh mẽ nhất.

Shortcode Pro

Đây là một plugin cho phép bạn tạo một shortcode dễ dàng thông qua các công cụ hỗ trợ. Plugin nà hỗ trợ bạn tạo shortcode để hiển thị một nội dung nhất định hoặc tự tạo một shortcode với nhiều biến và giá trị khác nhau. Hơn nữa, bạn chèn nút bấm của shortcode vào khung soạn thảo bài viết một cách dễ dàng.

 My Shortcode

Cũng như plugin trên, My Shortcode cho phép bạn tạo một shortcode và tùy chỉnh các biến và giá trị của nó, hỗ trợ tạo nút bấm cho shortcode. Nhưng điểm mạnh của plugin này cho phép bạn thêm CSS, Javascript vào template của shortcode.

Shortcode Ultimate

Đây là bộ plugin cung cấp sẵn rất nhiều shortcode nhằm để trang trí bài viết chuyên nghiệp hơn. Shortcode Ultimate giúp bạn chèn các nút bấm, list, tab.v..v..theo nhiều mẫu khác nhau.

Toàn tập về shortcode trong WordPress 25

J. Shortcode

Cũng tương tự như Shortcode Ultimate, plugin này cung cấp sẵn rất nhiều mẫu shortcode chuyên nghiệp để trang trí bài viết. Nếu bạn không sợ ngốn tài nguyên thì có thể dùng kết hợp với Shortcode Ultimate để có thêm lựa chọn khi đăng bài.

Toàn tập về shortcode trong WordPress 26

 SPD Shortcode Slider

Đây là plugin hỗ trợ shortcode chèn slide ảnh vào bài viết, rất thích hợp với các photographer :D

Toàn tập về shortcode trong WordPress 27

Lời kết

Qua bài viết này hy vọng sẽ giúp các bạn hiểu rõ về cách hoạt động của một shortcode và cách tạo một shortcode cơ bản, và nhân tiện bạn cũng biết thêm một số plugin rất tốt hỗ trợ bạn làm việc với shortcode. Trong bài viết này mình sẽ chưa đề cập tới cách tạo nút bấm cho shortcode vì phần này hơi dài và phức tạp, có thể sẽ không thích hợp với người mới tìm hiểu nên mình xin hẹn trình bày về vấn đề này ở một bài viết khác.

Tuy nhiên, nếu bạn muốn thêm các nút bấm vào shortcode của bạn thì có thể dùng các plugin mình đã giới thiệu ở trên để tạo shortcode và hỗ trợ thêm cả nút bấm.

Trong bài viết mình có sử dụng một số thuật ngữ về lập trình nên nếu bạn có gì khó hiểu, hãy lên mạng tìm các bài viết về lập trình PHP cơ bản để tìm hiểu sơ qua. Trong bài viết không thể tránh khỏi sai sót do khả năng có hạn, vì thế mình rất mong nhận được lời góp ý chân thành và được tìm hiểu tại phần bình luận.

Đánh giá nội dung này

Tham gia nhóm hỗ trợ WordPress

Tham gia nhóm Hỗ trợ Server - Hosting & WordPress để cùng nhau hỏi đáp và hỗ trợ các vấn đề về WordPress, tối ưu máy chủ/server.

Tham gia ngay
0 bình luận

Có thể bạn quan tâm

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.