WordPress打造气泡对话短代码，目前只做了左边气泡对话，我的理想实现是，左右对称形式
目前演示
|
1
|
[
shuo
]
WordPress打造气泡对话短代码
[
/
shuo
]
|
小编最终效果：
由于时间很忙，做了一半先暂时抛开，有时间再完善剩下步骤……
打造短代码的形式，短代码属性暂时只做了一种[img] 理想上，是希望嵌入编辑器按钮，和通过邮箱，网址自行判断用户的头像和链接……
例如：
|
1
|
[
shuo
img
=
"显示头像的图片地址"
]
WordPress打造气泡对话短代码
[
/
shuo
]
|
| WordPress小编刚刚学不久，大牛，小牛勿喷…… | ||
|
复制到配置文件function.php 里面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
function
myshuo
(
$
atts
,
$
content
=
null
)
{
extract
(
shortcode_atts
(
array
(
'img'
=
>
'http://ds.cdncache.org/avatar-50/036/53271.jpg'
,
)
,
$
atts
)
)
;
return
'<table class="reply_tab" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td class="td1"></td>
<td class="td2"></td>
<td class="td3"></td>
</tr>
<tr>
<td class="td4"></td>
<td class="td5"><p>'
.
$
content
.
'</p>
</td>
<td class="td6"></td>
</tr>
<tr>
<td class="td7">
<div class="bvatar_wrapper reply_avatar">
<img src="'
.
$
img
.
'" class="bvatar">
</div>
</td>
<td class="td8"></td>
<td class="td9"></td>
</tr>
</tbody></table><div style="clear:both"></div>'
;
}
add_shortcode
(
'shuo'
,
'myshuo'
)
;
|
还有就是样式css的写法（供参考使用）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.reply_tab
{
margin-bottom
:
-35px
;
margin
:
5px
;
}
.td1
{
width
:
103px
;
height
:
14px
;
font-size
:
10px
;
background
:
url
(
../images/bubble.png
)
80px
1px
no-repeat
}
.td2
{
height
:
14px
;
font-size
:
10px
;
background-image
:
url
(
../images/bubble.png
)
;
background-position
:
-20px
0px
;
}
.td3
{
height
:
14px
;
width
:
14px
;
background-image
:
url
(
../images/bubble.png
)
;
background-position
:
-504px
0px
}
.td4
{
width
:
103px
;
font-size
:
10px
;
background
:
url
(
../images/bubble_mid.png
)
87px
0px
repeat-y
}
.td5
{
background
:
url
(
../images/bubble_mid.png
)
repeat-y
-14px
0px
;
color
:
#555555
;
*color
:
#666666
;
line-height
:
25px
;
word-break
:
break-all
;
word-wrap
:
break-word
;
}
table p
{
color
:
#555555
;
*color
:
#666666
;
margin
:
0
;
padding
:
0
;
line-height
:
25px
;
max-width
:
450px
;
}
.reply_list
{
width
:
580px
;
}
.td6
{
height
:
14px
;
width
:
14px
;
background
:
url
(
../images/bubble_mid.png
)
-498px
0px
;
max-width
:
470px
;
}
.td7
{
width
:
103px
;
height
:
68px
;
font-size
:
10px
;
background
:
url
(
../images/bubble.png
)
80px
-22px
no-repeat
;
*padding-top
:
10px
}
.td8
{
height
:
14px
;
font-size
:
12px
;
background
:
url
(
../images/bubble.png
)
-20px
-22px
no-repeat
}
.td9
{
height
:
14px
;
width
:
14px
;
background
:
url
(
../images/bubble.png
)
-504px
-22px
no-repeat
}
.reply_avatar
{
margin-top
:
-35px
;
margin-right
:
28px
;
}
.bvatar_wrapper
{
width
:
71px
;
height
:
68px
;
margin-right
:
10px
;
float
:
right
;
}
.bvatar
{
margin-left
:
11px
;
margin-top
:
11px
;
float
:
left
;
width
:
50px
;
height
:
50px
;
border-radius
:
30px
;
box-shadow
:
0
1px
4px
rgba
(
0,0,0,.3
)
;
}
|
下面是2张图片素材,具体放在什么位置，还是要根据上面的css样式文件,具体吧，懂的折腾的应该都不是难题……
原文转载：http://www.newsky365.com/wpqipao/
图片下载什么的，请到官网网址下载
835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
