这似乎是一项容易的任务，但是向WordPress网站添加行为良好的社交共享按钮可能会很麻烦。 当我说行为良好时，我的意思是简单，轻便，资源友好，快速–那里的大多数社交共享插件都不是那样。 他们往往会疯狂地吞噬资源， 为什么有人会为了在网站上显示一些图标而希望将插件加载时间增加25-35％ ？
好消息是您不一定需要插件即可完成此任务。 在本教程中，我将向您展示如何仅需几行代码即可轻松地将自定义社交共享按钮添加到WordPress网站上帖子的末尾。
步骤1：产生社交分享按钮
我们将使用“ 简单共享按钮生成器 ”（ Simple Sharing Buttons Generator） ，这是一种方便易用的Web工具，用于生成共享图标。 该应用程序的主要优点是它生成的按钮在前端运行，因此它们不会给服务器造成负担 ，您还可以使用户的活动保持私密。
要生成自定义按钮， 请转到此处 ，然后按开始 。 从6种不同的按钮样式中选择1。 单击下一步，然后勾选要添加到站点的社交网络 。 完成后，您将必须填写您的网站信息。
在此屏幕上（下方），您将找到两个选项： 'No JavaScript'和'JavaScript' 。 勾选JavaScript ，因为它将使浏览器能够动态检测URL，因此您的访问者将能够单独共享每个帖子，而不仅仅是首页的URL。
最后，查看实时预览，下载所选的图标集，并获取您生成的代码。
步骤2：建立儿童主题
现在，您必须将生成的图标和代码添加到您的站点。 首先，您需要创建一个子主题。
您可以借助我们的教程轻松创建WP子主题，也可以按照WP Codex文章中的步骤进行操作。 如果已经拥有一个，则可以跳至步骤3。
儿童主题与您当前使用的主题相关–在某种程度上类似于儿童与父母相关的主题。 它继承了父主题的所有内容（样式和功能），但您可以为其添加其他功能 。
在我们的案例中，额外的功能将是自定义社交共享按钮。
步骤3：创建一个显示图标的自定义函数
我们将向子主题的functions.php文件添加一个自定义函数。
借助此功能，您可以使用自定义操作钩子将社交图标添加到站点上的任何位置。 如果您的子主题还没有functions.php文件，请在子主题的根文件夹中使用名称功能创建一个空白文本文件，并将其扩展名更改为.php。
将以下代码行插入此空白文件：
<?php设置好functions.php文件后，向其中添加以下代码片段：
/*
* Adds the custom social sharing icons
*/
function add_social_sharing() { ?>
<h3>Share this post<h3>
<!-- Comment: here comes the generated HTML code -->
<?php
add_action( 'custom_social_share', 'add_social_sharing' );最后，从上面的代码片段中删除HTML注释行，并使用“社交共享按钮生成器” 将其替换为您在步骤1中生成HTML代码 。
步骤4：将适当的模板文件复制到子主题文件夹
默认情况下，单个帖子由名为single.php的模板文件管理 。 有时（尤其是在更现代的主题中）， single.php的结构会更复杂，因为它还会加载其他模板文件。 在这一步中，我们需要找到适当的模板文件，以后可以在其中添加图标。
为了找到社交按钮的正确位置，我们需要找到包含加载单个帖子内容功能的模板文件。
让我们在WordPress管理控制台中的外观>编辑器下打开主题编辑器 。 在右上角，您可以找到一个下拉列表，您可以在其中选择父主题。 在下拉菜单下方，您可以查看父主题包含的所有模板文件。 向下滚动，直到找到Single Post模板 （称为single.php）并打开它。
如果父主题在single.php文件中使用get_template_part（） WP函数，则意味着它使用其他模板文件来加载单个帖子的内容。
首先，您必须找出这是哪个。 附加模板文件的名称是get_template_part（）函数的第一个参数。
在《 二十一十五》中，它看起来像这样：
get_template_part( 'content', get_post_format() );第一个参数是'content' ，这意味着我们正在寻找名为content.php的模板文件。 您需要将此文件从父主题根文件夹复制到子主题根文件夹，以便进行修改。
步骤5：将动作挂钩添加到正确的模板文件
我们在第3步中创建了一个名为add_social_sharing（）的函数，并将其附加到一个名为custom_social_share的自定义操作钩子上。 现在，我们将必须将此钩子添加到要执行函数的位置。
这是您需要插入到正确位置的代码片段：
<?php do_action( 'custom_social_share' ); ?>接下来，让我们找到正确的地方。
在代码编辑器中或WordPress管理仪表板的主题编辑器中，打开在步骤4中添加到子主题的模板文件，然后查找the_content（）函数。
检查the_content（）函数之后是否有wp_link_pages（）函数。 如果有，那么上面的代码片段将在此之后； 否则，它遵循the_content（）函数。
步骤6：将CSS代码添加到子主题
在代码编辑器或WordPress管理控制台的主题编辑器中打开子主题的style.css文件，复制在步骤1中生成CSS代码，将其粘贴到文件末尾并保存。
我们将在CSS文件中添加两行，以使社交共享图标正确显示在每个主题中。 将以下代码段复制并粘贴到style.css文件的末尾：
ul.share-buttons li a {
border: 0;
}
ul.share-buttons li img {
display: inline;
}步骤7：将社交媒体图标集上传到服务器
将您在步骤1中下载的所选社交媒体图标集上载到子主题文件夹。 通过FTP连接服务器，在子主题文件夹（/ wp-content / themes / your-child-theme / images）的根目录内创建一个名为images的新文件夹，并在此处上传图标集。
我们将文件夹命名为image，因为这是简单共享按钮生成器使用的图像文件夹的默认名称。
步骤8：检查图标文件的路径
在步骤7中将社交媒体图标上传到服务器后，检查图标文件的路径以确保将其加载很重要。
图像文件的路径向浏览器提示了它在服务器上的位置。 让我们检查子主题的functions.php文件中的图像路径。 在代码编辑器中打开文件，然后导航到add_social_sharing（）函数，在此您需要检查使用“简单共享按钮生成器”生成HTML代码。
在HTML代码中，您将找到每个图标带有src属性的<img>标记。 检查每个src属性是否指向在步骤7中上传图标集的确切位置。
简单共享按钮生成器将相对路径添加到<img>文件。 有时，如果使用相对路径 ， 浏览器将无法渲染图像 ，因此最好使用绝对路径 。 这样，访问者潜在使用的每种浏览器都可以确定所需图标文件的位置。
生成器添加的相对图像路径如下所示：
<img src="https://assets.hongkiat.com/uploads/wordpress-speed-optimization-social-sharing-icons/flat_web_icon_set/color/Twitter.png">让我们将每个图标的src属性更改为绝对路径，这意味着它将包括文件的完整URL。
上面的URL路径如下所示：
<img src="http://wwww.your-wp-site/wp-content/themes/your-child-theme/https://assets.hongkiat.com/uploads/wordpress-speed-optimization-social-sharing-icons/flat_web_icon_set/color/Twitter.png">步骤9：上传修改后的文件并激活子主题
通过FTP连接服务器，并上传我们在本教程中创建的所有尚未上传的文件： functions.php ， style.css和相应的模板文件（在本教程中为single.php或内容）。 php ）。
最后，在“ 外观”>“主题”菜单下的WP管理控制台中激活子主题。
现在，您可以使用超轻型，节省资源的自定义社交共享图标了。 您可以在线查看并在您的网站上实时查看。
结论
在本教程中，我向您展示了如何将自定义社交分享按钮添加到单个帖子的末尾。 您可以借助我们创建的动作挂钩将共享图标添加到网站上的任何其他位置。
只需将我们在第5步中使用的代码添加到希望显示按钮的位置即可：
<?php do_action( 'custom_social_share' ); ?>如果要将图标放置在其他位置，则还必须找到正确的模板文件。 单个页面由名为page.php的模板文件控制 ，而媒体附件（如图像）由attachment.php加载。
如果您希望在网站上的其他位置显示社交共享按钮，则可以使用WordPress模板层次结构进行查找。
翻译自: https://www.hongkiat.com/blog/wordpress-speed-optimization-social-sharing-icons/
扫一扫
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
