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

4.2
(14)

今天,看到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表示对idcomment以及classcomment-must-login的元素,设置CSSCSS里规定了背景图片,背景重复方式,背景图片的位置,以及一个动画延迟时间。其中,idcomment的元素表示justnews主题登录状态看到的评论区;classcomment-must-login的元素表示justnews主题未登录状态看到的评论区。

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

其他主题CSS

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

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

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

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

#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;
}

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

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值即可。

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

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

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

共计14人评分,平均4.2

到目前为止还没有投票~

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

让我们改善这篇文章!

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

文章目录

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

(9)
微信公众号
古哥的头像古哥管理团队
上一篇 2021年04月24日 19:02
下一篇 2021年04月25日 23:10

你可能感兴趣的文章

发表回复

登录后才能评论

评论列表(10条)

  • 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

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

  • 剑心的头像
    剑心 2022年02月05日 16:43

    我也是JustNews主题,请问下 你是编辑主题下哪个文件呢?/wp-content/themes/justnews/style.css这个文件是空的。

    微信小程序
    微信公众号