对读者墙wp-reader-wall的美化及修改

Apr 4th Mon, 2011/JiaJieChan/折腾/1,839 阅读/6 评论

最近无意中看到读者墙的头像显示有问题,具体表现为鼠标指向头像不显示博主名及评论数目,只显示“读者墙”三个字,刚开始我是不知道头像的下面会有一个Url位置,下移鼠标才知道。

一直就这个问题想办法解决,我看了其他的博客都可以实现啊,第一件事就想到插件的问题,在这里讨论的是修改,美化将在下面提及到。

最终修改美化图

插件修改:

鉴于上面的问题,我这次修改的目的很明确,就是要把默认的描述“读者墙”修改为和下面一样的描述,能正常显示评论数目及博主名称。我反复的修改php代码,那个描述就是不生效,将近2个小时了,还是看不出有什么问题,Chrome的查看源代码也没发现什么问题。

就在想放弃的时候,在一论坛看到Alt标签和Title标签,据作者所说Alt和Title对不同的浏览器是由不同的,任意门 。然后我就翻了翻php代码,终于发现了猫腻。两段代码Url标签那里使用了Title属性,而Img标签那里却使用了Alt属性。据帖子里说,Title在Chrome下有效,Alt在IE下有效,这样问题就大概摸清了。

解决方法:

打开wp-reader-wall.php,在前面缺少Alt属性的地方加入Alt属性,在后面缺少Title属性的地方加入Title属性。如下图;

在前后都补全了相关属性,这样在IE或Chrome上都不会出现不兼容了。

 

 

为了让访客浏览得更好于是加上Target标签,使点击头像时从新窗口打开。请加入如下代码;

在 $tmp = "<a href='".$url."' title='".$comment-> 中的  $tmp = "<a后面加入 “target='_blank'” 不含双引号。

 

插件美化:

大家应该都对默认的样式看腻了吧,下面就由我教大家对读者墙的CSS样式进行修改美化。

打开当前主题的Style.css在适当的地方(那里都可以主要方便自己以后的修改)加入下面的代码;

 

 

CSS源代码取自我是大头(应该说是偷的! 12:) ) ,最后又看了看效果个人觉得横列距离密了点,于是参照了集思博客的CSS样式,对上面的代码进行了修改,使得距离宽一点;

以下为修改内容;

打开Style.css,在刚才添加的代码中找到;

在下面加上;

原创内容,转载请出示版权信息!

声明: 本文采用 BY-NC-SA 协议进行许可. 转载请出示版权信息.
  1. Apr 15th, 2011 at 21:23 / #Url

    $comment->comment_nums 这句 是wordpress本身定义的函数么

  2. Apr 13th, 2011 at 13:56 / #Url

    我也去试试,我的读者墙在IE下也不显示数字。

  3. Apr 7th, 2011 at 23:47 / #Url

    @zwwooooo, 恩,我的侧边栏太多东西了,所以放到独立的页面.

  4. Apr 7th, 2011 at 23:04 / #Url

    我只在侧边栏放了类似的读者墙

  5. Apr 4th, 2011 at 19:23 / #Url

    @流金漩涡, 对折腾后的效果比较满意

  6. Apr 4th, 2011 at 19:17 / #Url

    支持折腾~~~

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
支持使用Gravatar头像

JiaJieChan提醒您: 要回复某人的评论,请将鼠标移动到那条评论,评论右边就会出现Replay字样(一定是要鼠标指针中的评论),在评论框中出现的的后面下一行填写评论提交即可.被回复者将收到邮件通知噢; 要是想直接对本文评论请直接在评论框留言即可,然后点提交.