WordPress博客自定义内容评论框,为评论框添加背景图片

2019年7月13日10:16:06 2 562 views 1262字阅读4分12秒

用过WordPress做博客的人都知道,一般来说WordPress主题下的博客内容里面都会有一个评论功能,而这个功能也正是可以让我们促进站长与广大朋友的一个良好工具。但原本自带的评论框都是统一的白色背景,这样的设计难免会有点单调。

Wordpress博客评论框添加背景图片

然而喜欢折腾的我们并不局限于此,就是想用通过多种方法来美化,不管是之前所提到过的如何美化面包屑导航栏,还是自定义鼠标指针样式,目的很简单,就是为了更好的美化自己的站点。毕竟要用心来打理一个网站是多么不易的,尤其是我们还花了不少心血。

叶忠文也是这么折腾过来的,并不满足于现阶段的美化路上。虽说现在美化的并不是很好,但我相信在以后的美化道路上也一定会越走越远。今天在星光博客老哥里看到了这个美化内容评论框里的一个教程挺不错的,所以就迫不及待的想要分享给那些爱折腾的朋友们,最主要的是还有北京图片供我们选择。话不多说,今天叶忠文就带大家如何实现WordPress评论框背景的变换吧!

以下这种是叶忠文自己添加的

Wordpress博客评论框添加背景图片

方法其实很简单,一学就会!在这里叶忠文是通过CSS修改添加的:首先由于主题不同,叶忠文用的CSS和大家用的可能会有所不一样!因此,我们需要找到评论框所在CSS!叶忠文使用的是知更鸟Begin主题,用这个版本的可以直接添加代码使用(其它主题可以参考这个方法)。

常见的浏览器高速模式、谷歌浏览器都有审查元素功能,评论框右键”审查元素“;火狐浏览器推荐firebug插件,评论框上右键使用firebug查看元素,当然了,也可以使用浏览器自带的查看元素!

Wordpress博客评论框添加背景图片

找到评论框所使用的id或者class,以我的博客为例,就是comment

Wordpress博客评论框添加背景图片

然后打开您的主题style.css文件,在4830行,找到comment,插入如下代码:

    background-image:url(images/commentbg.png);
    background-repeat:no-repeat;
    background-position:center center;

如下图:

Wordpress博客评论框添加背景图片

中background-image,表示背景图片的地址,可以是绝对地址,也可以是相对地址(相对于style.css文件来说的,以上代码是相对地址,也就是主题的images;绝对地址就要包含域名的完整路径)。background-repeat,该属性表示是否重复,no-repeat为不重复,默认不重复。重复样式如下图,满满的一大屏。

Wordpress博客评论框添加背景图片

background-position,该属性用来控制图片在评论框中的位置,前一个参数表示左右位,后一个参数表示上下位。最后保存,ftp上传style.css到主题文件夹覆盖就可以了!当然还有不要忘了上传背景图片哦!

怎么样!效果很不错吧,这个背景图片还有许多不同的格式,叶忠文通过收集给朋友们找到了以下几种,喜欢的朋友们可以直接保存下来,省得浪费大家的时间。

Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客自定义内容评论框,为评论框添加背景图片 Wordpress博客评论框添加背景图片

这个背景图片不仅仅这一些,叶忠文只是拿了一些大家比较常用的分享出来,如果这里面没有大家喜欢的背景图片,我们可通过互联网的查找进行替换,相信网上的大千世界定能找到大伙所喜欢的背景图。

叶先生
  • 本文由 发表于 2019年7月13日10:16:06
如何为WordPress主题添加文章字数和阅读时间 WordPress

如何为WordPress主题添加文章字数和阅读时间

折腾的路上永不止,很奇怪对于一篇文章内的字数和阅读时间有啥用呢,这我也不知道,也不敢问。不过有朋友说人家的主题里都有,叶先生你知道怎么加一个吗?说实话我是不知道的,不过在鸟叔这里看到了这个教程,所以今...
WordPress如何设置只允许游客浏览指定的分类文章 WordPress

WordPress如何设置只允许游客浏览指定的分类文章

有朋友会问,WordPress如何设置只允许游客浏览指定的分类文章,因为有些分类的文章我不想未登录的用户能够浏览。 不知道是心里作怪,还是好奇心里,感叹这个世界奇葩的人还真不少,不过能有什么办法呢,谁...
如何判断网站是否采用织梦Dedecms搭建 网站建设

如何判断网站是否采用织梦Dedecms搭建

今天有朋友来问叶先生,怎么才能够知道一个网站是否采用织梦Dedecms搭建。坦白说,这个不算太高深的技术,一是凭自己的建站经验,二来是从中看一些细节。只要稍微熟悉一点dedecms的站长或者技术人员都...
用PhpStudy如何在本地搭建WordPress WordPress

用PhpStudy如何在本地搭建WordPress

以前在还没用WordPress建站的时候一直想进行尝试,但后面发现不会在本地搭建,只能够购买域名和服务器进行搭建。但是因为网站上线之初因胡乱修改网站版面,导致网站整体崩溃无法进行恢复,所以只能选择删库...
匿名

发表评论

匿名网友 填写信息

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

评论:2   其中:访客  1   博主  1
    • 仙踪小栈 仙踪小栈 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省合肥市巢湖市 电信 2

      既然来了,就留个印吧 :cry:

        • Joson Joson 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 鹏博士长城宽带

          回复 仙踪小栈 欢迎常来