Contents
前言
说起来，我的博客从写第一篇文章到现在，满打满算也差不多刚好一年了，通过这一年多的不停学习和各种折腾，应该也算刚刚脱离了wordpress的新手期。
不过，其实在写第一篇文章之前大概有1个月的时间，我一直在潜心"筑基"：补充关于搭建网站的最最最基础的知识。也就是说，我学习了1个月，才把博客的框架基本搭起来，达到勉强可以见人的程度(到现在为止起码又经历了3次大改版，无数次小改版)，然后才有心情开始正式写文章～。
可为什么效率这么低呢？因为我是从建站方面完完全全的纯小白开始学习的。有多纯呢？一个专业词汇都不知道，更别说什么结构性知识，以当时的我的眼光看我现在博客的主页为例：
如果上图中每个红框都算一个知识点且需要一步或者多步去设置的话，我甚至连哪些红框算个知识点都不知道，更不用说知道这些红框部分对应的专业名称了，这就导致一件很麻烦的事：我想去搜索都不知道咋搜，去网上提问也不知道咋问，总不能这么去提问吧："有个网站我看过觉得还可以，但是忘了截图，反正网站最左边和最右边有从上到下都有几个框子：有日历，有搜索功能，有些可以直接点，有的还有孙悟空头像，网页最上面还有横起一行可以点的，也不知道是个啥，但是我想达到那种效果，应该怎么做？" 嗯，我这么去提问会不会被人打死？
所以，这一个月中，我看了很多介绍如何使用wordpress搭建博客的文章，东拼西凑，才把网站元素和常用的专业名词关联起来，比如：主题、导航菜单、左(右)侧栏菜单、分类目录、自定义链接、页面、文章、评论、归档、说说、图标字体等等(有几个还是我这2天才弄明白的～～)。
正因为经历过这个阶段，我才知道这段时期有多难熬，因此，我希望能通过这篇文章，让更多的想自己用wordpress建站而没有相关基础知识的朋友，能够快速渡过这段尴尬的新手期(我相信入门这个阶段劝退了很多朋友，连我都差点放弃了，因为没方向的发散型学习太难受了)：至少知道网站页面的各个元素(组成部分)，知道对应的专业词汇，知道大概是去哪里设置，遇到不明白问题的时候，至少知道应该往哪个方向去找解决方案。
所以，这篇文章就以一个全新的wordpress站点为例，以一个纯白新人的视角来看"如何从无到有的以wordpress搭建起个人博客的框架"。
注：如何使用docker run格式命令搭建一个全新的wordpress站点可以参考我的另一篇文章：docker系列 使用docker基于wordpress架设博客从站点并实现主从站点配置定期备份，不过对新人来说，docker-compose的方式更加友好，这个网上到处都有教程，搜一下就是，当然，使用宝塔面板以源码方式搭建wordpress也不是不行～总之，可选方法很多，大家选择自己习惯的方式就好。
使用wordpress搭建博客的框架
新人最强辅助：主题
当我们第一次打开wordpress首页的时候，可以看到类似如下的初始界面：
其实大家可以看到，这个界面还是有最基础的功能的："新建"菜单下可以新建文章、新建媒体、新建页面、新建用户；编辑站点甚至可以直接开始设计整个网站结构，不过由于太过基础，需要很扎实的相关专业知识，对新人来说很不友好。
所以我们需要用一些技巧，让后续我们设计网站的时候能够更加简单、直观，最好只需要我们拿鼠标选择"yes"或者"no"就能设计网站最好了～～。
那么，有没有这种技巧呢？当然有，最简单的其实就是选择一个合适的"主题"。
那什么又是"主题"呢？一句话总结：主题就是别人已经按照某种风格把网站的整体外观，包括页面布局、图像展示和色彩搭配都设计好了，并且还提供了可视化的自定义选项，你只需要根据自己的喜好选择样式和功能模块即可生成自己喜欢风格的网站框架。
这简直就是纯白新人的福音啊，惊不惊喜，意不意外？
Argon主题从安装到使用
选择适合的主题
不过什么样的主题才算是适合的主题呢？我觉得起码审美上要能符合自己的喜好，默认提供的"页面布局"和"功能"的可选项能覆盖自己常规的需求。
鉴于以上要求，我推荐Argon这个主题。至于为什么推荐Argon这个主题，因为是我现在博客使用的(所以熟)，还是跟着别人用的(啥都不懂的时候跟着别人的教程学的)，而我也只用过这个主题(这个最关键)，所以就推荐这个了，很合理的吧？
Argon主题风格简洁大方，非常清爽，并且内置功能也很完善，非常适合新人学习搭建个人博客入坑时使用，目前我见到不少使用wordpress搭建博客的博主(其中不乏高颜值大神)都在使用这个主题，最关键，网上也有很多非常详细的关于Argon主题的使用教程和众多的分享其优化经验的文章可以借鉴，所以本文也以该主题为例子进行讲解。
先看看Argon主题提供了哪些特色功能：
- 轻盈美观 – 使用 Argon Design System 前端框架，细节精致，轻盈美观
- 高度可定制化 – 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等，提供了丰富的自定义选项
- 夜间模式 – 支持日间、夜间、纯黑三种模式，并可以根据时间自动切换或跟随系统夜间模式
- 功能繁多 – Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示
- Pjax – 支持 Pjax 无刷新加载，提高浏览体验
- 友情链接 – 支持使用 WordPress 自带的链接管理器进行友链管理，支持多种友链样式
- "说说" 功能 – 随时发表想法，并在专门的 "说说" 页面展示，也支持说说和首页文章穿插
- 评论功能扩展 – Ajax 评论，评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能
- 诸多功能 – 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等
- 丰富的短代码 – 支持通过短代码在文章中插入 TODO、标签、警告、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块
- 适配 Gutenberg 编辑器 – 支持使用 Gutenberg 编辑器可视化插入区块
- 多语言 – 支持中文、英文、俄文等语言
- 其他 – 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面、文章脚注等
Agron主题在Github上的项目地址是：Github Argon，大家可以直接下载。不方便访问Github的朋友也可以在我的博客专用文件分享链接中下载：无敌的文件分享，访问密码"blog.tangwudi.com"。
安装Argon主题
"仪表盘"直接进入后台管理：
在后台管理界面(这是最原始，也是最清爽的后台管理界面)，先点开"外观"项目先看看这里的默认内容：
可以看到，默认外观下就只有"主题"和"编辑"2个内容(这里mark一下，可以和后面安装Argon主题之后的外观下的内容相对比)，主题部分包含了3个很简单主题：
直接点击"安装新主题"：
然后点击"上传主题"：
选择前面下载的Argon主题包(argon-theme-master.zip)进行安装：
然后一般会遇到如下报错：
这是因为wordpress是使用PHP语言开发的，而php.ini 是 PHP 的主配置文件，它定义了 PHP 的全局设置，包括 upload_max_filesize、post_max_size 等参数，其中upload_max_filesize控制了上传文件的大小，默认值是2M，超过了Argon主题zip包5.5M的大小，所以报错。这时需要先突破上传2M的限制，具体操作参看文章：奇技淫巧系列 WordPress 上传文件大小超过php.ini限制问题的解决方案汇总。随后重新上传Argon主题zip包，成功：
在主题中已经可以看到Argon主题了：
接着点击红框中的"启用"使Argon主题称为当前主题：
Argon主题带来了什么？
首先是首页的变化：
是不是感觉档次一下子就上升了很多？再来看看启用了Argon主题之后，后台管理页面的巨大变化，注意下图红框，都是相对之前默认界面新增的项目：
这些就是我文章之前说的："别人已经按照某种风格把网站的整体外观，包括页面布局、图像展示和色彩搭配都设计好了，并且还提供了可视化的自定义选项"中提到的"可视化的自定义选项"，也就是依靠这些自定义选项，让新人就可以马上开始搭建自己的博客框架了。
不过，我并不准备一一详细介绍这些功能，毕竟本文只是"独孤九剑总纲"，再说了，真要说清楚，可不是一篇文章能搞定的，都够又写个系列教程了，所以只我准备介绍搭建博客框架需要的几个基本概念以及最常规的操作。
梳理Agron主题几个关于框架设计的基本概念
菜单
在 wordpress主题中，"菜单"是一个非常重要的概念，它指的是在网站的导航栏、侧边栏或其他位置显示的链接集合。菜单让用户能够轻松浏览网站的不同部分，并访问特定的页面、分类、文章、或自定义链接。你可以将菜单视为网站的导航结构，它决定了访客如何在网站上移动和查找内容。
还是以我的博客首页为例来展示哪些部分是"菜单"：
上图中的菜单有2个：顶部导航菜单、左侧栏作者个人链接。这2个菜单本质上就是各种"链接"集合，指向可以用链接来表示的任何内容：本站的分类、文章和页面、图片、视频、音频、或者其他站的内容，只不过在Argon主题的加持下，如果把链接集合放在"顶部导航"菜单的位置，就会显示成上方红框的样子；放在"左侧栏作者个人链接"位置，就会显示成左侧红框的样子。
除了顶部导航菜单、左侧栏作者个人链接菜单，其实还有"左侧栏友情链接"菜单和"左侧栏"菜单:
这2个菜单也是在"左侧栏作者个人链接"菜单的位置上下，不过我试用时显示出来的格式有问题，而且看起也不美观，我就没用，一般来说，"顶部导航"和"左侧栏作者个人链接"这2个菜单就足够了。
分类
在 WordPress 主题中，"分类"(Categories)是一种常见的内容组织方式，管理员可以将文章归类到不同的分类中，读者可以直接从分类入口进入浏览和查找相同类别的内容。分类下可以直接是文章、页面等直接内容，也可以是其他分类(如果分类下仍旧是分类，那么上级分类可以称为一级分类，下级分类可以称为二级分类)。
而在菜单中，分类也可以提供更加直观的分层内容展示效果，以我的博客首页为例。
分类下可以嵌套分类，例如我博客的"技术殿堂"部分：
分类下也可以是直接内容，例如我博客的"其他功能"部分：
文章
在 WordPress 中，"文章"(Posts)是网站上发布的动态内容类型，通常用于博客、新闻、更新等。文章是按照时间顺序排列的，最新的文章会显示在最前面，它们是 WordPress 最常用的内容类型之一，适合发布与时间相关的内容，比如新闻、博客更新、评论等。
以我博客为例：
上图红框部分都是文章，默认排列顺序是从上到下发布时间由新到旧(最上面的置顶文章除外)。
主要特点：
- 时间敏感：文章是按时间顺序发布的，因此它们适合用于博客、新闻站点等内容定期更新的网站。
- 分类和标签：文章可以归入不同的分类（Categories）和标签（Tags），帮助组织和分类内容，使用户更容易找到相关的文章。
- 层级结构：文章没有层级结构，所有文章都是平等的，并按时间顺序排列
- 动态内容：文章通常会随着时间推移被新文章覆盖，但它们会保留在归档中，用户仍然可以通过分类、标签、日期、或搜索功能找到过去的文章。
- 评论功能：文章通常带有评论功能，允许读者与内容互动，发表他们的看法和意见。
- RSS 订阅：文章内容可以通过 RSS（Really Simple Syndication）订阅，用户可以在他们的 RSS 阅读器中接收最新的文章更新。
- 展示位置：通常显示在博客首页或文章列表页面，并可以通过分类、标签、时间等条件进行过滤和排序。
注：我平时撰写的内容都是采用文章的方式来写的。
页面
在 WordPress 中，"页面"(Pages)是一种静态内容类型，通常用于发布网站上的永久性内容。与文章不同，页面不是按时间顺序排列的，也不与分类或标签相关联。页面通常用于发布不经常更新或需要长期保留的信息。
以我博客为例，属于页面的内容有"说说"：
"归档"：
"留言板"：
"友情链接"：
等等。
主要特点：
- 静态内容：页面适用于不需要频繁更新的信息，比如“关于我们”、“联系我们”、“服务”、“隐私政策”等。
- 分类和标签：页面不使用分类和标签系统。页面更适合独立的、永久性的内容，而不是需要分类的动态内容。
- 层级结构：页面支持层级结构，这意味着一个页面可以设置为另一个页面的子页面，方便组织和管理。例如，你可以创建一个名为“公司介绍”的页面，并在其下添加“团队成员”、“历史沿革”等子页面。
- 不显示发布日期：与文章不同，页面通常不会显示发布日期，因为它们的内容通常与时间无关。
- 没有分类和标签：页面不使用分类或标签系统，这使得它们更适合用于非博客类型的内容。
- 页面模板：许多 WordPress 主题提供了多种页面模板，允许你为不同的页面选择不同的布局和设计。
- 展示位置：通常用于网站的固定部分，通常链接在网站的主导航菜单或页脚中，作为网站结构的一部分。
注：在Argon主题中提供了3种博客常用功能的页面模板：说说、归档、留言板，不同类型的主题提供的模板数量和功能都不一样。
左侧栏
左侧栏是Argon主题非常重要的一个展示部分，也是默认就提供的。
原始版左侧栏见默认首页的左侧红框部分，如下图：
而完全版左侧栏见我博客首页：
是不是霸气了很多？
小工具
小工具(Widgets)是Argon 主题中一些可自定义的内容模块，用户可以将这些模块添加到网站的侧边栏、页脚或其他小工具区域中，这些小工具可以帮助你丰富网站的内容和功能，提供更好的用户体验，主要包括3种小工具：
这其中，"左侧栏小工具"和"站点概览额外内容"主要是对左侧栏的优化，右侧栏小工具需要在Argon主题中选择三栏显示才会出现，实际效果见我博客：
注：小工具能提供的选项和你安装的插件有关。
附加知识：图标字体(Icon Fonts)
什么是图标字体
图标字体(Icon Fonts)是一种将图标存储在字体文件中的技术。与传统的位图图标不同，图标字体使用矢量图形，因此它们可以根据需要缩放，而不会损失质量，这使得它们非常适合用于响应式网页设计。
这么说概念太抽象，还是以我的博客为例：
上面几张图中，所有红框部分的图标都是图标字体，这也是我很长一段时间一直想要的功能，但是当时不知道这叫啥，搜都不知道用什么关键字搜(搜出来都是favicon.ico，网站图标，根本就不是一码事)，干着急了很久。
图标字体的工作原理
和一般的图片(包括上面提到的favicon.ico)以URL加载形式不同，图标文件是以<i class="fa**** fa****"></i>的形式出现的，如下图：
上图中的导航标签栏原本只能填写文字，也只能显示文字，但是图标字体却能在原本只能显示文字的区域显示图标，这就得益于前面提到的"将图标存储在字体文件中"：字体文件不仅用于渲染文字字符，还可以包含图标字体，这些图标作为字体字形（glyphs）存储在字体文件中，当浏览器加载并渲染这些字体文件时，它既能显示文字也能显示这些图标。这使得图标字体能够像文字一样，通过 CSS 轻松控制大小、颜色和样式。
字体来源是由CSS的@font-face规则来引用的，例如：
通过这个规则，浏览器知道应该下载指定本地路径上(或者URL)的字体文件，并应用于网页上的相应文本。
当浏览器解析 HTML 和 CSS 文件时，它会根据 CSS 中的字体定义找到并加载必要的字体文件。如果字体文件托管在本地服务器上，浏览器会向该服务器发送请求；如果字体文件托管在 CDN上，浏览器会向 CDN 发送请求，图标字体也是类似。
注：由于图标字体被认为是"字体"，浏览器会自动加载并渲染这些图标，确保在不同设备上显示一致的效果，所以图标字体广泛支持大多数现代浏览器，兼容性很好。
如何使用图标字体
默认情况下，wordpress并没有图标字体库(例如上面规则中的’FontAwesome’，就是最受欢迎的图标字体库之一，提供了数千个免费和高级图标)，所以需要通过插件的方式单独安装：
然后即刻使用Font Awesonme的图标字体了，其官网地址如下：https://fontawesome.com/。
假设我们选择其中一个图标，比如上图中左上角的房子(house)，点击进去：
点击上图中
<i class="fa-solid fa-house"></i>即可复制图标地址，这个知识点大家mark一下，后面会用到。
实战：使用Argon主题搭建新手博客框架
注：再次重申，本次实战以搭建博客框架主题为主，不涉及太多技术细节，否则根本写不完。
创建博客常用的页面
Argon中，有3个页面模板，分别是说说、归档、留言板，先创建这3个页面：
同理创建留言板和归档页面(分别选择各自的模板)，其中留言板注意开启讨论，最终页面情况如下：
创建示范一级分类、示范二级分类
同理创建多个二级分类：
最后分类如下：
创建顶部导航菜单和作者个人链接菜单
顶部导航菜单
然后将前面的3个页面都添加到顶部导航菜单，和示范一级分类同级：
然后看看实际效果：
和我的博客很像了吧。
作者个人链接菜单
这个就随意弄几个链接意思一下，不过，首先还是要像顶部导航菜单一样新建一个菜单：
同理添加其他几个任意链接，最终结果如下：
创建小工具
小工具之中，"左侧栏小工具"和"站点概览额外内容"最常用，这2者都是对左侧栏部分的丰富，至于"右侧栏小工具"，因为这个必须和Argon主题的"三栏"选项相配合，而三栏本身不是太美观，用的人也不多(我除外，不过我也在犹豫，好像的确用处不大，关键还不太好看～)，所以本文中不涉及，就简单以"站点概览额外内容"和"左侧栏小工具"为例。
然后再添加个诗篇位置，这样可以显得自己很有文化：
可以调整添加内容的显示顺序，比如我想要时间进度条在诗歌的下面：
同理操作"左侧栏小工具"，随便加个"登录/注销"功能吧，过程，我就不演示了，最终效果如下：
注1：随着后续安装的插件越来越多，在"站点概览"和"左侧栏小工具"部分可选的内容就越多。
注2：这几个小工具区域只是默认Argon提供的，一般也够用了，不过如果你觉得不够用，可以使用区块工具自己添加。
画龙点睛之笔：图标字体
写到现在，整个博客的基本框架其实已经算是搭建起来了：
简洁大方，还是可以一战的了，不过嘛，是不是感觉过于朴素了？还可以加上一点点缀：图标字体，所有菜单项目对应的文字都可以在前面加上图标字体作为修饰。
先根据前面的介绍，为某个菜单项目在Font Awesonme的官网找到自己心仪的图标，然后在菜单对应项目的导航标签文字之前粘贴对应图标字体的"地址"，然后保存菜单即可，以谷歌链接为例：
同样的办法处理其他菜单项目的导航标签，最终效果如下(偷懒就用了2个图标字体，意思到位就行了)：
自此，框架基本搭建好了，其他的很多显示选项，比如背景图片、头像、公告、使用Argon主题风格显示后台管理界面等等内容，都在主题Argon选项中进行设置：
大家自己慢慢试就好了，我也不多讲了(不然又是一个大长篇)，并且网上也有很多Argon主题的配置教程，大家可以多参考参考。
常用插件
这个问题我简单说几句，因为的确有些插件对wordpress来说的确特别重要。
1、反垃圾评论插件"Akismet"
这是是默认wordpress自带的2大插件之一，非常有用，如果开了评论功能的话，就真的需要这个：
2、WP Githuber MD
为wordpress 网站提供全功能markdown语法支持的插件，我平时写文章基本都是用obsidian直接用markdown格式写的，而默认wordpress不支持markdown，使用该插件以后，对于绝大部分不包含特殊字符的文章，都可以直接将写好的markdown格式内容直接粘贴发布(有特殊字符还是需要转换成html)。
没有安装插件前后台新建文章的界面是这样的：
安装插件之后是这样的：
3、WP Mail SMTP
使wordpress能够对外发送邮件(插件或者自身功能需要):
4、Font Awesome
这个前面已经提到了，不重复了。
这些是我认为wordpress最起码需要装的提供基本功能的插件，至于其他的可选插件，那可是太多了，SEO相关的就有好几个选择，写不完，根本写不完，而且也不是每个人都用得上，所以干脆不提了。
注：关于wordpress插件的使用，大家也要慎重。初期大家可能都会花不少精力去尝试不同的插件所带来的功能，这个是正常的，我也一样。不过，插件虽然便利，但是也可能为wordpress带来漏洞，比如我使用"TranslatePress"来使博客支持多语言之后，每天就开始被大量扫描trp-ajax.php：
我查了下，貌似这个页面里面某些权限有漏洞，新版本可能修复，但是对于没有及时升级到新版的朋友，就比较危险了，因此，插件最好还是只留必须的，可有可无的，能不用就不用吧。
后话
wordpress涉及到的东西太多了，其实完全可以写个系列教程(就以插件来说，1个好的插件提供的功能写一篇文章来介绍都不过分)，只是，我现在本来也只是处于半懂不懂的程度，只能说个大概，实在没那本事写系列教程，所以本文介绍的知识点基本都只是围绕着"搭建个人博客框架"这个大目标来介绍，旨在帮助大家快速度过wordpress的新手期，后续其他的技术细节，就需要大家把博客框架搭建起来之后，再继续深入学习了。
不过，wordpress的教程网上很多，随便搜搜就是一大堆，谁叫wordpress 是目前全球使用最多的cms呢(超过了60%的市场份额，就连白宫官网也被特朗普政府在2017年从Drupal改成wordpress)。所以，使用wordpress建站，你还可以吹牛逼说和白宫官网用的技术一样，关键在于还没人能说你乱说～。
对于主题，其实用不用Argon并不重要，如果不喜欢Argon，换成自己喜欢的就是，配置都是大同小异的，就是个习惯问题，本文只是用Argon为例来演示而已，毕竟我只熟悉这个。当然，Argon本身足够轻量级(zip包才5.5MB，我看有些主题20-30MB，估计功能无敌)，风格我也是真喜欢。
不过，对一个博客来说，最关键的其实不是使用的主题有多酷炫、功能有多繁多，而是坚持：只要博客一直存在、内容一直在更新(不管博客内容是哪方面)，总会有和你志同道合的朋友能够在互联网的海洋中找到你，然后与你同行。
另1：其实完成这些步骤之后，某种角度上来说，你也可以对外宣称做过部分前端的工作了～～。
另2：其实本来不太想写这篇文章(写起来太麻烦了，要截好多图，深度懒人病患者的我不太适合干这种精细活)，不过考虑到正在构思的、名字类似于：“从零开始建站之零成本、一条龙解决方案”的文章里面确实还差这方面的内容，所以只能勉为其难写一下了。
