Menu

Hướng dẫn tạo shortcode WordPress

Một chức năng rất mạnh của WordPress, giúp bạn tiết kiệm rất nhiều thời gian trong việc quản lý và viết bài, 1 shortcode ngắn có thể thay cho cả đoạn mã HTML cực dài.

Ví dụ về Shortcode :

Chẳng hạn khi viết bài, chỉ cần mình paste đoạn code này :
(giữa dấu ngoặc vuông [ và chữ download không có khoảng trắng, mình phải viết vậy để hiển thị được)

1
[ download]

Kết quả sẽ được như này :

Còn với 1 vài tham số và các giá trị của chúng được thêm vào :
[download download_url="http://www.mediafire.com/"
demo_url="http://file.ituplus.com/Read-me.html" demo_text="Xem trước" download_text="Tải về"]

Kết quả sẽ được như này :

Tuyệt phải không nào?

Thực hiện tạo WordPress shortcode :

Vậy hãy bắt đầu tạo shortcode trên :x :D , mình sẽ lấy thẳng ví dụ trên cho dễ hiểu :

  1. Bạn hãy thêm đoạn code này vào trong file function.php của theme đang dùng :
    /***** Download and Demo button shortcode *****/
    function download_buttons ($atts, $content=null) {
        extract(shortcode_atts(array(
            'download_text' => 'Download', // tham số (download_text) và giá trị mặc định (Download); bạn có thể thay đổi tùy ý
            'demo_text' => 'View demo',
            'download_url' => 'http://dl.<a target="_blank" title="dropbox" href="http://goo.gl/lMWLO">dropbox</a>.com/u/36995033/File/Read-me.html',
            'demo_url' => 'http://www.<a title="ituplus" href="http://www.ituplus.com">ituplus</a>.com'
        ),$atts));
        return "
                <div class='download_wrapper'>
                    <ul>
                        <li class='download'>
                            <a href='{$download_url}'>{$download_text}</a>
                        </li>
     
                        <li class='demo'>
                            <a href='{$demo_url}'>{$demo_text}</a>
                        </li>
     
                        <div class='clear'> </div>
                    </ul>
                </div>
        ";
    }
    add_shortcode('download','download_buttons');

    Trong đó :

    • Dòng thứ 2 : download_buttons là tên function.
    • Dòng thứ 4 đến 7 : là các tham số và các giá trị mặc định của các tham số này, bạn có thể thay đổi tất cả chúng theo ý của bạn, ví dụ bạn không thích download_text vàDownload thì bạn có thể đổi thành link_tai_ve và Link Download chẳng hạn.
      Khi sử dụng shortcode viết bài, bạn có thể thêm hoặc không thêm các tham số này, nếu không thêm thì nó sẽ lấy giá trị mặc định này, mình đã lấy ví dụ ở trên rồi đó :D .
    • Dòng return : bạn sẽ đặt toàn bộ đoạn mã HTML cần thay thế bằng shortcode vào giữa 2 dấu nháy kép “, chú ý phải thay các dấu nháy kép ” bên trong đoạn mã HTML bằng các dấu nháy đơn ‘ ở giá trị của các attribute như class và id hoặc href nhé
    • Cuối cùng là gọi shortcode ra, chú ý ở dòng cuối, giá trị download là tên shortcode bạn sẽ sử dụng lúc viết bài, còn download_buttons phải chính xác là tên function ở dòng 2 nhé.
  2. Sau đó bạn hãy style cho đoạn mã HTML trên thì mới được style mà bạn mong muốn, tốt nhất bạn nên viết code HTML trước, sau đó style cho nó, sau đó paste code HTML vào đoạn return, còn style thì bạn paste vào file css của theme là xong!
    Bạn có thể tham khảo style của mình, mình đã style trong file style.css của theme mình như sau :

    .download_wrapper {background: #E2E2E2}
    .download_wrapper li { float: left; width: 200px; list-style: none; margin: 5px 30px 5px 50px; padding: 0px; text-align: center; border: 1px solid #000000;}
    .download_wrapper li a { width: 200px; height: 50px; display: block; background: url(images/download_button.jpg) repeat-x 0px -50px; color: #FFFFFF; line-height: 50px; text-decoration: none; font-size: 23px; font-weight: bold; font-family: helvatice, Arial, "Times New Roman", sans-serif ; text-shadow: 2px 2px 3px #000000; }
    .download_wrapper li a:hover { background: url(images/download_button.jpg) repeat-x 0px 0px; }

Sử dụng Shortcode dưới dạng Plugin :

Còn nếu bạn muốn sử dụng shortcode như 1 plugin bình thường, thì hãy :

  1. Mở trình editor bất kì, như NotePad hoặc NotePad++ chẳng hạn, copy đoạn code sau :
    <?php
    /*
    Plugin Name: Download and Demo button shortcode
    Plugin URI: Link den website cua Plugin
    Description: Display Download and Demo button
    Version: 1.0
    Author URI: Link den website cua tac gia Plugin
    */
     
    function download_buttons ($atts, $content=null) {
        extract(shortcode_atts(array(
            'download_text' => 'Download',
            'demo_text' => 'View demo',
            'download_url' => 'http://dl.<a target="_blank" title="dropbox" href="http://goo.gl/lMWLO">dropbox</a>.com/u/36995033/File/Read-me.html',
            'demo_url' => 'http://www.<a title="ituplus" href="http://www.ituplus.com">ituplus</a>.com'
        ),$atts));
        return "
                <div class='download_wrapper'>
                    <ul>
                        <li class='download'>
                            <a href='{$download_url}'>{$download_text}</a>
                        </li>
     
                        <li class='demo'>
                            <a href='{$demo_url}'>{$demo_text}</a>
                        </li>
     
                        <div class='clear'> </div>
                    </ul>
                </div>
        ";
    }
     
    add_shortcode('download','download_buttons');
    ?>
  2. Lưu lại thành với đuôi mở rộng là *.php ví dụ file_name.php , copy file này vào thư mục wp-content/plugins , vào bảng quản trị kích hoạt như 1 Plugin bình thường thôi, nhớ phải thêm style vào file style của theme nữa nhé.

Trên đây là 1 shortcode rất đơn giản mà mình đã làm, bạn có thể tự làm rất nhiều shortcode khác cho riêng bạn, với khả năng hiện tại mình cũng chỉ tạo được shortcode này, bạn nào Pro tạo được shortcode hay thì cũng đừng chê cười mình nhé.

Tags : Hướng dẫn tạo shortcode WordPress, Shortcode wordpress, WordPress shortcode, Shortcode Plugin

Facebook Comments

No comments

Trả lời