存档

文章标签 ‘wp-reader-wall’

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

Apr 4th Mon, 2011/JiaJieChan/折腾/5,132 阅读/6 comments

最近无意中看到读者墙的头像显示有问题,具体表现为鼠标指向头像不显示博主名及评论数目,只显示“读者墙”三个字,刚开始我是不知道头像的下面会有一个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,在刚才添加的代码中找到;

在下面加上;

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