WordPress美化：给评论框添加提示文本和背景图片

2023年4月15日18:00:00 发表评论

大家有没有觉得自己的WordPress网站评论框太过单调了吗？你想要以下的评论框背景吗？今天就带大家如何实现WordPress评论框背景！

WordPress美化：给评论框添加提示文本和背景图片

添加背景图片：

1、用图片设计软件自行设计背景图片（hicc的尺寸是360×120），并将其透明度调到50%（看个人喜好），上传到服务器，并记下图片绝对路径（这样不容易出错，当然相对路径也行）！例如你设计的图片命名为comment-bground.png,并上传到“/wp-content/themes/你的当前主题/images/”目录下，那么你的图片绝对路径就是“http://你的域名/wp-content/themes/你的当前主题/images/comment-bground.png”。

2、打开你博客有评论框的任何一个页面，查看页面的源代码或者直接查看主题目录下的comment.php文件；

可以看到评论框有类似的代码：

<label for=’comment’ class=’textarea ’>Your Comment</label>
<textarea name=’comment’ id=’comment’ cols=’60′ rows=’10′ tabindex=’4′ class=’textarea’></textarea>

可以发现评论框是用textarea代码来控制的，并且textarea文本区域对应的CSS样式表ID为comment，因此可以直接到主题样式style.css里找到#comment代码，其作用就是定义评论框的样式。

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件，查找#commentform textarea，你会发现如下代码：

#commentform textarea {
font: 110% Arial, Helvetica, sans-serif;
height: 140px;
border: solid 1px #999999;
padding: 5px 3px 3px 7px;
margin-top: -1px;
width: 90%;
max-width: 90%;
}

添加代码后变成如下所示：

#commentform textarea {
background-image:url(图片的地址);
background-repeat:no-repeat;
background-position:rightright bottombottom;
font: 110% Arial, Helvetica, sans-serif;
height: 140px;
border: solid 1px #999999;
padding: 5px 3px 3px 7px;
margin-top: -1px;
width: 90%;
max-width: 90%;
}

3、说明

把代码中的“上面提到的图片的绝对地址”换成那个图片的绝对地址

background-repeat:no-repeat;是指拉大评论框图片不重复出现；

background-position:right bottom;是指图片与评论框的右、底对齐。

4、自用的方法（知更鸟老版Begin主题）

打开“/wp-content/themes/你的当前主题/”目录下的style.css文件，查找下面的代码

#comment {
background: #fff;
width: 100%;
margin: 0 10px 10px 0;
padding: 5px;
border: 1px solid #ddd;
border-radius: 2px;
-webkit-appearance: none;
}

然后在它的上面一行增加下面的代码

#commentform textarea {
background-image: url(https://ww2.sinaimg.cn/large/a15b4afegy1fjaa4ded77j20a001oa9w.jpg);
background-repeat: no-repeat;
background-position: center;
}

5、知更鸟Begin主题最新LTS版方法（目前自用）：

/* 评论背景图 */
#comment
{background-image:url(https://ww2.sinaimg.cn/large/005UYuA2ly1g1z4dde3c3g30f1056t8y.jpg);
background-repeat:no-repeat;
background-position:center center;
height: 130px;background-position: 100% 80%;}

添加提示文本：

打开“/wp-content/themes/你的当前主题/”目录下的comments.php文件，查找下面的代码

<p class="emoji-box"><?php get_template_part( 'inc/smiley' ); ></p>

然后在它的下面一行增加以下代码：

<p class="comment-form-comment"><textarea name="comment" id="comment" cols="100%" rows="6" onkeydown=" if(event.altKey && window.event.keyCode == 83) {document.getElementById('submit').click();return false} if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" style="color:gray" onblur="if (this.value == '') {this.value = '来都来了，不说两句吗？每一句发自心灵的评论都值得我们珍藏！';} " onfocus="if (this.value == '来都来了，不说两句吗？每一句发自心灵的评论都值得我们珍藏！') {this.value = '';}">来都来了，不说两句吗？每一句发自心灵的评论都值得我们珍藏！</textarea></p>

然后把里面的文字换成你想要的文字。

注：知更鸟Begin主题最新LTS版本，已经自带此功能，只需要在后台勾选就OK

Tips:

做副业长期赚不到钱的话很容易放弃，特别是对于新手来说，新手刚入行的时候期望值都比较高，以为进来就马上能赚到钱，但是现实却很残酷，很多新手都没能坚持到赚钱的时候。因此，我在朋友圈《加微信》会给大家推荐一些破零项目，钱虽然不多，但是我觉得能让很多新手做副业的信心不那么容易被打垮。

添加背景图片：

添加提示文本：

历史上的今天:

登录