几条简单CSS代码给WordPress评论区设置一个好看得背景

3.8
(8)

今天,看到WPcom主题群一个好友得网站,评论区挺有意思。当然,我之前也设置了评论区得背景。但是,我的图片不太好看。于是,结合对方与古哥得代码,重新优化了下发布出来。

手把手教学:通过F12审查元素,给你得WordPress评论输入框设置一个好看得背景:

几条简单CSS代码给WordPress评论区设置一个好看得背景

JustNews主题CSS

这里,先给出JustNews主题设置评论区输入框背景得CSS代码如下:

#comment,.comment-must-login {
	background-image:url(https://oss.iymark.com/2021/04/pinglun.png);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
#comment:focus {
	background-position-x:800px;
}

其中,第一段的#comment,.comment-must-login表示对id为comment以及class为comment-must-login的元素,设置CSS,CSS里规定了背景图片,背景重复方式,背景图片的位置,以及一个动画延迟时间。其中,id为comment的元素表示justnews主题登录状态看到的评论区;class为comment-must-login的元素表示justnews主题未登录状态看到的评论区。

其中,第二段代码的comment:focus表示,鼠标单击评论区(可以理解为开始输入评论),背景图向右平移800px,移出视野区域。移动速度为.5s,即第一段代码中的最后一行的动画延迟时间。

其他主题CSS

这里,每个主题都有所不同。我只给出如何写代码,具体你写的对不对,我管不着:

打开你的文章页面,鼠标移动到评论区,右击鼠标,点击审查元素。当然,你也可以直接F12打开审查元素,再找到评论区对应的元素。

几条简单CSS代码给WordPress评论区设置一个好看得背景

上图我们以皓月博客为例,尴尬的是发现他的评论区写法跟我的一样,都是id为comment的元素。那么对于这种情况就很简单。所以得到的代码如下:

#comment{
	background-image:url(https://oss.iymark.com/2021/04/pinglun.png);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
#comment:focus {
	background-position-x:800px;
}

当然,如果你怕整个页面有很多id为comment的元素,那你再加个标签,优化后的代码如下:

textarea#comment {
	background-image:url(https://oss.iymark.com/2021/04/pinglun.png);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
textarea#comment:focus {
	background-position-x:800px;
}

最后,记得修改下背景图片的地址,我这张图片是防盗链的,所以你无法访问。不过为了防止你拿不到图片,我把图片放在下面,供你下载。请点击以下图片,放大后,再点击右键另存为即可。

几条简单CSS代码给WordPress评论区设置一个好看得背景

下载后,替换CSS代码中的background-image:url值即可。

当然,第二部分的其他主题的WordPress的CSS代码,你自己写完可能不包括未登录时的评论区。不过,你可以学我在前面给出的justnews主题的CSS代码写法,照猫画虎,你需要在不登陆你网站的情况下访问文章,找到评论区的元素即可。

最后,放上我的实际效果图如下:

如果你实在不会,下方评论,留下你的网站,我帮你写CSS。

共计8人评分,平均3.8

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

原创文章,作者:古哥,转载需经过作者授权同意,并附上原文链接:https://iymark.com/website/wordpress-css-comment.html

发表评论

登录后才能评论

评论列表(7条)

  • 30 ℃
    30 ℃ 2021年04月28日 16:33

    赞一个

  • 古哥
    古哥 2021年09月22日 11:49

    太久没关注网站,发现主题新增了评论表情功能;
    顺便测试一波色

    • 电力队长
      电力队长 2021年09月22日 16:47

      @古哥笑哭,厉害了。我为啥没这个功能啊 ? 已经升级了的。

    • 古哥
      古哥 2021年09月22日 17:15

      @电力队长这我还真不知道为啥你没有

    • 漫夜
      漫夜 2021年10月02日 00:27

      @古哥为什么你的从中间往右边划 你开放的代码却是右边往右边划动

    • 古哥
      古哥 2021年10月02日 00:29

      @漫夜因为我前几天刚改了,文章代码里的第四行,右边改成center就行了

    • 漫夜
      漫夜 2021年10月13日 15:50

      @漫夜好的 谢谢 加你请求了请求优化

    本站APP
    本站APP
    分享本页
    返回顶部