WordPress 博客实战：Argon 主题美化与插件配置指南

本文最后更新于40 天前，其中的信息可能已经过时，如有错误请发送邮件到wxk6486@163.com

最近终于抽出时间把博客重新搭建并修整了一番。这篇主要记录一下从服务器选购到 Argon 主题美化的全过程，方便以后回顾，也希望能给想折腾博客的朋友一点参考。

一、服务器选择：京东云轻量云主机

服务器方面，我这次选择了京东云的轻量云主机。配置是 2核 2G 3M，对于个人博客来说，这个配置绰绰有余。

当时入手的价格非常划算，49元一年，我直接一口气买了3年。虽然现在的价格已经涨到了68元一年，但在同类产品中依然具有很高的性价比。3M 的带宽应付日常的图文加载和少量的并发访问完全没有问题。

二、环境部署：宝塔面板

为了管理方便，我习惯使用宝塔面板来辅助搭建。宝塔的可视化界面在后期维护、文件管理以及 SSL 证书续签上都非常省心。特别是如果你后期打算使用宝塔自家的域名，利用它的 SSL 证书续签功能会非常丝滑。

服务器重置好系统后，直接使用宝塔官方的通用安装脚本进行安装：

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

三、主题选择：Argon

WordPress 安装完成后，第一件事就是换主题。我选择的是大名鼎鼎的 Argon 主题。这是一个轻盈、简洁且高度可定制的主题。

虽然 Argon 主题目前已经停止更新了，但它的底子非常好，功能丰富且美观，对我来说完全够用了。只需要去 GitHub 下载最新的 Release 压缩包，然后在 WordPress 后台的【外观】->【主题】处上传安装即可。

项目地址：solstice23/argon-theme: 📖 Argon – 一个轻盈、简洁的 WordPress 主题

四、必备插件配置

为了保证网站的功能完善和访问速度，我精选了以下几个插件。这里特别列出我的配置清单：

1. Maintenance (维护模式)

用途： 在网站开发或调整期间，启用此插件可以让访客看到“维护中”的提示页面，而管理员登录后可以正常预览网站。避免在装修过程中被路人看到半成品。

2. Media Cloud

用途： 极其重要的插件。它可以自动将媒体库的图片上传到 Amazon S3 或兼容 S3 的对象存储（如京东云 OSS、Cloudflare R2 等），并配合 CDN 进行加速。这能极大减轻服务器的存储压力并提升图片加载速度。

当前设置： 启用自动更新 | 启用

3. Rank Math SEO

用途： 目前最好用的 WordPress SEO 插件之一。它集成了很多 SEO 工具的功能，从文章的 SEO 评分到站点地图生成，一站式搞定。

4. WPS 隐藏登录 (WPS Hide Login)

用途： 安全类插件。通过修改默认的 wp-login.php 登录地址，防止暴力破解和恶意扫描。

当前设置： 已更改默认登录 URL

5. 超级缓存 (WP Super Cache)

用途： 经典的缓存插件，通过生成静态 HTML 文件来加速网站响应。

五、Argon 主题美化与定制

Argon 的强大之处在于其丰富的自定义选项。这一部分主要涉及主题设置、页脚代码以及自定义 CSS。

如果你对某个具体设置不清楚，可以查阅官方文档：
Argon Theme Docs (solstice23.top)

1. 网站底部信息 (Footer)

网站页脚通常用来放置备案号、网站运行时间统计等信息。Argon 允许我们在【页脚内容】中直接编写 HTML 和 Script 标签。

在 Argon 主题选项 -> 页脚 -> 页脚内容 中，我添加了以下内容。这段代码包含了：

GitHub 风格的备案号与版权徽章
网站稳定运行时间计时器
MetingJS 音乐播放器（左下角吸底）
全屏雪花特效脚本
主题色 RGB 转换脚本（用于配合 CSS 实现透明背景色）

以下是我目前使用的页脚代码（包含备案信息和运行时间脚本）：

<style>
    /* GitHub 风格徽章样式 */
    .github-badge-big {
        display: inline-block;
        border-radius: 6px;
        text-shadow: none;
        font-size: 14px;
        color: #fff;
        line-height: 18px;
        margin: 5px 3px;
    }
    .github-badge-big .badge-subject {
        display: inline-block;
        background-color: #4d4d4d;
        padding: 4px 6px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .github-badge-big .badge-value {
        display: inline-block;
        padding: 4px 6px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
    .github-badge-big i {
        margin-right: 4px;
    }
    /* 颜色定义 */
    .bg-orange { background-color: #ec8a64 !important; }
    .bg-red { background-color: #cb7574 !important; }
    .bg-green { background-color: #50c878 !important; }
    .bg-blue { background-color: #5e72e4 !important; }
</style>

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-id-card"></i>备案号</span>
    <span class="badge-value bg-orange">
        <a href="https://beian.miit.gov.cn/" target="_blank" style="color:#fff;">粤ICP备2026016316号</a>
    </span>
</div>

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-copyright"></i>Copyright</span>
    <span class="badge-value bg-red">
        2025 - <span id="current_year"></span>
        <a href="https://blog.leihub.cn" target="_blank" style="color:#fff;">@ Wen</a>
    </span>
</div>

<div class="github-badge-big">
    <span class="badge-subject"><i class="fa fa-clock-o"></i>稳定运行</span>
    <span class="badge-value bg-green">
        <span id="blog_running_days">0</span> 天
        <span id="blog_running_hours">0</span> 小时
        <span id="blog_running_mins">0</span> 分
        <span id="blog_running_secs">0</span> 秒
    </span>
</div>

<script>
    // === 请在这里修改你的建站时间 ===
    var BlogStartDate = "2026/02/01 00:00:00"; 
    // ============================

    function show_date_time() {
        window.setTimeout("show_date_time()", 1000);
        var BirthDay = new Date(BlogStartDate);
        var today = new Date();
        var timeold = (today.getTime() - BirthDay.getTime());
        
        var sectimeold = timeold / 1000;
        var secondsold = Math.floor(sectimeold);
        var msPerDay = 24 * 60 * 60 * 1000;
        
        var e_daysold = timeold / msPerDay;
        var daysold = Math.floor(e_daysold);
        var e_hrsold = (e_daysold - daysold) * 24;
        var hrsold = Math.floor(e_hrsold);
        var e_minsold = (e_hrsold - hrsold) * 60;
        var minsold = Math.floor((e_hrsold - hrsold) * 60);
        var seconds = Math.floor((e_minsold - minsold) * 60);
        
        document.getElementById("blog_running_days").innerHTML = daysold;
        document.getElementById("blog_running_hours").innerHTML = hrsold;
        document.getElementById("blog_running_mins").innerHTML = minsold;
        document.getElementById("blog_running_secs").innerHTML = seconds;
        
        // 自动更新版权年份
        document.getElementById("current_year").innerHTML = new Date().getFullYear();
    }
    show_date_time();
</script>

2. 额外 CSS (Extra CSS)

为了让博客更符合我的审美，我对字体、背景透明度、卡片圆角等细节进行了微调。这些样式代码添加在【外观】->【自定义】->【额外 CSS】中。

这是我整理后的 CSS 代码：

/*========= 1. 自定义字体引入 ============*/
@font-face {
    font-family: "MyWebFont"; /* 给字体起个名字 */
    src: url('https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/fonts/13.woff2') format('woff2');
    font-display: swap; /* 保证字体没加载出来前显示系统默认字体，防止白屏 */
}

/*========= 2. 全局字体应用 ============*/

/* 应用于 body 和所有主要元素 */
body, h1, h2, h3, h4, h5, h6, p, span, a, li {
    /* 将自定义字体放在第一位 */
    font-family: "MyWebFont", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

/*========= 3. 细节样式调整 ============*/

/* 横幅标题 (大标题) */
.banner-title {
    font-size: 2.5em;
    font-family: "MyWebFont", sans-serif !important;
}
.banner-subtitle{
    font-size: 27px;
}

/* 文章标题 */
.post-title {
    font-size: 25px;
    font-family: "MyWebFont", sans-serif !important;
}

/* 正文阅读体验优化 */
.post-content p {
    font-size: 1.25rem;
    line-height: 1.8; /* 增加行距，阅读更舒适 */
}
li {
    font-size: 1.2rem;
}

/* 评论区 */
p, .form-control, .custom-checkbox .custom-control-input~.custom-control-label {
    font-size: 1.2rem;
}

/* 代码块 (保持程序员风格的等宽字体，不使用圆润的自定义字体) */
code {
    color: rgba(var(--themecolor-rgbstr));
    font-family: "JetBrains Mono", "Consolas", "Courier New", monospace !important;
}

/* 说说页面标题 */
.shuoshuo-title {
    font-size: 25px;
}

/* 尾注 */
.additional-content-after-post {
    font-size: 1.2rem;
}

/* 左侧栏公告 & 一言 */
.leftbar-announcement-title, .leftbar-banner-title {
    font-size: 20px;
    text-align: center;
    font-weight: bold;
}

.leftbar-announcement-content, .leftbar-banner-subtitle {
    text-align: center;
}
.leftbar-announcement-content {
    font-size: 15px;
    line-height: 1.8;
    padding-top: 8px;
    opacity: 0.9;
}
.leftbar-banner-subtitle {
    margin-top: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    opacity: 0.8;
}

/*========= 4. 颜色与透明度设置 ============*/

/* 字体颜色 */
body {
    color: #364863;
}

/* 引文背景 */
blockquote {
    background: rgba(var(--themecolor-rgbstr), 0.1) !important;
    width: 100%;
}

/* 左侧菜单悬停颜色 */
.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, html.darkmode #leftbar_tab_tools ul li {
    border-bottom: none;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* 搜索框背景透明 */
button#leftbar_search_container {
    background-color: transparent;
}

/* 卡片毛玻璃透明效果 (白天) */
.card {
    background-color: rgba(255, 255, 255, 0.85) !important; /* 稍微调高一点不透明度，防止字体看不清 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* 小工具栏完全透明 */
.card .widget, .darkmode .card .widget {
    background-color: transparent !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 归档时间轴背景 */
#post_content > div > div > div.argon-timeline-card.card.bg-gradient-secondary.archive-timeline-title {
    background-color: transparent !important;
    backdrop-filter: none;
}

/* 弹窗背景 */
.emotion-keyboard, #fabtn_blog_settings_popup {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* 夜间模式适配 */
html.darkmode.bg-white, html.darkmode .card, html.darkmode #footer {
    background: rgba(40, 40, 40, 0.9) !important;
}
html.darkmode #fabtn_blog_settings_popup {
    background: rgba(40, 40, 40, 0.95) !important;
}

/*========= 5. 导航栏与排版优化 ============*/

/* 导航栏字体应用 */
.navbar-nav .nav-link {
    font-size: 16px !important;
    font-family: "MyWebFont", sans-serif !important;
    font-weight: 600;
}
.navbar-brand {
    font-family: "MyWebFont", sans-serif !important;
    font-size: 1.5rem;
    font-weight: bold;
}

/* 导航栏间距微调 */
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1rem;
}

/* 图片去边距 */
article figure { margin: 0; }
.fancybox-wrapper { margin: auto; }

/* 表格样式 */
article table > tbody > tr > td,
article table > tbody > tr > th,
article table > thead > tr > th {
    padding: 8px 10px;
    border: 1px solid #eee;
}
.wp-block-table.aligncenter { margin: 10px auto; }

/* Github 卡片修复 */
.github-info-card-header a, .github-info-card {
    color: #333 !important;
}
.github-info-card.github-info-card-full.card.shadow-sm {
    background-color: rgba(var(--themecolor-rgbstr), 0.1) !important;
}

/* 隐藏部分插件的多余样式 */
*[style='position: relative; z-index: 99998;'] {
    display: none;
}

六、参考链接

在搭建和美化过程中，参考了以下大佬的文章，获益良多：

2026 年 3 月
一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31