对于个人博客来说,评论会让博客勃勃生机,好的博客都有以下特点:模板好看、二次元、网页排版合理、独特的小功能、好看的评论框。虽然wordpress自带的评论框就非常的单调,但是我们可以在评论框里面添加一些文字或者是背景图,增加用户评论的兴趣。

如何给WordPress评论框添加提示文字?原理很简单,只需给评论框赋予两行css属性即可。下面以日主题ripro-v2为例给大家演示一下。

进入后台—>主题设置—>顶部设置—>自定义CSS样式代码:,添加以下 CSS 代码:

/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://zhutiwu.com//wp-content/themes/ripro-v2/assets/img/plk.jpg) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
/*评论背景图*/

其他主题可以将上面代码放在全站css中,比如:style.css中。

也可以添加在头部header.php中或者尾部footer.php中,如下:

<style>
/*评论背景图*/ 
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://zhutiwu.com//wp-content/themes/ripro-v2/assets/img/plk.jpg) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;} 
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;} 
/*评论背景图*/
</style>

效果展示:

wordpress实现在评论输入框右侧加入【快来说点什么吧!】背景样式插图

发表回复

您的电子邮箱地址不会被公开。