给网站评论框内加上背景图片 —— WordPress美化

爱资源网 WordPress美化评论105阅读模式

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

给网站评论框内加上背景图片 —— WordPress美化

 

非知更鸟Begin主题

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;是指图片与评论框的右、底对齐。

 

知更鸟Begin主题(数字版本)

打开“/wp-content/themes/Begin/”目录下的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(图片地址);
   background-repeat: no-repeat;
   background-position: center;
}

 

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

/* 评论框背景图 */
#comment 
{background-image:url(图片地址);
background-repeat:no-repeat;
background-position:center center;
 height: 130px;background-position: 100% 80%;}

 

给大家提供我搜集的各式各样的评论背景图片,见下方

 

下载信息 图片名称评论框背景图片 应用平台WordPress
最近更新2023-4-11
下载地址

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!欢迎打赏!

  • 版权声明 1、本网站名称:爱资源网
    本站永久网址:https://www.izywang.com
    2、如果您喜欢本站,点击这儿 不花一分钱捐赠本站

    这些信息可能会帮助到你: 下载帮助 | 报毒说明 | 进站必看

    3、本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
    附:二00二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
    4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

  • 转载请务必保留本文链接:给网站评论框内加上背景图片 —— WordPress美化https://www.izywang.com/129.html

评论  0  访客  0
匿名

发表评论

匿名网友

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