现在的位置: 首页网络>正文
wordpress如何实现手机模板嵌套评论
发表于5年前 网络 评论数 54

wordpress如何实现手机模板嵌套评论

没有不好好更新的博主,只有不好好留言的访客,大家好,忙活几天之后,saintsky又更新了,有木有人期待?好吧,我估计没有,哈哈。之前我的博文《几款目前主流的wordpress实现手机模版的插件》里说过,我要把我的手机模板实现嵌套评论,我这几天一直没更新,就是为了弄这玩意,现在终于是弄出来了,不过过程有点曲折离奇。

(不关心我探究过程的朋友可以跳过这段)saintsky的手机页面模板是使用WordPress Mobile Pack这款插件改的,前面的博文里我也说过,这款插件生成的手机模板代码跟一般模板不一样,所以要修改以及实现附加功能很麻烦,当然,也许是因为我水平太烂了。原本一开始我是想用@回复来实现评论某个楼层的,因为这个感觉比较简单,于是我就看了看原本桌面模板的代码,原来@回复已经集成在里面了,但是手机模板里是没有的,不过WordPress Mobile Pack的模板有个很大的特点就是,可以调用桌面模板里的函数功能,桌面模板里的@回复使用的是“<a href="#comment-编号">@姓名</a>:”这样子的代码实现@回复,所以在手机模板里,在评论框里使用“<a href="#comment-编号">@姓名</a>:”也可以实现回复某人的功能,但是手机模板里没有在评论者旁边显示评论编号,好的,我就加了一句代码,评论编号出来了,然后在评论框上面加一句提示语言“要回复指定用户请使用<a href="#comment-编号">@姓名</a>:代码”,然后大功告成。

等等,这不坑爹嘛,手机上本来输入就不怎么方便,你还让访客打代码,尼玛别人谁有那闲工夫啊,看来要实现回复指定用户光是这样还不行。于是我又想了一个办法,我在评论框里预留“<a href="#comment-编号">@姓名</a>:”这段代码,访客一打开,评论框里就有这句话,要是想回复某个楼层,就修改就可以了,要是想回复博主我。就直接把这段代码删掉。这样一来,感觉方便了一点,毕竟删除代码比打代码来得简单,这回算大功告成了吧,哈哈。 之后我想想,这样还是不行,还是坑爹,这样虽然实现了@回复,但是评论列表的顺序是错的,按照的是时间先后顺序,而不是正确的回复顺序,正确的顺序应该我的回复应该出现在对应的回复下面。

于是我放弃了这个方案,就继续想啊想,原本想,有没有什么办法,可以点击一下,然后对应的“<a href="#comment-xx">@xx</a>:”就自动填充进评论框里去,结果搜了很久死活找不到,总不能等我把php和html的书看完了再来改吧。然后又想到一个方案,就是点击之后,自动跳转到特定的评论页面,在这个页面回复之后,就是自动回复给相应的楼层,但是也没找到现成的办法,悲剧,一个不懂php,css,html的博主,伤不起。我决定研究一下一般模板里,嵌套回复的代码是怎么样,然后再想办法弄到手机模板里,把saintsky电脑页面的模板看了一遍,用的是JQuery实现的,大多低端手机浏览器不能实现这样的效果,不符合我的要求,我的宗旨是实现大多数手机都能使用,因为我的手机是低调手机,囧。没办法,下载一个镶嵌评论的插件看看里面的代码,也许有新的突破。

(关键部分来了,朋友们请注意)我下载了一款名为Wordpress Thread Comment的插件,貌似是国人开发的,插件的功能很多,除了嵌套评论,还有邮件回复评论,邮件通知管理员,前台编辑评论,后台编辑评论,这些功能大家应该都很眼熟,这个插件很老了,已经很多年没有更新,之所以没更新,是因为不知道从什么版本开始,wordpress就内置了那个插件的所有功能,既然被内置了,这插件就被人们忽略了。然后我就启用这个插件,启用之后我顺手刷新了一下我调试手机模板用的浏览器,结果怎样,结果嵌套评论实现了,跟电脑模板显示效果一样,除了可以回复任意楼层,还有边框显示回复的层次关系,回复顺序也是正确的。折腾了几天,结果安装一个插件之后就实现了,让我顿时觉得,前几天真是浪费时间。 WordPress Thread Comment有两种评论效果,一种就是普通的,点击之后,就刷新,评论框上面就显示“评论给xxx”,然后就可以回复特定的楼层了。还有一种是在后台启用AJAX评论,启用之后,就跟我们电脑模板上的嵌套评论一样了,点击之后不刷新页面,评论框自动移动到你要回复的楼层下面,AJAX跟JQuery一样,大多低端手机的浏览器是不能正常使用的,所以我只使用一般的评论方式。我还测试了之前博文里提到的另外两款手机模板插件,拥有华丽效果的WPtouch完美兼容此插件,WPtouch配合Wordpress Thread Comment并且开启AJAX评论,那效果十分的赞,完美在手机上实现电脑上的浏览体验,我推荐各位都装一下。对于集成很多功能的WP-T-Wap,很遗憾,不支持,估计是需要添加代码才能实现,因为我本身不使用,所以就没继续研究。到这里,基本上就完成了wordpress实现手机模板嵌套评论。

WPtouch的效果,因为是本地离线截的图,所以头像没显示

(这一段其实不看也可以)恩,你们没看错,这只是基本上,还有点细节上的问题,问题就是,启用插件之后,电脑上的模板就会出问题,比如我的模板,本身就有嵌套评论的功能,现在再加上一个插件,就成了两个,不过问题也不算多,每层楼多出一个回复的按钮,在显示上并没有冲突,但是多出来的显示按钮,点击之后,评论框有可能出现错位,所以我想屏蔽掉,让访客使用原来的回复功能。原本我想被插件内置到手机模板里,无奈手机模板的函数太特别,弄不过去,这怎么办呢。我就看了看插件的代码,插件的输出过程是这样子的,使用一段函数,获取默认模板的信息然后对默认模板的评论页面文件(也就是comments.php)插入指定的函数,其实就是在里面增加“回复”“点击取消回复”两个按钮,这样一来,不管你更换什么模板,都没问题。原本我想把这函数给改了,让插件只输出到手机模板里,但是没成功,路径什么的都改了,而且是绝对定位,还是不行,始终对电脑模板和手机模板输出。既然是对comments.php进行识别,那我把那改了好了,电脑模板肯定是改不了的。太复杂,我怕弄坏,那我把手机模板里的改了好了,然后我就把手机模板里comments.php改名成m-comments.php,然后我把插件函数里输出的文件也改成m-comments.php,电脑模板里的叫comments.php,这回不会影响到了吧。然后我碰巧刷新了手机浏览器,恩?插件没有启用,居然就实现了嵌套评论,不过没有边框围着,估计是因为css没有输出导致的 ,层次关系显示得不明显,在欧鹏浏览器下,评论关系可以从缩进的长度判断,但是UC下全部左对齐,看不出。而且是一般的嵌套评论,无法实现AJAX评论,貌似要改里面的一个值,开启AJAX评论就行了,因为我不用,所以我也没好好研究。

这是saintsky用的手机模板的效果,具体细节请自行查看

至于为什么没启用插件就能输出到手机模板上,这个我也不清楚,Wordpress Thread Comment和WordPress Mobile Pack都有缓存机制,插件启用一次后,就自动输入到WordPress Mobile Pack里,就算我把Wordpress Thread Comment这个插件删除了,还依旧能实现嵌套回复,不过刷新缓存之后就不行了,所以插件还是得保留着,不过不需要开启,插件不开启,就不影响电脑模板了。其他细节问题大家就自行研究,我不是很懂,就不研究了。到这里就算完成了,saintsky的手机模板这次增加了嵌套回复,评论头像。

目前有 54 条留言 其中:访客: 28条, 博主: 26条

  1. 海盐博客 : 2012年11月07日07:50:00 回复

    手机屏幕这么小,还嵌套得话, 会不会不好看

    • saintsky : 2012年11月07日23:43:44 回复

      嵌套的话条理更清楚一点,不然默认是按时间顺序排列。
      嵌套在5层之内看起来还是可以的,但是太多的话,就不知道会怎样了,目前还没有跟别人在回复里进行过3层以上的对话 😯

  2. bbis : 2012年11月18日00:04:00 回复

    我也是用的WPtouch Pro + WordPress Thread Comment插件的。

    不知道这个嵌套回复的CSS怎么改才会好看呢

    • saintsky : 2012年11月20日23:32:51 回复

      不好改,要么像我这里一样,层层缩进,显示层级关系。
      或者有一种是显示“xxx回复给xxx”。
      还有一种是像论坛里一样,引用被回复人的原文,然后在底下显示回复内容,不过这个很占页面。
      你也可以设置楼主回复的时候回复框颜色深一点,这样条理比较清晰。

  3. 艳文 : 2012年11月30日13:54:22 回复

    这个主题。。。有点眼熟。。。是楼主写的吗?

    • saintsky : 2012年12月04日21:45:54 回复

      写就不是我写的了,只不过我是我改的而已 😳

  4. 小王 : 2012年12月03日15:26:07 回复

    手机暂时没那么高级啊 😳

    • saintsky : 2012年12月04日21:46:40 回复

      我的手机目前也是 😳

  5. 我的名字叫麒 : 2012年12月14日20:52:37 回复

    博主,看到你对wp博客手机访问挺有研究的,我已经不想用插件了,想用wap站点访问,最近百度出了这个东西,我试了好几次,但每次都失败在域名绑定和解析上,想问问博主,怎么弄?

    • saintsky : 2012年12月20日13:19:33 回复

      你说的那个是百度的site app吧,你先绑定比如wap.saintsky.info,然后去你的DNS那里设置(域名注册商或者第三方托管那里),增加一个叫wap的子域名,cname值填siteapp.baidu.com,然后保存,等一段时间就会生效了

  6. 平平 : 2012年12月28日15:15:21 回复

    放弃手机功能的飘过。不想折腾了 年纪大了啊

    • saintsky : 2012年12月28日23:40:15 回复

      不是吧,这会就年纪大了,看起来也不像啊,哈哈

  7. 治疗早泄 : 2013年01月04日17:46:50 回复

    看文章,支持一下,是一种美德。

    • saintsky : 2013年01月22日00:04:30 回复

      恩,继续发扬美德哦,亲

给我留言