为Gravatar头像添加ALT属性

2017年3月17日 建站技术 浏览 4,326 2 条评论 A+

图片ALT属性不仅有利于搜索引擎索引图片,而且当图片无法加载的时候,会显示图片的ALT信息。WordPress文章插入图片时可以在“替代文本”中填写ALT信息,但评论中的大量Gravatar头像一般主题都没有ALT属性,其实WP以为我们预设了Gravatar头像ALT属性参数。

为Gravatar头像添加ALT属性

查看WP官网Codex get avatar默认的可选参数:

<?php echo get_avatar($id_or_email,$size,$default,$alt,$args);?>

其中:$alt就是alt可选参数

打开主题评论模板,找到类似这句:

<?php echo get_avatar($comment,64);?>

替换为:

<?php echo get_avatar($comment,64,'',get_comment_author());?>

将评论者名称作为ALT属性。

如果你的主题调用评论模模块使用的函数是:

wp_list_comments();

暂时在官网上还没找到用该函数添加ALT属性的参数(貌似WordPress默认主题ALT也是空的),只能按下面的代码拆分这个函数,然后修改。

function mytheme_comment($comment,$args,$depth){
    if ('div'===$args['style']){
        $tag='div';
        $add_below='comment';
    } else{
        $tag='li';
        $add_below='div-comment';
    }
    ?>
    <<?php echo $tag ?><?php comment_class(emptyempty($args['has_children']) ? '':'parent')?> id="comment-<?php comment_ID()?>">
    <?php if ( 'div' != $args['style'] ) : ?>
        <div id="div-comment-<?php comment_ID() ?>" class="comment-body">
    <?php endif;?>
    <div class="comment-author vcard">
        <?php if ($args['avatar_size'] !=0) echo get_avatar($comment,$args['avatar_size']);?>
        <?php printf( __('<cite class="fn">%s</cite> <span class="says">says:</span>'),get_comment_author_link());?>
    </div>
    <?php if ($comment->comment_approved == '0'):?>
         <em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.');?></em>
          <br/>
    <?php endif;?>
    <div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars(get_comment_link($comment->comment_ID));?>">
        <?php
        /* translators:1:date,2:time */
        printf(__('%1$s at %2$s'),get_comment_date(),get_comment_time());?></a><?php edit_comment_link(__('(Edit)'),'','');
        ?>
    </div>
    <?php comment_text();?>
    <div class="reply">
        <?php comment_reply_link(array_merge($args,array('add_below'=>$add_below,'depth'=>$depth,'max_depth'=>$args['max_depth'])));?>
    </div>
    <?php if ('div'!=$args['style']):?>
    </div>
    <?php endif;?>
    <?php
}

如果你的主题添加修改了默认的头像调用方式,比如使用CN或者SSl方式调用,该方法将无效。

参考:

https://codex.wordpress.org/Function_Reference/wp_list_comments

https://codex.wordpress.org/Function_Reference/get_avatar

https://codex.wordpress.org/Plugin_API/Filter_Reference/get_avatar

目前评论:2   其中:访客  2   博主  0

  1. 压力机 0

    很有用,谢谢楼主

  2. 比特币交易平台 3

    图片ALT属性不仅有利于搜索引擎索引图片,而且当图片无法加载的时候

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: