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

2023年4月16日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文件;

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

 
  1. <label for=’comment’ class=’textarea ’>Your Comment</label>
  2. <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,你会发现如下代码:

 
  1. #commentform textarea {
  2. font: 110% ArialHelveticasans-serif;
  3. height140px;
  4. bordersolid 1px #999999;
  5. padding5px 3px 3px 7px;
  6. margin-top: -1px;
  7. width: 90%;
  8. max-width: 90%;
  9. }

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

 
  1. #commentform textarea {
  2. background-image:url(图片的地址);
  3. background-repeat:no-repeat;
  4. background-position:rightright bottombottom;
  5. font: 110% ArialHelveticasans-serif;
  6. height140px;
  7. bordersolid 1px #999999;
  8. padding5px 3px 3px 7px;
  9. margin-top: -1px;
  10. width: 90%;
  11. max-width: 90%;
  12. }

3、说明

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

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

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

4、自用的方法(知更鸟老版Begin主题)

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

 
  1. #comment {
  2.    background#fff;
  3.    width: 100%;
  4.    margin: 0 10px 10px 0;
  5.    padding5px;
  6.    border1px solid #ddd;
  7.    border-radius: 2px;
  8.     -webkit-appearance: none;
  9. }

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

 
  1. #commentform textarea {
  2.    background-imageurl(https://ww2.sinaimg.cn/large/a15b4afegy1fjaa4ded77j20a001oa9w.jpg);
  3.    background-repeatno-repeat;
  4.    background-positioncenter;
  5. }

5、知更鸟Begin主题最新LTS版方法(目前自用):

 
  1. /* 评论背景图 */
  2. #comment
  3. {background-image:url(https://ww2.sinaimg.cn/large/005UYuA2ly1g1z4dde3c3g30f1056t8y.jpg);
  4. background-repeat:no-repeat;
  5. background-position:center center;
  6.  height130px;background-position: 100% 80%;}

添加提示文本:

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

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

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

 
  1. <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:

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

历史上的今天:

掘金网
  • 版权声明:本站原创文章,转载请保留出处和链接!
  • 本文链接:http://jjsoho.com/gplktj/ 网赚有风险,投资需谨慎!