(wordpress教程)纯代码实现类似百度社交分享按钮 - 汇站网

(wordpress教程)纯代码实现类似百度社交分享按钮

2023-09-19 0 670

正文:

作为主题开发者,我们可以通过以下步骤将分享功能添加到主题中:

1. 首先,我们需要在主题的文件中找到需要添加分享功能的位置。可以是文章页面、页面模板或者侧边栏等。

2. 在找到的位置,我们可以使用以下代码将百度分享功能添加到主题中:

 <!--?php if (function_exists('baidu_share')) { baidu_share(); } ?-->

 

3. 确保你已经安装并激活了百度分享插件。如果没有安装,你可以在 WordPress 插件目录中搜索并安装它。

4. 保存并更新你的主题文件。

还有一种方法就是今天汇站要分享的社交分享按钮,能实现在我们的博客里该功能。
先给大家看下效果图:(wordpress教程)纯代码实现类似百度社交分享按钮

1.functions.php里面添加

function entry_share($content) {
    if (is_single()) {
    $content .= '
    <div class="entry-share">
    <div class="share-box">
    <ul class="bdsharebuttonbox">
    <li class="share-pu">分享到:</li>
    <li><a title="分享到新浪微博"  data-cmd="tsina" class="bds_tsina fa-weibo" data-cmd="tsina" ><svg t="1595561236330" class="icon"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3775" width="24" height="24"><path d="M736.95 523.19c-35.19-6.82-18.1-25.72-18.1-25.72s34.45-56.79-6.79-98c-51.14-51.14-175.33 6.49-175.33 6.49-47.43 14.75-34.86-6.71-28.13-43.19 0-43-14.74-115.74-141.12-72.75-126.25 43.16-234.65 194.51-234.65 194.51-75.37 100.62-65.4 178.34-65.4 178.34 18.83 171.63 201.2 218.74 343 229.92 149.24 11.67 350.63-51.46 411.69-181.18 61.08-129.94-49.89-181.35-85.2-188.42M421.5 844.38c-148.13 6.93-267.88-67.38-267.88-166.2S273.37 499.82 421.5 493s268.24 54.25 268.24 153-120 191.64-268.24 198.38" p-id="3776"></path><path d="M392 558.17c-149 17.45-131.78 157-131.78 157s-1.51 44.21 40 66.71c87.18 47.2 176.92 18.62 222.3-39.94S541.17 540.86 392 558.17M354.39 754c-27.82 3.27-50.24-12.76-50.24-36.05s19.92-47.42 47.74-50.32c32-3 52.77 15.35 52.77 38.62s-22.56 44.6-50.27 47.75m87.83-74.78c-9.43 7-21 6-26-2.41-5.21-8.26-3.26-21.46 6.3-28.39 11-8.19 22.51-5.84 27.47 2.39 5 8.43 1.43 21.09-7.77 28.4M952.6 445a36 36 0 0 0 1.18-8.56 268 268 0 0 0 3.22-39.92c0-147-119.6-266.68-266.64-266.68a36.87 36.87 0 1 0 0 73.74c106.38 0 192.91 86.56 192.91 192.94a194.51 194.51 0 0 1-3.2 35.28l0.43 0.07a36.7 36.7 0 0 0 72 13.36 0.56 0.56 0 0 1 0-0.23" p-id="3777"></path><path d="M837.17 410.36c0.42-4.58 0.88-9.15 0.88-13.84 0-81.45-66.24-147.69-147.68-147.69a30.72 30.72 0 1 0 0 61.44 86.34 86.34 0 0 1 86.23 86.25 88.46 88.46 0 0 1-0.68 11.08l0.72 0.1c-0.14 1.22-0.72 2.31-0.72 3.57A30.71 30.71 0 0 0 806.63 442c15.52 0 27.82-11.7 29.9-26.67l0.32 0.07c0.08-0.77 0-1.6 0.13-2.36 0-0.6 0.37-1.13 0.37-1.76 0-0.33-0.19-0.6-0.19-0.91" p-id="3778"></path></svg></a></li>
    <li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#"><svg t="1595561212133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" width="24" height="24"><path d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z" p-id="2854"></path></svg></a></li>
	  <li><a title="分享到 QQ" class="fa fa-qq" data-cmd="sqq" onclick="return false;" href="#"><svg t="1595560585005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1269" width="24" height="24"><path d="M121.6 582.4c-32 83.2-38.4 160-12.8 172.8C128 768 160 742.4 185.6 704c12.8 44.8 38.4 89.6 76.8 121.6-38.4 12.8-64 38.4-64 70.4 0 44.8 70.4 83.2 153.6 83.2 76.8 0 140.8-32 153.6-70.4h19.2c12.8 38.4 76.8 70.4 153.6 70.4 83.2 0 153.6-38.4 153.6-83.2 0-25.6-25.6-51.2-64-70.4 38.4-32 64-76.8 76.8-121.6 25.6 44.8 57.6 64 70.4 57.6 25.6-12.8 19.2-89.6-12.8-172.8-25.6-64-64-108.8-89.6-121.6v-12.8c0-25.6-6.4-44.8-19.2-64V384c0-12.8 0-19.2-6.4-32C780.8 179.2 678.4 51.2 512 51.2c-166.4 0-268.8 134.4-275.2 300.8-6.4 6.4-6.4 12.8-6.4 25.6v6.4c-12.8 19.2-19.2 38.4-19.2 64v12.8c-25.6 12.8-64 57.6-89.6 121.6z m0 0" p-id="1270"></path></svg></a></li>
    <li><a title="分享到 QQ 空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"><svg t="1595560960230" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1951" width="24" height="24"><path d="M298.79168 679.35104c23.49184-26.60096 325.69728-197.26592 325.69728-197.26592l-394.58944-53.2608 527.68128-6.27456c0 0 18.80064 15.66336 0 37.59744-18.76992 21.93792-299.0656 214.51008-299.0656 214.51008l318.71232 25.53984-9.68704-56.53248 255.8464-249.38112-353.55264-51.34976L511.69152 22.53184 353.55264 342.93504 0 394.28352l255.8464 249.38112-60.38016 352.1856L511.69152 829.5808l316.22784 166.26944-49.57568-289.16096-479.55328 21.2288C298.79168 727.91808 275.29984 705.98016 298.79168 679.35104z" p-id="1952"></path><path d="M777.22624 700.19712 778.34368 706.69056 829.6128 704.39936Z" p-id="1953"></path></svg></a></li> 
    </ul>
    </div>
    </div>';
    }
   return $content;
}
add_filter('the_content','entry_share');

2.footer.php 添加

<script>window._bd_share_config = {"common": {"bdSnsKey": {},"bdText": "","bdMini": "2","bdMiniList": false,"bdPic": "","bdStyle": "1","bdSize": "16"},"share": {"bdSize": 16}};with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];</script>

3.当然你需要自定义css

 
.entry-share {
  font-size: 14px;
  text-align: center;
  margin: 30px auto 10px auto;
}
 
.entry-share .share-pu {
  float: left;
  color: #4d4d4d;
  font-weight: 700;
  line-height: 50px;
}
 
.entry-share ul li {
  list-style: none;
  margin: 0;
}
 
.entry-share li {
  float: left;
}
 
.entry-share .share-box {
  display: inline-block;
  overflow: hidden;
}
 
.entry-share a {
  float: left;
  color: #666;
  font-size: 16px !important;
  border-radius: 40px;
  margin-right: 10px;
  border: 1px solid #666;
  position: relative;
}
 
.entry-share .bdsharebuttonbox a:hover {
  text-decoration: none;
  color: #fff;
}
 
.entry-share .bds_more {
  color: #666 !important;
}
 
.entry-share .bds_more:hover {
  color: #fff !important;
}
 
.entry-share a {
  background: transparent !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 5px !important;
  float: none !important;
  font-size: 20px !important;
  display: block !important;
  text-align: center !important;
  line-height: 40px !important;
}
 
.entry-share a .icon {
  margin-top: 8px
}
 
.entry-share a:hover .icon {
  fill: #fff
}
 
.entry-share a:hover.fa-weibo {
  background: #e74c3c !important;
  border-color: #e74c3c;
}
 
.entry-share a:hover.fa-wechat {
  background: #2ecc71 !important;
  border-color: #2ecc71;
}
 
.entry-share a:hover.fa-renren {
  background: #4760a5 !important;
  border-color: #4760a5;
}
 
.entry-share a:hover.fa-qq {
  background: #50abf1 !important;
  border-color: #50abf1;
}
 
.entry-share a:hover.fa-facebook {
  background: #3777be !important;
  border-color: #3777be;
}
 
.entry-share a:hover.fa-twitter {
  background: #2174c3 !important;
  border-color: #2174c3;
}
 
.bdsharebuttonbox a:hover.fa-plus-circle {
  background: #2174c3 !important;
  border-color: #2174c3;
}
 
.entry-share a::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


    

 

结语:

现在,你的主题已经成功添加了百度分享功能。用户可以通过点击分享按钮将你的文章或页面分享到 QQ、微信、微博等社交媒体平台上。

转载请注明:汇站网 » (wordpress 教程)纯代码实现类似百度社交分享按钮

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 (wordpress教程)纯代码实现类似百度社交分享按钮 https://www.huizhanii.com/33181.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
1 条评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
2023年9月19日 09:56

我对网站不怎么熟悉,喜欢在这里能学到很多知识! :roll:

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com