Bỏ qua tới nội dung
Kiến thức Website· ·14 phút đọc

Shortcode là gì? Đoạn mã ngoặc vuông trong WordPress hoạt động ra sao

Nguyen Hien
Shortcode là gì? Đoạn mã ngoặc vuông trong WordPress hoạt động ra sao
Cỡ chữ

Bạn đang chỉnh sửa bài viết trên web WordPress và bắt gặp chuỗi ký tự kỳ lạ kiểu nằm trong phần nội dung. Không biết đó là gì, không biết xóa hay giữ, và cũng chưa chắc nó hiển thị ra thứ gì khi web lên máy chủ. Bài này giải thích đúng cái đó: shortcode là gì, ai tạo ra chúng trong web của bạn, và tại sao gỡ plugin sai thứ tự thì web lại trơ ra chữ lạ.

Shortcode là gì, hiểu theo cách đơn giản nhất

Shortcode (đoạn mã ngắn) là một chuỗi ký tự đặc biệt viết trong dấu ngoặc vuông mà WordPress nhận ra và tự động chuyển thành nội dung thật khi tải trang. Thay vì phải nhúng nguyên một đoạn HTML dài hay mã lập trình phức tạp vào bài viết, bạn chỉ cần gõ một cái nhãn ngắn là xong.

Lấy ví dụ cụ thể: bạn có một bộ ảnh sản phẩm cần hiển thị trong trang Giới thiệu. Thay vì viết hàng chục dòng HTML để dựng album, bạn chỉ cần gõ

vào đúng chỗ muốn album hiện ra. WordPress đọc cái nhãn đó, tìm đoạn mã xử lý tương ứng, rồi trả về HTML đầy đủ khi trang load. Người xem web không thấy chuỗi ký tự đó, họ chỉ thấy kết quả cuối.

Tính năng này ra đời từ WordPress 2.5 vào năm 2008, theo tài liệu chính thức của WordPress.org. Mục tiêu ban đầu là để người viết bài không rành kỹ thuật vẫn có thể chèn các thành phần phức tạp vào nội dung mà không cần đụng tới code.

Sơ đồ cơ chế hoạt động shortcode: người dùng gõ nhãn ngoặc vuông, WordPress xử lý, kết quả HTML hiển thị cho người xem
Shortcode là cầu nối: bạn gõ nhãn ngắn, WordPress lo phần HTML đầy đủ phía sau.

Shortcode đến từ đâu trong web của bạn

Không phải shortcode nào cũng xuất phát từ cùng một chỗ. Có ba nguồn tạo ra chúng, và biết rõ điều này sẽ giúp bạn xử lý đúng khi có vấn đề xảy ra.

WordPress core (phần lõi của WordPress) đi kèm sáu shortcode mặc định từ đầu:

để chèn album ảnh, để nhúng file phương tiện, Sơ đồ ba nguồn tạo shortcode trong WordPress: WordPress Core có sẵn 6 shortcode mặc định, Plugin tạo shortcode riêng khi cài, Theme thương mại có shortcode giao diện

Dạng này dùng khi shortcode cần xử lý một đoạn nội dung cụ thể, không chỉ chèn thêm thứ gì đó vào trang. Cả hai dạng đều nhận thêm thuộc tính để tuỳ chỉnh đầu ra. Ví dụ

để ảnh hiển thị thành ba cột với kích thước lớn.

Điều cần biết thêm: tên thuộc tính trong shortcode luôn ở dạng chữ thường. Nếu bạn sao chép một shortcode từ tài liệu plugin, cần giữ nguyên cú pháp chính xác, kể cả dấu ngoặc kép và dấu bằng, để shortcode hoạt động đúng.

So sánh shortcode và block Gutenberg

Từ WordPress 5.0 năm 2018, hệ thống soạn thảo Gutenberg (trình soạn thảo khối) ra đời và đang dần thay thế cách dùng shortcode trong nhiều tình huống. Nếu bạn đang dùng page builder thay vì Gutenberg, phần lớn page builder cũng hỗ trợ nhúng shortcode trực tiếp qua một widget riêng. Hai cái này khác nhau ở những điểm thực chất sau:

Tiêu chíShortcodeBlock Gutenberg
Hình thức trong bàiChuỗi ký tự [...] trong văn bảnKhối trực quan, thấy ngay khi soạn thảo
Ai tạo raPlugin, theme, hoặc WordPress corePlugin, theme, hoặc WordPress core
Cách chỉnh sửaGõ tay hoặc sao chép nhãn văn bảnBấm, kéo thả, điền vào form trực tiếp
Phụ thuộc pluginCao: tắt plugin là shortcode trơ ra ngayThấp hơn: block thường hiển thị nội dung dự phòng
Ra đời từWordPress 2.5 (năm 2008)WordPress 5.0 (năm 2018)
Trạng thái hiện tạiVẫn hoạt động, ít được phát triển thêmĐang được WordPress ưu tiên phát triển

Hai cái không loại trừ nhau hoàn toàn. Trên web WordPress hiện tại, bạn có thể dùng cả hai cùng lúc. WordPress còn có một block đặc biệt tên “Shortcode” dùng để chèn shortcode ngay trong giao diện soạn thảo Gutenberg. Muốn hiểu rõ hơn về hệ thống block này, xem thêm bài về Gutenberg là gì.

Bẫy hay gặp nhất: gỡ plugin thì shortcode trơ ra thành chữ

Đây là điểm quan trọng nhất cần nắm, và cũng là chỗ nhiều người bị bất ngờ nhất.

Shortcode chỉ hoạt động khi plugin (hoặc theme) đăng ký nó đang chạy. Khi bạn tắt hoặc gỡ plugin đó, WordPress không còn biết [contact-form-7 ...] hay [rev_slider ...] là gì nữa. Thay vì hiển thị form hay slider, web hiển thị nguyên chuỗi ký tự thô đó ra ngoài trang.

Hình dung cụ thể: bạn có trang “Liên hệ” với shortcode [contact-form-7 id="5"] nhúng trong nội dung. Mọi thứ ổn. Rồi bạn chuyển sang plugin form khác và gỡ Contact Form 7. Lúc đó, người vào trang “Liên hệ” sẽ thấy đúng chuỗi chữ [contact-form-7 id="5"] hiện ra ngoài trang thay vì form liên hệ thật.

Vấn đề không dừng ở một trang. Nếu nội dung web từng dùng shortcode ở nhiều chỗ, việc dọn dẹp sau khi gỡ plugin đòi hỏi phải vào từng bài, từng trang, xóa hoặc thay thế từng shortcode bị trơ một cách thủ công. Không có cách nào tự động làm hết cùng một lúc.

Quy trình đúng khi muốn gỡ plugin có shortcode gồm bốn bước theo thứ tự sau:

  1. Tìm shortcode trong toàn bộ nội dung: vào WordPress admin, dùng chức năng tìm kiếm nội dung hoặc plugin quản lý shortcode để liệt kê hết các bài viết và trang đang dùng chuỗi shortcode của plugin đó.
  2. Thay thế hoặc xóa từng chỗ: vào từng bài, xóa shortcode và thay bằng thành phần mới, chẳng hạn block tương đương hoặc nội dung trực tiếp.
  3. Kiểm tra hiển thị từng trang: mở từng trang vừa chỉnh trên trình duyệt để chắc chắn không còn shortcode nào trơ ra.
  4. Gỡ plugin: nội dung đã sạch, gỡ plugin một cách an toàn, không lo mất thứ gì.

Làm ngược lại, tức là gỡ plugin trước rồi mới đi tìm shortcode bị trơ, là tự tạo thêm việc sau này. (Phần này nhiều người bỏ qua, tới lúc web chạy rồi mới phát hiện có trang đang hiện chữ lạ.)

Sơ đồ quy trình 4 bước trước khi gỡ plugin có shortcode: tìm hết shortcode, thay hoặc xóa, kiểm tra trang, sau đó mới gỡ plugin
Bốn bước theo đúng thứ tự này sẽ tránh được tình trạng web trơ chữ lạ sau khi gỡ plugin.

Người không rành kỹ thuật cần quan tâm đến shortcode ở mức nào

Nếu bạn chỉ dùng WordPress để viết bài và đăng nội dung, gần như không cần quan tâm đến shortcode. WordPress hiện tại đã chuyển sang Gutenberg và hầu hết tính năng phổ biến, bao gồm nhúng video, chèn form, tạo gallery, đều có block riêng để kéo thả và thấy kết quả ngay. Shortcode là cách làm của thời kỳ trước 2018, còn tồn tại nhưng không còn là hướng phát triển chính.

Trường hợp bạn cần biết thêm về shortcode:

  • Bạn đang quản lý web cũ (làm trước năm 2019) và nội dung nhiều shortcode chưa chuyển sang block.
  • Bạn nhận bàn giao web từ người khác và cần hiểu tại sao có những ký tự lạ trong nội dung bài viết.
  • Bạn muốn gỡ hoặc thay plugin mà trước đó người làm web dùng nhiều shortcode trong bài.

Nếu thuê người làm web, hãy hỏi thẳng: các chức năng trên web đang dùng plugin nào, và khi thay plugin thì phần nội dung có shortcode sẽ chuyển sang như thế nào. Không hỏi trước thì sau này gỡ plugin mà không biết đang dùng shortcode ở đâu sẽ mất thêm thời gian và tiền dọn dẹp.

Timeline lịch sử shortcode và block Gutenberg: shortcode API ra đời 2008, Gutenberg ra đời 2018, hiện nay plugin mới ưu tiên dùng block
Shortcode không bị xóa bỏ, nhưng WordPress đang ưu tiên phát triển block cho tương lai.

Cần làm mới hoặc nâng cấp web WordPress theo đúng hướng hiện đại? Web22 nhận tư vấn cụ thể qua dịch vụ thiết kế website WordPress của Web22.

Câu hỏi thường gặp

Shortcode có còn được dùng không hay đã bị bỏ?

Shortcode vẫn hoạt động bình thường trong WordPress và chưa bị loại bỏ. Nhiều plugin phổ biến vẫn dùng shortcode song song với block. Tuy nhiên, WordPress đang tập trung phát triển hệ thống block Gutenberg, nên các plugin mới ưu tiên tạo block thay vì shortcode.

Tôi có thể xóa shortcode đang nằm trong bài viết không?

Được. Xóa chuỗi shortcode trong phần nội dung bài viết không gây lỗi gì cho WordPress. Khi xóa, thành phần đó, chẳng hạn form, slider, hay gallery, sẽ không còn hiển thị ở vị trí đó nữa. Cần xóa hay không tuỳ vào việc bạn muốn thay thế bằng gì.

Shortcode có ảnh hưởng đến tốc độ web không?

Bản thân shortcode là nhãn văn bản, không ảnh hưởng đến tốc độ trang. Tốc độ phụ thuộc vào cái mà shortcode gọi ra, tức là plugin, script, hay câu truy vấn cơ sở dữ liệu bên trong. Plugin cồng kềnh thì dù dùng shortcode hay block cũng làm web chậm theo cách tương đương.

Tôi có thể dùng shortcode trong widget hay sidebar không?

Một số theme và plugin hỗ trợ shortcode trong widget (tiện ích phụ ở sidebar), nhưng không phải mặc định của WordPress. Mỗi chỗ hỗ trợ hay không tuỳ thuộc vào theme và plugin đang cài. Nếu cần dùng shortcode ở vị trí ngoài bài viết, cần kiểm tra theme đang có hỗ trợ không trước khi thử.

Đọc tiếp

Bài viết
cùng chủ đề.

Tất cả bài viết
Chat Zalo