了解 WordPress 简码

如果您长期使用 WordPress，您可能已经使用过一些简码。

短代码是方便的小片段，可让您将某种特殊功能插入到您的内容中，否则这些功能是不可能实现的。 例如：许多图片库和滑块插件为您提供了一个简码，您可以将其简单地插入到您的内容中的任何您喜欢的位置，以使适当的图像出现在那里。 短代码通常看起来像这样：

[example shortcode]

换句话说：短代码会导致将它们放置在文本中的任何地方发生一些特殊的事情。
但是您不仅限于预定义的简码； 您可以定义自定义简码来做任何您想做的事情！ 它们可以是简单的、复杂的或介于两者之间的任何东西。

在本系列中，我们将从一个简单的短代码开始，然后逐步学习一些更复杂（甚至更有用！）的示例。

注意：我们将在这里主要使用 PHP，特别是在您主题的 functions.php 文件中。 如果您没有使用子主题（或可以编辑而不必担心更新会覆盖您的更改的自定义/入门主题），您需要在开始之前创建一个子主题。

另请注意：阅读本文不需要任何 PHP 知识，但至少了解基础知识会有所帮助。 这里涉及的代码比较简单，我们尽量做到了方便复制和定制。 我们将解释每一段代码，但如果您对 WordPress 主题 PHP 完全陌生，请注意您的functions.php文件中的一些错误代码可能会破坏该站点。

一个有用的简单简码示例

假设我们想要一个短代码，将一个特殊的作者信息部分注入到帖子中，如下所示：

我们不会在 WordPress 可视化编辑器中创建和设置框、图像和文本的样式，而是创建一个简码，用一个简单的片段输出整个内容！

（旁注：WordPress 有更好的方法来处理作者简介，但我们坚持使用这个示例，因为它很好地展示了使用短代码将特定内容块放在页面上是多么容易。）

第 1 步：在主题的 functions.php 文件中添加简码

您将使用add_shortcode函数为您的短代码命名，并告诉 WordPress 在使用该短代码时它应该做什么。 将此行添加到主题的functions.php文件中：

 [php]add_shortcode( 'author_bio', 'create_author_bio' );[/php]

在functions.php中的什么位置并不重要，但为了避免冲突，我们建议将其放在最后。 （但是，如果文件以关闭的 ?> 标记结尾，它应该就在该标记之前，而不是之后。）

在我们继续之前，让我们稍微分解一下这条线，以便我们了解这里实际发生的事情。 括号内的两位文本或“参数”并不特殊，真的； 他们只是名字。 让我们回顾一下每一个的含义：

1. 第一个参数：在这种情况下， author_bio – 告诉 WordPress 您的短代码的实际名称。 这将是用户可以在括号中键入的文本以使用短代码。 因此，根据编写的代码， [author_bio]将成为我们触发作者简介框的简码。
   此文本可以是任何内容，但最好始终保持独特。 这样，您就不会冒着您的简码名称与其他已安装的插件或主题中的其他人的名称发生冲突的风险。
2. 第二个参数：在这种情况下， create_author_bio – 将 WordPress 指向它应该在使用此短代码时执行的实际 PHP 函数。 我们将在下一步中创建该功能； 现在，我们只是让 WordPress 知道它的名字是什么。 （这个名字也应该是唯一的，以避免冲突。）

因此，如果有帮助，您可以考虑这样的代码：

 [php]add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );[/php]

如果您对更具体的细节感兴趣，请查看add_shortcode Codex 条目。

第 2 步：创建处理简码的函数

现在我们需要实际创建我们刚刚命名的函数！

由于我们刚刚在最后一步中告诉 WordPress 我们函数的名称是 create_author_bio，一旦我们添加了新函数，我们的代码现在应该如下所示：

 [php]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ //Code goes here! }[/php]

您可能会注意到此函数实际上还没有执行任何操作； 它里面的所有内容都是评论。 我们将在下一步中解决这个问题。 现在，我们只想指出这里实际上只有两部分：简码的注册和使用时发生的功能。 WordPress PHP 看起来很吓人，但它真的很简单！

旁注： create_author_bio函数是在add_shortcode函数之后还是之前并不重要。 在这种情况下，顺序并不重要。

第 3 步：让函数做某事

现在剩下的就是让我们的功能做我们想做的事！

像这样的函数可以做任何事情，但无论如何，它最终应该返回一个值（例如一串文本或一个数字）。 该值可以是任何长度或复杂性，但无论函数返回什么，都会在使用我们的短代码的任何地方出现。

出于我们的目的，这只是一些简单的 HTML。 这是将我们的作者图像和生物添加到具有自定义类的<aside>元素中的标记（但不要将它放在任何地方；我们只是暂时将其视为预览）：

 [html]<aside class="author-bio-box"></span> <img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"> <p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p> <p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p> </aside>[/html]

最终，我们将在第一行使用 author-bio-box 类来使用 CSS 设置 bio 的样式。 （我们将使用一个类而不是 ID，以防万一您想为多个作者编写的内容添加多个作者简码。）但是请记住，这可以是我们想要放入页面中的任何内容！

现在，我们需要做的就是让我们的简码函数返回上面的 HTML！

由于functions.php文件应该只包含......好吧，PHP 函数（也是为了整洁），我们已经删除了我们刚刚查看的那些 HTML 元素之间的换行符和空格，并将它们塞进一个字符串中（在单引号内） . 但在功能上，它仍然是我们刚刚在上面看到的相同的 HTML 片段，这就是我们最终的 PHP 代码应该看起来的样子：

 [html]add_shortcode( 'author_bio', 'create_author_bio' ); function create_author_bio(){ return '<aside class="author-bio-box"><img src="https://upload.wikimedia.org/wikipedia/en/1/1f/Bilbo_Baggins_Tolkien_illustration.jpg"><p>Bilbo Baggins is the author of <cite>The Hobbit</cite>, translator of various works from the elvish, and author of a number of poems and songs.</p><p>He is the oldest Hobbit ever in Middle Earth, and spends his days in his Tol Eressea home across the sea.</p></aside>'; }[/html]

我们完成了 PHP！ 一旦我们保存了包含上述最终代码的functions.php文件，任何作者只需在任何页面或帖子中输入[author_bio] ，上述 HTML 就会出现在短代码的位置！

另外，真正酷的是：如果我们需要更新我们的简历，我们不需要编辑它出现的每一个地方！ 相反，我们需要做的就是编辑我们的functions.php文件中的代码，它会立即在所有地方更新。 整洁吧？

然而，为了充分利用这一点，我们可能想要为生化盒添加一些特殊的样式。

第 4 步：添加一些 CSS

如果没有一些样式，简码就不是很好，所以让我们添加它吧！ 您可能需要稍微调整一些值，具体取决于您自己网站的字体（上图中的字体是 Fanwood Text）以及已经存在的 CSS 规则。 或者您可能只是想尝试一些不同的东西！

此 CSS 可以复制到您的（子）主题的style.css文件中，或者如果您运行的是 WordPress 4.7 或更高版本（您应该是！），您可以将此 CSS 粘贴到自定义中的“附加 CSS”框中屏幕：

 [css].author-bio-box { background: #d4ead9; padding: 2em; overflow: auto; font-family: Fanwood Text; font-size: 1.2em; line-height: 1.4em; } .author-bio-box img { float: left; max-width: 128px; height: auto; margin: 0 1em 0 0; } .author-bio-box > p:first-of-type:first-letter { font-size: 3.1em; line-height: 1; float: left; margin-bottom: -.2em; } .author-bio-box > p:last-of-type { margin: 0; }[/css]

现在事情应该看起来好多了。 但是请随意使用 CSS 使作者框成为您自己的，并让它在您的网站上有宾至如归的感觉！

推荐：使功能“可插入”

这不是短代码特有的，也不是代码工作所必需的，但这是最佳实践，现在是提及它的好时机。

首先，了解一下 PHP 的工作原理：

还记得我们如何自己命名create_author_bio函数吗？ 好吧， create_author_bio; 我们可以很容易地为我们的函数命名任何我们想要的名字（尽管最好是函数名称至少给你一点关于它做什么的提示，这就是我们选择create_author_bio的原因）。

但事情是这样的：如果两个 PHP 函数被命名为相同的东西，结果将是一个阻止站点加载的致命错误，因为 PHP 不知道哪个函数是正确的。 PHP 不猜测，所以它就停止了。

我们需要担心的不仅是我们的代码； 一个 WordPress 站点可能使用来自数十个甚至数百个不同开发人员的代码，具体取决于安装的插件和主题。 如果同一个函数名被使用两次，一切都会崩溃！

这很糟糕，显然，我们希望确保这种情况永远不会发生。

我们可以通过使我们的功能“可插入”来做到这一点； 换句话说，告诉 WordPress 如果另一个同名函数已经存在，则不要创建我们的函数。 它非常简单； 我们只是将我们现有的代码包装在这个简单的条件语句中：

 [php]if( !function_exists( 'create_author_bio' ) ){ //Our existing PHP goes here! }[/php]

该条件 if 表达式只是检查以确保名为create_author_bio的函数尚不存在。 到目前为止，我们使用的所有 PHP 代码都可以移动到该语句内，在{ }大括号之间。

不过，最好还是尽可能独特地命名函数！ 使我们的函数可插入只能避免致命错误。 因此，如果存在命名冲突，我们的短代码仍然无法正常工作，但至少该站点仍然可以正常运行，其他任何东西都不会被破坏。

结论

就是这样！ 希望您喜欢创建自定义作者简介简码！ 如果您已经跟进，您需要做的就是在页面或帖子的任意位置键入[author_bio] ，您的代码就会出现！

这个短代码可以很容易地修改为将任何内容输出到页面。 gif、HTML 和/或 JavaScript 的自定义块、图像或视频……任何你想要的！

但是，如果您只需要将单个静态值输出到页面某处，则此示例很有用，但它不是很灵活。 它每次都会返回完全相同的东西，我们经常需要短代码比这更具适应性。

好消息：我们只介绍了短代码的基础知识，它们的功能远不止于此！