了解 WordPress 简码

如果您一直在使用 WordPress，那么您可能已经使用了一些短代码。

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

[example shortcode]

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

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

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

另请注意：阅读这篇文章不需要任何 PHP 知识，但至少了解基础知识会有所帮助。 此处涉及的代码相当简单，我已尝试使其尽可能易于复制和自定义。 我将解释每段代码，但如果您是 WordPress 主题 PHP 的新手，请注意您的functions.php文件中的一些错误代码可能会破坏网站。

一个有用的简单短代码示例

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

与其在 WordPress 可视化编辑器中创建框、图像和文本并设置样式（这充其量是一件痛苦的事，甚至可能是不可能的），我们只需创建一个短代码，用一个简单的片段输出整个内容！

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

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

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

add_shortcode( 'author_bio', 'create_author_bio' );

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

在我们走得更远之前，让我们稍微分解一下这条线，以便我们了解这里实际发生了什么。 括号内的两位文本或“参数”并不特别，真的。 他们只是名字。 让我们来看看每一个的含义：

如何在 WordPress 中添加响应式谷歌地图

无论您要去哪里，Google 地图都会为您指明方向。 在城市中导航时，能够立即获得方向变得至关重要。 作为最流行的地图解决方案，广告...

1. 第一个参数 - 在本例中为author_bio - 告诉 WordPress 您的短代码的实际名称。 这将是用户可以在括号中键入以使用简码的文本。 因此，使用编写的这段代码， [author_bio]将是我们的短代码来触发我们的作者生物框。
   这段文字可以是任何东西，但最好尽量做到独一无二。 这样，您就不会冒与其他已安装插件或主题中的其他人的短代码名称冲突的风险。
2. 第二个参数 - 在本例中为create_author_bio - 将 WordPress 指向它应该在使用此短代码时执行的实际 PHP 函数。 我们将在下一步中创建该函数； 目前，我们只是让 WordPress 知道它的名称。 （此名称也应该是唯一的，以避免冲突。）

因此，如果它有帮助，您可以考虑如下代码：

add_shortcode( 'when_you_see_THIS_shortcode', 'do_THIS' );

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

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

现在我们需要真正制作我们刚刚命名的函数！

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

add_shortcode( 'author_bio', 'create_author_bio' );

function create_author_bio(){
//Code goes here!
}

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

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

第三步：让函数做一些事情

现在剩下的就是让我们的函数做我们想做的事！

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

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

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

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

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

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

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

}

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

Genesis子主题的简单自定义

作为网页设计师，我们一直期待着更高效地工作。 当我开始重新设计我的投资组合的一项姗姗来迟的任务时，我想起了我是多么喜欢 WordPress 以及我有多快……

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

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

第 4 步：添加一些 CSS

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

可以将此 CSS 复制到您（子）主题的style.css文件中，或者如果您正在运行 WordPress 4.7 或更高版本（您应该是！），您可以将此 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 不要创建我们的函数。 它非常简单； 我们只是将现有代码包装在这个简单的条件语句中：

if( !function_exists( 'create_author_bio' ) ){

//Our existing PHP goes here!

}

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

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

结论

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

这个简码可以很容易地适应将任何内容输出到页面。 GIF、HTML 和/或 JavaScript 的自定义块、图像或视频……任何你想要的！

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

好消息：我们只介绍了短代码的基础知识，它们的功能还远远不止这些！ 我们将在下一部分中介绍“包装”短代码——可以包裹文本或内容块的短代码，从而为您提供更大的灵活性！