Thêm shortcodes UI vào WordPress với Shortcake

6 tháng ago, Hướng dẫn WordPress, Views

Giới thiệu Shortcake và Shortcodes trong WordPress

WordPress shortcodes là những đoạn mã nhỏ cho phép bạn nhúng các chức năng phức tạp vào nội dung của bạn một cách dễ dàng. Chúng thường được sử dụng để nhúng video, hình ảnh, biểu mẫu, hoặc các thành phần tương tác khác mà không cần viết mã HTML hoặc PHP phức tạp. Shortcodes được bao quanh bởi dấu ngoặc vuông ([]), ví dụ: [youtube id="VIDEO_ID"].

Tuy nhiên, việc sử dụng shortcodes có thể trở nên khó khăn đối với người dùng không quen thuộc với chúng. Việc nhớ các thuộc tính (attributes) và cú pháp chính xác có thể gây nhầm lẫn và tốn thời gian. Đây là lúc Shortcake (Shortcake Visual Editor) xuất hiện, giúp đơn giản hóa quá trình này bằng cách cung cấp giao diện trực quan để tạo và chỉnh sửa shortcodes trực tiếp trong trình soạn thảo WordPress.

Shortcake là một plugin WordPress miễn phí, cung cấp giao diện người dùng (UI) thân thiện để quản lý shortcodes. Nó cho phép bạn xem trước các shortcodes của mình ngay trong trình soạn thảo trực quan, giúp bạn có cái nhìn chính xác về cách chúng sẽ hiển thị trên trang web của bạn. Với Shortcake, bạn không cần phải nhớ cú pháp phức tạp; bạn chỉ cần điền vào các trường và tùy chọn mà plugin cung cấp.

Lợi ích của việc sử dụng Shortcake

Shortcake mang lại nhiều lợi ích cho cả người dùng và nhà phát triển WordPress:

Dễ sử dụng: Giao diện trực quan giúp người dùng dễ dàng tạo và chỉnh sửa shortcodes mà không cần kiến thức kỹ thuật.
Xem trước trực tiếp: Xem trước các shortcodes ngay trong trình soạn thảo trực quan, giúp đảm bảo chúng hiển thị chính xác trên trang web.
Giảm lỗi cú pháp: Shortcake giúp giảm thiểu lỗi cú pháp thường gặp khi viết shortcodes thủ công.
Tăng tốc quy trình làm việc: Việc tạo và chỉnh sửa shortcodes trở nên nhanh chóng và hiệu quả hơn.
Cải thiện trải nghiệm người dùng: Giúp người dùng tạo ra nội dung đa dạng và hấp dẫn một cách dễ dàng.

Cài đặt và kích hoạt Shortcake

Việc cài đặt Shortcake cũng tương tự như cài đặt bất kỳ plugin WordPress nào khác:

Đăng nhập vào bảng điều khiển WordPress của bạn.
Đi đến mục “Plugins” -> “Add New”.
Tìm kiếm “Shortcake”.
Nhấp vào nút “Install Now”.
Sau khi cài đặt xong, nhấp vào nút “Activate”.

Sau khi kích hoạt, bạn sẽ thấy một nút “Add Media” mới trong trình soạn thảo trực quan, bên cạnh nút “Add Media” thông thường. Nút này là điểm truy cập vào giao diện Shortcake.

Sử dụng Shortcake để thêm Shortcodes

Để thêm một shortcode bằng Shortcake, hãy làm theo các bước sau:

Mở trình soạn thảo bài viết hoặc trang mà bạn muốn thêm shortcode vào.
Nhấp vào nút “Add Media” (Shortcake Visual Editor).
Một cửa sổ sẽ hiện ra, hiển thị danh sách các shortcodes có sẵn. Danh sách này sẽ bao gồm các shortcodes được cung cấp bởi WordPress (ví dụ: , ), cũng như các shortcodes được đăng ký bởi các plugin và chủ đề bạn đã cài đặt.
Chọn shortcode bạn muốn sử dụng.
Shortcake sẽ hiển thị một biểu mẫu với các trường và tùy chọn liên quan đến shortcode bạn đã chọn. Điền vào các trường này theo hướng dẫn.
Xem trước shortcode của bạn trong trình soạn thảo trực quan.
Nhấp vào nút “Insert Post” để chèn shortcode vào nội dung của bạn.

Ví dụ: Thêm Shortcode Gallery với Shortcake

Giả sử bạn muốn thêm một gallery hình ảnh vào bài viết của mình. WordPress cung cấp shortcode

để làm điều này, nhưng việc sử dụng nó trực tiếp có thể hơi rắc rối. Shortcake giúp đơn giản hóa quá trình này.

Nhấp vào nút “Add Media” (Shortcake Visual Editor).
Chọn shortcode “Gallery”.
Shortcake sẽ hiển thị một biểu mẫu cho phép bạn chọn hình ảnh từ thư viện media của bạn.
Chọn các hình ảnh bạn muốn bao gồm trong gallery.
Tùy chỉnh các thuộc tính khác của gallery, chẳng hạn như số lượng cột, kích thước hình ảnh, và liệu có hiển thị liên kết đến hình ảnh đầy đủ hay không.
Xem trước gallery của bạn trong trình soạn thảo trực quan.
Nhấp vào nút “Insert Post” để chèn shortcode gallery vào nội dung của bạn.

Phát triển Shortcodes Tương thích với Shortcake

Nếu bạn là nhà phát triển plugin hoặc chủ đề, bạn có thể làm cho shortcodes của bạn tương thích với Shortcake bằng cách cung cấp thông tin về các thuộc tính (attributes) của shortcode. Điều này cho phép Shortcake hiển thị một biểu mẫu trực quan để người dùng có thể dễ dàng tùy chỉnh shortcode của bạn.

Để đăng ký shortcode của bạn với Shortcake, bạn cần sử dụng hàm shortcode_ui_register_for_shortcode(). Hàm này nhận hai tham số:

Tên của shortcode (ví dụ: 'my_shortcode').
Một mảng các tùy chọn cấu hình.

Mảng các tùy chọn cấu hình có thể bao gồm các khóa sau:

label: Nhãn hiển thị cho shortcode trong giao diện Shortcake.
listItemImage: URL của hình ảnh hiển thị cho shortcode trong danh sách shortcodes.
attrs: Một mảng các thuộc tính (attributes) của shortcode.

Mỗi thuộc tính (attribute) trong mảng attrs phải là một mảng với các khóa sau:

label: Nhãn hiển thị cho thuộc tính.
attr: Tên của thuộc tính.
type: Kiểu dữ liệu của thuộc tính (ví dụ: 'text', 'number', 'checkbox', 'select').
description: Mô tả về thuộc tính.
meta: Một mảng các tùy chọn bổ sung, tùy thuộc vào kiểu dữ liệu.

Ví dụ:


<?php
add_action( 'init', 'register_my_shortcode_ui' );

function register_my_shortcode_ui() {
    shortcode_ui_register_for_shortcode(
        'my_shortcode',
        array(
            'label' => 'My Shortcode',
            'listItemImage' => 'url_to_your_image.png',
            'attrs' => array(
                array(
                    'label' => 'Title',
                    'attr' => 'title',
                    'type' => 'text',
                    'description' => 'The title of the shortcode.',
                ),
                array(
                    'label' => 'Content',
                    'attr' => 'content',
                    'type' => 'textarea',
                    'description' => 'The content of the shortcode.',
                ),
                array(
                    'label' => 'Show Image',
                    'attr' => 'show_image',
                    'type' => 'checkbox',
                    'description' => 'Whether to show the image or not.',
                ),
                array(
                  'label'       => 'Category',
                  'attr'        => 'category',
                  'type'        => 'select',
                  'description' => 'Select a category.',
                  'meta'        => array(
                    'value' => array(
                      'news' => 'News',
                      'events' => 'Events',
                      'blog' => 'Blog'
                    ),
                  ),
                ),
            ),
        )
    );
}
?>

Trong ví dụ này, chúng ta đăng ký một shortcode có tên là my_shortcode với các thuộc tính title (kiểu text), content (kiểu textarea), show_image (kiểu checkbox), and `category` (kiểu select). Shortcake sẽ hiển thị một biểu mẫu với các trường tương ứng để người dùng có thể dễ dàng tùy chỉnh shortcode.

Các kiểu dữ liệu được hỗ trợ bởi Shortcake

Shortcake hỗ trợ nhiều kiểu dữ liệu khác nhau cho các thuộc tính của shortcode, bao gồm:

text: Một trường văn bản đơn dòng.
textarea: Một trường văn bản đa dòng.
number: Một trường số.
checkbox: Một hộp kiểm.
select: Một menu thả xuống.
radio: Một nhóm các nút radio.
url: Một trường URL.
email: Một trường email.
color: Một bộ chọn màu.
date: Một bộ chọn ngày.
media: Một bộ chọn media (hình ảnh, video, âm thanh).

Việc chọn đúng kiểu dữ liệu cho mỗi thuộc tính giúp đảm bảo rằng người dùng có thể nhập dữ liệu một cách chính xác và dễ dàng.

Lời kết

Shortcake là một công cụ mạnh mẽ giúp đơn giản hóa việc sử dụng shortcodes trong WordPress. Nó cung cấp giao diện trực quan, giúp người dùng dễ dàng tạo và chỉnh sửa shortcodes mà không cần kiến thức kỹ thuật. Nếu bạn đang sử dụng shortcodes trong WordPress, Shortcake là một plugin không thể thiếu để cải thiện quy trình làm việc và trải nghiệm người dùng của bạn. Nếu bạn là nhà phát triển, hãy làm cho shortcodes của bạn tương thích với Shortcake để cung cấp trải nghiệm tốt hơn cho người dùng của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa