在WordPress评论框显示用户UA

User Agent，简称 UA，通过HPPT头连同访问请求传递给服务器，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等，并依此为依据返回针对相应设备适配的网页和数据。

在WordPress中，用户提交评论甚至是用户访问，相应的UA信息都会储存到数据库中，如果感兴趣，可以查看WordPress数据库下的wp_comments表单，里面有一项comment_agent即是评论的UA信息。

因此很轻易地，我们可以通过调用各条评论的UA，来显示评论者的操作系统和浏览器等信息。

在WordPress提供的函数中，如get_comment_author_IP可以直接调取评论者IP，但是同一数据表下的comment_agent却没有直接调取的函数。那么自己造一个函数吧。

在WordPress文档中发现，get_comment_author_IP函数实际是通过wp-includes/comment-template.php这个文件定义的，那么接下来直接对comment-template.php中的get_comment_author_IP函数稍加改造就能调用UA了。具体，在主题的function.php中直接加入下面一段函数，get_comment_agent函数就造好了：

<?php 
/* Get comment_agent */
function get_comment_agent( $comment_ID = 0 ) {
    $comment = get_comment( $comment_ID );
 
    /**
     * Filters the comment author's returned User Agent.
     *
     * Added by Mashiro
     * Based on get_comment_author_IP function. 
     *
     * @param string     $comment_author_IP The comment author's IP address.
     * @param int        $comment_ID        The comment ID.
     * @param WP_Comment $comment           The comment object.
     */
    return apply_filters( 'get_comment_agent', $comment->comment_agent, $comment->comment_ID, $comment );
}
?>

接下来我们需要一个转换函数把上面调取出来的UA字段转换为显示在用户屏幕上的内容。我的想法是使用icon font来显示，那么直接把UA输出到HTML标签上就好啦。

可是User Agent是一段类似”Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36“这样的文字，需要用正则表达拆分，然后用UA数据库匹配，实在太麻烦，我懒得做，不过幸好找到一个转换UA的API，那么直接调用就行了（这个数据库服务器好像有点不稳，偶尔会掉线，不妨在API请求部分添加一个超时的条件）。

下面是UA转换的代码，添加到function.php中：

<?php
/* Convert UA to HTML */
function convertua($ua) {
    // URLencode
    $url_parm=urlencode($ua);
 
    // API Request 
    error_reporting(E_ERROR);
    //ini_set("display_errors", "Off");
    $request = "http://www.useragentstring.com/?uas=" . $url_parm . "&getJSON=all";
    $getua = json_decode(file_get_contents($request));
    $AgentName = $getua->agent_name; //Chrome / Android Webkit Browser / Safari / Firefox / BlackBerry / Internet Explorer / Edge
    $OsType = $getua->os_type; //Windows / Android / Linux / Macintosh / BlackBerryOS 
    $OsName = $getua->os_name; //Windows 10 / Windows 8 / Windows 8.1 / Windows 7 / Windows XP /  / Android / Linux / OS X / iPhone OS / BlackBerryOS / FreeBSD
    $LinuxDistibution = $getua->linux_distibution; //Ubuntu / CentOS / Fedora / Debian / Red Hat
 
    // Browser name
    if (($AgentName == "Chrome") || ($AgentName == "Android Webkit Browser") || ($AgentName == "Safari") || ($AgentName == "Firefox") || ($AgentName == "BlackBerry") || ($AgentName == "Internet Explorer") || ($AgentName == "Edge")) {
        if (($AgentName == "Android Webkit Browser") || ($AgentName == "Internet Explorer")) {
            $print_browser = str_replace( " ", "-",$AgentName);
        } else {
            $print_browser = $AgentName;
        }
    }
    else {
        $print_browser = "unkwon-browser";
    }
 
    // System name
    if (($LinuxDistibution == "Ubuntu") || ($LinuxDistibution == "CentOS") || ($LinuxDistibution == "Fedora") || ($LinuxDistibution == "Debian") || ($LinuxDistibution == "Red Hat")) {
        if ($LinuxDistibution == "Red Hat") {
            $print_system = str_replace( " ", "-",$LinuxDistibution);
        } else {
            $print_system = $LinuxDistibution; // Linux Distributions
        }
    } elseif (($OsName == "Windows 10") || ($OsName == " Windows 8") || ($OsName == "Windows 7") || ($OsName == "Windows XP") || ($OsName == "Android") || ($OsName == "Linux") || ($OsName == "OS X") || ($OsName == "iPhone OS") || ($OsName == "BlackBerryOS") || ($OsName == "FreeBSD")) {
        if (($OsName == "Windows 10") || ($OsName == " Windows 8") || ($OsName == "Windows 8.1") || ($OsName == "Windows 7") || ($OsName == "Windows XP") || ($OsName == "OS X") || ($OsName == "iPhone OS")) {
            $print_system = str_replace( " ", "-",$OsName);
        } elseif ($OsName == "Windows 8.1") {
            $print_system = "Windows-9";
        } else {
            $print_system = $OsName; // OS name like Windows 10, iPhone
        }
    } elseif (($OsType == "Windows") || ($OsType == "Android") || ($OsType == "Linux") || ($OsType == "Macintosh") || ($OsType == "BlackBerryOS")) {
        $print_system = $OsType; // No specified OS info
    } else { 
        $print_system = "unkwon-system";
    }
 
    return "<svg class=\"icon\" aria-hidden=\"true\"><use xlink:href=\"#system-icon-" . $print_system . "\"></use></svg>  <svg class=\"icon\" aria-hidden=\"true\"><use xlink:href=\"#system-icon-" . $print_browser . "\"></use></svg>";
    //return "<i class=\"system-icon system-icon-" . $print_system . "\"></i><i class=\"system-icon system-icon-" . $print_browser . "\"></i>"; 
    //return $print_system . $print_browser;
    //return $ua;
}
?>

然后呢，在function.php中找到类似<?php comment_author_link() ?>的一段代码，这附近就是评论框了，主题不同内容也略有不同，在合适的位置加上一句<?php echo convertua(get_comment_agent());?>即可调用转换后的内容，直接以<i class="system-icon system-icon-xxx"></i>的形式输出在HTML中。然后你就可以导入自己的icon font来渲染啦。你可以直接用我搭配好的，HTML中引入：

<script src="//at.alicdn.com/t/font_451652_ou22nnu21ugqr529.js"></script>
<style type="text/css">
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}
</style>

Icon font可以在阿里巴巴矢量图标库中自由配置（需要按照上面转换代码中的注释重命class名，注意我把所有空格转换成了-），最后直接引入相应的CSS或者JS即可，如果网页中已经引入了Font Awesome，那么你可以修改上面的函数以使用fa fa icon。

最后的效果是这样：

注意：因为每一条UA的处理都需要访问外部API，所以页面请求时间会变长，建议控制每页显示评论数量，善用评论的翻页功能；或者尝试建立本地的UA字符串匹配。

Q.E.D.

Comments