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

Shortcake là gì?

WordPress cung cấp một cách dễ dàng hơn để thêm code có thế thực thi bên trong các bài đăng và trang web bằng việc sử dụng shortcodes. Rất nhiều các giao diện WordPress và plugins cho phép người dùng thêm các chức năng sử dụng shortcodes. Tuy nhiên, thi thoảng các shortcode UI này có thể trở nên phức tạp khi một người dùng cần phải đưa ra các thông số để có thể cá nhân hóa.

Ví dụ, trong một giao diện WordPress điển hình, nếu có một shortcodes để nhập vào một nút nào đó, thì người dùng sẽ có thể cần phải thêm ít nhất hai hoặc năm thông số. Như thế này:

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

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

Bắt đầu

Hướng dẫn này có mục tiêu là các người dùng mà còn mới với việc phát triển WordPress. Người mới bắt đầu mà thích tinh chỉnh giao diện WordPress của họ cũng sẽ thấy hướng dẫn này hữu ích.

Nói đến đó, hãy cùng bắt đầu nào.

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

Bạn sẽ cần một shortcodes mà chấp nhận vài thông số từ đầu vào của người dùng. Nếu bạn cần một chút giúp đỡ, đây là cách làm thế nào để thêm giao diện shortcodes trong WordPress.

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

Bạn cũng sẽ cần phải thêm vào 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 stylesheet trên giao diện của bạn.

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 một người dùng sẽ sử dụng một shortcode trong 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 mà chấp nhận các thông số, hãy cùng tạo ra một UI cho nó.

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

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

Đây là đoạn mã ví dụ chúng tôi sẽ sử dụng để đăng ký cho UI của shortcode. Chúng tôi đã cố gắng để giải thích từng bước một trong các bình luận. Bạn có thể dán cái này vào files chức năng của giao diện hoặc vào một plugin cho một trang 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ạn giờ có thể thấy giao diện người dùng shortcode trên thực tế bằng việc chỉnh sửa một bài đăng. Đơn giản click vào Add Media ở trên công cụ chỉnh sửa bài đăng. Điều này sẽ đưa ra các media uploader nơi bạn có thể để ý một biểu tượng mới “insert post element” trong cột bên trái. Click vào nó sẽ cho bạn thấy một nút chọn để chèn code của bạn vào.

Bằng việc click vào hình nhỏ có chứa biểu tượng bóng đèn và Shortcake sẽ cho bạn thấy shortcode UI.

Thêm vào shortcode với nhiều đầu vào

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

Đầu tiện chúng ta sẽ thêm giao diện shortcodes. Nó gần như là cùng một code, ngoại trừ việc nó giờ sẽ loại trừ đầu vào 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 ta sẽ hiển thị các nút trong các màu sắc khác nhau vì vậy chúng ta cũng sẽ cần phải cập nhật CSS. Bạn có thể sử dụng CSS này trong stylesheet của giao diện.

.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:

Giờ thì shortcode của chúng ta đã sẵn sàng, bước đầu tiên là đăng ký shortcode UI. chúng ta sẽ sử dụng cùng một code, ngoại trừ rằng lần này chúng ta có một thông 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ừ nút xanh dương, cam hoặc xanh lá.

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 hay trang web và click vào Add Media. Bạn sẽ để ý shortcode mới được thêm vào bên dưới “Insert Post Elements”.

Click vào shortcode mới được tạo ra của bạn sẽ đưa ra shortcode UI, nơi bạn có thể đơn giản nhập vào các giá trị.

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

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