A-A+

wordpress评论框中添加文字或图片

2015年07月13日 网站建设, 网页设计 暂无评论 阅读 20,289 次

玩wordpress就是要不停的捣腾,总能发现些东西,学习些新的知识。本文所要记录的就是在站点评论对话框表单中添加文字或图片。
一、添加文字
如本站留言窗体对话表单。方法如下:
在主题目录下comments.php文件中找到这段代码:

<textarea id="comment" tabindex="4" name="comment" rows="4"></textarea>

我的是这段,大家查找该代码时可能会有出入,结合实际而定。
然后将以上代码修改为:

<textarea cols="45" id="comment" name="comment" onblur="if (this.value == '')
{this.value = '说出你的想法,影响整个世界!';}
" onfocus="if (this.value == '说出你的想法,影响整个世界!')
{this.value = '';}" rows="9" style="color:gray" tabindex="4">说出你的想法,影响整个世界!</textarea>

pljz

表单框中的文字自行修改为自己所想的,注意如果你不想让评论框中的文字是灰色的你可以去除:
style="color:gray"
这样我们想要的文字就添加好了,当鼠标置入框内开始输入时文字自动消失。

二、添加图片

在主题目录下找到comment.php文件,一般评论以textarea代码来控制,这里我们需要修改样式来实现想要的效果,找到textarea文本区域所对应的CSS样式表ID是多少,一般为comment,然后我们打开主题样式style.css文件找到#comment代码,类似于这样的:

#comment {width:645px;}
然后修改为:
#comment {width:645px;background-image:url(img/comment-bg.gif);background-repeat:no-repeat;background-position:right bottom;}
自己把代码中的图片路径修改一下即可。

相关注释:

width:是定义评论框的宽度;
background-image:url(图片地址),这里的图片可以是绝对地址,也可以是相对地址,相对地址是相对style.css文件的,我就是用的相对地址。
background-repeat:no-repeat; 定义图片是不是重复;
background-position:right bottom; 定义图片对齐方式,这里是向右、底对齐。

方法二本站考虑自适应问题没做测试,早年做过评论框中加图是可行的,欢迎大家测试提出问题留言一起探讨学习。

给我留言

icon_question icon_razz icon_sad icon_evil icon_exclaim icon_smile icon_redface icon_biggrin icon_surprised icon_eek icon_confused icon_cool icon_lol icon_mad icon_liuhan icon_rolleyes icon_wink icon_idea icon_arrow icon_neutral icon_cry icon_mrgreen icon_qinqin icon_bizui

×
订阅图标按钮