这是一篇完整「 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 是什么?

Monarch 是由知名 Elegant Themes 公司,所开发的社群分享、关注按钮插件,是环绕 Divi 生态圈的其中一款功能插件。
它可在后台选择多款社交软件串接,并显示在 WordPress 页面不同位置上,也能够使用短代码,自由选择想显示的位置。
也能定制按钮样式形状、背景颜色、文本、 Logo 显示、动画效果等 .. 外观设置,同时对移动式装置(平板、手机)也有很好的响应式效果。
管理方面,除了直观简单的设计,还能够显示点击次数等 .. 数据分析,对于站长来说是很方便的插件功能。
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,转载请注明出处。
评论0