正文:
作为主题开发者,我们可以通过以下步骤将分享功能添加到主题中:
1. 首先,我们需要在主题的文件中找到需要添加分享功能的位置。可以是文章页面、页面模板或者侧边栏等。
2. 在找到的位置,我们可以使用以下代码将百度分享功能添加到主题中:
<!--?php if (function_exists('baidu_share')) { baidu_share(); } ?-->
3. 确保你已经安装并激活了百度分享插件。如果没有安装,你可以在 WordPress 插件目录中搜索并安装它。
4. 保存并更新你的主题文件。
还有一种方法就是今天汇站要分享的社交分享按钮,能实现在我们的博客里该功能。
先给大家看下效果图:
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 教程)纯代码实现类似百度社交分享按钮
我对网站不怎么熟悉,喜欢在这里能学到很多知识!