如何在帶有Shortcake的WordPress中添加Shortcodes用戶界面


如果您正在為客戶開發WordPress網站,則可能會有供客戶使用的短代碼。 問題在於,許多初學者不知道如何添加短代碼,並且如果涉及到復雜的參數,那就更加困難了。 Shortcake通過添加用於簡碼的用戶界面來提供解決方案。 在本文中,我們將向您展示如何使用Shortcake在WordPress中為簡碼添加用戶界面。

什麼是脆餅?

WordPress提供了一種使用簡碼在帖子和頁面內添加可執行代碼的簡便方法。 許多WordPress主題和插件允許用戶使用短代碼添加其他功能。 但是,有時當用戶需要輸入用於自定義的參數時,這些短代碼可能會變得很複雜。

例如,在典型的WordPress主題中,如果輸入要輸入按鈕的簡碼,則用戶可能需要至少添加2至5個參數。 像這樣:

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

Shortcake是WordPress插件,並且是擬議的未來WordPress功能。 它旨在通過提供用於輸入這些值的用戶界面來解決此問題。 這將使簡碼易於使用。

酥餅烘焙插件

入門

本教程面向WordPress開發新手。 想要調整WordPress主題的初學者用戶也會發現本教程很有幫助。

話雖如此,讓我們開始吧。

您需要做的第一件事是安裝並激活Shortcake(Shortcode UI)插件。

現在,您將需要一個接受一些用戶輸入參數的簡碼。 如果您需要一些複習,這裡是如何在WordPress中添加簡碼。

在本教程中,我們將使用一個簡單的短代碼,允許用戶在其WordPress帖子或頁面中插入一個按鈕。 這是我們的短代碼的示例代碼,您可以通過將其添加到主題的功能文件或特定於站點的插件中來使用它。

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

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '' . $title . '';
}

您還需要添加一些CSS來設置按鈕樣式。 您可以在主題的樣式表中使用此CSS。

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

這是用戶在其帖子和頁面中使用簡碼的方式:

[cta-button title="Download Now" url="http://example.com"]

現在我們有了一個接受參數的簡碼,讓我們為其創建一個UI。

用Shortcake註冊您的Shortcode用戶界面

使用Shortcake API,您可以註冊您的簡碼用戶界面。 您將需要描述您的簡碼接受哪些屬性,輸入字段類型以及哪種帖子類型將顯示簡碼UI。

這是一個示例代碼片段,我們將使用它來註冊我們的簡碼UI。 我們試圖用內嵌註釋來解釋每個步驟。 您可以將其粘貼到主題的功能文件或特定於站點的插件中。

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' ), 
)
);

就是這樣,您現在可以通過編輯帖子來查看正在使用的簡碼用戶界面。 只需單擊帖子編輯器上方的“添加媒體”按鈕。 這將調出媒體上載器,您將在左側欄中看到一個新項“插入帖子元素”。 單擊它會顯示一個按鈕以插入您的代碼。

在帖子或頁面中插入簡碼

單擊包含燈泡圖標和脆餅標籤的縮略圖,將顯示您的簡碼用戶界面。

簡單的簡碼用戶界面

添加具有多個輸入的簡碼

在第一個示例中,我們使用了非常基本的短代碼。 現在讓它變得更複雜,更有用。 讓我們添加一個允許用戶選擇按鈕顏色的簡碼。

首先,我們將添加簡碼。 它幾乎是相同的簡碼,只是現在除了用戶輸入的顏色外。

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '' . $title . '';
}

由於我們的簡碼將以不同的顏色顯示按鈕,因此我們也需要更新CSS。 您可以在主題的樣式表中使用此CSS。

.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;
}

這是按鈕的外觀:

使用簡碼創建的號召性用語按鈕

現在我們的簡碼已經準備好了,下一步是註冊簡碼UI。 我們將使用基本上相同的代碼,除了這次我們為顏色提供了另一個參數,並且為用戶提供了藍色,橙色或綠色按鈕中的選擇。

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' ), 
)
);

就是這樣,您現在可以編輯帖子或頁面,然後單擊“添加媒體”按鈕。 您會在“插入帖子元素”下注意到新添加的簡碼。

選擇要插入的帖子元素或簡碼

單擊新創建的簡碼將打開簡碼用戶界面,您可以在其中輸入值。

帶選擇字段的簡碼用戶界面

您可以將本教程中使用的代碼作為插件下載。

wpb-shortcake-tutorial

我們已經包含了CSS,因此您可以使用它來研究或使用它來使用更簡單的用戶界面在WordPress中添加您自己的號召性用語按鈕。 隨時修改源代碼並使用它。

我們希望本文能幫助您學習如何在帶有Shortcake的WordPress中為短代碼添加用戶界面。 您可能還想看看在WordPress中使用短代碼的這7個基本技巧。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。