09/05/2023

什么是Shortcake？

WordPress通过使用短代码提供了一种在文章和页面中添加可执行代码的简便方法。许多WordPress主题和插件允许用户使用短代码添加额外的功能。然而，当用户需要输入自定义参数时，这些短代码有时会变得复杂。

例如，在一个典型的WordPress主题中，如果有一个输入按钮的短代码，用户可能需要添加至少两个到五个参数。像这样：

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

Shortcake是一个WordPress插件，也是一个未来可能的WordPress功能。它旨在通过提供一个用户界面来输入这些值来解决这个问题。这将使短代码更易于使用。

开始

本教程面向WordPress开发的新手用户。喜欢修改WordPress主题的初学者也会发现本教程非常有用。

首先，安装并激活Shortcake（Shortcode UI）插件。

现在，您需要一个接受用户输入参数的短代码。这里有一些如何在WordPress中添加短代码的内容提要。

对于本教程，我们将使用一个简单的短代码允许用户在他们的WordPress文章或页面中插入按钮。以下是我们的短代码示例代码，您可以将其添加到您主题的functions文件或特定于网站的插件中。

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”]

注册您的短代码用户界面

Shortcake API允许您注册短代码的用户界面。您需要描述您的短代码接受哪些属性、输入字段类型以及哪些文章类型将显示短代码UI。

以下是我们将用于注册短代码UI的示例代码片段。我们尝试通过内联注释解释每一步。您可以将其粘贴到您的主题的functions文件或特定于网站的插件中。

shortcode_ui_register_for_shortcode(
'cta-button',
array(
'label' => 'Add Button',
'listItemImage' => 'dashicons-lightbulb',
'attrs' => array(
array(
'label' => 'Title',
'attr' => 'title',
'type' => 'text',
'description' => '请输按钮文本',
),
array(
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'description' => '完整URL',
),
),
'post_type' => array( 'post', 'page' ),
)
);

现在，您可以通过编辑文章来查看短代码用户界面的效果。只需点击文章编辑器上方的添加媒体按钮。这将打开媒体上传器，您将注意到左侧栏中的新项’插入文章元素’。点击它将显示一个按钮来插入您的代码。

点击包含灯泡图标和您的shortcake标签的缩略图将显示短代码UI。

添加具有多个输入的短代码

在第一个示例中，我们使用了一个非常基本的短代码。现在让我们让它更复杂一点并更有用。让我们添加一个允许用户选择按钮颜色的短代码。

首先我们将添加短代码。它几乎和以前的短代码一样，只是现在它接受用户输入的颜色。

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(
'mybutton',
array(
'label' => 'Add a colorful button',
'listItemImage' => 'dashicons-flag',
'attrs' => array(
array(
'label' => 'Title',
'attr' => 'title',
'type' => 'text',
'description' => '请输按钮文本',
),
array(
'label' => 'URL',
'attr' => 'url',
'type' => 'text',
'description' => '完整URL',
),
array(
'label' => 'Color',
'attr' => 'color',
'type' => 'select',
'options' => array(
'blue' => 'Blue',
'orange' => 'Orange',
'green' => 'Green',
),
),
),
'post_type' => array( 'post', 'page' ),
)
);