Shortcode là gì? Cách tạo và thêm shortcode WordPress

Shortcode là tính năng rất tiện lợi của WordPress phù hợp với ngay cả người dùng bình thường đến lập trình viên chuyên nghiệp. Cùng Puramu tìm hiểu Shortcode là gì? Shortcode linh hoạt và tiện ích như thế nào? Cách tạo và thêm shortcode vào WordPress nhé!

Shortcode là gì?

Shortcode là một tính năng được tích hợp trong WordPress dùng để thêm tính năng vào website mà không cần phải có quá nhiều kiến thức về code. Bạn có thể sử dụng shortcode trong WordPress để tạo hoặc thay đổi tính năng mà không phải đụng đến HTML hay mã nhúng phức tạp. Nhờ có shortcode mà một người không rành về lập trình có thể tạo một tính năng trên website nhanh chóng, đơn giản và không phải tốn nhiều công sức.

Shortcode hoạt động đúng như cái tên của nó được dịch sang tiếng việt. Shortcode dịch sang tiếng việt nghĩa là code ngắn, nói rõ nghĩa hơn sẽ là một đoạn code ngắn. Bạn chỉ cần viết một đoạn code ngắn để trong dấu ngoặc vuông [ ] là có thể tạo bất kỳ tính năng gì bạn muốn. Ví dụ: Shortcode [caption] để thêm chú thích vào hình ảnh.

Bạn có thể sử dụng các shortcode mặc định trong WordPress hoặc tải plugin với từ khoá shortcode để đa dạng tính năng hơn. Shortcode cũng đi kèm với một số plugin và theme.

Bạn có thể dùng shortcode để tạo bất cứ thứ gì ở bất kỳ nơi nào trên trang web như:

• Định dạng nội dung, xác định cấu trúc toàn bộ trang web.
• Nhúng các hàm hay khối nội dung phức tạp. Cụ thể là: nhúng ảnh, video, biểu đồ, link web, thanh trượt, biểu mẫu hoặc bảng định giá, các phần tử tương tác.
• Tạo bố cục trang phức tạp, tạo các mẫu thiết kế trang sử dụng được nhiều lần.
• Hiển thị một Loop.

Ưu và nhược điểm của WordPress Shortcode là gì?

Ưu điểm

• Phù hợp với những người dùng không quá rành về lập trình do có thể dễ dàng thêm các tính năng phức tạp chỉ với một đoạn code ngắn.
• Thay vì phải viết nhiều dòng HTML hay tập lệnh PHP dài và phức tạp thì shortcode đơn giản hơn rất nhiều. Nhờ vậy mà shortcode được ứng dụng nhiều do tính tiện dụng của nó.
• Shortcode khá linh hoạt. Người dùng có thể sử dụng nó ở bất kỳ đâu trên website của họ.
• Các shortcode đi kèm với plugin giúp giảm tải khối lượng công việc cho các lập trình viên.
• Shortcode có khả năng tuỳ chỉnh cao. Bạn có thể thay đổi các thuộc tính hay tham số của shortcode để tuỳ chỉnh cách nó hoạt động, hiển thị.

Nhược điểm

• Các shortcode đi kèm với theme và plugin sẽ không hoạt động nữa nếu bạn thay đổi, tắt hay xoá theme và plugin đó. Ngoài ra, thay vì hiện tính năng thì nó lại hiện phần code trên website nên bạn cần kiểm tra lại kĩ sau khi thực hiện các hành động trên.
• Các shortcode có thể xung đột hay phá vỡ HTML hay không tương thích với một số theme hoặc plugin.
• Nếu bạn sử dụng quá nhiều shortcode trong trang web sẽ làm giảm hiệu suất của website. Do máy chủ phải xử lý nhiều lượng shortcode khác nhau. Đây cũng là một trong những nguyên nhân làm tốc độ website chậm ảnh hưởng đến trải nghiệm người dùng.
• Nếu sử dụng quá nhiều shortcode trong trang web hoặc nhiều shortcode phức tạp cùng một lúc thì sẽ gây nhầm lẫn, lỗi và khó chỉnh sửa với người dùng bình thường. Ngoài ra, để tạo ra các shortcode tùy chỉnh hay tối ưu nó để cho ra hiệu suất tốt nhất đòi hỏi bạn phải có kỹ năng lập trình.

Các shortcode mặc định trong WordPress

Có 6 shortcode mặc định trong WordPress gồm:

• Audio: Dùng để nhúng file âm thanh với thao tác đơn giản như phát và tạm dừng vào trang web. Cấu trúc: [audio].
• Video: Dùng để nhúng tệp video ở các định dạng: mp4, webm, m4v, webm, ogv, wmv, flv vào trang web. Tương tự như Audio, nó cũng có thao tác đơn giản như phát, tạm dừng. Cấu trúc: [video].
• Playlist: Dùng để chèn một danh sách phát nhạc hoặc video. Có thể thay đổi kiểu tệp tùy vào thuộc tính được cài đặt. Cấu trúc: [playlist].
• Caption: Dùng để tạo các phụ đề, chú thích xung quanh bài viết hoặc hình ảnh trong bài viết. Cấu trúc: [caption].
• Gallery: Dùng để chèn bộ sưu tập hình ảnh vào website. Các thuộc tính hỗ trợ như: chọn ảnh nào được chèn bằng ID của ảnh, tùy chỉnh giao diện hiển thị ảnh. Cấu trúc: [gallery].
• Embed: Ngoài việc nhúng nội dung từ trang web khác bạn còn có thể cài đặt các thuộc tính và thêm tham số cho các tệp nhúng. Cấu trúc: [embed].

Các loại shortcode trong WordPress

Shortcode không cần thẻ đóng (Self-closing Shortcodes)

Shortcode không cần thẻ đóng được sử dụng cho các tác vụ không yêu cầu xử lý hoặc tuỳ chỉnh nội dung cụ thể. Với loại shortcode này, bạn không cần dùng thêm thẻ đóng và có thể nhúng file từ thư mục mà không cần chỉ định các thuộc tính.

Ví dụ:

[recent_posts]

Shortcode bên trên là shortcode không cần thẻ đóng dùng để hiển thị danh sách các bài viết gần đây.

Shortcode cần thẻ đóng (Enclosing Shortcodes)

Với loại shortcode này, bạn cần có thẻ mở và thẻ đóng trong đoạn code. Nó thường được dùng để thêm một chức năng nào đó cho nội dung bên trong cặp thẻ.

Ví dụ:

[highlight] Dòng chữ này sẽ được highlight [/highlight]

Shortcode bên trên dùng để highlight nội dung bên trong.

Shortcode kết hợp (Self-closing & Enclosing)

Một số shortcode có thể hoạt động như Self-closing Shortcode hoặc Enclosing Shortcode tuỳ thuộc cách bạn sử dụng nó.

Ví dụ:

[content_box title="Tiêu đề"]

Short code [content_box] bên trên được sử dụng để tạo hộp nội dung với tiêu đề mà không cần phần nội dung cụ thể bên trong.

[content_box title="Tiêu đề"]Đây là nội dung bên trong hộp.[/content_box]

Short code [content_box] bên trên được sử dụng để tạo hộp nội dung có tiêu đề và nội dung cụ thể bên trong.

Shortcode kết hợp có thể sử dụng linh hoạt trong nhiều tình huống khác nhau. Thay vì phải tạo hai shortcode riêng biệt cho hai tính năng tương tự, bạn chỉ cần một shortcode kết hợp. Một điều lưu ý khi bạn tạo shortcode kết hợp là hãy đảm bảo nó hoạt động đúng cách trong cả hai chế độ.

Khi tạo shortcode bạn có thể linh hoạt tạo loại shortcode mình muốn thông qua hàm add_shortcode tuỳ thuộc vào nhu cầu của bạn.

Cách thêm Shortcode trong WordPress

Shortcode có thể được thêm bất kỳ đâu trên website. Dưới đây, Puramu sẽ hướng dẫn bạn cách thêm shortcode ở một vài chỗ điển hình như bài viết, trang, widget, file.

Cách thêm Shortcode WordPress vào bài viết hoặc trang

• Bước 1: Đăng nhập vào trang quản trị admin WordPress, vào Posts (bài viết) hoặc Pages (trang) mà bạn muốn chèn shortcode để tiến hành chỉnh sửa bài viết hoặc trang.
• Bước 2: Nhấp vào icon dấu cộng ở góc trên cùng bên trái, kế bên logo website. Lướt xuống mục Widget bạn sẽ thấy shortcode, nhấp vào đó để thêm shortcode.
• Bước 3: Nhập đoạn code tính năng mà bạn muốn sử dụng hoặc tìm và chèn khối shortcode.

Dưới đây là một ví dụ cụ thể:

Giả sử bạn có một tệp âm thanh có URL là https://www.puramu.com/duong-dan/ten-tep.mp3. Để nhúng tệp âm thanh này vào bài viết WordPress của bạn, bạn sẽ sử dụng shortcode [audio] như sau:

[audio src="https://www.puramu.com/duong-dan/ten-tep.mp3" autoplay="on" loop="on"]

Khi bạn đăng bài viết, một trình phát âm thanh sẽ xuất hiện trong bài viết, cho phép người đọc nghe tệp âm thanh mà bạn đã nhúng, ngoài ra tệp âm thanh này còn được tự động phát và lặp lại nhờ vào tham số autoplay="on" cũng như loop="on".

Cách thêm shortcode WordPress vào Widget

Cách sử dụng shortcode WordPress trong Widget như sau:

• Bước 1: Đăng nhập vào trang quản trị admin WordPress. Nhấp vào menu Appearance trong Dashboard WordPress, chọn mục Widgets. Bạn sẽ thấy các vùng chứa Widget được cung cấp như: Main Sidebar, Header, Footer Bar.
• Bước 2: Tại vùng chứa Widget mà bạn muốn thêm shortcode, nhấp vào icon dấu cộng +. Sau đó, gõ tìm và nhấp vào shortcode.
• Bước 3: Nhập đoạn code tính năng mà bạn muốn sử dụng hoặc chọn khối shortcode cần thêm vào.

Cách thêm shortcode WordPress vào bất kỳ file nào bằng PHP

Bạn có thể thêm shortcode vào phần cố định của trang web như header, footer hoặc sidebar bằng cách thêm shortcode vào file theme bằng PHP.

Ví dụ: Nếu bạn muốn tạo nút Call to action vào Footer (chân trang) thì bạn sẽ dùng shortcode với cú pháp gọi hàm do_shortcode() trong file footer.php

<?php echo do_shortcode("[ten_shortcode]"); ?>

Bạn có thể làm tương tự tại bất kỳ template file nào để chèn shortcode vào bất cứ đâu mà bạn cần.

Lưu ý: Bạn cần sử dụng dấu ngoặc vuông và tên shortcode [ten_shortcode] vào giữa dấu ngoặc kép trong hàm do_shortcode() để shortcode có thể hoạt động được. Chỉ truyền vào tên của shortcode sẽ không hoạt động.

Cách tạo shortcode

Tạo một shortcode trong WordPress không quá phức tạp. Shortcode giúp bạn thêm chức năng hoặc nội dung cụ thể vào bài viết hoặc trang mà không cần biết code. Dưới đây là hướng dẫn từng bước để tạo shortcode:

Tạo shortcode không tham số

Bước 1: Truy cập file functions.php

Mở file functions.php của theme bạn đang sử dụng. Bạn có thể truy cập file này qua FTP hoặc sử dụng trình chỉnh sửa Theme trong giao diện quản lý WordPress.

Bước 2: Tạo function cho shortcode

Đầu tiên, bạn cần tạo một function cho shortcode. Giả sử chúng ta muốn tạo một shortcode hiển thị dòng chữ “Chào mừng bạn đến với website!”:

function chao_mung() {
    return 'Chào mừng bạn đến với website!';
}

Bước 3: Đăng ký shortcode

Sau khi đã tạo function, bạn cần đăng ký nó như một shortcode. Sử dụng hàm add_shortcode để thực hiện việc này:

add_shortcode('chao_mung', 'chao_mung');

Ở đây, 'chao_mung' là tên của shortcode mà bạn sẽ sử dụng trong bài viết hoặc trang, và 'chao_mung' (tham số thứ hai) là tên của function bạn đã tạo.

Sau khi lưu lại các đoạn code trên, nếu bạn viết [chao_mung] vào nội dung bài viết thì nó sẽ hiển thị nội dung được viết trong function chao_mung. Chúng ta sẽ có kết quả là dòng chữ “Chào mừng bạn đến với website của tôi!” hiển thị ra màn hình.

Tạo shortcode có tham số

Phức tạp hơn 1 chút, chúng ta sẽ thêm tham số vào shortcode để có thể xử lí những bài toán phức tạp hơn. Nó cũng rất đơn giản, tương tự như việc đưa tham số vào các function.

Bước 1: Truy cập file functions.php

Mở file functions.php trong theme bạn đang sử dụng. Bạn có thể truy cập file này qua FTP hoặc sử dụng trình chỉnh sửa Theme trong giao diện quản lý WordPress.

Bước 2: Tạo function cho shortcode với tham số

Chúng ta sẽ tạo một shortcode hiển thị dòng chữ “Chào [tên]!”. Tên sẽ là một tham số mà người dùng cung cấp:

function chao_ban($atts) {
    $args = shortcode_atts(
        array(
            'ten' => 'Khách', // giá trị mặc định
        ), 
        $atts
    );
    return 'Chào ' . $args['ten'] . '!';
}

Bước 3: Đăng ký shortcode

Sau khi đã tạo function, bạn cần đăng ký nó như một shortcode:

add_shortcode('chao', 'chao_ban');

Ở đây, 'chao' là tên của shortcode mà bạn sẽ sử dụng trong bài viết hoặc trang và 'chao_ban' là tên của function bạn đã tạo.

Để sử dụng shortcode bạn vừa tạo, mở bài viết hoặc trang bạn muốn thêm vào:

• Sử dụng mặc định: [chao] sẽ hiển thị “Chào Khách!”
• Sử dụng với tham số: [chao ten="Huy"] sẽ hiển thị “Chào Huy!”

Rất đơn giản phải không! Tuy nhiên đối với người mới nên dùng những shortcode có sẵn. Việc tự tạo wordpress shortcode thường dành cho lập trình viên hoặc người có kiến thức chuyên sâu về lập trình hơn.

Qua bài viết trên, Puramu đã cung cấp cho bạn các kiến thức tổng quát về shortcode, shortcode là gì, cách thêm và tạo Shortcode. Hy vọng sẽ giúp ích cho bạn trong quá trình quản lý hay thiết kế website.