如何在Divi 主题加上社群分享+关注按钮？ （使用 Monarch WordPress 插件）

这是一篇完整「 Monarch WordPress 」插件教程，我们将使用 Divi 主题+Monarch 插件，在页面不同位置（侧边栏、底部等 .. ），插入社交软件分享&关注按钮。

Divi 是许多网页设计师喜爱的一款主题主题，除了功能强大外，还有很多高质感的设计元素（和现成模板）。

使用Divi搭建形象网站，或是多种架站类型的站长，可能会想将社群软件分享+关注按钮，嵌入至页面不同位置当中。

虽然 Divi 也有内建社群分享功能，但对于客制化方面，没有太多的可选择性。

因此，我们可以安装 Monarch 插件来帮助我们，实现嵌入多种社交媒体，以及定制按钮样式、位置、动画功能。

本篇文章会从 Divi 介绍+购买流程开始，接着我会介绍 Monarch 是什么，以及它的多种设计方向，还有完整教程，准备好的话，就开始学习吧！

• 1. 开始前需准备？
• 2. Monarch 是什么？
• 3. Monarch 安装启用&凭证激活
• 4. Social Sharing 社区分享按钮
• 5. Social Follow 社群关注按钮
• 6. General Settings 基础设置（链接数据）

---

1. 开始前需准备？

Divi 是由知名 Elegant Themes 公司开发，是许多网页设计师喜爱的一款软件，除了功能强大且有很多高质感的元素（和现成模板）。

不需要任何程序概念，用拖曳方式就能设计漂亮的网站，就像官网所描述的，可视化设计和布局排版都将变得更加容易。

Elegant Themes 旗下产品，有全功能 Divi Theme 主题主题、Divi Builder 页面编辑器、Extra 主题（可用在博客 / 新闻杂志 / 作品集 .. ）、Bloom 电子报注册营销工具、Monarch 社群工具等 ..。

所以使用 Divi 软件，不会只有一种软件可用，而是能享受它们公司的所有服务，非常的划算。

加上多种区块模板和完整的网站样板，有商业风、线上开店平台、科技风、服务类型等 .. 多种主题风格。

你只需几点击按钮，即可引用区块样板，或套用整个网站设计。

Divi 对 Woocommerce 开店平台插件有完美的支持，并提供多种线上开店的区块功能，一样用拖放方式即可放入页面。

使用 Divi 会是个很棒的选择，因为它能帮你做到很多事。

---

2. Monarch 是什么？

3. Monarch 安装启用&凭证激活

这个章节，我们会教程购买完Divi之后，该如何安装Monarch插件+凭证激活。

Step1：下载 Monarch 文档包+WordPress 主题安装

登入 Elegant（开发 Divi 的公司）会员之后，从右上方主菜单中的 Account 列表，找到 My Downloads 进入文档安装页面。

接着，我们找到 Monarch 插件并下载。

前往 WordPress 后台，将 Monarch 插件文档包上传，进行安装+启用。 更多插件安装教程。

这样一来，Monarch 就安装成功啦！

Step2：激活 Monarch

通常在安装 Monarch 前，都会先安装好 Divi ，这时安装好的 Monarch 插件，便会自动套用凭证。

不过若是没有自动套用凭证，该怎么办呢？

可以前往Divi官网并登入，点击 Account > Username & API Key 前往凭证专区。

会看到 Username（用户帐号）和 API Keys（使用凭证），这两个分别复制起来，等等会用到。

备注：如果没有出现 API Keys 可自行新增（也可设定标签，方便找寻）。 还有 Divi 可在多个网站上使用，每个网站需对应一组凭证，假设之后网站用不到 Divi，可在这把对应的凭证注销掉，就不会占用空间。

前往 WordPress 网站，找到 WordPress 工具 > Monarch Settings，点击右上列的锁头图标，分别输入刚复制的用户帐户 & API 凭证，完成后储存。

这样我们就激活凭证成功，可以开始使用 Monarch 插件！

---

4. Social Sharing 社区分享按钮

完成 Monarch 安装启用+凭证激活以后，我们就可以来设置社交软件的按钮啰。

这个章节，我会示范如何在 WordPress 不同位置，新增 Monarch 的 Social Sharing 社区分享按钮。

Step 1：选择显示社群软件分享按钮位置

首先，前往 WordPress > 工具 > Monarch Settings > Social Sharing > Locations，选择社群分享按钮显示位置。

Monarch 共有 5 个位置，可设定显示社群软件分享按钮：Sidebar 侧边栏、Inline 页面中横序排列、Pop up 弹跳窗口、Fly in 底部窗口、Media 媒体图片。

这边因为教程，我都先全部勾选，但站长可依照使用习惯进行勾选，不一定要全部选。

若还没有想法，也可以先往下查看完教程，再来进行设置。

Step 2：串接预显示的社群软件

这个步骤，我们先来串接想显示的社群软件吧。

前往 Networks 区块，选择 Add Networks。

跳出选择社群软件的窗口，找出自己想串接的社群软件，分别勾选后，选择「 Apply 」进行储存。

发现成功串接啰，接着可填写显示社群软件名称，设定完成，按下「Save Changes 」储存。

这样就完成社交软件的串接啰，那么接下来的步骤，就是设计按钮样式啦。

因为5个位置的按钮设计方式都大同小异，我会先示范Sidebar侧边栏位置的设定，站长可先学习如何设计按钮，再根据自身需求来做调整。

Step 3：设计 SideBar 侧边栏按钮

选择 SideBar 侧边栏区块，进入设计按钮页面，可选择侧边栏按钮动画，以及按钮形状。

下滑可以继续进行显示设定，详细如下图所示：

接下来是按钮颜色设置，我们可以使用内建色彩（也就是社群软件本身的品牌颜色），也可以调整成我们的自定义色彩。

最后是设定按钮会显示在哪个 WordPress 网站中，可以选择：Home 首页、Post 文章、Page 页面、Project 项目分类。

设定都完成后，我们就可以选择储存啰。

Step 4：前往页面查看+测试按钮

我们到前台文章页面刷新，发现成功显示侧边栏社群软件分享按钮，点击之后，也会顺利跳转分享页面。

补充说明：社群分享按钮位置

Monarch 共有 5 个位置，可设定显示社交软件分享按钮，本章节只示范侧边栏。

弹跳窗口则会在页面闲置，或下卷时出现（若有启用+设定该项目）。

那么，以上就是完整的 Monarch WordPress 插件。

---

5. Social Follow 社群关注按钮

Monarch 也能够新增Social Follow 社群关注按钮，而非单纯的社群分享。

这个章节，我会示范如何新增Social Follow社群关注按钮，串连我们的社群账户，并且分享两种嵌入方式，分别是：新增小工具至侧边栏、产生短代码嵌入文章。

Step 1：串接社群媒体

首先，我们一样先前往串接社群媒体。

前往Social Follow> Networks > Add Networks，新增社交媒体。

出现媒体页面，依据站长需求勾选，这边我先勾选「 Facebook 」、「 YouTube 」、「 Instagram 」以串接社群帐号：）

勾选完毕，选择Apply进行储存。

输入社群帐号的媒体名称、账号网址、账号名称，追踪人数可依据需求键入。

下方选项，可勾选「Open link in new window 在新窗口开启社群帐号」让访客点选按钮后，另开新浏览器窗口读取社群帐号，更方便访客操作。

• 媒体名称：各媒体前台显示名称，站长可自由设定。
• 账号网址：贴上欲串接帐号的网址。
• 帐号ID：输入帐号ID后，可让 Monarch 抓取到社群帐号的追踪人数。 Facebook 的 ID 为「 粉专 ID 」 ，YouTube 的 ID 为频道链接最后面的代码，在后面的章节有详细教程：）
• 目前追踪人数：若没有串接 API 可自由输入数值，若有串接则会如图片中一样，出现「 绿色勾勾 」。
• Open link in new window：在新窗口中打开社群账号。
• Get counts via API：勾选后，即可输入 API ，让 Monarch 自动抓取社群帐号的追踪人数。

这边若站长不太清楚如何设定 API ，可先输入「 媒体名称 」、「 账号网址 」这两项，先跟着我在这个章节，进行社群关注按钮的上线：）

若有想让 Monarch 自动抓取追踪人数的需求，可在下个章节，进行 API 串接的学习。

都设定完成，记得按下「Save Changes 」储存变更，接着我们就可以进行下一步骤。

Step 2：小工具 / 短代码，两种嵌入方式

Monarch WordPress 插件的 Social Follow 社群关注按钮，有 2 种嵌入方式，分别是：将小工具嵌入侧边栏、短代码嵌入文章 / 页面。

以下会分别对这两项方法，进行介绍。

方法 1：小工具嵌入侧边栏

我们将左侧边栏，切换至 Widget 小工具页面，先进行社群关注按钮的相关设计。

选择鼠标悬停按钮动画、外框形状。

下滑区块，可调整按钮显示细节设置，详细说明如下图：

站长可依据自身需求，参考上图说明进行勾选&设定，调整完毕，我们下滑下一个区块。

这里可更改按钮颜色设置，若想使用内建色彩，可以不用特别操作。

设定完成，按下「Save Changes」储存变更。

接着，就可以在 WordPress 侧边栏加入「Social Follow 社群关注按钮 」小工具，让访客可透过侧边栏，找到站长的社群软体关注钮，以进行追踪。

前往 WordPress 外观 > 小工具 > 找到 Monarch Follow 小工具，点击或拖曳加进「 Sidebar 侧边栏」，并进行储存更新。

前往前台刷新，发现侧边栏成功新增 Social Follow 社群关注按钮小工具！

方法 2：短代码嵌入页面&文章

接着我们就来演示如何生成短代码，并且嵌入至 WordPress 文章&页面的方法。

前往 Social Follow > General Settings > Generate ShortCode ，这边可以个别设计短代码会呈现的 Social Follow 社群关注按钮。

因为这边按钮的按钮自定义设定，跟上方小工具的形式类似（可参考方法 1），来进行按钮的定制设计，这里就不重复介绍：）

往下滑会看到短代码生成器，生成+复制代码，接着点选「 Save Changes 」保存短代码。

接下来，就可以将Social Follow社群关注按钮短代码嵌入至 WordPress 文章当中啰！

输入文章段落。 更多 如何新增+编辑 WordPress 文章。

前往 WordPress 的文章 > 全部文章，在想编辑的文章中，我们直接贴上「 Social Follow 社群关注按钮 」的短代码。

更新或发布文章后，再度前往文章页面，会发现成功在 WordPress 文章中，新增 Social Follow 社群关注按钮：）

小备注：若想在 WordPress 页面新增 Social Follow 社群追踪按钮，可以使用 Divi Builder 编辑页面，新增「 Code 」小工具，在 Text 文本，贴上短代码就可以。

---

6. General Settings 基础设置（链接数据）

上个章节，我们提过，可以在 Monarch 串接社群账号 API，自动结算粉丝人数。

但需要注意的是，串接API并更新粉丝人数的操作，会占用到一些主机资源！

若需开启社交软件API串接，请先前往Social Follow> Networks，开启“ Get counts via API ”选项。

开启之后，我们就来个别串接现在使用的三个社群软件：Facebook、YouTube、Instagram 吧。

在左侧列表，找到并前往 General Settings > Main ，这边需要贴上 Facebook App ID 和 APP Secret，才可串接 Facebook。

这里我们需前往 Facebook for Developers 取得Facebook App ID 和 APP Secret，可参考 Super Socializer 插件 文章的 Facebook 串接章节，取得方式是一样的！

另外，Instagram 的 API 凭证，则是需本身为 商业帐号，并且在 Facebook for Developers 申请进阶权限，才能够取得：）

贴上社群帐号各自的凭证之后，点击「RE-Authorize 」按钮，进行授权。 接着，就会跳出 Facebook 通知，确认是否继续串接，点击确认即可。

输入好 API 以后，我们还需要回到 Social Follow > Networks ，贴上“ 帐号 ID 。

贴好各自的社群帐号ID后，选择保存即可。

原文链接：https://www.itaoda.cn/blog/12321.html，转载请注明出处。