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

互联网收集 59
OUIMS博客广告

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

美化WordPress评论框添加提示文字和图片-第1张图片-OUIMS博客

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

最终效果截图:

美化WordPress评论框添加提示文字和图片-第2张图片-OUIMS博客

 

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评论框添加提示文字和图片-第3张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第4张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第5张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第6张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第7张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第8张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第9张图片-OUIMS博客美化WordPress评论框添加提示文字和图片-第10张图片-OUIMS博客

标签: 精品教程 WordPress教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~