这似乎是一项简单的任务，但向 WordPress 网站添加行为良好的社交分享按钮可能会很麻烦。当我说行为良好时，我的意思是简单、轻量级、资源友好、快速——大多数社交分享插件都不是那样的。他们往往会疯狂地消耗资源，为什么有人想要将插件加载时间增加 25-35% 只是为了在他们的网站上显示一些图标？

好消息是您不一定需要插件来完成此任务。在本教程中，我将向您展示如何使用几行代码轻松地将自定义社交分享按钮添加到 WordPress 网站上的帖子末尾。

第 1 步：生成社交分享按钮

我们将使用Simple Sharing Buttons Generator，这是一种方便且易于使用的网络工具来生成共享图标。这个应用程序的主要优点是它生成的按钮在前端运行，因此它们不会给您的服务器带来负担，您还可以将用户的活动保密。

要生成您的自定义按钮，请转到此处并按开始。从 6 种不同的按钮样式中选择 1 种。单击下一步并勾选要添加到站点的社交网络。完成后，您将必须填写您网站的信息。

在此屏幕上（下方），您将找到两个选项：“无 JavaScript”和“JavaScript”。勾选JavaScript，因为它将使浏览器能够动态检测 URL，因此您的访问者将能够单独共享每个帖子，而不仅仅是主页的 URL。

最后看看实时预览，下载选定的图标集，并获取您生成的代码。

第 2 步：创建子主题

现在您必须将生成的图标和代码添加到您的站点。首先，您需要创建一个子主题。

您可以借助我们的教程轻松创建 WP 子主题，或者您可以按照这篇WP Codex 文章的步骤操作。如果您已经有一个，则可以跳到第 3 步。

儿童主题与您当前使用的主题相关——有点类似于儿童与父母的关系。它继承了父主题的所有内容（样式和功能），但您可以向其添加额外的功能。

在我们的例子中，额外的功能将是自定义社交分享按钮。

第 3 步：创建显示图标的自定义函数

我们将向子主题的 functions.php 文件中添加一个自定义函数。

借助此功能，您将能够使用自定义操作挂钩将社交图标添加到站点上任何您想要的位置。如果您的子主题还没有 functions.php 文件，请在子主题的根文件夹中创建一个名为 functions 的空白文本文件，并将其扩展名更改为 .php。

将以下代码行插入到这个空白文件中：

设置functions.php文件后，将以下代码片段添加到其中：

最后从上面的代码片段中删除 HTML 注释行，并将其替换为您在第 1 步中使用社交共享按钮生成器生成的HTML 代码。

第 4 步：将适当的模板文件复制到子主题文件夹

默认情况下，单个帖子由名为single.php的模板文件管理。有时——尤其是在更现代的主题中——single.php的结构更复杂，因为它还加载了额外的模板文件。在这一步中，我们需要找到合适的模板文件，稍后我们可以在其中添加图标。

为了找到社交按钮的正确位置，我们需要找到包含加载单个帖子内容的函数的模板文件。

让我们在外观 > 编辑器下的 WordPress 管理仪表板中打开主题编辑器。在右上角，您可以找到一个下拉列表，您可以在其中选择父主题。在下拉列表下方，您可以看到父主题包含的所有模板文件。向下滚动直到找到Single Post 模板（称为 single.php）并打开它。

如果父主题在single.php文件中使用get_template_part() WP 函数，这意味着它使用额外的模板文件来加载单个帖子的内容。

首先，你必须找出这是哪一个。附加模板文件的名称是get_template_part()函数的第一个参数。

在二十十五岁时，它看起来像这样：

第一个参数是“content”，这意味着我们寻找名为content.php的模板文件。您需要将此文件从父主题根文件夹复制到子主题根文件夹，以便进行修改。

第 5 步：将动作挂钩添加到正确的模板文件中

我们在第 3 步中创建了一个名为add_social_sharing()的函数，并将其附加到一个名为custom_social_share的自定义操作挂钩。现在我们必须将这个钩子添加到我们想要执行函数的地方。

这是您需要插入到正确位置的代码片段：

接下来，让我们找到合适的地方。

在代码编辑器中或在 WordPress 管理仪表板的主题编辑器中打开您在第 4 步中添加到子主题的模板文件，并查找 the_content ()函数。

检查the_content()函数之后是否有wp_link_pages()函数。如果有，则上面的代码片段在其后；否则它遵循the_content()函数。

第 6 步：将 CSS 代码添加到子主题

在代码编辑器或 WordPress 管理仪表板的主题编辑器中打开子主题的style.css文件，复制您在第 1 步中生成的 CSS 代码，将其粘贴到文件末尾并保存。

我们将向 CSS 文件添加额外的两行，以使社交共享图标在每个主题中正确显示。将以下代码片段复制并粘贴到style.css文件的末尾：

第 7 步：将社交媒体图标集上传到服务器

将您在第 1 步中下载的所选社交媒体图标集上传到您的子主题文件夹。通过 FTP 连接您的服务器，在您的子主题文件夹 (/wp-content/themes/your-child-theme/images) 的根目录中创建一个名为images的新文件夹，并在此处上传图标集。

我们将文件夹命名为图像，因为这是简单共享按钮生成器使用的图像文件夹的默认名称。

步骤 8：检查图标文件的路径

在第 7 步将社交媒体图标上传到服务器后，请务必检查图标文件的路径以确保它们将被加载。

图像文件的路径向浏览器提示其在服务器上的位置。让我们检查子主题的functions.php文件中的图像路径。在代码编辑器中打开文件，然后导航到add_social_sharing()函数，您需要在其中检查使用简单共享按钮生成器生成的 HTML 代码。

在 HTML 代码中，您会发现一个<img>标签，每个图标都有一个src属性。检查每个src属性是否指向您的图标集在第 7 步中上传的确切位置。

简单共享按钮生成器将相对路径添加到<img>文件。如果您使用相对路径，有时浏览器无法呈现图像，因此最好改用绝对路径。这样，您的访问者可能使用的每个浏览器都可以确定所需图标文件的位置。

生成器添加的相对图像路径如下所示：

让我们将每个图标的src属性更改为绝对路径，这意味着它将包含文件的完整 URL。

上面的 URL 路径将如下所示：

第 9 步：上传修改后的文件并激活子主题

通过 FTP 连接您的服务器并上传我们在本教程中创建但您尚未上传的所有文件：functions.php 、 style.css和相应的模板文件（在本教程中为 single.php或content.php ）。 PHP）。

最后在外观 > 主题菜单下的 WP 管理仪表板中激活子主题。

现在您已准备好使用超轻量级、节省资源的自定义社交共享图标。您可以上网并在您的网站上实时查看。

结论

在本教程中，我向您展示了如何将自定义社交分享按钮添加到单个帖子的末尾。借助我们创建的操作挂钩，您可以将共享图标添加到您网站上的任何其他位置。

只需将我们在第 5 步中使用的代码添加到您希望显示按钮的位置：

如果您想将图标放在其他地方，您还必须找到正确的模板文件。单个页面由名为page.php的模板文件管理，而图像等媒体附件由attachment.php加载。

如果您希望在您网站的不同位置显示社交分享按钮，您可以使用WordPress 模板层次结构来找到它。

• 下载源