自定义代码为WordPress网站添加悬浮在线客服教程

2023-05-0409:57:33网站建设与开发Comments1,695 views字数 5597阅读模式

如何通过自定义代码，为Wordpress网站添加悬浮的微信、QQ、Whatsapp和电子邮件等在线客服联系方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

添加在线客服的好处

在网站侧边栏添加联系方式，是一种有效的网站优化策略，有以下几个方面的好处：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

提高网站的转化率。网站的转化率是指访问者在网站上完成某个目标行为的比例，比如注册、订阅、购买、咨询等。在网站侧边栏添加联系方式，可以让访问者更容易地联系到你，进而了解你的产品或服务的详情，或者直接与你进行交易或预约。这样，你就可以增加你的潜在客户和实际客户的数量，从而提高你的收入和利润。
收集用户的反馈。用户的反馈是指访问者对你的网站和产品或服务的评价和建议，可以帮助你了解用户的需求和满意度，以及你的优势和不足。在网站侧边栏添加联系方式，可以让访问者更方便地向你提供他们的反馈，无论是赞美、投诉、意见还是问题。这样，你就可以及时地回复和处理他们的反馈，提升你的用户服务和用户体验，从而增加用户的忠诚度和口碑。
增加网站的互动性。网站的互动性是指访问者在网站上与你或其他访问者进行交流和互动的程度，比如评论、分享、点赞、收藏等。在网站侧边栏添加联系方式，可以让访问者更容易地与你建立联系，表达他们的想法和感受，或者获取更多的信息和资源。这样，你就可以增加你的网站的活跃度和吸引力，让访问者更愿意在你的网站上停留更长时间，或者推荐给他们的朋友和社交媒体。
提升网站的信任度。网站的信任度是指访问者对你的网站和产品或服务的可信度和可靠度的感觉，比如安全性、专业性、真实性等。在网站侧边栏添加联系方式，可以让访问者更清楚地知道你是一个真实存在的企业或个人，有专业的客服团队和质量保证，可以随时为他们提供帮助和支持。这样，你就可以增加你的网站的信誉和声誉，让访问者更放心地使用你的产品或服务。

如何通过自定义代码实现？

如果想要通过自定义代码实现悬浮的联系方式功能，可以尝试使用Wordpress的短代码功能。短代码是一种特殊的标签，可以在文章和页面中插入一些预定义的代码。我们可以在当前Wordpress主题的functions.php文件中定义一个短代码函数，然后在想要显示悬浮联系方式的位置添加短代码来调用它。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

下面是一个短代码函数的例子。可以在当前Wordpress主题文件functions.php中添加以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

// 定义一个短代码函数，名为contact_float
function contact_float() {
  // 返回你想要显示的HTML代码，这里是一个简单的悬浮按钮
  return '<div class="contact-float"><a href="mailto:example@example.com">联系我</a></div>';
}

// 注册短代码，名为contact_float，关联到上面定义的函数
add_shortcode('contact_float', 'contact_float');

如果想要在文章或页面中显示悬浮联系方式，可以使用下面的短代码区块来调用它：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

[contact_float]

这样，就可以在文章或页面中看到一个悬浮的联系方式按钮了。大家可以根据需要修改函数中的HTML和CSS代码，来实现你想要的样式和效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

如果想要在整个网站展示悬浮联系方式，可以在主题文件header.php中添加短代码函数的调用，如下所示：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

<?php echo do_shortcode('[contact_float]'); ?>

这样，就可以在每个页面的头部显示悬浮联系方式了。你也可以把它放在其他位置，比如footer.php或sidebar.php等你想要显示的地方。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

完整示例操作步骤：

首先，在当期Wordpress主题的functions.php文件中添加以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

// 定义一个短代码函数，名为contact_icons
function contact_icons() {
  // 返回你想要显示的HTML代码，这里是一些悬浮的联系图标
  return '<div class="contact-icons">
    <a class="contact-icon" href="https://api.whatsapp.com/send?phone=1234567890" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/whatsapp.png" alt="WhatsApp"></a>
    <a class="contact-icon" href="https://web.wechat.com/" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/wechat.png" alt="WeChat"></a>
    <a class="contact-icon" href="mailto:example@example.com"><img src="https://example.com/wp-content/uploads/2021/12/email.png" alt="Email"></a>
    <a class="contact-icon" href="tel:1234567890"><img src="https://example.com/wp-content/uploads/2021/12/phone.png" alt="Phone"></a>
    <a class="contact-icon" href="https://example.com/contact/" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/inquiry.png" alt="Inquiry"></a>
  </div>';
}

// 注册短代码，名为contact_icons，关联到上面定义的函数
add_shortcode('contact_icons', 'contact_icons');

然后，在主题style.css文件中添加以下CSS代码，来设置图标的样式和位置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

/* 悬浮联系图标的容器 */
.contact-icons {
  position: fixed; /* 固定位置 */
  right: 20px; /* 距离右边20像素 */
  bottom: 20px; /* 距离底部20像素 */
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
}

/* 每个联系图标的样式 */
.contact-icon {
  width: 40px; /* 宽度40像素 */
  height: 40px; /* 高度40像素 */
  margin: 5px; /* 外边距5像素 */
  border-radius: 50%; /* 圆形边框 */
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* 阴影效果 */
}

/* 每个联系图标的图片的样式 */
.contact-icon img {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
}

最后，在你想要显示悬浮联系方式图标的文章或页面中，使用短代码区块来调用它，就像这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

[contact_icons]

这样，你就可以在文章或页面中看到一些悬浮在右侧的联系图标了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

同样，如果想要在整个网站中显示悬浮的在线客服，可以在header.php中使用下面的代码来执行短代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

<?php echo do_shortcode('[contact_icons]'); ?>

这样，就可以在header.php中正确地显示悬浮联系图标了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

通过上面的步骤，我们只是增加了一个静态的悬浮图标，我们还可以加一些hover效果。在当前主题的style.css文件中添加下面的CSS代码，来设置图标在鼠标悬停时的样式。可以在鼠标悬停时，让图标变大和旋转。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

/* 每个联系图标的图片的样式 */
.contact-icon img {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
  transition: transform 0.3s; /* 过渡效果 */
}

/* 每个联系图标的图片在鼠标悬停时的样式 */
.contact-icon img:hover {
  transform: scale(1.2) rotate(10deg); /* 放大1.2倍并旋转10度 */
}

另外，有的朋友可能想要在鼠标悬停时，可以弹出一张图片，例如弹出微信的二维码。那么，我们需要在主题的functions.php文件中修改一下短代码函数的HTML代码，给微信图标添加一个span元素，用来显示图片。然后，在主题style.css文件中修改一下CSS代码，给span元素设置样式和位置，并让它在鼠标悬停时显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

// 定义一个短代码函数，名为contact_icons
function contact_icons() {
  // 返回你想要显示的HTML代码，这里是一些悬浮的联系图标
  return '<div class="contact-icons">
    <a class="contact-icon" href="https://api.whatsapp.com/send?phone=1234567890" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/whatsapp.png" alt="WhatsApp"></a>
    <a class="contact-icon" href="https://web.wechat.com/" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/wechat.png" alt="WeChat"><span><img src="https://example.com/wp-content/uploads/2021/12/wechat-qrcode.png" alt="WeChat QR Code"></span></a>
    <a class="contact-icon" href="mailto:example@example.com"><img src="https://example.com/wp-content/uploads/2021/12/email.png" alt="Email"></a>
    <a class="contact-icon" href="tel:1234567890"><img src="https://example.com/wp-content/uploads/2021/12/phone.png" alt="Phone"></a>
    <a class="contact-icon" href="https://example.com/contact/" target="_blank"><img src="https://example.com/wp-content/uploads/2021/12/inquiry.png" alt="Inquiry"></a>
  </div>';
}

// 注册短代码，名为contact_icons，关联到上面定义的函数
add_shortcode('contact_icons', 'contact_icons');

然后，将下面的代码添加到Style.css文件中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

/* 悬浮联系图标的容器 */
.contact-icons {
  position: fixed; /* 固定位置 */
  right: 20px; /* 距离右边20像素 */
  bottom: 20px; /* 距离底部20像素 */
  display: flex; /* 使用弹性布局 */
  flex-direction: column; /* 垂直排列 */
  align-items: center; /* 居中对齐 */
  z-index: 9999; /* 设置最高层级 */
}

/* 每个联系图标的样式 */
.contact-icon {
  width: 40px; /* 宽度40像素 */
  height: 40px; /* 高度40像素 */
  margin: 5px; /* 外边距5像素 */
  border-radius: 50%; /* 圆形边框 */
  box-shadow: 0 0 10px rgba(0,0,0,0.2); /* 阴影效果 */
}

/* 每个联系图标的图片的样式 */
.contact-icon img {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
}

/* 每个联系图标的span元素的样式 */
.contact-icon span {
  position: absolute; /* 绝对定位 */
  top: -10px; /* 距离上方-10像素 */
  left: -10px; /* 距离左边-10像素 */
  width: 200px; /* 宽度200像素 */
  height: 200px; /* 高度200像素 */
  display: none; /* 默认不显示 */
}

/* 每个联系图标的span元素的图片的样式 */
.contact-icon span img {
  width: 100%; /* 宽度100% */
  height: 100%; /* 高度100% */
}

/* 每个联系图标在鼠标悬停时的样式 */
.contact-icon:hover {
  transform: scale(1.2); /* 放大1.2倍 */
}

/* 每个联系图标的span元素在鼠标悬停时的样式 */
.contact-icon:hover span {
  display: block; /* 显示图片 */
}

综上，就是通过自定义代码添加在线客服功能的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/38499.html

自定义代码为WordPress网站添加悬浮在线客服教程

添加在线客服的好处

如何通过自定义代码实现？

完整示例操作步骤：

2024年排名前5 CSS 框架：Bootstrap、Tailwind CSS…

WordPress 6.5 发布，体验进一步加强，性能也大幅提升

WordPress 6.5 通过新翻译格式文件显著提高加载速度

WordPress 6.5 新功能大全：字体库、数据视图、块绑定、交互 API

WordPress 6.5 性能提升，将支持 AVIF 格式图片

WordPress二次开发：添加字段到自定义分类法Taxonomy Terms

Vercel+Cloudfare：个人打造AI网站神器

WordPress 6.5 新功能：字体库、新增API、插件依赖

AI写作宝、聪明灵犀、文心一言…AI英语写作4个工具

2024年用WORDPRESS搭建一个独立网站需要多少钱？

Comment