Bạn đã bao giờ thấy những đoạn mã trông giống như hay [contact-form-7 id="123" title="Contact form 1"] trong trình soạn thảo WordPress và tự hỏi chúng là gì và hoạt động ra sao chưa? Đó chính là shortcode – những “phím tắt” quyền năng trong thế giới WordPress.
Tại Axidigi.com, chúng tôi tin rằng việc hiểu và tự tạo được shortcode có thể mở ra rất nhiều khả năng tùy biến cho website của bạn, giúp bạn làm việc hiệu quả hơn và tạo ra trải nghiệm người dùng tốt hơn. Trong bài viết này, chúng ta sẽ đi sâu vào cách tạo shortcode trong WordPress, từ những ví dụ đơn giản nhất đến các kỹ thuật nâng cao hơn.
Shortcode trong WordPress là gì?
Hiểu đơn giản, shortcode là một đoạn mã đặc biệt được đặt trong dấu ngoặc vuông ([]) mà WordPress sẽ nhận diện và thay thế bằng một nội dung hoặc chức năng cụ thể khi hiển thị trang web cho người dùng cuối.
Ví dụ: Thay vì phải viết lại một đoạn HTML phức tạp để hiển thị nút kêu gọi hành động (Call to Action – CTA) mỗi lần cần, bạn có thể tạo một shortcode như [my_cta_button] và chỉ cần chèn đoạn mã ngắn này vào bất cứ đâu.
Lợi ích của việc sử dụng shortcode:
- Tái sử dụng: Viết code một lần, sử dụng nhiều lần ở bất kỳ đâu.
- Đơn giản hóa: Người dùng không cần biết về code HTML/PHP phức tạp vẫn có thể chèn các yếu tố động.
- Dễ bảo trì: Khi cần cập nhật giao diện hoặc chức năng, bạn chỉ cần sửa code ở một nơi duy nhất (nơi định nghĩa shortcode).
- Gọn gàng: Giữ cho nội dung trong trình soạn thảo sạch sẽ và dễ quản lý hơn.
Các Cách Tạo Shortcode trong WordPress
Có hai phương pháp chính để thêm mã tạo shortcode tùy chỉnh vào website WordPress của bạn:
- Qua tệp
functions.phpcủa theme (hoặc child theme): Phù hợp cho các shortcode đơn giản hoặc chỉ dành riêng cho theme hiện tại. - Qua một plugin tùy chỉnh: Cách làm được khuyến nghị vì nó độc lập với theme, giúp shortcode của bạn vẫn hoạt động ngay cả khi bạn đổi giao diện.
Hãy cùng đi vào chi tiết từng phương pháp.
Phương pháp 1: Sử dụng tệp functions.php của Theme (Khuyến nghị dùng Child Theme)
Đây là cách nhanh chóng để thêm shortcode. Tuy nhiên, rất quan trọng là bạn nên thêm code này vào tệp functions.php của child theme, không phải theme gốc. Nếu bạn thêm vào theme gốc, mọi tùy chỉnh sẽ mất khi bạn cập nhật theme.
Các bước thực hiện:
-
Truy cập tệp
functions.php:- Trong trang quản trị WordPress, đi tới Giao diện (Appearance) > Trình sửa giao diện (Theme File Editor).
- Chọn theme (child theme) bạn muốn sửa ở góc trên bên phải.
- Tìm và nhấp vào tệp
functions.phptrong danh sách bên phải. - Cách khác: Sử dụng trình quản lý tệp của hosting hoặc FTP để truy cập
wp-content/themes/your-child-theme-name/functions.php.
“
-
Thêm mã PHP: Dán đoạn mã PHP định nghĩa shortcode của bạn vào cuối tệp
functions.php(trước thẻ đóng?>nếu có).
Ví dụ 1: Tạo Shortcode Đơn Giản Hiển Thị Lời Chào
Giả sử chúng ta muốn tạo một shortcode [hello_axidigi] để hiển thị dòng chữ “Chào mừng bạn đến với Axidigi.com!”.
<?php
// --- Thêm vào functions.php của child theme ---
// 1. Định nghĩa hàm sẽ chạy khi shortcode được gọi
function axidigi_hello_shortcode_func() {
// Nội dung bạn muốn shortcode trả về
$output = "Chào mừng bạn đến với Axidigi.com!";
// Quan trọng: Hàm shortcode phải *return* (trả về) giá trị, không *echo* (in ra) trực tiếp.
return $output;
}
// 2. Đăng ký shortcode với WordPress
// 'hello_axidigi' là tên shortcode bạn sẽ dùng trong trình soạn thảo (ví dụ: [hello_axidigi])
// 'axidigi_hello_shortcode_func' là tên hàm PHP bạn vừa định nghĩa ở trên
add_shortcode('hello_axidigi', 'axidigi_hello_shortcode_func');
// --- Các mã khác trong functions.php của bạn ---
?>{width=800 height=600}
- Lưu thay đổi: Nhấn nút “Cập nhật tệp” (Update File).
- Sử dụng shortcode: Bây giờ, bạn có thể vào bất kỳ bài viết hoặc trang nào, gõ
[hello_axidigi]vào trình soạn thảo, lưu lại và xem kết quả trên trang web!
{width=550 height=340} shortcode inserted into a paragraph block]
Phương pháp 2: Tạo một Plugin Tùy Chỉnh Đơn Giản (Khuyến nghị)
Đây là cách làm chuyên nghiệp và bền vững hơn. Shortcode của bạn sẽ không bị ảnh hưởng khi bạn thay đổi hoặc cập nhật theme.
Các bước thực hiện:
-
Tạo thư mục plugin: Trên máy tính của bạn, tạo một thư mục mới với tên gợi nhớ, ví dụ:
axidigi-custom-shortcodes. -
Tạo tệp PHP chính: Bên trong thư mục vừa tạo, tạo một tệp PHP, ví dụ:
axidigi-custom-shortcodes.php. -
Thêm thông tin Header Plugin: Mở tệp PHP vừa tạo và thêm đoạn mã sau vào đầu tệp. Đây là thông tin để WordPress nhận diện plugin của bạn:
<?php /** * Plugin Name: Axidigi Custom Shortcodes * Plugin URI: https://axidigi.com/ * Description: Plugin tùy chỉnh để thêm các shortcode hữu ích cho Axidigi.com. * Version: 1.0.0 * Author: Axidigi Team * Author URI: https://axidigi.com/ * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: axidigi-custom-shortcodes * Domain Path: /languages */ // Ngăn chặn truy cập trực tiếp vào tệp if ( ! defined( 'ABSPATH' ) ) { exit; } // --- Dán mã định nghĩa và đăng ký shortcode của bạn vào đây --- // Ví dụ: Thêm lại shortcode [hello_axidigi] function axidigi_hello_shortcode_func_plugin() { return "Chào mừng bạn đến với Axidigi.com! (Từ Plugin)"; } add_shortcode('hello_axidigi_plugin', 'axidigi_hello_shortcode_func_plugin'); // Bạn có thể thêm nhiều định nghĩa và đăng ký shortcode khác ở đây ?>“
-
Thêm mã shortcode: Dán các hàm định nghĩa và lệnh
add_shortcodecủa bạn vào tệp này (như ví dụ trên). -
Nén thư mục plugin: Nén thư mục
axidigi-custom-shortcodesthành một tệp.zip. -
Cài đặt plugin:
- Trong trang quản trị WordPress, đi tới Plugin > Cài mới (Add New).
- Nhấn nút Tải plugin lên (Upload Plugin).
- Chọn tệp
.zipbạn vừa tạo và nhấn Cài đặt (Install Now). - Sau khi cài đặt xong, nhấn Kích hoạt Plugin (Activate Plugin).
{width=624 height=452}
Bây giờ, các shortcode được định nghĩa trong plugin của bạn đã sẵn sàng để sử dụng!
“Chị Lan Anh từ Axidigi Team luôn khuyên: ‘Nếu shortcode của bạn chỉ dành riêng cho giao diện hiện tại,
functions.phpcủa child theme có thể đủ. Nhưng nếu bạn muốn nó hoạt động ngay cả khi đổi theme, hãy tạo một plugin nhỏ. Đó là cách làm bền vững hơn.'”
Tạo Shortcode Nâng Cao Hơn: Sử dụng Tham số (Attributes) và Nội dung (Content)
Shortcode không chỉ dùng để hiển thị nội dung tĩnh. Chúng ta có thể làm cho chúng linh hoạt hơn nhiều bằng cách sử dụng tham số và nội dung bọc.
Shortcode với Tham số (Attributes – atts)
Tham số cho phép bạn truyền dữ liệu vào shortcode khi sử dụng, giúp tùy chỉnh đầu ra của nó. Ví dụ: [my_button link="https://axidigi.com" text="Ghé thăm Axidigi"]. Ở đây, link và text là các tham số (attributes).
Ví dụ 2: Tạo Shortcode Nút Bấm với Tham số
Chúng ta sẽ tạo shortcode [axidigi_button] để hiển thị một nút bấm, với các tham số tùy chỉnh cho đường dẫn link, văn bản hiển thị và màu sắc.
<?php
// --- Thêm vào functions.php hoặc plugin tùy chỉnh ---
function axidigi_button_shortcode_func( $atts ) {
// 1. Thiết lập giá trị mặc định cho các tham số
$default_atts = array(
'link' => '#', // Giá trị mặc định nếu không có tham số 'link'
'text' => 'Nhấn vào đây', // Giá trị mặc định cho 'text'
'color' => 'blue' // Giá trị mặc định cho 'color'
);
// 2. Hợp nhất giá trị mặc định với tham số người dùng cung cấp
// Hàm shortcode_atts() rất hữu ích cho việc này
$merged_atts = shortcode_atts( $default_atts, $atts );
// 3. Tạo HTML output dựa trên các tham số đã hợp nhất
// Sử dụng esc_url() và esc_html() để đảm bảo an toàn
$button_html = '<a href="' . esc_url( $merged_atts['link'] ) . '" ';
$button_html .= 'style="background-color:' . esc_attr( $merged_atts['color'] ) . '; color: white; padding: 10px 15px; text-decoration: none; border-radius: 5px;" ';
$button_html .= 'target="_blank" rel="noopener noreferrer">'; // Thêm target="_blank" cho link ngoài
$button_html .= esc_html( $merged_atts['text'] );
$button_html .= '</a>';
// 4. Trả về HTML
return $button_html;
}
add_shortcode( 'axidigi_button', 'axidigi_button_shortcode_func' );
?>{width=879 height=434}
Cách sử dụng:
[axidigi_button](Sử dụng giá trị mặc định)[axidigi_button text="Tìm hiểu thêm" link="https://axidigi.com/gioi-thieu"][axidigi_button text="Liên hệ ngay" link="/lien-he" color="green"]
shortcode usage in the WordPress editor]
Shortcode Bọc Nội dung (Enclosing Shortcode – $content)
Loại shortcode này cho phép bạn đặt nội dung bên trong cặp thẻ shortcode mở và đóng, ví dụ: [highlight_box]Nội dung này sẽ được làm nổi bật.[/highlight_box].
Ví dụ 3: Tạo Shortcode Hộp Nổi Bật Bọc Nội dung
Chúng ta sẽ tạo shortcode [highlight_box] để bao bọc một đoạn văn bản và thêm một khung nền màu vàng xung quanh nó.
<?php
// --- Thêm vào functions.php hoặc plugin tùy chỉnh ---
function axidigi_highlight_box_func( $atts, $content = null ) {
// $atts: Dành cho các tham số (nếu có, ở đây không dùng)
// $content: Chứa nội dung nằm giữa thẻ mở và đóng shortcode
// 1. Tạo HTML bao bọc nội dung
// Sử dụng do_shortcode($content) nếu bạn muốn các shortcode khác bên trong vẫn hoạt động
// Sử dụng esc_html() nếu nội dung chỉ là văn bản thuần túy
$box_html = '<div style="background-color: #fffbe6; border: 1px solid #ffe58f; padding: 15px; margin: 15px 0;">';
$box_html .= do_shortcode( $content ); // Xử lý các shortcode khác bên trong nếu có
$box_html .= '</div>';
// 2. Trả về HTML
return $box_html;
}
add_shortcode( 'highlight_box', 'axidigi_highlight_box_func' );
?>{width=879 height=434}
Cách sử dụng:
[highlight_box]
Đây là một thông báo quan trọng mà bạn cần chú ý. Bạn thậm chí có thể đặt **chữ in đậm** hoặc [axidigi_button text="Nút bấm" link="#"] vào đây.
[/highlight_box]{width=879 height=434}...[/highlight_box] in the WordPress editor]
Những Lưu ý Quan trọng và Thực hành Tốt nhất khi Tạo Shortcode
Để đảm bảo shortcode của bạn hoạt động tốt, an toàn và dễ quản lý, hãy ghi nhớ những điều sau:
- Đặt Tên Shortcode Độc đáo: Luôn sử dụng tiền tố (prefix) riêng cho tên shortcode và tên hàm PHP của bạn (ví dụ:
axidigi_như trong các ví dụ) để tránh xung đột với các plugin hoặc theme khác. - Không
echo, hãyreturn: Hàm xử lý shortcode của bạn phảireturn(trả về) chuỗi HTML hoặc nội dung, không đượcecho(in ra) trực tiếp. Việcechocó thể khiến nội dung hiển thị sai vị trí trên trang. - Giữ Code Sạch sẽ & Có Tổ chức: Viết code rõ ràng, thêm chú thích (comment) để giải thích các phần phức tạp. Nếu bạn có nhiều shortcode, hãy cân nhắc tổ chức chúng trong plugin tùy chỉnh của mình.
- Bảo mật (Sanitize & Escape):
- Sanitize Input: Nếu shortcode của bạn nhận dữ liệu từ người dùng qua tham số (đặc biệt là nếu người dùng cấp thấp hơn có thể chèn shortcode), hãy làm sạch (sanitize) dữ liệu đó trước khi sử dụng (ví dụ: dùng
sanitize_text_field(),absint()). - Escape Output: Luôn thoát (escape) dữ liệu trước khi hiển thị ra HTML để ngăn chặn các cuộc tấn công Cross-Site Scripting (XSS). Sử dụng các hàm như
esc_html()cho văn bản,esc_attr()cho thuộc tính HTML,esc_url()cho URL.
- Sanitize Input: Nếu shortcode của bạn nhận dữ liệu từ người dùng qua tham số (đặc biệt là nếu người dùng cấp thấp hơn có thể chèn shortcode), hãy làm sạch (sanitize) dữ liệu đó trước khi sử dụng (ví dụ: dùng
- Ưu tiên Plugin Tùy chỉnh hoặc Child Theme: Nhắc lại lần nữa, tránh sửa đổi trực tiếp tệp
functions.phpcủa theme gốc. - Kiểm tra Xung đột: Sau khi thêm shortcode mới, hãy kiểm tra kỹ lưỡng website của bạn để đảm bảo không có xung đột nào xảy ra.
“Anh Khang, chuyên gia kỹ thuật tại Axidigi, nhấn mạnh: ‘Luôn đặt tiền tố riêng cho các hàm và tên shortcode của bạn, ví dụ
axidigi_. Điều này giúp tránh xung đột với các plugin hoặc theme khác có thể dùng tên hàm tương tự. Và đừng quênesc_html,esc_attr,esc_url– chúng là bạn thân của bạn khi làm việc với dữ liệu động!'”
Kết luận
Việc tạo shortcode trong WordPress là một kỹ năng vô cùng hữu ích, cho phép bạn mở rộng chức năng và tùy chỉnh website của mình một cách mạnh mẽ và hiệu quả. Từ việc hiển thị nội dung tĩnh đơn giản đến việc tạo ra các yếu tố động với tham số và nội dung bọc, Shortcode API của WordPress cung cấp đủ công cụ bạn cần.
Bằng cách tuân thủ các thực hành tốt nhất như sử dụng tiền tố, return thay vì echo, và ưu tiên plugin tùy chỉnh hoặc child theme, bạn có thể tạo ra các shortcode mạnh mẽ, an toàn và dễ bảo trì.
Bạn đã sẵn sàng tạo shortcode đầu tiên của mình chưa? Hãy thử áp dụng những kiến thức trong bài viết này vào website WordPress của bạn và khám phá những khả năng mới. Đừng ngần ngại chia sẻ thành quả hoặc đặt câu hỏi trong phần bình luận bên dưới nhé! Nếu bạn cần thêm các hướng dẫn WordPress chuyên sâu, hãy khám phá thêm các [liên_kết_nội_bộ_wordpress_liên_quan] khác trên Axidigi.com.
Câu hỏi thường gặp (FAQ) về Tạo Shortcode WordPress
- Shortcode trong WordPress là gì?
Đó là các mã đặc biệt trong dấu ngoặc vuông (ví dụ:[my_shortcode]) mà WordPress dùng để thay thế bằng nội dung hoặc chức năng cụ thể khi hiển thị trang. - Nên đặt mã tạo shortcode ở đâu?
Cách tốt nhất là tạo một plugin tùy chỉnh đơn giản. Nếu không, bạn có thể thêm vào tệpfunctions.phpcủa child theme (không nên dùng theme gốc). - Làm cách nào để thêm CSS tùy chỉnh cho shortcode của tôi?
Bạn có thể thêm CSS trực tiếp vào HTML (inline style) như ví dụ về nút bấm, hoặc tốt hơn là tạo một tệp CSS riêng và đăng ký (enqueue) nó từ plugin hoặcfunctions.phpcủa bạn chỉ khi shortcode được sử dụng (nâng cao hơn). Bạn cũng có thể thêm class CSS vào HTML của shortcode và định dạng trong CSS chung của theme. - Sử dụng nhiều shortcode có làm chậm website không?
Nếu shortcode chỉ thực hiện các tác vụ đơn giản (như hiển thị text, HTML cơ bản), ảnh hưởng thường không đáng kể. Tuy nhiên, nếu shortcode thực hiện các truy vấn cơ sở dữ liệu phức tạp hoặc gọi API bên ngoài, nó có thể ảnh hưởng đến tốc độ tải trang. Hãy tối ưu code trong hàm shortcode của bạn. - Có plugin nào giúp tạo shortcode mà không cần viết code không?
Có, một số plugin như “Shortcoder” hoặc “WP Shortcode Pro” cho phép bạn tạo shortcode đơn giản thông qua giao diện người dùng. Ngoài ra, nhiều page builder (Elementor, WPBakery) cũng cho phép bạn lưu các mẫu/widget và sử dụng chúng thông qua shortcode.