Thêm tính năng comment bằng tài khoản mạng xã hội

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.

Quà tặngLizatom Shortcodes – Bộ shortcode cực khủng trị giá $47

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)

[bai-viet-moi posts="10"]Danh sách bài viết mới [/bai-viet-moi]

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:

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

Chúng ta có function rồi nhưng làm thế nào để WordPress hiểu [bai-viet-moi posts=”10″] 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

function register_shortcodes(){
   add_shortcode('bai-viet-moi', 'recent_posts_function');
}

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õ [bai-viet-moi] 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 big smile Thêm tính năng comment bằng tài khoản mạng xã hội

lightbox[483]”>test shortcode1 Thêm tính năng comment bằng tài khoản mạng xã hội

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ỉ icon razz Thêm tính năng comment bằng tài khoản mạng xã hội , 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

Biến và giá trị 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 giá trị tham số (trong lập trình chúng ta thường gọi nó là biến) 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){
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));

   $return_string = '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';

   wp_reset_query();
   return $return_string;
}

Ở 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:

[bai-viet-moi posts="3"]

 

Như thế, nó sẽ hiển thị 3 bài viết mới nhất. Chúng ta cùng xem ảnh nhé icon razz Thêm tính năng comment bằng tài khoản mạng xã hội

lightbox[483]”>test shortcode21 Thêm tính năng comment bằng tài khoản mạng xã hội

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

test shortcode3 Thêm tính năng comment bằng tài khoản mạng xã hội

function recent_posts_function($atts, $title = null) {
   extract(shortcode_atts(array(
      'posts' => 1,
   ), $atts));

   $return_string = '<h2>'.$title.'</h2>';
   $return_string .= '<ul>';
   query_posts(array('orderby' => 'date', 'order' => 'DESC' , 'showposts' => $posts));
   if (have_posts()) :
      while (have_posts()) : the_post();
         $return_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      endwhile;
   endif;
   $return_string .= '</ul>';

   wp_reset_query();
   return $return_string;
}

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 mảng $title và truy xuất giá trị trong mảng $title bằng $return_string. Và do vậy, khi dùng shortcode, chúng ta phải thêm giá trị của mảng $title vào.

[bai-viet-moi posts="3"]Danh sách bài viết mới[/bai-viet-moi]

Lưu ý, nếu sử dụng mảng trong shortcode, chúng ta cần phải có một thẻ đóng, thẻ đóng không cần điền biến và giá trị của biến vào.

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 [bai-viet-moi posts="3"] vào widget xem sao. Dùng widget Text nhé.

test shortcode4 Thêm tính năng comment bằng tài khoản mạng xã hội

Và xem kết quả thử nào big smile Thêm tính năng comment bằng tài khoản mạng xã hội

test shortcode5 Thêm tính năng comment bằng tài khoản mạng xã hội

Ủa híc híc, làm sao thế này icon sad Thêm tính năng comment bằng tài khoản mạng xã hội , 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é big smile Thêm tính năng comment bằng tài khoản mạng xã hội

test shortcode6 Thêm tính năng comment bằng tài khoản mạng xã hội

Hehe, cuối cùng cũng phải hiện ra thôi big smile Thêm tính năng comment bằng tài khoản mạng xã hội

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.

shortcodes15 Thêm tính năng comment bằng tài khoản mạng xã hội

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.

screenshot 2 Thêm tính năng comment bằng tài khoản mạng xã hội

 

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 big smile Thêm tính năng comment bằng tài khoản mạng xã hội

 

shortcoder slider Thêm tính năng comment bằng tài khoản mạng xã hội

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.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s