如何在GeneratePress中创建社交共享按钮？

在本教程中，我们将了解 如何在GeneratePress中创建社交共享按钮?

这无疑会帮助您增强博客文章的跨渠道推广。 这反过来又会增加您的网络形象。

我将向您展示如何构建浮动在博客条目前端的粘性社交共享按钮。 这意味着，您的观众始终可以看到它们。

我们可以通过插件来实现这一点，但最好的部分是手动构建它们。 这样您就知道您正在避免在网站上添加 JavaScript（降低网站性能）。

本课程要求您拥有GeneratePress Premium，因为我们将使用Elements 模块。

在没有插件的情况下在GeneratePress中创建社交共享按钮

在没有插件的GeneratePress主题中创建社交共享按钮要求您了解SVG图标。

SVG 是可缩放矢量图形。 它们是由W3C（万维网联盟）（World Wide Web Consortium）开发的开放标准视觉效果（主要用作图标）。

使用 SVG 的好处

• 它们的文件大小很小，不会影响网站速度。
• 您可以轻松添加到 SVG 图标的超链接。
• 它们可以使用任何矢量图形软件轻松修改。
• SVG 图标与分辨率无关，因此非常适合桌面、平板电脑和移动设备视图。
• 与传统图像相比，SVG 图片更适合 SEO。

我们将使用 Iconmonstr 中的 SVG。 意思是，不仅是图标，还有带有 XML 代码的图标。

第 1 步：将社交共享按钮代码添加到GeneratePress Elements 挂钩

为了实现这一点，您首先需要在GeneratePress中创建一个新元素。 转到 WordPress 仪表板，在“外观”下，单击“元素”。 这将打开“元素”页面，单击“添加新元素”。

单击“添加新元素”后， GeneratePress 将显示一个对话框窗口。 单击“挂钩”。 这是准确的，您需要一个GeneratePress 自定义挂钩来执行此操作。

为新元素命名并添加代码。

选择钩子为generate after header，执行PHP，设置显示规则为Posts – All Posts。

因为我们需要社交共享图标浮动在我们的屏幕视口上。 最好选择“Generate After Header Hook”。

我们选择显示设置为“所有帖子”的原因是您希望您的用户在他们的社交网站上分享您的内容。

不要忘记点击“发布”按钮。

复制以下代码以在您的网站上实现相同的功能。

第 2 步：对社交共享图标执行 CSS 样式设置

为此，请转到 WordPress 仪表板，在“外观”下单击“自定义”。

这将打开GeneratePress 主题定制器。 一路向下并单击“Additional CSS”。

粘贴以下 CSS 代码以获得类似的样式。 您可以根据您的要求调整CSS。

第 3 步：GeneratePress 中社交共享按钮的最终结果

最后，这里是如何 社会共享 图标应该看起来像在您的网站上。 请记住，我们已使它们从顶部浮动到屏幕视口的 70%。

GeneratePress 中社交共享按钮的好处（无插件）（无插件）

使用 Iconmonstr 的 SVG 使您的图标变得非常轻量级
不涉及任何类型的 JavaScript 代码。

通过使用此策略，您无需安装任何第 3 方插件
它反应灵敏。

为了共享目的，所有按钮的工作速度都非常快。

结论: 如何在GeneratePress中创建社交分享按钮？

现在您已经了解了如何使用代码和插件在GeneratePress中构建社交共享按钮。

使用对您来说容易且满足您要求的选项。 请随意编辑本文中的 PHP 和/或 CSS 代码。