Shortcode là gì? Hướng dẫn thêm vào sidebar widget

Mặc định thì wordpress không hỗ trợ các shortcode trong sidebar. Shortcode là một tính năng rất hay của wordpress, giúp bạn thêm thắt nội dung, chức năng tùy biến một cách linh động vào bài viết, trang hoặc sidebar. Rất nhiều plugins, themes sử dụng shortcode để hiển thị định dạng nội dung đặc biệt như form liên hệ, gallery ảnh, slide,…

Shortcode là gì? Cách sử dụng như thế nào?

Shortcode là gì? Cách thêm shortcode vào sidebar widget

Shortcode trong WordPress được định nghĩa là những dòng code ngắn, thực hiện những chức năng nhất định trả về nội dung động(dynamic content) theo ngữ cảnh bài viết. Shortcode có thể được sử dụng ở bài viết, trang và cả sidebar widget. Một ví dụ về shortcode mẫu có dạng như sau:

[vietrick_shortcode]

Để có thể hiểu sâu về shortcode, chúng ta hãy bắt đầu tìm hiểu về hoàn cảnh ra đời của shortcode trong WordPress. WordPress áp dụng một bộ lọc tất cả các nội dung trong bài viết, trang,..

Hướng dẫn sử dụng shortcode vào sidebar widget

Điều đầu tiên bạn cần làm là vào trong bảng điều khiển Admin, truy cập Appearance » Widgets, sau đó kéo-thả tiện ích Text widget vào sidebar của WordPress. Sau khi thêm widget mới, bạn chỉ cần dán Shortcodes vào bên trong khu vực text của widget.

Đừng quên bấm vào nút Save để lưu các thiết lập widget .

Thêm Shortcode vào sidebar WordPress bằng Custom HTML Widget

Đôi khi bạn thêm HTML tùy chỉnh cùng với shortcode nhưng chúng không hiển thị tốt trong các text widget. Trong trường hợp đó, bạn sẽ cần thêm shortcode bằng cách sử dụng kèm theo ‘Custom HTML’ widget (widget để dùng HTML tùy chỉnh).

Theo mặc định, shortcodes không được phép chạy trong các ‘Custom HTML’ widget. Để thay đổi điều này, bạn sẽ cần phải thêm đoạn code sau vào file functions.php của theme hoặc dùng 1 plugin riêng cho web (site-specific plugin) nào đó để chỉnh sửa.

add_filter( 'widget_text', 'do_shortcode' );

Sau đó, có thể thêm một ‘Custom HTML’ widget vào sidebar và tiếp tục thêm shortcode vào nó.

Đừng quên bấm Save để lưu cài đặt widget .

Kích hoạt shortcode trong functions -thêm vào sidebar widget wordpress

Với cách này bạn đơn giản chỉ cần kích hoạt nó trong functions trong child theme bằng cách thêm đoạn mã dưới đây vào cuối cùng files functions.php

// Enable shortcodes in text widgets
add_filter('widget_text','do_shortcode');

Đoạn mã này thêm một bộ lọc mới cho phép shortcodes hoạt động bên trong văn bản widget.

Bây giờ bạn có thể truy cập Appearance > Widgets và thêm một văn bản widget vào sidebar. Dán shortcode vào ô nội dung và bấm vào nút Save.

Và đó là những gì bạn cần làm để có thể hiển thị shortcode trong widgets của genesis, và giờ đây quay lại trang web của bạn và F5 để xem thành quả nào.

Hướng dẫn chèn Shortcode vào Bài viết/Trang

Để chèn shortcode vào bài viết hoặc trang, bạn tiến hành chỉnh sửa Bài viết/Trang mong muốn. Sau đó trong trình soạn thảo Gutenberg, bạn chọn khối cần thêm vào, tìm và chèn khối Shortcode

Sau khi click chọn khối Shortcode, bạn đơn giản chỉ cần nhập tên shortcode cần dùng là được. Tên shortcode có thể được khai báo bởi các plugins mà bạn cài vào như Contact Form 7 để chèn mẫu liên hệ, chèn, tạo nút gọi website wordpress,… hoặc bạn cũng có thể viết một shortcode, chi tiết ở phần sau.

Chèn shortcode thêm vào Theme WordPress – sidebar, widget

Shortcode thường được sử dụng nhiều ở bài viết, trang và sidebar widget. Tuy nhiên, đôi khi chúng ta cũng cần nhúng shortcode ở trong Theme. WordPress cho phép chúng ta chỉnh sửa các tệp .php trong theme. Nếu bạn muốn dùng shortcode ở phần nào của theme, chỉ cần tìm đến tệp .php tương ứng rồi chèn đoạn mã sau vào:

Qua bài viết này, hy vọng các bạn sẽ dễ dàng viết được shortcode đơn giản như mong muốn mà không tốn nhiều thời gian và công sức. Viết Shortcode thật đơn giản và tiện dụng. Phần chuyên sâu hơn về shortcode mình sẽ viết tiếp ở các bài sau nhé.