WordPress短代码是一项强大的功能，可以轻松完成很酷的事情。您可以对他们做几乎任何事情。使用简码，嵌入交互式元素或创建复杂的页面布局就像插入一行代码一样容易。
如果要添加图库，只需输入以下代码：
这将输出带有上述图像ID的图库。它有4列，其最大大小为“中”（由WordPress定义）。
只需移至Kinsta，即可将WordPress网站的速度提高200％。 今天免费迁移
不需要任何难看的HTML代码。
画廊简码示例
短代码消除了对复杂脚本的需求。即使您几乎没有编程技能，也可以在他们的帮助下轻松添加动态内容。
它们在WordPress开发人员中非常受欢迎，因为它们在自动执行内容和设计创建方面提供了巨大帮助。对于WordPress开发人员来说，简码是什么，对于数据分析人员来说，宏是什么，对于专业的图形设计师来说，快捷键是什么。
在本指南中，您将学习有关短码的所有知识。您将通过创建自己的简码来了解如何使用简码API。最后，我们将讨论短代码的未来以及它们与WordPress的新Block编辑器配合的位置。
激动吗让我们开始吧！
什么是简码？
简而言之，Shortcode=快捷键+代码。
通常，短代码使用方括号标签[]定义它们的使用方式。每个简码在站点中执行特定功能。它可以像设置内容格式一样简单，也可以像定义整个网站的结构一样复杂。
例如，您可以使用简码嵌入滑块，表单或定价表。您甚至可以使用它们来创建可重复使用的页面设计模板。
简码简史
短代码最初是通过称为UltimateBulletinBoard（UBB）的在线论坛软件来普及的。1998年，他们推出了BBCode（公告板代码），这是一组易于使用的标签，供用户轻松格式化其帖子。
使用简单的BBCodes轻松格式化
BBCode作为一种轻量级的标记语言，除了更简单之外，其工作原理与HTML相同。
使用预定义标签也更加安全，因为用户无法插入HTML代码并引入安全漏洞。例如，有恶意的用户可以使用
标记以执行JavaScript代码并破坏网站的功能。
不久之后，其他在线论坛软件（例如phpBB，XMB论坛和vBulletin）在其留言板上添加了BBCode功能。
短代码使管理员可以更好地控制用户可以做什么和不能做什么。此外，他们还允许用户通过简单的标签来格式化其内容。
由于相同的安全原因，WordPress阻止PHP代码在网站内容中运行。为了克服此限制，WordPress2.5在2008年通过发布ShortcodeAPI引入了shortcodes功能。它已被证明是许多WordPress插件和主题开发人员最常用的功能之一。
什么是WordPress简码？
WordPress短代码是方括号字符串（[]）神奇地转变为前端上的迷人事物。它们为用户提供了一种创建和更改复杂内容的简便方法，而无需担心复杂的HTML或嵌入的代码。
WordPress简码简单易用
两种简码类型
WordPress中主要有两种类型的短代码。
自闭合和闭合短码可以有效，无论是否带有属性。
-
自动关闭的简码：不需要结束标记。
例如：图库简码不需要结束标记。我们使用不同的属性添加它需要的所有内容。
-
封闭的简码：这些需要一个结束标记。括起来的短代码通常在开始和结束标签之间操纵内容。
示例：字幕简码用于将字幕包装在任何内容周围。它主要用于为图像添加标题，但可用于任何HTML元素。
一些短代码可以使用或不使用属性。这取决于它们的定义方式。
默认的WordPress简码
WordPress随附6个默认的短代码：
-
音频：在您的网站上嵌入音频文件。它包括简单的播放控件，如“播放和暂停”。
-
字幕：使用字幕将您的内容包裹起来。它主要用于添加图片标题，但是您可以将其用于任何HTML元素。
-
embed：扩展默认的oEmbed功能。此短代码可让您为嵌入设置不同的属性，例如设置其最大尺寸。
-
gallery：在您的网站上插入一个简单的图库。您可以使用属性来定义使用哪些图像并自定义画廊的外观。
-
播放列表：显示带有此自动括起来的简码的音频或视频文件的集合。您可以通过它的样式属性为它设置一个很酷的“黑暗”模式。
-
视频：嵌入视频文件并使用简单的视频播放器播放。该短代码支持嵌入以下格式的视频：mp4，webm，m4v，webm，ogv，wmv，flv。
有关如何使用默认短代码及其支持的属性的更多详细信息，请参阅链接的Codex文档。
如何使用WordPress简码
在WordPress中使用简码是一个简单的过程。但这取决于您要在网站上添加它们的位置。请务必阅读简码文档以了解其工作原理。了解它支持的属性，以便准确获得所需的内容。
在页面和帖子中使用WordPress简码
首先，转到您要在其中插入简码的页面/帖子编辑器。
如果您使用的是Gutenberg编辑器，则可以在独立的Shortcodes块中添加shortcode标记。我们可以在“小部件”部分中找到它。
在古腾堡添加一个Shortcode块
古腾堡的专用短代码块
仍在使用经典编辑器（或插件）吗？您可以通过经典方式输入您的简码标签。几个短代码甚至可能在编辑器屏幕上有一个按钮，可以方便地插入它们。
在经典编辑器中添加简码
在侧边栏小部件中使用WordPress短代码
简码也可以插入侧边栏小部件中。要添加它们，请转到外观»小部件，然后在要添加快捷方式的部分中添加文本小部件。
使用文本小部件在边栏中添加简码
将简码粘贴到“文本”小部件中并保存。您可以访问网站的前端，并在边栏中查看简码的输出。
在侧边栏中可以看到简码输出（图库）
注意：WordPress4.8及以下版本不支持边栏小部件中的短代码。阅读WordPress4.9更新中的小部件改进以获取更多信息。
在页眉和页脚中使用WordPress短代码
WordPress短代码通常用于页面，帖子和小部件。但是，您可以通过一种简单的方法在您网站的任何位置插入短代码。
假设您要在页脚或评论部分之前的所有帖子中添加号召性用语按钮。do_shortcode（）回调函数在这里很方便。
您需要将以下代码添加到主题的header.php，footer.php或其任何模板文件中：
这将在您插入代码的地方输出简码。
您需要在引号之间包括方括号以呼应简码。仅包含其名称是行不通的。
同样，您可以使用do_shortcode（）回调函数在WordPress中的任何位置启用短代码，例如在注释部分中。
ShortcodeAPI快速入门
WordPress简码API定义了如何使用简码来自定义和扩展网站的功能。它使开发人员能够创建独特的内容（例如，表单，轮播，滑块等），用户可以通过粘贴相关的短代码在其网站中添加这些内容。
您可以借助简码将几乎可以想象的任何功能添加到您的网站。
该API支持自动关闭和封闭的短代码。它处理所有棘手的解析，并包括用于设置和获取默认属性的辅助函数。
借助API，您可以直接投入到开发和自定义短代码中，而不必浪费宝贵的时间为您制作的每个短代码定义正则表达式。
了解ShortcodeAPI的基础
每次您打开页面或在WordPress中发布信息时，它都会在处理网站内容时查找注册的短代码。
如果找到已注册的简码，则简码API将接管并返回简码的输出。返回的输出字符串将在其添加位置替换shortcode标记。
您可以使用add_shortcode（）函数在WordPress中注册一个简码。操作方法如下：
add_shortcode（'shortcode_name'，'shortcode_handler_function'）;
-
shortcode_name：WordPress在解析帖子内容时将寻找的标签。ShortcodeAPI建议您仅使用小写字母，数字和下划线定义其值（避免破折号）。
-
shortcode_handler_function：WordPress确认存在已注册的简码后将执行的回调函数。
简码处理函数的定义如下：
函数shortcode_handler_function（$atts，$content，$tag）{}
-
$atts：属性的关联数组（即键/值对的数组）。如果您未定义任何属性，则默认为空字符串。
-
$content：如果要定义封闭的简码，则封闭的内容。处理函数的职责是确保$content值返回到输出。
-
$tag：简码的标签值（在上面的示例中为shortcode_name）。如果两个或多个简码共享同一个回调函数（有效），则$tag值将帮助您确定哪个短码触发了处理函数。
API解析短代码的标签，属性和包含的内容（如果有），绕过处理程序函数的值，该函数处理它们并返回输出字符串。
此输出字符串将替换您网站前端上的shortcode宏。您最终在浏览器中看到的是此输出。
在哪里添加您的自定义简码脚本？
您可以将自定义的简码脚本添加到主题的functions.php文件中，或将其包含在插件中。
如果要将其添加到主题文件，则可以按原样运行add_shortcode（）函数。
但是，如果要将其添加到插件中，建议您仅在WordPress完全加载后才对其进行初始化。您可以通过将add_shortcode（）函数包装在另一个函数中来确保。这称为包装函数：
函数shortcodes_init（）{ add_shortcode（'shortcode_name'，'shortcode_handler_function'）;}add_action（'init'，'shortcodes_init'）;
add_action（）函数仅在WordPress完成加载后才将shortcodes_init函数挂钩，以将其触发（称为“init”挂钩）。
如何在WordPress中（入门级）创建自定义简码
现在，我们已经介绍了基础知识，是时候创建自定义简码了。
要执行以下步骤，您需要熟悉PHP代码并编辑WordPress主题文件。在学习完本教程时，您将准备启动第一个自定义WordPress短代码！
我们将以可能的最简单的短代码开始，然后转向更复杂的短代码。在掌握简码的过程中，享受您的简短里程碑！
示例1：使用简码[current_year]
让我们创建一个简称为[current_year]在您的网站上输出当前年份。
如果您要向网站添加每年需要更新的内容，则此简短代码很有用。例如，在网站的页脚中添加版权声明。
我将使用准系统插件添加我的简码功能。您可以将其添加到主题的functions.php文件中，并获得相同的结果，但我不建议这样做。不过可以进行测试和学习！
信息
在对网站进行任何更改之前，请先进行备份。Kinsta为所有客户提供自动备份。让我们开始创建一个插件。在/wp-content/plugins/目录中创建一个新文件夹。
注意插件目录的位置
我将插件命名为``salcodes''，但您可以根据需要命名。
在salcodes插件目录中，创建一个具有相同名称的PHP文件（salcodes.php）。完成后，将以下标头添加到插件的文件中：
<？php/*插件名称：Salcodes版本：1.0描述：在您的WordPress网站中输出当前年份。作者：SalmanRavoof作者URI：https：//www.salmanravoof.com/许可证：GPLv2或更高版本许可URI：https://www.gnu.org/licenses/gpl-2.0.html文本域：salcodes*/
这个简单的插件头足以满足我们的目的。您可以在WordPressCodex中了解有关插件标头要求的更多信息。保存此文件，然后转到WordPress仪表板以激活插件。
现在，让我们注册简码及其处理函数。为此，将以下代码添加到您的插件文件中：
/** *[current_year]以4位数的字符串返回当前年份。 *@返回字符串当前年份*/
add_shortcode（'current_year'，'salcodes_year'）;函数salcodes_init（）{ 函数salcodes_year（）{ 返回getdate（）['year']; }}add_action（'init'，'salcodes_init'）;
/**始终以此结束标记结束PHP文件*/？>
-
PHP注释中的@return标记定义了返回的输出类型。后面是简短的描述。
-
current_year是简码标记或名称。这定义了您需要在内容中添加的自动关闭标签，在这种情况下，[current_year]。
-
salcodes_year是将返回输出字符串的shortcode处理函数的名称。我们将在接下来的几行中定义此回调函数。由于我们正在创建一个简单的自闭合简码，因此您不必传递任何变量值，例如$attributes，$content或$tag。
-
salcodes_init是连接到“init”的包装函数，以确保短代码已注册并仅在WordPress完成加载后才能运行。WordPress的内置add_action（）函数使这成为可能。
-
getdate（）是一个PHP函数，它返回当前时间戳的日期信息数组。Year键保存当前年份的值（为4位数字的字符串）。因此，getdate（）[‘year’]返回当前年份。此输出正是我们想要的。
保存您的插件文件。现在该测试该短代码是否按预期工作。
将简码添加到您网站的任何位置（页面，帖子，侧边栏小部件等）。我将其添加到网站的侧边栏“文本”小部件中。
通过将自定义简码添加到站点来对其进行测试。
正如预期的那样，它可以完美运行。
年度简码输出
恭喜您达到第一个里程碑！
您刚刚创建的简码没有任何$attributes或$content变量与之关联。在以下示例中，您将学习如何使用它们。
示例2：CTA按钮的简码
让我们创建一个可自定义的CTA按钮短代码。这也将自动关闭（对不起$content，您需要坚持到下一个）。
我希望用户能够使用shortcode属性自定义CTA按钮的大小和颜色。
由于最终的输出是一个button元素，因此可以轻松使用其HTML属性（例如href，id，class，target和label）对其进行自定义。
您可以使用id和class属性为按钮设置样式，因为它们都是常见的CSS选择器。
我这里没有包装处理程序函数，以使事情易于解释。
/** *[cta_button]返回CTA按钮的HTML代码。 *@返回字符串按钮HTML代码*/
add_shortcode（'cta_button'，'salcodes_cta'）;
函数salcodes_cta（$atts）{ $a=shortcode_atts（数组（ '链接'=>“https://kinsta.com/#”， 'id'=>'salcodes'， '颜色'=>'蓝色'， '大小'=>''， '标签'=>'按钮'， '目标'=>'_self' ），$atts）; $输出='
'。esc_attr（$a['label']）。'
'; 返回$output;}
哇，这里有很多东西要解压。我将逐行进行解释，以便您了解其工作原理。
- 在上一节中，我们介绍了add_shortcode（）函数及其功能。
-
shortcode_atts（）是一种WordPress函数，将用户的简码属性与已知属性结合在一起。它在需要时填写默认值（您也可以自行设置）。结果将是一个数组，其中包含已知属性中的每个键，并与用户定义的shortcode属性中的值合并。
- 在shortcode处理函数中，我们定义一个变量（$a）并将其分配给shortcode_atts（）返回的数组。我们使用以下语法为属性分配其默认值：'attribute'=>'default-value'。例如，在上面的代码中，我们使用语法'label'=>'Button'将属性label的默认值设置为Button。
- 我们可以使用数组的PHP语法提取每个属性键的值：$a[‘attribute’]。
- $output变量存储按钮元素的HTML代码（带有“按钮”类的标签）。函数最终返回的字符串。
如果您想将默认链接设置为网站的主页URL，则可以使用home_url（）WordPress函数。
让我们尝试按原样使用未定义属性的简码，然后查看输出内容。
我正在将简码添加到侧边栏文本小部件中进行测试。
如果您想知道双方括号是什么（[[[cta_button]]），它们被称为转义简码。它们可以帮助您将网站中所有注册的简码输出为常规文本，如下图所示。
CTAButton短代码的输出表明它可以按预期工作
没有属性的CTA按钮的HTML输出。
用户可以使用简码自定义按钮的大小和颜色。我们已经在处理程序函数中设置了它们的默认值，但是我们需要注册样式表并将其排入可用资源列表。此样式表应具有简码中定义的所有类。
您也可以在主题的全局样式表中设置这些类，但建议单独加载它们。这样可以确保即使您更改或更新WordPress主题，这些类仍将与简码一起加载。
/**使样式表加入CTA按钮*/
函数salcodes_enqueue_scripts（）{ 全球$post; if（is_a（$post，'WP_Post'）&&has_shortcode（$post->post_content，'cta_button'））{ wp_register_style（'salcodes-stylesheet'，plugin_dir_url（__FILE__）。'css/style.css'）;wp_enqueue_style（'salcodes-stylesheet'）; }}add_action（'wp_enqueue_scripts'，'salcodes_enqueue_scripts'）;
salcodes_enqueue_scripts（）函数定义$post全局变量，然后通过以下方式确认两个条件：
-
is_a（）：检查$post是否为WP_Post对象的实例。它指的是WordPress中的所有帖子类型。
-
has_shortcode（）：检查帖子内容是否包含[cta_button]短代码。
如果两个条件都成立，则该函数注册并入队CSS文件夹中包含的style.css样式表。使用plugin_dir_url（$file）函数可以轻松获取插件目录的URL。
我不会在这里显示CSS代码，但是您可以在本节末尾链接的源代码中找到它。
最后，让我们测试一下[cta_button]通过将简码添加到帖子内容中：
注意自定义链接，颜色，大小和标签属性。
下图显示了CTA按钮在前端的外观：
现在，“CTA按钮”具有新的URL，颜色，大小和标签。
现在，您已经了解了如何定义自定义属性并包括样式，可以将各种其他功能添加到CTA按钮短代码中。例如，您可以为用户提供添加动画，悬停效果和各种其他按钮样式的选项。
示例3：使用$content的简码
对于最后一个示例，让我们构建一个称为的封闭短代码[boxed]在带有彩色标题的框中将其标签之间的所有内容输出。
让我们开始注册短代码并定义其处理程序功能。
/** *[boxed]返回带有彩色标题的内容框的HTML代码。 *@返回框内容的字符串HTML代码*/
add_shortcode（'boxed'，'salcodes_boxed'）;
函数salcodes_boxed（$atts，$content=null，$tag=''）{ $a=shortcode_atts（数组（ '标题'=>'标题'， 'title_color'=>'白色'， '颜色'=>'蓝色'， ），$atts）; $输出='
'。''。esc_attr（$a['title']）。'
'。'
'。esc_attr（$content）。'
'。'
'; 返回$output;}
-
$content=null：这会将短代码注册为封闭类型。您可以在处理程序函数中使用$content变量来根据需要更改输出。
-
$tag=”：这定义了简码的$tag变量。在此示例中没有必要，但是包含它是一种很好的做法。
在此示例中，我们使用内联CSS样式修改内容。
就像在前面的短代码示例中所做的那样，在简代码中使用的任何类的样式都已注册并排队。
但是，如果两个短代码使用相同的样式表，则意味着如果使用其中一个，则必须加载它。因此，让我们更新salcodes_enqueue_scripts（）函数：
/**使样式表中的Salcode排队*/
函数salcodes_enqueue_scripts（）{ 全球$post; $has_shortcode=has_shortcode（$post->post_content，'cta_button'）||has_shortcode（$post->post_content，'boxed'）; if（is_a（$post，'WP_Post'）&&$has_shortcode）{ wp_register_style（'salcodes-stylesheet'，plugin_dir_url（__FILE__）。'css/style.css'）;wp_enqueue_style（'salcodes-stylesheet'）; }}add_action（'wp_enqueue_scripts'，'salcodes_enqueue_scripts'）;
-
$has_shortcode：用户定义的变量，用于检查页面/帖子中是否存在任何短代码。||（或运算符）使之成为可能。
现在，让我们来[boxed]简短代码。
将装箱的简码以及标题，title_color和color属性一起添加。
下面的屏幕截图显示了我们得到的输出。
毕竟，一个漂亮的盒子并不难获得！
既然您已经学会了如何编写自己的简码，那么您可以考虑一下[box]并给他们自己旋转。不要忘记与我们分享您的创作！
如果需要，可以从此处下载Shortcode插件源代码。
WordPress简码：优点与缺点
优点
- 简码简化了WordPress网站中复杂功能的添加。您只需输入一行代码即可添加几乎所有内容。
- 简码使开发工作流程自动化。它们使您无需在每次要插入某个功能时都编写复杂的脚本。
- 简码比添加HTML代码或PHP脚本更加用户友好。
- 短代码可以捆绑在插件中。即使您更新WordPress或更改/更新您的主题，该短代码仍将有效并继续像以前一样工作。
- 插件中捆绑的短代码使它们易于在多个WordPress网站上使用。如果您是负责处理许多网站的开发人员，那么准备好所有自定义短代码就可以节省很多时间。
- 由于简码也接受属性，因此用户只需更改属性选项即可修改相同的简码行为。
缺点
- 对于最终用户而言，简码使用起来并不直观，尤其是在页面上使用了简码的情况下。在这种情况下，它们更适合开发人员。
- 仅仅看一下就很难分辨出简码是做什么的。出于这个确切的原因，WordPress核心团队已恰当地将它们命名为“神秘肉嵌入代码”。
- 如果更改主题，则与主题捆绑在一起的简码将停止工作。
- 简码在语法上含糊不清。例如，它们中的一些支持可选的关闭，因此您可以将它们用作自动关闭或封闭式，甚至嵌套时也可以使用。您可以猜测它如何使超级混乱超级快速。
- 由于标签冲突或互操作性问题，简码可能会破坏HTML。在任何网站的前端看到它们永远都不是一个好主意。
- 简码会增加服务器的负担。随着页面/帖子上的短代码数量增加，此负载也随之增加。太多的短代码可能会使您的网站无法抓取（例如，大多数页面构建器的输出）。
简码和古腾堡块
Gutenberg的引入减少了对短码的需求。现在，无论多么简单，用户都可以直接从编辑器界面添加块，而不必处理短代码标记。
而且，如果您想添加简码，Gutenberg甚至还带有专用模块来添加简码。块是新的简码。
“如果您可以使用简码来实现，则可以将其作为一个整体来实现。”—Automattic的幸福工程师JamesHuff
这就解释了为什么所有流行的短代码都被转换为块。许多WordPress开发人员已转向使其产品和服务仅与块编辑器（Gutenberg）一起使用。
但这并不意味着简码就是世界末日。WordPress核心团队已承诺对块编辑器进行许多改进，您可以在二十二十年代看到它，但是在此之前，简码仍然存在！
您说事半功倍吗？WordPress短代码是可能的！通过这份深入的指南，了解它们是什么以及如何创建自己的。生命太短暂了，无法使用简码〚〛?
点击鸣叫
摘要
使用短代码很容易在您的WordPress网站的任何位置添加复杂的功能。它们为用户提供易于键入的标签，可以使用它们而不必担心复杂代码的涉猎。
虽然生活中可能没有捷径，但在WordPress中肯定有许多短代码可以使用。我最喜欢的是ShortcodesUltimate和AngieMakes的Shortcodes。
而且，如果找不到您要寻找的人，则可以自己创建一个。
您甚至可以通过使用Shortcoder插件获得创建自定义简码的快捷方式。它照顾您所有的必需品。并记住：寿命短，请使用简码！
297分享
合计：297
44234
1个
14
0
0
0
4
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/168466.html
-
-
-
-
-
-
-
-
-
-
-
-