今天,看到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。
暂无评论内容