WordPress 美化速通:Argon 主题 + Elementor 完整配置(导航/图标/CSS/友链/背景/Live2D)
本文最后更新于 30 天前,如有失效请评论区留言。

照着本文做:上传启用 Argon 主题、安装 Elementor、导入 JSON、完成导航/图标/CSS/友链/背景/Live2D/年度进度条,一站式搞定前台美化。最后别忘了做备份!

声明

这篇就是“跟着做就能好看”的实操文。先装主题和页面构建器,再把导航、图标、CSS、友链、背景、Live2D、年度进度条一步步补齐。中途会用到第三方下载(比如 Elementor 的镜像页),记得只从可信来源拿包;涉及账号、密钥、路径的时候——请一定自己留底。另外,做好备份(程序文件 + 数据库),动大配置前先拍一张快照,出事不慌。备份方式参阅  用宝塔面板备份 WordPress(程序文件 + 数据库):手动/自动、异地备份与一键还原全攻略

下载并启用 Argon 主题

  • 访问:Releases · solstice23/argon-theme

  • WordPress 后台 → 外观 → 主题 → 添加主题 → 上传主题 → 选择下载的主题包(zip格式) → 安装并启用。

安装并启用 Elementor

访问镜像下载页:http://bidewang.co/ele

账号页(示例):http://bidewang.co/et(可用谷歌邮箱注册/登录)

WordPress后台 -> 插件 -> 安装插件 -> 上传插件 -> 上传下载的elementor -> 立即安装 -> 启用插件

Elementor 基础设置

WordPress后台 -> elementor  -> 设置 -> 禁用默认字体 -> 保存更改

导入主题设置 JSON

找到argon主题设置选项(WordPress后台菜单栏) 点击右下角”到底部” 没有就将页面下滑一点点

点击导入设置
Argon美化 的 “一键导入.json” 文件里面的内容 粘贴到argon导入设置里面(并在代码里面的“修改”处修改为自己的内容) 点击确定 点击保存更改(后续更改后可以导出该设置自行保存)

更换网站图标

WordPress后台 -> 点击外观 -> 自定义 -> 点击站点身份 -> 更换站点图标 -> 上传文件 -> 更换 -> 点击发布

添加网站导航

WordPress后台 -> 点击页面 -> 添加页面:首页、碎碎念、留言板、关于我、友人帐  (碎碎念和留言板要点击允许评论,并且建立的时候需要需要选择相应的模版)

WordPress后台 -> 点击文章 -> 点击分类目录 -> 添加:文章 (还可以添加父级)

WordPress后台 -> 点击外观 -> 点击菜单 -> 选择顶部导航 -> 设置名称之后左侧菜单项:点击分类目录以及页面或者自定义链接 -> 点击查看所有 -> 点击全选 -> 点击添加至菜单 -> 点击保存菜单

导入额外 CSS(含透明与卡片样式)

WordPress后台 -> 点击外观 -> 点击自定义 -> 点击额外CSS 将 Argon美化 的  “额外CSS.css” 文件里面的内容复制到网站额外CSS设置里面 -> 点击发布

设置后台个人头像与资料

WordPress后台 -> 点击外观 -> 插件 -> 添加新插件 -> 搜索User Profile Picture -> 添加后启用

WordPress后台 -> 点击外观 -> 用户 -> 个人资料 -> 点击Profile Image 上传图片、同时修改管理配色方案为argon、名字、昵称、公开显示为邮箱 -> 点击更新个人资料

上传白天/夜间背景并应用

WordPress后台 -> 外观 -> 媒体 -> 添加文件 -> 上传即可 -> 上传好后点击图片可查看图片的位置 -> 复制图片url位置 -> argon主题选项 -> 右边大纲 -> 页面背景 -> 粘贴url地址到页面背景/页面背景(夜间模式时)输入框

菜单图标

图标库:https://fontawesome.com/v4/icons/

WordPress后台 -> 点击外观 -> 点击菜单 -> 选择顶部导航 -> 将每个菜单的导航标签设置为:

<i class=”fa fa-home”></i>首页
<i class=”fa fa-book” aria-hidden=”true”></i>文章
<i class=”fa fa-quote-left”></i>碎碎念
<i class=”fa fa-user”></i>关于
<i class=”fa fa-link”></i>友人帐
<i class=”fa fa-comments” aria-hidden=”true”></i>留言板
<i class=”fa fa-youtube-play” aria-hidden=”true”></i>bilibili主页
<i class=”fa fa-clock-o” aria-hidden=”true”></i>归档

友链:插件与短码

WordPress后台 -> 链接-> 添加链接-> 以我的为例:

名称:山水别恙的小破站

Web 地址:https://www.ganglitm.cn

描述:想折一枝晚桂去赴旧约,却知少年之舟早已解缆;只好把话折进月色里,让潮声与酒,替我们寒暄。

图片地址:https://www.ganglitm.cn/wp-content/uploads/2025/10/logo.png

点击添加链接即可

友人帐页面

WordPress后台 -> 点击页面 -> 添加页面:友人帐(别名为 friendlinks)-> 使用Elementor编辑 -> 添加一个简码(直接搜索该工具即可)

friendlinks sort="rating"/  # 代码的两端需要加一个中括号

年度倒计时进度条

WordPress后台 -> 外观 -> 小工具-> 左侧栏小工具 -> 添加简码(直接搜索“简码”),填入  Argon美化 的  “年度倒计时进度条.txt” 文件里面的内容复制到里面 

添加 Live2D 看板娘

在/wp-content/themes/argon/(相对路径,具体路径在域名下面,请参考自己的路径)下新建live2d目录,然后将   Argon美化 里面的live2d的所有文件传到该文件夹,并将其中的load.js文件里面更改40/41行的路径(相对路径,确保跟自己的目录相同)

WordPress后台 -> Argon主题选项 -> 的页脚内容最后加入(相对路径,确保跟自己的目录相同):

<!– live2d –>
<script src=”/wp-content/themes/argon/live2d/TweenLite.js”></script>
<script src=”/wp-content/themes/argon/live2d/live2dcubismcore.min.js”></script>
<script src=”/wp-content/themes/argon/live2d/pixi.min.js”></script>
<script src=”/wp-content/themes/argon/live2d/cubism4.min.js”></script>
<link href=”/wp-content/themes/argon/live2d/pio.css” rel=”stylesheet” type=”text/css”/>
<script src=”/wp-content/themes/argon/live2d/pio.js”></script>
<script src=”/wp-content/themes/argon/live2d/pio_sdk4.js”></script>
<script src=”/wp-content/themes/argon/live2d/load.js”></script>

添加左侧栏菜单

WordPress后台 -> 点击外观 -> 点击菜单 -> 选择左侧个人链接(左侧栏菜单) -> 加入首页、碎碎念、归档等(图标参见前文)

网站运行时间和内存查询

WordPress后台 -> 外观 -> 主题文件编辑器 -> 找到footer.php -> 将   Argon美化 里面的  网站运行时间和内存查询.txt  的内容复制到footer.php中,位置大概在</footer>之前。其中有需要修改的部分(自己博客的诞生时间)

鼠标仙女棒特效、全文特效

WordPress后台 -> 外观 -> 主题文件编辑器 -> 找到footer.php -> 将   Argon美化 里面的  鼠标仙女棒特效、全文特效.txt  的内容复制到footer.php中,位置大概在</body> 之前(具体采用什么方式可自行注释和启用代码)

🐾 辛苦啦,勇士!现在可以放下键盘,去拥抱现实世界的软沙发啦~

特别鸣谢

本篇美化教程参考了博主 Bensz七梦Echo 关于Agron主题的修改。感谢他们的分享与启发,也希望本文能为后来者提供新的思路与灵感。

— 完 —

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇