Hướng dẫn tạo ShortCode trên WordPress.

Chào các bạn, đến với Hướng dẫn tạo shortcode trên WordPress của WolfActive tụi mình. Cụm từ này có lẽ quá quen thuộc với mọi người rồi nhỉ? Nên hôm nay mình sẽ viết chi tiết về shortcode cũng như lỗi khi truyền tham số vào. Giờ mình cùng tìm hiểu nhé

Shortcode là một đoạn mã code ngắn được tạo ra nhằm thực thi function mà bạn gán vào cho Shortcode. Nó có thể giúp bạn rất nhiều trên Widget, Theme mà ta phát triển. Ví dụ trên Widget, bạn muốn hiển thị số lượng bài viết trên mỗi category theo ý mình và không có category “Uncategorized“, thì thay vì bạn phải tìm cách tạo một Widget mới hay tìm cách sửa nó. Thì nó sẽ giúp bạn giải quyết vấn đề này tiết kiệm thời gian hơn.

Tạo Shorcode

Để tạo ShortCode bạn cần viết trên file functions hoặc một file riêng rồi include nó vào file functions của bạn cho dễ quản lí (Cách include vào thì có rất nhiều cách hoặc các bạn có thể xem cách include của mình tại đây ). Với mình thì mình sẽ tạo file short-code.php riêng để dễ quản lí các shortcode hơn.

Sau đó mình gọi inlcude file vừa tạo vào functions.php của mình (Các bạn chú ý đây là vì mình include file vào functions.php nên làm như thế, còn bạn nào tạo trực tiếp trên file functions thì khỏi nhé).

$file_includes = [
'includes/theme-setup.php', // General theme setting
'includes/short-code.php',
];
foreach ($file_includes as $file) {
if (!$filePath = locate_template($file)) {
trigger_error(sprintf(__('Missing included file'), $file), E_USER_ERROR);
}
require_once $filePath;
}
unset($file, $filePath);
add_filter( 'widget_text', 'do_shortcode');
add_action('init', 'helloWolfactive');
function helloWolfactive(){
   add_shortcode('hello','renderHello');
}
function renderHello(){
  echo "Hello Wolfactive";
}

Dòng đầu tiên add_filter(…) cho nhiệm vụ cho các bạn có thể thực thi mọi shortcode của mình trên Widget Text. Sau đó mình callback function bằng add_action(). Kế tiếp là tạo function chứa shortcode mà mình muốn tạo bằng cách add_shortcode( ‘tên shortcode’, ‘hàm thực thi shortcode’).

Sau đó các bạn gọi shortcode vừa tạo trên file code mà bạn muốn hiện thị

do_shortcode('[hello]') 

hoặc ở trên Widget Text tại tab text

[hello]

Bây giờ mình sẽ thử tạo shortcode lấy ra list danh sách category và số lượng bài post từng category nhé.

<?php
add_action('init', 'CountPostCatWolfactive');
function CountPostCatWolfactive (){
add_shortcode('count_post_category','renderCountPost');
}
function renderCountPost() {
$cats = get_terms('category');
ob_start();
foreach($cats as $cat){
$category_link = get_term_link( $cat );
if($cat->name !== 'Uncategorized'){
echo '<li class="category-item">
        <span><a class="roboto category-name" href="'.$category_link.'">'.$cat->name.'</a></span> 
        <span clas="cat-counts-post">'.$cat->count.'<span> 
     </li>';
   }
 }
$output=ob_get_contents();
ob_end_clean();
return $output;
}

Ở đây các bạn để ý mình có dùng ob_start(), ob_get_contents(), ob_end_clean(). Giờ mình sẽ giải thích về 3 hàm này, ob_start(): Bắt đầu ghi nhớ tất cả bắt đầu từ lúc bạn gọi hàm, ob_get_contents(): ghi hết tất cả nội dung đã ghi nhớ đến thời điểm gọi hàm ob_get_contents. ob_end_clean(): reset bộ nhớ lại. Và cách gọi shortcode các bạn cứ tương tự như trên nhé [count_post_category] trên Widget Text và do_shortcode(‘[count_post_category]’).

add_action('init', 'renderSlugPostWolfactive');
function renderSlugPostWolfactive(){
add_shortcode('house_post','renderHousePost');
}
function renderHousePost($name_slug){
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => $name_slug['cat']
);
$popular_post_query = new WP_Query($args);
ob_start();
$i=0;
while ($popular_post_query->have_posts()):$popular_post_query->the_post();
$views = getPostViews(get_the_id());
if($i<=2 && $views >= 0){
?> 
   <div class="nw__post-item row-divide">
      <div class="nw__image col-divide-4">
        <a href="<?php echo get_permalink(); ?>"><?php the_post_thumbnail()?></a>
      </div>
      <div class="nw__infomation col-divide-8">
         <div class="nw__post-title nw__post-title--small">
            <a href="<?php echo get_permalink(); ?>"><?php echo wp_trim_words( get_the_title(), 10, '...' );?></a>
         </div>
         <div class="nw__editor-date open-sanrif">
            <span class="date-time open-sanrif"><?php echo get_the_date( 'F j, Y' ) ?></span>
         </div>
     </div>
</div>
<?php $i++;
}
endwhile;
$output=ob_get_contents();
ob_end_clean();
return $output; ?>

Ở đoạn code trên, các bạn thấy mình đã tạo tham số truyền vô hàm là biến $name_slug. Sau khi truyền vào thì ta cần lấy nó ra như sau $name_slug[‘đặt tên theo ý bạn’], giống như mình đã làm khi lấy tham số ra để truyền vào trong query vậy. Vậy, câu hỏi đặt ra là tại sao mình lại phải làm như thế? Lí do rất đơn giản là vì khi ta truyền tham số vào biến slug, nó sẽ có dạng như một phần tử của mảng vậy. Và nó sẽ truyền vào theo thứ tự mà bạn gọi tham số ra. Và đây là kết quả mà ta sẽ thấy.

Tuy nhiên ở một số trường hợp, Các bạn thường bị lỗi như sau: Undefined index: abcxyz … khi các bạn lấy giá trị tham số truyền vào, cụ thể như sau:

add_action('init', 'helloWolfactive');
function helloWolfactive (){
add_shortcode('say_Hi','renderHello');
}
function renderHello($op){
return $op['value'];
}

Và đây là mình muốn hiển thị value: [say_Hi text=”xin chào”] kèm theo var_dump của $op nhé (các bạn có thể ghi var_dump($op) để xem cách nó thực thi kèm kiểm tra giá trị truyền vào).

Như các bạn thấy ở đoạn code trên mình sử dụng không khác gì đoạn code trên khi mình lấy category theo name_slug. Nhưng nó lại báo lỗi undefined. Do đó mình sẽ chỉ các bạn cách 2:

function renderHello($op,$content){
extract(shortcode_atts([
'text' => '',
'color' => '',
],$op));
return '<button style="background-color: '.$color ).';">'.$text.'</button>'.$content;
}

Ở đoạn code này mình sử dụng hàm extract kèm với shortcode_atts để đưa tham số vào text và color và chuyển đổi text, color thành biến. Với cách này thì các bạn sẽ không bị vướng lỗi undefined nữa. giờ mình sẽ thử [say_Hi text=”xin chào” color=”#4267b2″]Ahihi[/say_Hi]. À mà $content sẽ chính là text của bạn đặt ở giữa shortcode như mình viết ấy 😀 giờ thì mình cùng xem kết quả nha.

Như vậy mình, đã giới thiệu cho các bạn về cách tạo shortcode và xử lí lỗi khi bạn không thể truyền tham số vào. Chúc các bạn thành công và một ngày mới vui vẻ. <3 .
Mọi thắc mắc các bạn có thể để dưới bình luận + tên bài hoặc bạn ib trực tiếp fanpage tụi mình tại: https://www.facebook.com/Wolfactiveweb.design.SEO/