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