Hướng Dẫn Thêm Giao Diện Shortcodes

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.

thêm giao diện shortcodes
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.

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

3
function cta_button_shortcode( $atts ) {
4
extract( shortcode_atts(
5
array(
6
'title' => 'Title',
7
'url' => ''
8
),
9
$atts
10
));
11
return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
12
}
Đâ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ọ:

1
.cta-button {
2
padding: 10px;
3
font-size: 18px;
4
border: 1px solid #FFF;
5
border-radius: 7px;
6
color: #FFF;
7
background-color: #50A7EC;
8
}
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ể.

1
shortcode_ui_register_for_shortcode(
2

3
/** Your shortcode handle */
4
'cta-button',
5

6
/** Your Shortcode label and icon */
7
array(
8

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

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

15
/** Shortcode Attributes */
16
'attrs' => array(
17

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

24
array(
25

26
/** This label will appear in user interface */
27
'label' => 'Title',
28
http://bit.ly/2pFAR4r
29
/** This is the actual attr used in the code used for shortcode */
30
'attr' => 'title',
31

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

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

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

41
array(
42
'label' => 'URL',
43
'attr' => 'url',
44
'type' => 'text',
45
'description' => 'Full URL',
46
),
47
),
48
),
49

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