Hướng Dẫn Thêm Giao Diện Shortcodes với Shortcake [NEW]

Nếu bạn đang phát triển một trang WordPress cho khách hàng, thì có khả năng là bạn sẽ có các mã ngắn cho khách hàng của mình sử dụng. Vấn đề là rất nhiều người mới bắt đầu không biết cách thêm các shortcode giao diện và nếu có các thông số phức tạp, nó thậm chí còn khó hơn. Shortcake cung cấp một giải pháp bằng cách thêm giao diện mã ngắn. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm mã ngắn chủ đề trong WordPress với Shortcake.

Shortcakes là gì?

WordPress cung cấp một cách dễ dàng hơn để thêm mã thực thi vào bên trong các bài đăng và trang web bằng cách sử dụng mã ngắn. Nhiều chủ đề và plugin WordPress cho phép người dùng thêm chức năng bằng cách sử dụng mã ngắn. Tuy nhiên, đôi khi các mã ngắn giao diện người dùng này có thể trở nên phức tạp khi người dùng cần cung cấp các tham số để cá nhân hóa.

Ví dụ: trong một chủ đề WordPress điển hình, nếu có mã ngắn để nhập một nút nhất định, người dùng có thể sẽ cần thêm ít nhất hai hoặc năm tham số. Như thế này:

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]

Shortcake là một plugin WordPress và là một tính năng đầy hứa hẹn trong tương lai của WordPress. Nó nhằm giải quyết các vấn đề bằng cách cung cấp giao diện người dùng để nhập các giá trị này. Điều này sẽ làm cho các mã ngắn dễ sử dụng hơn rất nhiều.

thêm mã ngắn giao diện

Bắt đầu

Hướng dẫn này nhắm đến những người dùng mới bắt đầu phát triển WordPress. Những người mới bắt đầu thích chỉnh sửa chủ đề WordPress của họ cũng sẽ thấy hướng dẫn này hữu ích.

Với điều đó đã nói, chúng ta hãy bắt đầu.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Shortcake.

Bạn sẽ cần một shortcode chấp nhận một vài tham số từ đầu vào của người dùng. Nếu bạn cần một chút trợ giúp, đây là cách thêm mã ngắn chủ đề trong WordPress.

Đối với hướng dẫn này, chúng tôi sẽ sử dụng một shortcode đơn giản cho phép người dùng thêm tùy chọn vào các bài đăng và trang WordPress của họ. Đây là mã ví dụ cho các mã ngắn của chúng tôi và bạn có thể sử dụng mã này bằng cách thêm nó vào các tệp chức năng trong chủ đề của bạn hoặc trong một plugin cho một trang cụ thể.

Bạn cũng sẽ cần thêm một số CSS để thiết kế lựa chọn của mình. Bạn có thể sử dụng CSS này trong biểu định kiểu của chủ đề.


add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
 extract( shortcode_atts(
 array(
 'title' => 'Title',
 'url' => ''
 ),
 $atts
 ));
 return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Đây là cách người dùng sử dụng shortcode trong các bài đăng và trang của họ:


.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

Bây giờ chúng ta có một shortcode chấp nhận các tham số, hãy tạo một giao diện người dùng cho nó.

Thêm giao diện mã ngắn của bạn với Shortcake

API Shortcake cho phép bạn đăng ký giao diện người dùng cho shortcode của mình. Bạn sẽ cần đăng ký những gì sẽ đại diện cho các shortcode chấp nhận của bạn, danh mục cho trường đầu vào và loại bài đăng nào mà shortcode giao diện người dùng sẽ xuất hiện.

Đây là mã ví dụ mà chúng tôi sẽ sử dụng để đăng ký giao diện người dùng của shortcode. Chúng tôi đã cố gắng giải thích từng bước trong các nhận xét. Bạn có thể dán nó vào các tệp chức năng của chủ đề hoặc vào một plugin cho một trang web cụ thể.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs' => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label' => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr' => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type' => 'text',

/** Add a helpful description for users
'description' => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'description' => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type' => array( 'post', 'page' ), 
)
);

Đó là tất cả, bây giờ bạn có thể xem giao diện người dùng mã ngắn thực tế bằng cách chỉnh sửa một bài đăng. Chỉ cần nhấp vào Thêm phương tiện phía trên trình chỉnh sửa bài đăng. Thao tác này sẽ hiển thị trình tải lên phương tiện, nơi bạn có thể nhận thấy một biểu tượng mới “chèn phần tử bài đăng” ở cột bên trái. Nhấp vào nó sẽ hiển thị cho bạn một nút để chèn mã của bạn vào.

insertpostelement-1

Nhấp vào hình thu nhỏ có chứa biểu tượng bóng đèn và Shortcake sẽ hiển thị cho bạn shortcode giao diện người dùng.

shortcodeui-1

Đã thêm mã ngắn với nhiều đầu vào

Trong ví dụ đầu tiên, chúng tôi sử dụng một đoạn ngắn rất cơ bản. Bây giờ hãy làm cho nó phức tạp hơn một chút và hữu ích hơn rất nhiều. Cũng được bổ sung giao diện mã ngắn cho phép người dùng chọn màu cho nút chọn.

Đầu tiên, chúng tôi sẽ thêm giao diện mã ngắn. Nó gần như giống mã, ngoại trừ việc bây giờ nó sẽ loại trừ đầu vào của người dùng cho màu sắc.

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Vì shortcode của chúng tôi sẽ hiển thị các nút bằng các màu khác nhau nên chúng tôi cũng sẽ cần cập nhật CSS. Bạn có thể sử dụng CSS này trong biểu định kiểu của chủ đề.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

Các nút sẽ trông như thế này:

đầy màu sắc-nút-mã ngắn-1

Bây giờ mã ngắn của chúng tôi đã sẵn sàng, bước đầu tiên là đăng ký mã ngắn giao diện người dùng. chúng tôi sẽ sử dụng cùng một mã, ngoại trừ lần này chúng tôi có một tham số khác cho màu sắc và chúng tôi cung cấp cho người dùng các lựa chọn từ các nút màu xanh lam, cam hoặc xanh lục.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Đó là tất cả, bạn có thể chỉnh sửa một bài đăng hoặc trang web và nhấp vào Thêm phương tiện. Bạn sẽ nhận thấy mã ngắn mới được thêm vào bên dưới “Chèn phần tử bài đăng”.

hậu tố-1

Nhấp vào shortcode mới tạo của bạn sẽ hiển thị giao diện người dùng shortcode nơi bạn có thể chỉ cần nhập các giá trị.

Bạn có thể tải xuống mã được sử dụng trong hướng dẫn này dưới dạng một plugin.

Chúng tôi đã bao gồm CSS, vì vậy bạn có thể sử dụng nó để tìm hiểu hoặc sử dụng nó để thêm các nút gọi hành động trong WordPress bằng cách thêm mã ngắn và sử dụng giao diện người dùng đơn giản hơn. Hãy thay đổi nguồn và chơi với nó. Bạn có thể tham khảo bài viết cách sử dụng shortcode trong sidebar widget của wordpress.