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

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

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

JustNews主题CSS

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

#comment,.comment-must-login {
	background-image:url(https://oss.iymark.com/2021/04/pinglun.jpg);
	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打开审查元素,再找到评论区对应的元素。

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

#comment{
	background-image:url(https://oss.iymark.com/2021/04/pinglun.jpg);
	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.jpg);
	background-repeat:no-repeat;
	background-position:right center;
	transition-duration:.5s;
}
textarea#comment:focus {
	background-position-x:800px;
}

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

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

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

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

  • 已登录状态
  • 评论时状态
  • 未登录状态

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

    © 版权声明
    THE END
    喜欢就支持一下吧
    点赞0分享
    评论 抢沙发

    请登录后发表评论

      暂无评论内容