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

$tmp = "<a href='".$url."' title='".$comment->comment_author." (".$comment->comment_nums.")' alt='".$comment->comment_author." (".$comment->comment_nums.")'><img width='".$imgsize ."' height='".$imgsize ."' src='http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($comment->comment_author_email) )."&size=".$imgsize ."&d=identicon&r=G' title='".$comment->comment_author." (".$comment->comment_nums.")' alt='".$comment->comment_author." (".$comment->comment_nums.")' /></a>"; $output .= $tmp;

 

 

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

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

 

插件美化:

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

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

/* 读者墙样式开始 */

#readerswall a {
padding:3px;
}
#readerswall img {
opacity: 0.8;
background:#F4F4F4;
border:1px solid #CCC!important;
padding:1px;
-webkit-box-shadow:2px 2px 6px #999;
-moz-box-shadow:2px 2px 6px #999;
}
#readerswall a:hover img {
opacity: 1.0;
}

/* 读者墙样式结束 */

 

 

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

以下为修改内容;

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

-webkit-box-shadow:2px 2px 6px #999;
-moz-box-shadow:2px 2px 6px #999;

在下面加上;

margin:4.5px;

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

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷