7步创建WordPress短代码

网站首页 > 知识库 > wordpress知识 >

7步创建WordPress短代码

2018/01/03

如果您已经具备一些编程知识，则可能需要创建自己的自定义短代码。这使您可以完全控制网站的外观和功能。

让我们看看如何创建自定义WordPress短代码。在本教程中，我们将添加指向文章的社交媒体链接作为示例。

第1步–创建新的主题文件

在开始之前，最好完全备份您的WordPress网站。您还需要在主题的functions.php文件之外为自定义短代码创建一个单独的文件。这将在出现问题时提供回退。

您可以使用文件传输协议（FTP）客户端（如FileZilla）访问您网站的主题文件。连接到您的站点后，导航到wp-content >主题，然后找到当前主题的文件夹。在我们的示例中，这将是rosa-lite：

打开主题的文件夹，右键单击它，然后点击创建新文件按钮。

将新文件命名为custom-shortcodes.php，然后单击确定。然后，您可以通过右键单击它并选择“查看/编辑”选项来编辑它：

这将在默认文本编辑器中打开该文件。然后，您只需要添加以下代码块：

<?php 
?>

这可确保您的新文件将被解释为PHP，这是WordPress构建的脚本语言。

然后，您可以保存更改并关闭文件。确保选中以下框，以确保它在服务器上更新并应用于您的网站：

接下来，打开同一主题文件夹中的functions.php文件，并在文档底部添加以下代码行：

include('custom-shortcodes.php');

这将告诉系统将您对custom-shortcodes.php文件所做的任何更改包含在functions.php中，同时允许您将它们分开。准备就绪后，保存更改并关闭文件。

第2步–创建短代码函数

接下来，您需要创建短代码的函数，命令它做什么。再次选择custom-shortcodes.php文件的“查看/编辑”选项。使用以下代码片段添加一个操作，将函数挂钩到：

function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/Hostinger?s=20">Twitter</a>';
}

接下来，您需要添加一个回调函数，该函数将在激活钩子操作时运行。在上面提到的代码行之后直接添加以下代码行将告诉WordPress您的函数是短代码：

add_shortcode('subscribe', 'subscribe_link');

使用add_shortcode函数创建短代码时，会分配一个短代码标记“（$tag）”和相应的函数“（$func）”挂钩，该挂钩将在使用快捷方式时运行。

换句话说，如果短代码标签是，它会使钩子“subscribe_link”将访问者引导至提供的URL。

因此，您将在custom-shortcodes.php文件中使用的整个代码将如下所示：

应该注意的是，在命名标签时，应该只使用小写字母，尽管可以使用下划线。避免使用连字符也很重要，因为这会干扰其他短代码。

第3步–将自动关闭短代码添加到网站

您现在可以在您的WordPress网站上将初始代码作为自动关闭短代码进行测试。使用WordPress块编辑器，您可以将标签直接插入到文章中：

这将向您的网站访问者显示以下内容：

如果你对这个短代码感到满意，你不需要做任何其他事情。但是，如果您想自定义它，您可以继续下一步。

第4步–向短代码添加参数

您可以调整“订阅”短代码以获得其他功能以显示其他社交媒体链接。您可以通过添加参数来更改URL来执行此操作。

若要添加处理属性，需要打开custom-shortcodes.php文件并添加以下代码：

function subscribe_link_att($atts) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    return 'Follow us on '.$a['link'];
}
add_shortcode('subscribe', 'subscribe_link_att');

这将使您能够自定义短代码标签中的链接，以将它们添加到Gutenberg编辑器中。您可以将其粘贴到custom-shortcodes.php文件中的上一段代码上。它应该看起来像这样：

添加shortcode_atts()函数会将用户属性与任何已知属性合并，并且任何缺失的数据都将更改为其默认值。准备就绪后，保存更改并关闭文件。

第5步–测试参数

您现在可以在WordPress块编辑器中测试更新后的短代码。在我们的示例中，我们使用以下短代码测试我们的Twitter和Facebook链接：

[subscribe link='https://www.facebook.com/uuu/']
[subscribe link='https://twitter.com/uuu?s=20/']

这将在前端产生以下结果：

这个自定义的短代码向访问者显示您的社交资料的直接URL。但是，您可能希望此功能看起来有点精致。

例如，您可以创建一个版本，使您能够完全自定义在用户即将单击时显示的锚文本。我们将在以下步骤中向您展示如何执行此操作。

第6步–创建私有的短代码

函数的短代码的格式将与前面的短代码示例类似。但是，它将包含该函数的一个附加参数。

首先，您需要添加$content = null，它将此函数标识为私有的短代码。然后，您可以添加WordPress do_shortcode，它将在内容中搜索短代码。

在custom-shortcodes.php文件中，添加新的私有短代码：

function subscribe_link_att($atts, $content = null) {
    $default = array(
        'link' => '#',
    );
    $a = shortcode_atts($default, $atts);
    $content = do_shortcode($content);

    return 'Follow us on <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';

}
add_shortcode('subscribe', 'subscribe_link_att');

准备就绪后，custom-shortcode.php文件应如下所示：