如果您正在为客户开发一个WordPress网站，那么很可能您的客户将使用简码。 问题是很多初学者不知道如何添加简码，如果涉及复杂的参数，那就更难了。 Shortcake通过添加用于简码的用户界面来提供解决方案。 在这篇文章中，我们将向您展示如何使用Shortcake在WordPress中添加简码的用户界面。
什么是Shortcake？
WordPress提供了一种更简单的方法，使用简码在帖子和页面中添加可执行的代码。 许多WordPress主题和插件允许用户使用简码添加附加功能。 但是，当用户需要输入用于定制的参数时，有时这些简码可能变得复杂。
例如，在一个典型的WordPress主题中，如果有一个短代码进入一个按钮，那么用户可能需要添加至少两到五个参数。 喜欢这个：
[themebutton url =“http://example.com”title =“立即下载”color =“purple”target =“newwindow”]
Shortcake是一个WordPress插件，并提出了未来的WordPress功能。 它旨在通过提供用户界面来输入这些值来解决这个问题。 这将使短代码更容易使用。
入门
本教程面向WordPress开发新手的用户。 喜欢调整WordPress主题的初级用户也会觉得这个教程很有帮助。
话虽如此，让我们开始吧。
首先你需要安装并激活Shortcake（Shortcode UI）插件。
您现在需要一个接受用户输入的几个参数的简码。 如果你需要一点点复习，这里是如何在WordPress中添加短代码。
为了本教程的目的，我们将使用一个简单的简码，允许用户在他们的WordPress帖子或页面中插入一个按钮。 下面是我们简码的示例代码，您可以通过将其添加到主题的功能文件或特定于站点的插件中来使用它。
add_shortcode（'cta-button'，'cta_button_shortcode'）;
函数cta_button_shortcode（$ atts）{
提取（shortcode_atts（
阵列（
'title'=>'标题'，
'url'=>''
）
$的ATT
））;
返回“ “;
}
您还需要添加一些CSS来设置按钮的样式。 你可以在你的主题的样式表中使用这个CSS。
.cta-button {
填充：10px;
font-size：18px;
border：1px solid #FFF;
border-radius：7px;
颜色：#FFF;
背景颜色：＃50A7EC;
}
这是用户如何在他们的帖子和页面中使用短代码：
[cta-button title =“立即下载”url =“http://example.com”]
现在我们有了一个接受参数的简码，我们来为它创建一个UI。
用Shortcake注册您的Shortcode用户界面
Shortcake API允许您注册短代码的用户界面。 您将需要描述短代码接受哪些属性，输入字段类型以及哪些帖子类型将显示短代码UI。
这里是一个示例代码片段，我们将用它来注册我们的简码的用户界面。 我们试图用内嵌评论来解释每一步。 您可以将其粘贴到主题的功能文件或特定于站点的插件中。
shortcode_ui_register_for_shortcode（ / **您的简码句柄* / 'CTA-按钮'， / **您的简码标签和图标* / 阵列（ / **短代码用户界面的标签。 这部分是必需的。 * / 'label'=>'添加按钮'， / **图标或短代码的图像附件。 可选的。 src或者dashicons- $图标。 * / 'listItemImage'=>'dashicons-lightbulb'， / **简码属性* / 'attrs'=>数组（ / ** *接受用户输入的每个属性都将有自己的数组定义像这样 *我们的短代码接受两个参数或属性，标题和URL *让我们先定义标题字段的用户界面。 * / 阵列（ / **这个标签会出现在用户界面* / 'label'=>'Title'， / **这是用于短代码的代码中使用的实际attr * / 'attr'=>'标题'， / **定义输入类型。 支持的类型是文本，复选框，textarea，收音机，选择，电子邮件，网址，号码和日期。 * / 'type'=>'text'， / **为用户添加有用的说明 'description'=>'请输入按钮文字'， ） / **现在我们将定义URL字段的UI * / 阵列（ 'label'=>'URL'， 'attr'=>'url'， 'type'=>'text'， 'description'=>'完整网址'， ） ） ） / **你可以选择哪些帖子类型显示简码UI * / 'post_type'=> array（'post'，'page'）， ） ）;
就是这样，您现在可以通过编辑帖子来查看短代码的用户界面。 只需点击帖子编辑器上方的“添加媒体”按钮即可。 这将调出媒体上传器，您将会在左侧栏中注意到一个新项目“插入帖子元素”。 点击它会显示一个按钮来插入你的代码。
点击包含灯泡图标和脆饼标签的缩略图会显示简码UI。
添加多个输入的简码
在第一个例子中，我们使用了一个非常基本的简码。 现在让我们更复杂一点，更有用。 让我们添加一个允许用户选择按钮颜色的简码。
首先我们将添加短代码。 这几乎是相同的简码，除了它现在除了颜色的用户输入。
add_shortcode（'mybutton'，'my_button_shortcode'）;
函数my_button_shortcode（$ atts）{
提取（shortcode_atts（
阵列（
'color'=>'蓝色'，
'title'=>'标题'，
'url'=>''
）
$的ATT
））;
返回“ “;
}
由于我们的短代码将显示不同颜色的按钮，所以我们也需要更新我们的CSS。 你可以在你的主题的样式表中使用这个CSS。
.mybutton {
填充：10px;
font-size：18px;
border：1px solid #FFF;
border-radius：7px;
颜色：#FFF;
}
.blue-button {
背景颜色：＃50A7EC;
}
.orange-button {
背景色：＃FF7B00;
}
.green-button {
背景色：＃29B577;
}
这是按钮的样子：
现在我们的短代码已经准备就绪，下一步就是注册短代码UI。 我们将使用基本相同的代码，除了这次我们有另一个颜色参数，我们提供用户从蓝色，橙色或绿色按钮中选择。
shortcode_ui_register_for_shortcode（ / **您的简码句柄* / '为myButton'， / **您的简码标签和图标* / 阵列（ / **短代码用户界面的标签。 这部分是必需的。 * / 'label'=>'添加一个彩色按钮'， / **图标或短代码的图像附件。 可选的。 src或者dashicons- $图标。 * / 'listItemImage'=>'dashicons-flag'， / **简码属性* / 'attrs'=>数组（ / ** *接受用户输入的每个属性都将有自己的数组定义像这样 *我们的短代码接受两个参数或属性，标题和URL *让我们先定义标题字段的用户界面。 * / 阵列（ / **这个标签会出现在用户界面* / 'label'=>'Title'， / **这是用于短代码的代码中使用的实际attr * / 'attr'=>'标题'， / **定义输入类型。 支持的类型是文本，复选框，textarea，收音机，选择，电子邮件，网址，号码和日期。 * / 'type'=>'text'， / **为用户添加有用的说明* / 'description'=>'请输入按钮文字'， ） / **现在我们将定义URL字段的UI * / 阵列（ 'label'=>'URL'， 'attr'=>'url'， 'type'=>'text'， 'description'=>'完整网址'， ） / **最后我们将定义用于颜色选择的UI * / 阵列（ 'label'=>'颜色'， 'attr'=>'color'， / **我们将使用选择字段而不是文本* / 'type'=>'select'， 'options'=> array（ 'blue'=>'蓝色'， 'orange'=>'橙色'， '绿'=>'绿'， ） ） ） / **你可以选择哪些帖子类型显示简码UI * / 'post_type'=> array（'post'，'page'）， ） ）;
就是这样，您现在可以编辑帖子或页面，然后单击“添加媒体”按钮。 您将会在“插入帖子元素”下注意到您新添加的简码。
点击你刚刚创建的短代码将弹出短代码UI，在那里你可以简单地输入值。
您可以将本教程中使用的代码作为插件下载。
WPB-酥饼教程
我们已经包含了CSS，因此您可以使用它来学习或使用它来使用更简单的用户界面在WordPress中添加自己的调用按钮。 随意修改源代码并使用它。