HAScom 与你分享

如何在WordPress中添加WhatsApp聊天框和共享按钮

你想在WordPress中添加WhatsApp聊天框和分享按钮吗?WhatsApp 是最受欢迎的消息传递平台之一,在全球拥有约 2 亿用户。添加Whatsapp共享按钮将允许您与客户建立联系并建立用户参与度,添加聊天框按钮将允许用户直接通过您的网站向您发送消息。在本文中,我们将向您展示如何在WordPress中轻松添加WhatsApp共享按钮。

你想在WordPress中添加WhatsApp聊天框和分享按钮吗?WhatsApp 是最受欢迎的消息传递平台之一,在全球拥有约 2 亿用户。添加Whatsapp共享按钮将允许您与客户建立联系并建立用户参与度,添加聊天框按钮将允许用户直接通过您的网站向您发送消息。在本文中,我们将向您展示如何在WordPress中轻松添加WhatsApp共享按钮。

如何在WordPress中添加WhatsApp共享按钮

为什么要在WordPress中添加WhatsApp按钮?

WhatsApp是一款即时通讯应用程序,允许世界各地的人们轻松相互联系。

在您的WordPress网站上添加WhatsApp共享按钮将允许访问者轻松地与他们的联系人共享您的内容。

此外,您还可以添加一个WhatsApp聊天框,使用户能够与您进行直接对话。

例如,如果您有一个在线商店,那么客户可以使用WhatsApp聊天按钮进行产品查询,而无需填写任何表格或通过客户支持。

它可以提高用户参与度并降低购物车放弃率。

方法1:在WordPress中添加WhatsApp Share按钮

如果您想将WhatsApp共享按钮添加到您的网站,那么此方法适合您。

首先,您需要安装并激活时髦的社交共享插件。

激活后,您需要从管理员侧边栏访问时髦的社交共享菜单。

从这里,您需要切换到顶部的“标准界面”选项卡。

然后,您需要向下滚动到“选择共享服务”部分,只需选中WhatsApp选项旁边的框即可。

检查WhatsApp共享选项

您还可以为其他社交媒体平台添加“共享”按钮,包括Facebook,Instagram,Pinterest,Twitter等。

完成后,不要忘记单击“保存更改”按钮以存储您的设置,然后您可以前往“主题选择' 标签。

从这里,您可以通过更改共享按钮的大小、形状、徽标或背景颜色等来自定义共享按钮。最好使用WhatsApp品牌颜色作为共享按钮,以便用户更容易识别它。

自定 WhatsApp 分享按鈕

完成后,不要忘记单击“保存更改”按钮来存储您的设置。

您现在可以访问您的网站以查看您的WhatsApp共享按钮的运行情况。

这是它在我们的演示网站上的外观。

不想将WhatsApp按钮添加到每个页面?不用担心,该插件还允许您轻松地将其添加到单个帖子和页面中。

在块编辑器中添加WhatsApp共享按钮

如果您只想在特定帖子和页面上显示WhatsApp共享按钮,那么首先您需要关闭共享按钮的全局显示。

为此,只需转到WordPress管理侧边栏中的时髦社交共享页面,然后切换到“标准界面”选项卡。

接下来,您需要取消选中“启用标准共享界面”选项的框。

禁用标准按钮

接下来,切换到“浮动界面”选项卡。

从这里,取消选中“启用浮动共享界面”选项旁边的框。

禁用浮动按钮

现在您已经禁用了标准和浮动的社交共享按钮,您可以继续使用短代码将WhatsApp共享按钮到您网站上的任何页面或帖子。

只需在内容编辑器中打开要显示WhatsApp共享按钮的帖子或页面,也可以创建一个新帖子或页面。

从这里,只需单击左上角的添加块(+)按钮,然后搜索“简码”块。之后,只需将块添加到页面即可。

在块编辑器中添加简码

接下来,您需要复制以下简码并将其粘贴到“简码”块中。

[Sassy_Social_Share]

完成后,只需单击“发布”或“更新”按钮即可存储更改。你的WhatsApp Share按钮将看起来像这样。

页面上的WhatsApp分享按钮

将WhatsApp共享按钮添加为小部件

要将WhatsApp共享按钮添加到网站的侧边栏,您需要从管理侧边栏访问外观»小部件页面。

从这里,只需单击左上角的添加块(+)按钮,然后找到“简码”块。

接下来,您需要将“简码”块添加到侧边栏。

WhatsApp分享按钮作为小部件

之后,只需将以下短代码复制并粘贴到块中即可。

[Sassy_Social_Share]

接下来,单击“更新”按钮以存储您的设置。

这就是您的WhatsApp共享按钮添加到网站侧边栏后的外观。

侧边栏中的WhatsApp共享按钮

在完整網站編輯器中添加 WhatsApp 分享按鈕

如果您使用的是块主题,那么您将使用完整的站点编辑器,并且无法访问“小部件”页面。

首先,您需要从管理侧边栏中访问外观»编辑器选项以启动完整的站点编辑器。

接下来,您需要单击屏幕顶部的“添加块”(+)按钮,然后将“简码”块添加到您网站上的任何合适位置。

之后,将以下简码添加到块中。

[Sassy_Social_Share]

在完整站点编辑器中添加WhatsApp共享按钮

完成后,单击顶部的“保存”按钮。

这就是WhatsApp分享按钮在我们的演示网站上的样子。

WhatsApp 分享按鈕在 FSE 中預覽

方法2:在WordPress中添加WhatsApp聊天框按钮

此方法允许您在WordPress中添加WhatsApp聊天框按钮。

这意味着当用户点击WhatsApp聊天按钮时,他们将能够通过您的WhatsApp电话号码向您发送直接消息。

注意: 您不会直接在WordPress仪表板中收到任何消息,但您将能够在WhatsApp移动应用程序,Web界面和桌面软件中像往常一样聊天。

首先,您需要安装并激活点击聊天插件。

激活后,您需要转到已添加到WordPress管理仪表板侧边栏中的“单击以聊天”菜单项。

从这里开始,您需要首先在“WhatsApp号码”字段中输入您的公司电话号码。

这将是您将在其中接收用户消息的电话号码。

之后,您需要在“预填充消息”字段中输入一条简单的消息。这将是将显示在您的WhatsApp聊天窗口中的默认消息。

提供您的WhatsApp电话号码

接下来,您需要向下滚动到“样式,位置”部分。

您可以首先从下拉菜单中选择WhatsApp聊天框的样式。默认情况下,此插件提供大约 8 种不同的样式。只需选择您喜欢的那个。

為 WhatsApp 聊天框選擇一種样式

之后,您需要向下滚动到“位置到位置”部分。

从这里,您可以从下拉菜单中选择聊天框的位置和大小。

选择聊天框的位置

接下来,您需要转到“显示设置”部分。

在这里,您只需要选中要显示WhatsApp聊天框的选项旁边的“全局”框。

例如,如果要在帖子,页面和类别页面上显示聊天框,则需要选中“全局”选项。

如果您不想在某个页面上显示WhatsApp聊天框,也可以选择“隐藏”选项。

选中全局框

最后,不要忘记单击“保存更改”按钮来存储您的设置。

现在,您需要转到“单击以聊天”»“问候语”页面,以从下拉菜单中选择“问候语”对话框。

此问候语对话框将与页面上的WhatsApp按钮一起显示。

从下拉菜单中选择问候语对话框

做出选择后,您需要键入问候语对话框的标题、主要内容和号召性用语的内容。

之后,向下滚动到“可定制设计”部分。

键入问候语对话框的内容

到达此处后,您可以选择主要内容,标题和消息框的背景颜色。

之后,只需单击“保存更改”按钮即可存储您的设置

选择问候语对话框的背景颜色

接下来,您需要访问您的网站。

默认情况下,这就是您的WhatsApp聊天框的外观。

网站上的WhatsApp聊天框

现在,我们将向您展示如何在块编辑器、小部件和完整站点编辑器中轻松添加 WhatsApp 聊天按钮。

在块编辑器中添加WhatsApp聊天按钮

您可以使用块编辑器轻松地将WhatsApp按钮添加到特定页面或发布到WordPress网站上。

在本教程中,我们将向页面添加WhatsApp按钮。

首先,您需要从管理员侧边栏转到页面»添加新页面。

这将启动块编辑器。

现在,您需要单击屏幕左上角的“添加块”(+)按钮,然后单击“简码”块。

在块编辑器中添加简码

添加“简码”块后,您需要将以下简码复制并粘贴到块中。

[ht-ctc-chat]

之后,只需单击顶部的“发布”按钮。

这就是WhatsApp按钮在我们的演示网站上的外观。

页面上的 WhatsApp 按钮

将WhatsApp聊天按钮添加为小部件

在这种方法中,我们将向您展示如何轻松地将WhatsApp按钮添加为网站侧边栏中的小部件。

首先,您需要从WordPress侧边栏转到外观»小部件页面。

到达那里后,只需单击“侧边栏”选项卡将其展开,然后单击顶部的“添加块”(+)按钮。

接下来,只需找到并将“简码”块添加到侧边栏。

在侧边栏中添加简码块

现在,只需将以下短代码复制并粘贴到块中即可。

[ht-ctc-chat]

最后,不要忘记单击“更新”按钮来存储您的设置。

这是WhatsApp按钮添加到我们演示网站的侧边栏后的外观。

侧边栏中的WhatsApp按钮

在完整站点编辑器中添加WhatsApp聊天按钮

如果您将基于块的主题与完整的站点编辑器一起使用,那么此方法适合您。

首先,转到外观»编辑器页面以启动完整的站点编辑器。

在那里,只需单击屏幕左上角的“添加块”(+)按钮。

现在,只需找到“简码”块并将其添加到您在网站上的首选位置即可。

在 FSE 中添加简码块

添加块后,只需将以下简码复制并粘贴到块中即可。

[ht-ctc-chat]

最后,不要忘记单击顶部的“更新”按钮以保存更改。

这就是WhatsApp按钮在我们网站上的外观。

FSE 中的 WhatsApp 按钮

5efa732701047b080616670e3439dbb