给评论框加上背景图片的技巧 —— WordPress美化教程

2017年8月27日02:28:45 30 2,374
摘要

博客是交流的平台,所以阅读量和评论量是博客的生命!如何让更多的人评论你的文章,提高博客的人气?除了文章要写得有声有色有特点外,还有一个小技巧:在博客评论框加上背景图片,吸引更多的人评论。孰不知,原来一张小小的图片能充分挖掘到那么多潜在的评论者呢!当然,如果你能加上一张适合主题的图片固然是好,但千万不要弄巧成拙,让评论框变得花花绿绿的,这样反而起到不好效果。建议:图片最好是简洁的一句话,让读者印象深刻!好了,下面开始我们的折腾之旅:如何实现给评论框加上背景图片的效果?

 

给评论框加上背景图片的技巧 —— WordPress美化教程

 

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

 

二、打开你博客有评论框的任何一个页面,查看页面的源代码或者直接查看主题目录下的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. }

 

三、说明。

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

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

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

 

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

此处为隐藏的内容!
发表评论并刷新,方可查看

 

五、知更鸟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%;}

 

相关链接

给评论框加上背景文字的技巧 —— WordPress美化教程

 

 

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的QQ
  • QQ扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:30   其中:访客  26   博主  3

    • voice站点 voice站点 3 来自天朝的朋友 四川省成都市 电信

      希望能成功

      • 龙辰 龙辰 2 来自天朝的朋友 广东省广州市 联通

        感谢分享。。。

        • jiaowa.ren jiaowa.ren 3 来自天朝的朋友 江苏省南京市 移动

          怎么搞的

          • AIXAN AIXAN 0 来自天朝的朋友 谷歌浏览器 Linux 陕西省西安市 电信

            看看

            • 北陌 北陌 2 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

              拿走了,谢谢

              • xichengwan xichengwan 4 来自天朝的朋友 火狐浏览器 Windows 10 河南省郑州市 联通

                希望能成功