代码实现将用户名首字母作为头像

WordPress

代码实现将用户名首字母作为头像

WordPress 默认使用 Gravatar 作为评论者头像,而且本站的友情链接页面也要显示头像,可以通过访问 http://cn.gravatar.com/获取头像或者通过缓存 Gravatar 头像,但是没有设置过 Gravatar 头像的用户,还是会显示一个比较难看的默认头像。

解决方法

可以通过 Letter Avatar 根据用户名首字母或首汉字来匹配头像。如下图所示:

代码实现将用户名首字母作为头像

无论用户名首字母是何种形式,都可以正常显示头像。

操作代码

在需要显示头像的地方放入以下 JavaScript 代码,也可以在全局的 footer 中放入。

<script type="text/javascript">
    (function(w, d){
        function LetterAvatar (name, size) {
            name  = name || '';
            size  = size || 60;
            var colours = [
                    "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", 
                    "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
                ],
                nameSplit = String(name).toUpperCase().split(' '),
                initials, charIndex, colourIndex, canvas, context, dataURI;
            if (nameSplit.length == 1) {
                initials = nameSplit[0] ? nameSplit[0].charAt(0):'?';
            } else {
                initials = nameSplit[0].charAt(0) + nameSplit[1].charAt(0);
            }
            if (w.devicePixelRatio) {
                size = (size * w.devicePixelRatio);
            } 
            charIndex     = (initials == '?' ? 72 : initials.charCodeAt(0)) - 64;
            colourIndex   = charIndex % 20;
            canvas        = d.createElement('canvas');
            canvas.width  = size;
            canvas.height = size;
            context       = canvas.getContext("2d");          
            context.fillStyle = colours[colourIndex - 1];
            context.fillRect (0, 0, canvas.width, canvas.height);
            context.font = Math.round(canvas.width/2)+"px Arial";
            context.textAlign = "center";
            context.fillStyle = "#FFF";
            context.fillText(initials, size / 2, size / 1.5);
            dataURI = canvas.toDataURL();
            canvas  = null;
            return dataURI;
        }
        LetterAvatar.transform = function() {
            Array.prototype.forEach.call(d.querySelectorAll('img[avatar]'), function(img, name) {
                name = img.getAttribute('avatar');
                img.src = LetterAvatar(name, img.getAttribute('width'));
                img.removeAttribute('avatar');
                img.setAttribute('alt', name);
            });
        };
        if (typeof define === 'function' && define.amd) {
            define(function () { return LetterAvatar; });
        } else if (typeof exports !== 'undefined') {
            if (typeof module != 'undefined' && module.exports) {
                exports = module.exports = LetterAvatar;
            }
            exports.LetterAvatar = LetterAvatar;
        } else {
            window.LetterAvatar = LetterAvatar;
            d.addEventListener('DOMContentLoaded', function(event) {
                LetterAvatar.transform();
            });
        }
    })(window, document);
    </script>

加入样式代码:

<style type="text/css">
pre {margin: 20px 0;padding: 20px;background: #fafafa;}
.size {width: 60px;height: 60px;}
.round { border-radius: 50%; }
</style>

调用也很简单:

<img class="size round" avatar="用户名">

例如在友情链接页面中显示用户头像,只需要使用如下代码:

function get_the_link_items($id = null)
{
    $bookmarks = get_bookmarks('orderby=date&category=' . $id);
    $output = '';
        foreach ($bookmarks as $bookmark) {
            $output .= '<div class="userItem"><div class="userItem--inner"><div class="userItem-content"><img class="size round" avatar="' . $bookmark->link_name . '"><div class="userItem-name"><a class="link link--primary" href="' . $bookmark->link_url . '" target="_blank" >' . $bookmark->link_name . '</a></div></div></div></div>';
        }
        $output .= '</div>';
    return $output;
}

© 声明:本站原创文章采用BY-NC-SA创作共用协议,转载时请标明本文地址;非原创(转载)文章版权归原作者所有。

RECENT POSTS

Stay Hungry. Stay Foolish.

数据库查询次数:12次,页面生成时间:0.034秒。