美化WordPress评论框添加提示文字和图片

2019年7月3日10:51:44 2

WordPress评论框默认是没有提示文字和背景图片的,看起来有点单调。我们可以适当的在评论框中添加一些背景图或者一些有意思的提示文字,美化一下WordPress评论框,增加用户评论的兴趣。当然,我们也可以添加一些评论提示语,譬如:勿发小广告;本站已开启缓存等。

美化WordPress评论框添加提示文字和图片

如何给WordPress评论框添加提示文字?其实很简单,只需在评论框调用 placeholder 属性即可。placeholder 属性是 HTML5 里新引入的新特征之一,它能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。

最终效果截图:

美化WordPress评论框添加提示文字和图片

 

WordPress评论框添加提示文字

在主题文件中找到comments.php文件,并找到以下代码:

  1. <p class="comment-form-comment"><textarea id="comment" name="comment" rows="4" tabindex="4"></textarea></p>

将其修改为:

  1. <p class="comment-form-comment"><textarea id="comment" name="comment" rows="4" tabindex="1" placeholder="注意:本站有缓存,一般2小时后能看到您的评论,如是广告,评论将无法展示!" ></textarea></p>

找到 textarea 文本框,然后添加 placeholder 属性即可,提示文字根据自己需求随意更改。其他建站程序方法也是一样,找到相应的文本框然后添加 placeholder 属性即可实现。

 

WordPress评论框添加背景图片

以知更鸟主题为例。F12找到评论框的css,在主题文件中给评论框css添加以下代码,或者将以下代码添加到主题选项>>定制风格>>“自定义样式”中。

  1. #comment {
  2. background-image:url(/wp-content/uploads/xx/xxxx.png);//替换背景图片路径
  3. background-repeat: no-repeat;
  4. background-position: center;
  5. }

样式可以自行更改,背景图片也可以自行替换。发几个常用的背景图片:美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片 美化WordPress评论框添加提示文字和图片

©里维斯社,本站推荐使用的主机:阿里云腾讯云;本站推荐使用的WP主题:WordPress主题

里维斯社
晨会游戏

发表评论

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

目前评论:2   其中:访客  1   博主  1

    • avatar 奶爸建网站笔记 6

      我也写了这个的,你还用心的找了几个背景图放上去。