WordPress 仿百度商桥的网站在线留言框功能

现在很多企业网站都安装了百度商桥,由于现在百度商桥只限百度推广用户使用,否则就需要收费了。那么我们也可自己制作一下类似百度商桥的网站在线留言框。

左下留言框:
WordPress 仿百度商桥的网站在线留言框功能
中间延迟留言框:
WordPress 仿百度商桥的网站在线留言框功能

section

第一步:将以下的代码放到自己网站的底部 body 标签上方

  1. <ins id="newBridge">
  2. <!-- target: nodeBoard -->
  3. <ins class="nb-nodeboard-base nb-nodeboard-position-base nb-nodeboard-left-bottom nb-show" id="nb_nodeboard">
  4. <ins class="nb-nodeboard-contain-base nb-nodeboard-contain">
  5. <ins id="nb_nodeboard_top" class="nb-nodeboard-top nb-nodeboard-top-7" style="background-color: transparent;">
  6. <ins class="nb-head-title">留言板</ins>
  7. <ins class="nb-nodeboard-close" id="nb_nodeboard_close" data-type="min">
  8. </ins>
  9. </ins>
  10. <ins id="nb_nodeboard_text" class="nb-nodeboard-text">
  11. <p class="nb-nodeboard-company"><?php bloginfo('name'); ?></p>
  12. <p class="nb-nodeboard-link"><?php echo $general_options['tellphone']; ?>/<?php echo $general_options['shouji']; ?></p>
  13. </ins>
  14. <form id="nb_nodeboard_form" autocomplete="off" class="nb-board-form" action="<?php echo $_SERVER['REQUEST_URI']; $current_user = wp_get_current_user(); ?>" method="post" accept-charset="utf-8">
  15. <input type='hidden' value='send' name='tougao_form' />
  16. <ins id="nb_nodeboard_set" class="nb-nodeboard-set">
  17. <ins class="nb-nodeboard-content">
  18. <textarea id="nb-nodeboard-set-content-js" name="tougao_content" data-ph="请在此输入留言内容,我们会尽快与您联系。(必填)" placeholder="请在此输入留言内容,我们会尽快与您联系。(必填)" class="nb-nodeboard-set-content nb-nodeboard-param">
  19. </textarea>
  20. </ins>
  21. <ins class="nb-nodeboard-name" style="z-index:4;">
  22. <ins class="nb-nodeboard-icon nodeName">
  23. </ins>
  24. <input id="nb_nodeboard_set_name" data-write="0" name="tougao_authorname" maxlength="30" class="nb-nodeboard-input nb-nodeboard-param" type="text" data-ph="姓名" placeholder="姓名">
  25. </ins>
  26. <ins class="nb-nodeboard-name" id="nb_nodeboard_phone" style="z-index:3;">
  27. <ins class="nb-nodeboard-icon nodePhone">
  28. </ins>
  29. <input id="nb_nodeboard_set_phone" name="tougao_tell" maxlength="30" class="nb-nodeboard-input nb-nodeboard-param" data-write="1" type="text" data-ph="电话(必填)" placeholder="电话(必填)">
  30. </ins>
  31. </ins>
  32. <ins class="nb-nodeboard-success" id="nb_nodeboard_success">
  33. <ins class="nb-success-box">
  34. <ins class="nb-success-icon">
  35. </ins>
  36. <ins class="nb-success-title" id="nb_node_messagetitle">感谢留言</ins>
  37. <ins class="nb-success-content" id="nb_node_messagecontent">我们会尽快与您联系</ins>
  38. <ins id="nb_nodeboard_return" needverifycode="1" class="nb-sucess-close">关闭</ins>
  39. </ins>
  40. </ins>
  41. <ins class="nb-nodeboard-send" id="nb_node_contain">
  42. <ins id="nb_nodeboard_send" needverifycode="1" class="nb-nodeboard-send-btn nb-nodeboard-send-btn-7">发送</ins>
  43. </ins>
  44. </ins>
  45. </ins>
  46. </form>
  47. <!-- end -->
  48. <!-- target: invite -->
  49. <ins class="nb-invite-wrap nb-invite-wrap-base nb-position-base nb-middle customer-invite-style driect-talk-style" id="nb_invite_wrap" style="width: 291px; display: block; margin-left: -146px; margin-top: -63px;">
  50. <ins class="nb-invite-body nb-invite-skin-0" style="height:125px;background:url(//pushitourism.cn/wp-content/uploads/2022/03/bw.png);background-size: 100% 100%;">
  51. <ins class="nb-invite-tool nb-invite-tool-base" id="nb_invite_tool" style="">
  52. </ins>
  53. <ins class="nb-invite-text nb-invite-text-base">
  54. <ins class="nb-invite-welcome nb-invite-welcome-base nb-hide" id="nb_invite_welcome">
  55. </ins>
  56. </ins>
  57. </ins>
  58. <ins class="nb-invite-btn-skin-0 nb-invte-btns-2">
  59. <ins class="nb-invite-ok nb-invite-ok-base nb-direct-send-btn" id="nb_invite_ok" style="background-color:#6b5b1a;color:#ffd300;">发送</ins>
  60. <ins class="nb-invite-input-wrap">
  61. <input type="text" class="nb-invite-input" id="nb_invite_input" maxlength="200" placeholder="您可以直接在这里和我们联系" data-ph="您可以直接在这里和我们联系">
  62. </ins>
  63. </ins>
  64. </ins>
  65. <!-- end -->
  66. </ins>

第二步:下载 CSS 样式文件,并将 CSS 引入到自己的网站代码里;下载地址:https://pan.baidu.com/s/1YtmKcaRqM_-fkjeYVU98_g?pwd=lwfr

第三步:在网页最底部放上 JS 代码,用于关闭和打开留言框

  1. <script>
  2. $('.nb-nodeboard-send-btn').click(function(){
  3. $('form#nb_nodeboard_form').submit();
  4. });
  5. $('#nb_invite_wrap').hide();
  6. $(function () {
  7. setTimeout(function () {
  8. $("#nb_invite_wrap").show();
  9. }, 10000);
  10. })
  11. $('#nb_invite_tool').click(function(){
  12. $('#nb_invite_wrap').hide();
  13. });
  14. $('#nb_nodeboard_close').click(function(){
  15. $('#nb_nodeboard_text,#nb_nodeboard_form').toggle();
  16. $(".nb-nodeboard-close").toggleClass("nb-nodeboard-max");
  17. $('#newBridge .nb-nodeboard-left-bottom').css({"left":"20px","bottom":"10px","z-index":"999"});
  18. });
  19. $('#nb_invite_ok').click(function(){
  20. $('#nb_invite_wrap').hide();
  21. $('#newBridge .nb-nodeboard-left-bottom').css({"left":"45%","bottom":"20%","z-index":"999"});
  22. });
  23. </script>

这样就可以在自己的网站上制作出类做百度商桥的留言框功能了。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

怎么在VIDEO视频前插入15秒视频广告(带倒计时、关闭功能)

2022-3-21 15:57:19

WordPress教程

WordPress 判断页面函数is_page()怎么使用

2022-3-22 11:02:40

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索