Argon主题优化：SEO、速度优化和添加评论IP属地

忙碌的备考生活告一段落，我难得有一些空余时间来好好打理一下这个博客了。最近我对这个博客还是做了不少修改和优化的，于是写篇这篇文章记录一下。

本博客使用的是Argon主题，虽然这个主题已经接近两年时间没有更新，但胜在功能全面，清新大方。这段时间，我主要Argon主题进行了搜索引擎优化SEO、速度优化，美化和添加评论IP属地功能，让这个主题在停更后的两年内还能满足本站的基本需要。

添加评论IP属地功能

首先来说说本站访客感知最强烈的功能变化——暂定自5月1日起，在本站发表的评论将显示评论者大致的IP属地，境内精确到省份。

为什么要添加这个功能？因为本站很多访客都是冲着频率表来的，有了IP属地沟通交流起来会方便很多。而同时为了兼顾隐私保护，本站会提供选项，允许用户自行选择是否显示他们的IP属地信息。如果您不希望您的IP属地信息在前台被展示，可以在评论末尾添加:no-location:标记。当然，如果大多数人都不喜欢这个功能，那么这个功能在未来会被关闭。

下面来谈谈具体的技术实现。

首先需要安装插件：IPUA – IP 属地和 User-Agent 插件，然后下载纯真IP库。

这个插件支持使用纯真IP库或腾讯位置服务两种方式来获取访客的IP，我个人强烈推荐前者，原因如下：

• 利用本地IP库进行匹配速度比请求API要快得多。
• 本地IP库匹配没有隐私问题，我是很不愿意把访客IP交给腾讯这种第三方公司的。

纯真IP库中每一个IP对应记录A和记录B，分别记录IP的地理位置和运营商信息，详情可以参考这篇文章，在这里我们只需要记录IP地理位置的记录A，并且提取出记录A中的省份信息，因此要对插件代码进行一些修改，然后再在Argon主题中调用插件。

//修改IPUA插件下的helper.php文件
//加入以下元素匹配算法，找到匹配的元素则返回被匹配元素，否则返回空
function matchStringWithArray($string, $array) { 
    foreach ($array as $item) {
            if (strpos($string, $item) !== false) {
                    return $item;
            }
    }
    return null; 
}

//修改原有的get_ip_address()函数中的对应部分
if ( isset( $setting['from'] ) && $setting['from'] == 'qqwry' ) {
    $cn_province = ["广东", "山东", "江苏", "上海", "四川", "河南", "河北", "重庆", "台湾", "湖南", "安徽", "湖北", "浙江", "广西", "云南", "江西", "辽宁", "黑龙江", "陕西", "福建", "贵州", "山西", "吉林", "甘肃", "内蒙古", "新疆", "天津", "北京", "海南", "宁夏", "青海", "西藏", "香港", "澳门"]; //省份信息
    $finnal_result = matchStringWithArray($ip_info['country'], $cn_province); //运行匹配算法
    if($finnal_result) { //若匹配算法不为空，则找到了对应的省份，为空则返回原始值
        return $finnal_result;
    } else {
        return $ip_info['country'];
    }
}

当然这样只能匹配国内省份，如果国外的IP属地比较精确的话还是会直接输出的。但好在纯真IP库国外数据大多只精确到国家，本站访客大多数都在境内，因此效果还算不错。当然如果想要匹配国外IP的话，把国名加入即可。

然后在Argon主题中调用插件，编辑function.php：

//首先在function.php开头调用函数
use function HaoZiTeam\IPUA\get_ip_address;

//编辑parse_ua_and_icon()函数，先修改参数，传入更多的参数
function parse_ua_and_icon($userAgent, $commentContent, $commentDate){

    //然后在合适的地方进行输出
    if (!strpos($commentContent,':no-location:') && strtotime($commentDate) > 1714492800) { //没有:no-location:标记和5月1日后的评论显示IP属地
        $ipAdd = get_ip_address();
        if(!empty($ipAdd)) {
            $out .= "<i style='margin-left: 6px;margin-right: 5px;' class='fa fa-location-arrow' aria-hidden='true'></i>";
            $out .= $ipAdd;
        }
    }
}

之后评论区就会显示访客的IP属地信息，效果如下图所示，我觉得效果还是很棒的。

SEO优化

Argon主题在SEO上总体还可以，但是确实有下面几点做的不好。

1. 文章中没有<h1>标签。<h1>标签是文章的标题，虽然<title>标签中已经包含了。没有<h1>标签的话在Bing的Webmaster中会提示。
2. 当开启评论分页功能后，WordPress会给每个评论区分页，形成很多带有comment-page-的重复页面，如：https://blog.xmgspace.me/archives/domestic-shortwave-radio-frequencies-in-china.html/comment-page-7。 而Argon右侧功能栏中的"近期评论"中会显示这些链接，可能导致同一页面的重复收录。
3. 页面底部"推荐文章"模块中的文章头图没有添加alt属性。同样会在Bing的Webmaster中提示。

针对这些问题，我们一项一项来优化。

问题1，需要编辑四个文件：content-single.php, content-page.php, content-timeline.php和content.php. 在文章标题旁边另起一个class为h1-style的h1标签，再通过CSS隐藏起来。

<a class="post-title" href="<?php the_permalink(); ?>"><?php the_title(); ?></a><h1 class="h1-style"><?php the_title(); ?></h1>

<style>
.h1-style {
    margin: 0!important;
    padding: 0;
    display: block;
    height: 0;
    width: 0;
    overflow: hidden;
}
</style>   

问题2，实际上这并不是这个主题的锅，更像是WordPress的锅。首先是修改header.php，可以使用empty(get_query_var('cpage'))判断，是否是comment-page-*页面，然后给这样的页面加上noindex的标记；其次是编辑function.php，在这些页面上添加正确的canonical link. 当然，对header.php的修改中还有我个人的喜好，我只希望文章页被收录，tag页和category页等不要被收录。

//header.php 只收录文章页，并且不收录comment-page-*页面
<?php
    if((is_front_page() || is_single() || is_page()) && !(is_paged()) && empty(get_query_var('cpage'))) {
        echo '<meta name="robots" content="index,follow" />';
    } else {
        echo '<meta name="robots" content="noindex,follow" />';
}?>

//function.php 给comment-page-*页面添加正确的canonical link
function canonical_for_comments()
{       
    global $cpage, $post;
    if (!empty($cpage) && $cpage > 0) {
        remove_action('wp_head', 'rel_canonical');
        echo '<link rel="canonical" href="' . esc_url(get_permalink($post->ID)) . '" />';
        echo "n";
    }
}
add_action( 'wp_head', 'canonical_for_comments', 9 );

//同时，也可以修改wp-includes/widgets/class-wp-widget-recent-comments.php，为侧边栏a标签加上nofollow属性
'<a href="' . esc_url( get_comment_link( $comment ) ) . '" rel="nofollow">' . get_the_title( $comment->comment_post_ID ) . '</a>'

至于问题3，可以修改single.php，修改对应的位置，给图片加上alt属性。

echo '<img class="related-post-thumbnail lazyload" alt="推荐内容" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=" data-original="' .  argon_get_post_thumbnail(get_the_ID()) . '"/>';

此外，robots.txt也非常重要，它是与搜索引擎蜘蛛交流的重要窗口，可以防止一些不想被收录的页面被收录，本站的robots.txt在此。

速度优化

速度优化是一个综合性的工程，包含很多方面：

• 源站启用PHP opcache和Memcache，为PHP做好缓存。当然使用缓存类插件对全站进行缓存更好，响应速度更快，但Argon主题可能出现不适配的问题。
• 静态文件启用CDN，尽量缓解源站的压力。并设置好缓存参数，如缓存标头。如果源站在国外，但静态文件使用境内CDN分发效果更好。当然使用第三方CDN有风险，不知道什么时候出故障，可能导致整个网站加载出问题。
• 尽量少使用插件，关注使用插件给站点带来的影响，比如外部CSS的引入，可能拖累网站加载速度。
• 关闭WordPress中用不到的功能，比如下面我就通过编辑function.php关闭了一些；推荐使用wpjam插件，可以免去一些编辑代码的痛苦。

// 移除 WordPress 5.9 版本后通过 theme.json 设置的全局预设样式和SVG过滤器
function custom_wp_remove_global_css() {
    // 移除通过主题theme.json预设的内联样式
    remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');

    // 移除渲染由 theme.json 提供的 SVG 过滤器
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); // WordPress 5.9.1之后版本
    //remove_action('wp_footer', 'wp_enqueue_global_styles', 1); // WordPress 5.9.0版本
}
add_action( 'after_setup_theme', 'custom_wp_remove_global_css' );

//移除一些媒体控制类CSS
function deregister_media_elements(){
    wp_deregister_script('wp-mediaelement');
    wp_deregister_style('wp-mediaelement');
    wp_deregister_style('classic-theme-styles');
    wp_dequeue_style('classic-theme-styles');
}       
add_action('wp_enqueue_scripts','deregister_media_elements');

本站使用的jetpack插件引入了一些无用的CSS，可以通过编辑wp-content/plugins/jetpack/class.jetpack.php来去掉他们，加入下列代码：

add_filter( 'jetpack_implode_frontend_css', '__return_false', 11 );

美化

基于浏览器性能上的考量，本站关闭了Argon主题的绝大多数效果，哪怕是效果全开，时间久了总会有审美上的疲劳。不经意间逛到别人的博客，同样是Argon主题，为什么有耳目一新的感觉呢？

原因就是因为字体不一样。Argon默认使用的就是系统字体，Windows上面就是微软雅黑，实在是太常见了。因此，我将博客字体改成了小米Misans，看起来舒服很多。可以通过白嫖小米的CDN引入，有国内CDN+国外Akaimai，速度相当棒。引入字重为400, 500, 600的足够使用，简体中文和拉丁文两种语言。

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,500,600:Chinese_Simplify,Latin" />
<style>
:root {
    --font: -apple-system, BlinkMacSystemFont, "MiSans", "Open Sans", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif !important;
}
</style>