WordPress Shortcode là gì? List WS Phổ Biến và Cách Sử Dụng

WordPress shortcode là gì?

WordPress shortcode là một tính năng được tích hợp sẵn trong hệ thống WordPress cho phép người dùng tạo ra các đoạn code ngắn để chèn vào bài viết hoặc trang web. Shortcode là một chuỗi ký tự đặc biệt được đặt trong cặp dấu ngoặc vuông [ ] và được sử dụng để gọi các chức năng hoặc mã lệnh.

Ví dụ, nếu bạn muốn hiển thị một bản đồ Google Maps trong bài viết của mình, bạn có thể sử dụng một shortcode như sau:

[googlemaps address="New York, USA"]

Khi bài viết được hiển thị trên trang web, shortcode này sẽ được thay thế bằng mã lệnh tương ứng và bản đồ Google Maps sẽ được hiển thị cho người dùng. Shortcode rất hữu ích cho người dùng WordPress không an hiểu về lập trình, cho phép họ tạo ra các chức năng tùy chỉnh dễ dàng và nhanh chóng.

Ưu điểm – hạn chế của shortcode wordpress

Ưu điểm của shortcode WordPress

• Dễ dàng sử dụng: Không cần phải biết lập trình, bạn có thể dễ dàng tạo và sử dụng shortcode trong WordPress.
• Tiết kiệm thời gian: Với shortcode, bạn có thể tạo ra các đoạn mã ngắn và dễ dàng chèn vào bài viết hoặc trang của mình, giúp tiết kiệm thời gian so với việc phải viết mã HTML hoặc PHP.
• Tính tùy biến cao: Shortcode cho phép bạn tùy chỉnh các tham số và tùy chọn khác nhau, tạo ra các đoạn mã phù hợp với nhu cầu của bạn.
• Dễ dàng quản lý: Bạn có thể quản lý các shortcode của mình trong một tệp tin riêng biệt, giúp cho việc sửa đổi và bảo trì trở nên dễ dàng hơn.

Nhược điểm của shortcode WordPress

• Không an toàn: Nếu bạn cho phép người dùng nhập các shortcode vào bài viết hoặc trang, điều này có thể tạo ra một lỗ hổng bảo mật trong website của bạn.
• Khó khăn trong việc tùy chỉnh: Nếu bạn muốn tạo một shortcode phức tạp với nhiều tùy chọn, điều này có thể đòi hỏi kiến thức kỹ thuật cao và khó khăn trong việc tùy chỉnh.
• Khó hiểu: Nếu bạn không quản lý tốt các shortcode của mình, chúng có thể trở nên khó hiểu và gây ra sự nhầm lẫn cho người dùng.

Danh sách wordpress shortcode thông dụng

Dưới đây là danh sách WordPress Shortcode thông dụng mà mọi người cần nhớ:

1. Gallery Shortcode

Chức năng: Hiển thị một bộ sưu tập hình ảnh trên trang web.

Cấu trúc: 

Ví dụ: 

2. Embed Shortcode

Chức năng: Chèn một bài viết, trang web hoặc video từ một trang web khác vào bài viết hoặc trang web.

Cấu trúc: 

Ví dụ: 

3. Caption Shortcode

Chức năng: Hiển thị một chú thích cho hình ảnh hoặc video.

Cấu trúc: Caption text

Ví dụ: Một bức ảnh đẹp

4. Playlist Shortcode

Chức năng: Hiển thị danh sách phát nhạc trên trang web WordPress.

Cấu trúc: 

Trong đó, ID1, ID2, ID3 là các ID của các bài hát trong thư viện nhạc của trang web WordPress.

Ví dụ: 

5. Button Shortcode

Chức năng: Tạo một nút bấm trên bài viết hoặc trang web.

Cấu trúc: [button link="URL" color="color_name"]Button text[/button]

Ví dụ: [button link="http://example.com" color="green"]Click here[/button]

6. Quote Shortcode

Chức năng: Hiển thị một trích dẫn trên bài viết hoặc trang web.

Cấu trúc: [quote]Quote text[/quote]

Ví dụ: [quote]Hãy sống đúng với niềm đam mê của bạn.[/quote]

7. Column Shortcode

Chức năng: Chia cột trong bài viết hoặc trang web.

Cấu trúc: [column size="1/2"]Content[/column]

Ví dụ: [column size="1/2"]Nội dung cột 1[/column][column size="1/2"]Nội dung cột 2[/column]

Xem thêm: WordPress Multisite là gì? Cách Cài Đặt Và Cấu Hình WP Multisite Chi Tiết

Hướng dẫn viết shortcode WordPress đơn giản

Để viết một shortcode đơn giản trong WordPress, bạn có thể làm theo các bước sau:

Bước 1. Tạo một tệp PHP mới trong thư mục theme hoặc plugin mà bạn đang sử dụng.

Bước 2. Trong tệp PHP mới, định nghĩa một hàm để xử lý shortcode của bạn.

Ví dụ:

php

function my_shortcode_function() {
  return 'Nội dung shortcode của bạn';
}

Bước 3. Sử dụng hàm “add_shortcode()” để đăng ký shortcode của bạn với WordPress. Ví dụ:

php

add_shortcode( 'my_shortcode', 'my_shortcode_function' );

Trong đó, “my_shortcode” là tên của shortcode của bạn.

Bước 4. Lưu lại tệp PHP.

Ví dụ đơn giản sau đây sẽ hiển thị một đoạn văn bản “Hello World” trên bài đăng hoặc trang của bạn:

• Tạo một tệp mới có tên là “shortcode.php” trong thư mục của theme hoặc plugin của bạn.
• Trong tệp “shortcode.php”, thêm đoạn mã sau:

php

function my_shortcode_function() {
  return 'Hello World';
}
add_shortcode( 'my_shortcode', 'my_shortcode_function' );

Trong đó, hàm “my_shortcode_function()” trả về chuỗi “Hello World”. Hàm “add_shortcode()” đăng ký shortcode “my_shortcode” với WordPress.

• Lưu lại tệp “shortcode.php”.
• Bây giờ bạn có thể sử dụng shortcode “[my_shortcode]” trong bài đăng hoặc trang của bạn để hiển thị chuỗi “Hello World”.

Lưu ý, để tránh trùng lặp với các shortcode đã sử dụng, hãy đặt tên shortcode của bạn theo cách đầy đủ và mô tả nội dung của nó. Bạn cũng nên đảm bảo rằng mã của bạn hoạt động đúng và an toàn.

Cách Sử dụng Shortcode trong WordPress như thế nào?

Cách chèn shortcode vào Bài viết/Trang

Để thêm shortcode vào bài viết hoặc trang trong WordPress, người dùng có thể làm theo các bước sau:

• Tiến hành chỉnh sửa bài viết hoặc trang mong muốn.
• Trong trình soạn thảo Gutenberg, chọn khối cần thêm vào.

• Tìm và chèn khối Shortcode vào trang web của bạn.
• Sau khi chọn khối Shortcode, nhập tên shortcode cần dùng.
• Tên shortcode có thể được khai báo bởi các plugin mà bạn đã cài đặt, ví dụ như Contact Form 7 để chèn mẫu liên hệ, WP Call button để chèn nút gọi,…

Giờ đây, bạn có thể lưu bài đăng hoặc trang của mình và xem trước các thay đổi của mình để xem shortcode đang hoạt động.

Thêm shortcode trong WordPress Sidebar Widget

Bạn cũng có thể sử dụng shortcode trong các sidebar widget của WordPress.

Chỉ cần truy cập trang Appearance » Widgets và thêm widget ‘shortcode’ vào một sidebar.

Lúc này bạn có thể dán shortcode vào trong vùng văn bản của widget.

Đừng quên nhấp vào nút Update’ để lưu cài đặt widget con.

Sau đó, bạn có thể truy cập trang web WordPress của mình để xem bản xem trước trực tiếp của shortcode trong sidebar widget.

Thêm shortcode vào Theme WordPress

Shortcode WordPress thường được sử dụng trong các bài đăng, trang và widget để tùy biến trang web của bạn. Tuy nhiên, đôi khi bạn cần sử dụng một shortcode Theme WordPress của mình.

1. Mở Theme WordPress của bạn.
2. Tìm vị trí mà bạn muốn chèn shortcode vào.
3. Thêm đoạn mã sau vào vị trí đó:

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

Trong đó, “ten_shortcode” là tên của shortcode mà bạn muốn sử dụng.

4. Lưu lại tệp chủ đề của bạn.

Bây giờ, WordPress sẽ tìm shortcode và hiển thị đầu ra của nó trong mẫu Theme của bạn.

Lưu ý: Nếu bạn không chắc chắn về cách chỉnh sửa Theme WordPress của mình, hãy tạo một bản sao lưu trước khi thực hiện bất kỳ thay đổi nào.

Chèn một shortcode trong Classic Editor cổ điển

Nếu bạn vẫn đang sử dụng trình chỉnh sửa cổ điển trong WordPress, bạn có thể thêm shortcode vào các bài đăng và trang WordPress của mình bằng cách làm theo các bước sau:

• Bước 1: Hãy đăng nhập vào trang quản trị WordPress của bạn.
• Bước 2: Chọn Bài viết hoặc Trang mà bạn muốn thêm shortcode.
• Bước 3: Trong trình soạn thảo, tìm vị trí mà bạn muốn chèn shortcode vào.
• Bước 4: Dán shortcode vào vị trí đó. Chỉ cần đảm bảo shortcode nằm trong dòng riêng của nó.
• Bước 5: Click nút Preview (Xem trước) để xem trước cách shortcode sẽ hiển thị trên trang web của bạn.
• Bước 6: Nếu bạn hài lòng với cách shortcode hiển thị, hãy click Publish (Xuất bản) hoặc Update (Cập nhật) để lưu bài viết hoặc trang của bạn.

Cách thêm shortcode tùy chỉnh riêng trong WordPress

Shortcode sẽ vô cùng hữu ích khi bạn muốn thêm nội dung hoặc mã tùy chỉnh vào bài đăng hoặc trang trên website WordPress. Tuy nhiên, nếu bạn muốn tạo một shortcode tùy chỉnh, thì bạn cần phải có kinh nghiệm lập trình.

Nếu bạn có thể viết mã PHP, dưới đây là một đoạn code mà bạn có thể sử dụng để tham khảo.

// Hàm chạy khi shortcode được gọi
function ten_shortcode() { 
  
// Những việc bạn muốn làm.
$message = 'Xin chào thế giới!'; 
  
// Đầu ra cần được trả về
return $message;
}
// Đăng ký shortcode
add_shortcode('ten_shortcode', 'ten_shortcode');

Trong đoạn code này, chúng ta đã tạo một hàm chạy một số code và trả lại đầu ra. Sau đó, chúng ta đã tạo một shortcode mới có tên là ‘ten_shortcode’ và cho biết WordPress sẽ chạy hàm mà chúng ta đã tạo.

Bây giờ bạn có thể sử dụng shortcode này trong các bài đăng, trang và widget của mình bằng cách sử dụng mã sau:

[ten_shortcode]

Nó sẽ thực thi hàm mà bạn đã tạo và hiển thị đầu ra mong muốn.

Bây giờ hãy xem một ví dụ sử dụng shortcode một cách thực tế hơn. Trong ví dụ này, chúng ta sẽ hiển thị một banner quảng cáo Google AdSense bên trong shortcode.

// Hàm shortcode
function ten_shortcode_2() { 
  
// Mã quảng cáo được dán vào một biến
$string .= '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-0123456789101112"
     data-ad-slot="9876543210"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>';
  
// Mã quảng cáo được trả về
return $string; 
  
}
// Đăng ký shortcode
add_shortcode('my_ad_code', 'ten_shortcode_2');

add_shortcode(‘my_ad_code’, ‘ten_shortcode_2’);

Đừng quên thay thế mã quảng cáo bằng mã quảng cáo của riêng bạn.

Bây giờ bạn có thể sử dụng shortcode [my_ad_code] trong các bài đăng, trang và widget của WordPress của bạn. WordPress sẽ tự động thực thi hàm liên quan đến shortcode và hiển thị mã quảng cáo.

Quan tâm: WordPress Hosting Tốc Độ cao Tại LANIT

Sự khác biệt giữa Shortcode và Gutenberg blocks.

Shortcode và Gutenberg blocks là hai cách để thêm nội dung vào trang web WordPress, nhưng cả 2 đều có sự khác biệt nhất định.

Shortcode là một đoạn code được viết ngắn gọn trong cặp dấu ngoặc vuông [ ] để thực thi một hành động hoặc hiển thị nội dung động.

Ví dụ, bạn có thể sử dụng shortcode :

Shortcode thường được thêm vào trang bằng cách dán đoạn code vào trình soạn thảo bài viết hoặc trang.

Gutenberg blocks là các phần tử được tạo ra bằng trình soạn thảo Gutenberg, cho phép bạn tạo và chỉnh sửa nội dung của trang web của bạn một cách trực quan. Các khối Gutenberg cung cấp rất nhiều tính năng để tự do tạo và thiết kế bố cục trang web của bạn. Bạn có thể thêm các phần tử khác nhau vào khối Gutenberg, chẳng hạn như văn bản, hình ảnh, video, bảng, mẫu và nhiều hơn nữa.

Vì vậy, trong khi shortcode chỉ là một đoạn code ngắn để thực hiện một hành động hoặc hiển thị nội dung động, Gutenberg blocks cung cấp cho bạn một giao diện trực quan để tạo và chỉnh sửa nội dung của trang web của bạn một cách dễ dàng hơn.

Kết luận

Tóm lại, shortcode là một tính năng rất hữu ích trong WordPress, giúp bạn tạo ra các đoạn mã ngắn và dễ dàng chèn vào bài viết hoặc trang của mình. Trên đây là những thông tin cơ bản về shortcode trong WordPress, hy vọng rằng nó đã giúp ích cho bạn trong việc hiểu rõ hơn về wordpress shortcode là gì và cách sử dụng nó một cách hiệu quả.

Cảm ơn bạn đọc đã theo dõi bài viết của chúng tôi!