博文头图
Argon主题优化:SEO、速度优化和添加评论IP属地

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 HaoZiTeamIPUAget_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>
本文永久链接:https://blog.xmgspace.me/archives/wordpress-argon-theme-optimization.html
本文文章标题:Argon主题优化:SEO、速度优化和添加评论IP属地
如无特殊说明,只要您标明转载自Xiaomage's Blog,就可自由转载本文。禁止CSDN/采集站采集转载。
授权协议:署名-非商业性使用-相同方式共享 4.0(CC BY-NC-SA 4.0)

评论

  1. 匿名
    Windows Chrome日本
    2 天前
    2024-5-17 9:46:54

    测试IP

  2. 测试ip2
    Windows Edge河南
    3 天前
    2024-5-16 17:07:26

    测试ip2

  3. 测试ip
    Windows Edge亚太地区
    3 天前
    2024-5-16 17:06:33

    测试ip

  4. 自镇流高压汞灯
    Windows Firefox
    已编辑
    3 周前
    2024-4-25 22:31:17

    你的元素漏了沪港澳。

    • 博主
      自镇流高压汞灯
      Windows Chrome
      3 周前
      2024-4-26 11:11:00

      感谢提醒!港澳我自己服务器上是有的,后来我在服务器上补充上了。上海是真的落下了,ChatGPT生成的,看来还需要进步(

发送评论 编辑评论


				
若您不希望公开IP属地,请点击此处,在评论末尾添加:no-location:标记。隐私政策
上一篇