• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >WordPress > WordPress中非插件实现嵌套回复效果的方法

WordPress中非插件实现嵌套回复效果的方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-05-13

佚名 向大家介绍了wordpress采集插件,wordpress视频插件,wordpress注册插件,wordpress音乐插件,wordpress下载插件等相关知识,希望对您有所帮助

博客吧转载了零号相册的Wordpress博客自带嵌套回复教程。

自带嵌套功能工作原理:

wordpress嵌套回复的工作原理是WP的数据库里有个wp_comments的表中有一栏comment_parent ,即可以对comment指定父级,达到嵌套的目的。

非插件嵌套回复教程:

1.在博客后台的已安装插件列表中停用Wordpress Thread Comment插件。并在博客后台点击“设置”选项卡中的“讨论”选项进入配置页面,开启“允许嵌套X层评论”。

2.登陆博客后台,点击“外观”选项卡下的“编辑”选项进入主题编辑页面,选择主题(这里以WP自带classic主题为例),编辑头部文件header.php,在WP函数

<?php wp_head(); ?>


之前添上代码

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>


该代码在文章/页面调用嵌套回复的Javascript文件

3.打开主题的comments.php评论模板。原有的模板代码大概是如下:

<?php if ( $comments ) : ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
<li>
...
<?php comment_text() ?>
...
</li>
<?php endforeach; ?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>


如今有了WP自带的wp_list_comments();函数,即可轻松完成这些工作,把上面代码替换为:

<?php if ( $comments ) : ?>
<ol class="commentlist">
<?php wp_list_comments();?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>


说明一下,原有的判断有留言、取出、并显示的部分用一个wp_list_comments();即可取代。原来的ol(有序列表)的id="commentlist"改为class="commentlist",这是因为到后面定义CSS的时候可能会与其他产生冲突。

4.在评论模板comments.php中找到一个textarea,name=”comment”,就是访客输入留言的文本域,看看这个 textarea中是否有个id=”comment”,如果有,把id=”comment”去掉(不是去掉textarea,而是去掉定义的ID)。

5.在评论模板comments.php中找到代码:

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />


将代码替换为:

<?php comment_id_fields(); ?>


这是对回复框进行定义,以便支持嵌套回复。

6.在评论模板comments.php中找到代码:

从

<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>


至

<?php endif; // If registration required and not logged in ?>


的外部用一个id为”respond”的div包裹

<div id="respond">
……
</div>


这样是为了在嵌套回复时,点击留言者旁边的“回复”,即可把评论框整体移至该评论附近。

7.在评论模板comments.php中的“Leave a Reply”下面增加代码:

<div id="cancel-comment-reply">
<small><?php cancel_comment_reply_link() ?></small>
</div>


这是一个取消评论的链接。一般情况下,该链接不显示,只有要针对某人进行评论,而不想评论时可以点击这个链接把评论框复位。

8.接下来是针对CSS的定义。国外网友Chris Harrison提供了CSS部分的几种配色方案。

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}


博客吧测试时发现,该CSS样式的字体有些偏小,有些偏大,所以将其修改为如下(当然博主也可以对该段CSS样式再进行修改):

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 12px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:1px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:10px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:13px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:12px; }
ol.commentlist li div.reply a { font-weight:bold;}
ol.commentlist li #cancel-comment-reply {font-size:15px;}
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • wordpress无需插件实现拦截无中文留言的方法
  • wordpress非插件实现添加链接转跳功能
  • wordpress非插件实现xml格式网站地图
  • wordpress开发之插件开发初识(wordpress插件开发基础)
  • 不用wordpress插件显示文章浏览统计功能代码修改(原理分析)
  • 免插件在wordpress中插入表格的方法
  • WordPress在线安装主题、插件及快速发布上传图片时提示错误
  • WordPress无插件调用最新、热门、随机文章实例代码
  • wp-Syntax wordpress高亮插件使用方法
  • wordpress固定链接翻译插件 自动将标题翻译成英文

相关文章

  • 2017-05-13wordpress实现获取父类分类名称的方法
  • 2018-11-02wordpress教程之 WordPress 背景
  • 2018-11-02wordpress百度收录的技巧
  • 2017-05-13WordPress伪静态和中文标签支持配置方法
  • 2018-11-02wordpress暴力破解规避思路
  • 2017-05-13WordPress博客防黑基础技巧
  • 2017-05-13Dreamweaver代码的格式化功能掌控html代码的格式
  • 2018-11-02WordPress 在线浏览PDF插件:PDFjs Viewer
  • 2018-11-02WordPress 分类归档中排除子分类文章
  • 2017-05-13WordPress实现评论提交后跳转的方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • wordpress 文章分页 实用的wordpress长文章分页代码
    • WordPress获取文章标题的方法
    • WordPress之给文章内容中间插入广告的实现方法
    • Wordpress迁移后图片地址错误问题的解决方法
    • wordpress网站被挂马以及防御方法
    • 使用最多的WP-PageNavi分页导航插件
    • 自定义wordpress的登录页面
    • wordpress教程之 WordPress 用户删除
    • wordpress教程之 WordPress 插件定制
    • 我为什么使用wordpress来建设网站?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有