Argon SEO优化&主题美化-Wordpress 博客安装

Wordpress主题Argon的SEO优化BUG解决方案，以及Argon主题美化方法和参考。安装博客平台的步骤，并通过主题选择、插件推荐和自定义CSS等方法进行美化，打造独特的博客体验。

一、安装

参考教程
- Argon主题博客美化 ^[1]
- Docker系列 WordPress系列特效 ^[2]
- 博客装饰记录 ^[3]
- 【待办】文章推送通知oneSignal ^[4]
- 【待办】CDN设置 & 邮件推送 ^[5]

二、Argon美化汇总

1. 彩色标签云

根据参考^[6] 修改bug后代码：

// 圆角背景色标签
function colorCloud($text) {
    $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
    return $text;
}

function colorCloudCallback($matches) {
    $text = $matches[1];
    $colors = array('F99', 'C9C', 'F96', '6CC', '6C9', '37A7FF', 'B0D686', 'E6CC6E');
    $color = $colors[rand(0, 7)]; // 修正这里，使用rand而不是dechex

    $pattern = '/style=("|\')(.*?)("|\')/i'; // 使用非贪婪匹配
    $replacement = "style=\"display: inline-block; display: inline; zoom: 1; color: #fff; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 3px; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\"";

    $text = preg_replace($pattern, $replacement, $text);

    return "<a $text>";
}

add_filter('wp_tag_cloud', 'colorCloud', 1);

在当前主题目录下面的 functions.php 里面加入以下代码
注：颜色可以自己对照 rgb 颜色表修改

2. 添加额外的CSS【241126更新】

修改参考

《Docker系列 WordPress系列特效》^[7]，
《Argon 主题修改记录》^[8]
《不要再傻乎乎地通过主题编辑器style.css修改主题样式了》^[9] ：认识三个主题css文档的关系，通过额外的自定义css修改主题，不会更新时候被覆盖

/*=========字体设置============*/

/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:btfFont;
    src:
    url(https://cdn.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}

/*设置加粗字体颜色*/
strong {
    /*白天*/
    color: #A7727D;
}
html.darkmode strong {
    /*夜晚*/
    color: #FAAB78;
}

/*说说预览模式的代码字体颜色*/
pre {
    /*白天*/
    color: #A7727D;
}
html.darkmode pre {
    /*夜晚*/
    color: #FAAB78;
}

/*横幅字体大小*/
.banner-title {
  font-size: 2.5em;
}
.banner-subtitle{
  font-size: 20px;
}

/*文章标题字体大小*/
.post-title {
    font-size: 30px
}

/*正文字体大小（不包含代码）*/
.post-content p{
    font-size: 1.25rem;
}
li{
    font-size: 1rem;
}

/*评论区字体大小*/
p {
    font-size: 1.2rem
}

/*评论发送区字体大小*/
.form-control{
    font-size: 1.2rem
}

/*评论勾选项目字体大小*/
.custom-checkbox .custom-control-input~.custom-control-label{
    font-size: 1.2rem
}
/*评论区代码的强调色*/
code {
  color: rgba(var(--themecolor-rgbstr));
}

/*说说字体大小和颜色设置*/
.shuoshuo-title {
    font-size: 25px;
/*  color: rgba(var(--themecolor-rgbstr)); */
}

/*尾注字体大小*/
.additional-content-after-post{
    font-size: 1.2rem
}

/*特色图片文章标题*/
.post-header.post-header-with-thumbnail .post-header-text-container .post-title {
    font-weight: bold;
    color: #ffffff !important;
    text-shadow: 0px 0px 5px #000000 !important;
}

/*左侧栏文章目录站点概览功能字体大小*/
#leftbar_tab_tools_btn {
    font-weight: bold;
    font-size: 15px
}

#leftbar_tab_overview_btn{
    font-weight: bold;
    font-size: 15px
}

#leftbar_tab_catalog_btn{
    font-weight: bold;
    font-size: 15px
}

/*========颜色设置===========*/

/*文章或页面的正文颜色*/
body{
    color:#364863
}

/*引文属性设置*/
blockquote {
    /*添加弱主题色为背景色*/
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%
}

/*引文颜色 建议用主题色*/
:root {
    /*也可以用类似于--color-border-on-foreground-deeper: #009688;这样的命令*/
    --color-border-on-foreground-deeper: rgba(var(--themecolor-rgbstr));
}

/*左侧菜单栏突出颜色修改*/
.leftbar-menu-item > a:hover, .leftbar-menu-item.current > a{
    background-color: #f9f9f980;
}

/*站点概览分隔线颜色修改*/
.site-state-item{
    border-left: 1px solid #aaa;
}
.site-friend-links-title {
    border-top: 1px dotted #aaa;
}
#leftbar_tab_tools ul li {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom:none;
}
html.darkmode #leftbar_tab_tools ul li {
    border-bottom:none;
}

/*左侧栏搜索框的颜色*/
button#leftbar_search_container {
    background-color: rgba(94,114,228,0.21);
}

/*========透明设置===========*/

/*白天卡片背景透明*/
.card{
    background-color:rgba(255, 255, 255, 0.85) !important;
    /*backdrop-filter:blur(6px);*//*毛玻璃效果主要属性*/
    -webkit-backdrop-filter:blur(6px);
}

/*小工具栏背景完全透明*/
/*小工具栏是card的子元素，如果用同一个透明度会叠加变色，故改为完全透明*/
.card .widget,.darkmode .card .widget,#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title{
    background-color:#ffffff00 !important;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
.emotion-keyboard,#fabtn_blog_settings_popup{
    background-color:rgba(255, 255, 255, 0.95) !important;
}

/*分类卡片透明*/
.bg-gradient-secondary{
    background:rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

/*夜间透明*/
html.darkmode.bg-white,html.darkmode .card,html.darkmode #footer{
    background:rgba(66, 66, 66, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup{
    background:rgba(66, 66, 66, 0.95) !important;
}

/*标签背景
.post-meta-detail-tag {
    background:rgba(255, 255, 255, 0.5)!important;
}*/

/*========排版设置===========*/

/*左侧栏层级置于上层*/
#leftbar_part1 {
    z-index: 1;
}

/*分类卡片文本居中*/
#content > div.page-information-card-container > div > div{
    text-align:center;
}

/*子菜单对齐及样式调整*/
.dropdown-menu .dropdown-item>i{
    width: 10px;
}
.dropdown-menu>a {
    color:var(--themecolor);
}
.dropdown-menu{
    min-width:max-content;
}
.dropdown-menu .dropdown-item {
    padding: .5rem 1.5rem 0.5rem 1rem;
}
.leftbar-menu-subitem{
    min-width:max-content;
}
.leftbar-menu-subitem .leftbar-menu-item>a{
    padding: 0rem 1.5rem 0rem 1rem;
}

/*左侧栏边距修改*/
.tab-content{
    padding:10px 0px 0px 0px !important;
}
.site-author-links{
    padding:0px 0px 0px 10px ;
}
/*目录位置偏移修改*/
#leftbar_catalog{
    margin-left: 0px;
}
/*目录条目边距修改*/
#leftbar_catalog .index-link{
    padding: 4px 4px 4px 4px;
}

/*左侧栏小工具栏字体缩小*/
#leftbar_tab_tools{
    font-size: 14px;
}

/*正文图片边距修改*/
article figure {margin:0;}
/*正文图片居中显示*/
.fancybox-wrapper {
    margin: auto;
}
/*正文表格样式修改*/
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > tfoot > tr > td,
article table > tfoot > tr > th,
article table > thead > tr > td,
article table > thead > tr > th{
    padding: 8px 10px;
    border: 1px solid;
}
/*表格居中样式*/
.wp-block-table.aligncenter{margin:10px auto;}

/*回顶图标放大*/
button#fabtn_back_to_top, button#fabtn_go_to_comment, button#fabtn_toggle_blog_settings_popup, button#fabtn_toggle_sides, button#fabtn_open_sidebar{
    font-size: 1.2rem;
}

/*顶栏菜单*/
/*这里也可以设置刚刚我们设置的btfFont字体。试试看！*/
.navbar-nav .nav-link {
    font-size: 1.2rem;
    font-family: 'btfFont';
}
.nav-link-inner--text {
    /*顶栏菜单字体大小*/
    font-size: 1.2rem;
}
.navbar-nav .nav-item {
    margin-right:0;
}
.mr-lg-5, .mx-lg-5 {
    margin-right:1rem !important;
}
.navbar-toggler-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0.9rem;
    padding-left: 1rem;
}

/*顶栏图标*/
.navbar-brand {
    font-family: 'Noto Serif SC',serif;
    font-size: 1.25rem;
    /*顶栏图标边界微调*/
    margin-right: 0rem; /*左右偏移*/
    padding-bottom: 0.3rem;
}
.navbar-brand img { 
  /* 图片高度*/
    height: 24px;
}

2.1 导航栏添加图标

方法一：argon内置的图标库fontawesome
- 引用方法：直接在想要引用的菜单栏文字前加注，比如：
方法二：引入阿里图标库的好看的图标
- 参考文章 Zibll子比主题-全站使用阿里巴巴Iconfont图标详细图文教程 – [tag]语雀备份[/tag]
- 缺点：引入后，图标变得好大，应该可以通过标签语法调整……

三、SEO优化

最近后知后觉查看bing搜索引擎，才发现argon主题的一些SEO问题没有符合BING搜索引擎的规则要求，所以被拒绝收录。以下是针对几个比较严重的问题进行代码修改优化。

3.1 文章中没有 h1 标签

文章中没有<h1>标签。<h1>标签是文章的标题，虽然 <title> 标签中已经包含了。没有 <h1> 标签的话在Bing的Webmaster中会提示。
解决方法^[10] ：
- “需要编辑四个文件:content-single.php, content-page.php, content-timeline.php和content.php.在文章标题旁边另起一个class为h1-style的h1标签，再通过CSS隐藏起来。”
- PS：没有找到 content.php 文件

<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>

3.2 评论开启分页后会有 comment-page 的重复页面

当开启评论分页功能后，WordPress会给每个评论区分页，形成很多带有 comment-page-的重复页面，如:https://blog.xmgspace.me/archives/domestic-shortwave-radio-frequencies-in-china.html/comment-page-7 。而Argon右侧功能栏中的”近期评论”中会显示这些链接，可能导致同一页面的重复收录。
解决方法^[10]：
- “实际上这并不是这个主题的锅，更像是WordPress的锅。首先是修改header.php，可以使用empty(get_query_var('cpage')) 判断，是否是comment-page-* 页面，然后给这样的页面加上noindex的标记,其次是编辑function.php，在这些页面上添加正确的canonical link,当然，对header.php的修改中还有我个人的喜好，我只希望文章页被收录，tag页和category页等不要被收录。”
- header.php 修改73行
- functions.php 修改42行

//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.3 关掉系统自带的 meta description 标签

bing SEO问题：因为bing搜索引擎工具的网站检查提示报错，文章出现多个 meta description，所以被拒绝收录。重新看了argon主题设置，才知道原来argon主题有自带的通用 meta description,并且会为文章自动生成 meta description。所以当自己安装了SEO插件后，用了SEO插件的 meta description就会让文章出现多个 meta description标签了……
解决方案：（以下根据 claude的建议，注释掉meta description相关代码）
- 注释掉 funtions.php 中相关代码
- 删掉 settings.php 中相关代码（删除掉途中选中部分）
- 删除 header.php 中相关代码
  （删除前）
  
  （删除后）
其他速度优化设置：参考《argon主题优化方案》^[11]

3.4 关于wordpress子主题和父主题

本来针对以上主题代码的修改是想建立argon子主题的方式搞的，结果有些需要在 header.php之类的进行修改，会覆盖父主题的代码，所以最后还是一起改到了父主题中。
关于wordpress的子主题和父主题的代码关系，以及子主题的作用，参考 ^[12] 写的很详细。
- 特别注意，子主题的 style.css 中，template模板是父主题的 文件夹名字，不是父主题的名字！！！
- argon子主题文件夹创建和文件夹结构，参考 ^[13] ^[14]

3.5 Robot.txt 文件爬虫规则

用插件 All in One SEO写robot.txt规则，让搜索引擎爬虫更好地工作收录网站。
参考写法 “Argon主题优化：SEO、速度优化^[15] ”，其他参考内容 ^[16] ^[17]

四、图床

从七牛云图床改 github➕jsdelivr

– 七牛云图床确实有10G免费额度，但是HTTPS要钱啊~连我这个几乎没有流量的破博客都居然突然因为欠费被冻结了~ 果断转场！！
– 换成 github➕jsdelivr，参考文章《使用 jsDelivr CDN 对 Github 图床进行加速，带给你如丝滑般的图片体验！》^[18]
– 据说cloudflare 的CDN加速更加丝滑，但是貌似要转域到cloudflare啊~好麻烦~以后再说吧。·
– 先留一个参考文章使用GitHub Pages，Cloudflare和PicGo构建超级稳定的免费图床^[19]

Aria·Kai

若为🌞自由故，二者皆可抛~

Monster Insight 统计

Argon SEO优化&主题美化-WordPress 博客安装

一、安装

二、Argon美化汇总

1. 彩色标签云

2. 添加额外的CSS【241126更新】

2.1 导航栏添加图标

三、SEO优化

3.1 文章中没有 h1 标签

3.2 评论开启分页后会有 comment-page 的重复页面

3.3 关掉系统自带的 meta description 标签

3.4 关于wordpress子主题和父主题

3.5 Robot.txt 文件爬虫规则

四、图床

🎉其他待参考文章

Reference-参考

发送评论编辑评论

一、安装

二、Argon美化汇总

1. 彩色标签云

2. 添加额外的CSS【241126更新】

2.1 导航栏添加图标

三、SEO优化

3.1 文章中没有 h1 标签

3.2 评论开启分页后会有 comment-page 的重复页面

3.3 关掉系统自带的 meta description 标签

3.4 关于wordpress子主题和父主题

3.5 Robot.txt 文件爬虫规则

四、图床

🎉其他待参考文章

Reference-参考

发送评论 编辑评论

推荐文章

发送评论编辑评论