Preface

It has been almost exactly one year since I wrote my first blog post. After more than a year of continuous learning and various efforts, I have just gotten out of the novice period of WordPress.

However, before writing my first article, I had spent about a month concentrating on "building the foundation": supplementing the most basic knowledge about building a website. In other words, I spent a month learning to build the basic framework of the blog, to a level that was barely presentable (so far, it has gone through at least 3 major revisions and countless minor revisions), and then I was in the mood to start writing articles.

Why is the efficiency so low? Because I started learning from a complete beginner in website building. How beginner was I? I didn’t know any professional vocabulary, let alone any structural knowledge. Take the homepage of my current blog as an example:

If each red box in the above picture is considered a knowledge point and requires one or more steps to set, I don't even know which red boxes are considered knowledge points, let alone the names of the majors corresponding to these red box parts. This leads to a very troublesome thing: I don't know how to search if I want to, and I don't know how to ask questions online. I can't ask like this: "There is a website that I saw and thought it was okay, but I forgot to take a screenshot. Anyway, there are several boxes on the far left and right of the website from top to bottom: there is a calendar, a search function, some can be clicked directly, and some have Monkey King avatars. There is also a horizontal row at the top of the webpage that can be clicked. I don't know what it is, but I want to achieve that effect. What should I do?" Well, will I be beaten to death if I ask questions like this?

So, during this month, I read a lot of articles that introduced how to use WordPress to build a blog. By piecing together some of the elements of the website, I was able to associate them with common professional terms, such as: themes, navigation menus, left (right) sidebar menus, category directories, custom links, pages, articles, comments, archives, chats, icon fonts, etc. (I only figured out some of them in the past two days).

It is because I have experienced this stage that I know how difficult this period is. Therefore, I hope that through this article, more friends who want to build their own websites with WordPress but do not have the relevant basic knowledge can quickly get through this awkward novice period (I believe that this entry stage has discouraged many friends, and even I almost gave up, because divergent learning without direction is too uncomfortable): at least know the various elements (components) of the website page, know the corresponding professional vocabulary, know where to set it up, and when you encounter a problem you don’t understand, at least know which direction to look for a solution.

Therefore, this article will take a brand new WordPress site as an example and look at "how to build a personal blog framework with WordPress from scratch" from the perspective of a complete newbie.

Note: For an example of how to use the docker run command to build a new WordPress site, please refer to my other article:Docker series uses Docker to set up a blog slave site based on WordPress and implement regular backup of master-slave site configurationHowever, for newcomers, the docker-compose method is more friendly. There are tutorials everywhere on the Internet. Just search for them. Of course, it is also possible to use the Baota panel to build WordPress in source code mode. In short, there are many optional methods, just choose the one you are used to.

Using WordPress to build a blog framework

The strongest support for newcomers: Theme

When we open the WordPress homepage for the first time, we can see an initial interface similar to the following:

In fact, as you can see, this interface still has the most basic functions: under the "New" menu, you can create new articles, new media, new pages, and new users; when editing a site, you can even start designing the entire website structure directly. However, because it is too basic, it requires very solid professional knowledge and is not very friendly to newcomers.

Therefore, we need to use some techniques to make it easier and more intuitive to design websites in the future. It would be best if we could just use the mouse to select "yes" or "no" to design a website.

So, is there such a trick? Of course there is, the simplest one is actually to choose a suitable "theme".

So what is a "theme"? In a nutshell: a theme is a website that someone has designed in a certain style, including page layout, image display, and color matching. It also provides visual customization options. You only need to select the style and function modules according to your preferences to generate a website framework in your favorite style.

This is really good news for pure white newlyweds. Are you surprised? Are you surprised?

Argon theme from installation to use

Choose a suitable theme

But what kind of theme is considered a suitable theme? I think at least it should be aesthetically pleasing to your taste, and the default "page layout" and "function" options should cover your regular needs.

In view of the above requirements, I recommend the Argon theme. As for why I recommend Argon, it is because I am using it on my current blog (so I am familiar with it), or I learned it from others (I learned it from others' tutorials when I didn't know anything), and I have only used this theme (this is the most important), so I recommend this one. It is reasonable, right?

The Argon theme is concise and elegant, very refreshing, and has complete built-in functions. It is very suitable for beginners to learn how to build personal blogs. At present, I have seen many bloggers who use WordPress to build blogs (including many great bloggers) are using this theme. Most importantly, there are many very detailed tutorials on the Internet about the use of the Argon theme and many articles sharing its optimization experience that can be used for reference, so this article also uses this theme as an example.

---

Let’s first take a look at the features that the Argon theme provides:

• Lightweight and beautiful – 使用 Argon Design System 前端框架，细节精致，轻盈美观
• Highly customizable – 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等，提供了丰富的自定义选项
• Night Mode – 支持日间、夜间、纯黑三种模式，并可以根据时间自动切换或跟随系统夜间模式
• Many functions – Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示
• Pjax – 支持 Pjax 无刷新加载，提高浏览体验
• Links – 支持使用 WordPress 自带的链接管理器进行友链管理，支持多种友链样式
• "Say" function – 随时发表想法，并在专门的 "说说" 页面展示，也支持说说和首页文章穿插
• Comment function extension – Ajax 评论，评论支持 Markdown、验证码、再次编辑、显示 UA、悄悄话模式、回复时邮件通知、查看编辑记录、无限加载等功能
• Many functions – 文章目录、阅读进度、Mathjax 或 Katex 公式解析、图片放大预览、Pangu.js 文本格式化、平滑滚动等
• Rich short codes – 支持通过短代码在文章中插入 TODO、标签、警告、提示、折叠区块、Github 信息卡、时间线、隐藏文本、视频等模块
• Adapting to Gutenberg editor – 支持使用 Gutenberg 编辑器可视化插入区块
• Multilingual – 支持中文、英文、俄文等语言
• other – 自适应、精心优化的文章阅读界面 CSS、可切换衬线/非衬线字体、可自定义 CSS 和 JS、支持使用 CDN 加速静态文件访问、SEO 友好、Banner 打字动画、留言板页面、文章脚注等

---

The project address of Agron theme on Github is:Github Argon, you can download it directly. Friends who don't have access to Github can also download it from my blog's dedicated file sharing link:Unrivaled file sharing, access password "blog.tangwudi.com".

Installing the Argon Theme

"Dashboard" directly enters the backend management:

In the backend management interface (this is the most original and refreshing backend management interface), first click on the "Appearance" item to take a look at the default content here:

As you can see, the default appearance only has two contents: "Theme" and "Edit" (mark them here to compare with the contents of the appearance after installing the Argon theme later). The theme part contains three very simple themes:

Simply click "Install New Theme":

Then click "Upload Theme":

Select the Argon theme package (argon-theme-master.zip) downloaded earlier to install:

Then you will generally encounter the following error:

This is because WordPress is developed using PHP, and php.ini is the main configuration file of PHP, which defines the global settings of PHP, including parameters such as upload_max_filesize and post_max_size. The upload_max_filesize controls the size of the uploaded file, and the default value is 2M, which exceeds the size of the Argon theme zip package of 5.5M, so an error is reported. At this time, you need to break through the 2M upload limit first. For specific operations, please refer to the article:A summary of solutions to the problem of WordPress uploading files exceeding the php.ini limit. Then re-upload the Argon theme zip package, successfully:

The Argon theme can already be seen in the theme:

Then click "Enable" in the red box to make the Argon theme the current theme:

What does the Argon theme bring?

First, the changes to the homepage:

Do you feel that the level has been raised a lot? Let's take a look at the huge changes in the backend management page after enabling the Argon theme. Note that the red boxes in the figure below are all new items compared to the previous default interface:

These are what I said before in the article: "Others have already designed the overall appearance of the website, including page layout, image display and color matching according to a certain style, and also provided visual customization options." The "visual customization options" mentioned here mean that with these customization options, newcomers can start building their own blog framework right away.

However, I am not going to introduce these functions in detail one by one. After all, this article is just the "General Outline of Dugu Nine Swords". Besides, if I really want to explain it clearly, it cannot be done in one article. It is enough to write another series of tutorials. So I am only going to introduce a few basic concepts and the most common operations needed to build a blog framework.

Sorting out some basic concepts about framework design in Agron theme

menu

In WordPress themes, "menu" is a very important concept. It refers to the collection of links displayed in the navigation bar, sidebar, or other locations of the website. The menu allows users to easily browse different parts of the website and access specific pages, categories, articles, or custom links. You can think of the menu as the navigation structure of the website, which determines how visitors move around and find content on the website.

Let’s take my blog homepage as an example to show which parts are the “menu”:

There are two menus in the picture above: the top navigation menu and the author's personal links on the left column. These two menus are essentially a collection of various "links", pointing to any content that can be represented by a link: the site's categories, articles and pages, pictures, videos, audio, or content from other sites. However, with the support of the Argon theme, if the link collection is placed in the "top navigation" menu position, it will be displayed as a red box above; if it is placed in the "author's personal links on the left column", it will be displayed as a red box on the left.

In addition to the top navigation menu and the author's personal link menu on the left column, there are also the "Left Column Friendly Links" menu and the "Left Column" menu:

These two menus are also located above and below the "Author's Personal Links in the Left Column" menu, but when I tried it, the displayed format had problems and it didn't look beautiful, so I didn't use it. Generally speaking, the two menus of "Top Navigation" and "Author's Personal Links in the Left Column" are enough.

Classification

In WordPress themes, "Categories" is a common way to organize content. Administrators can classify articles into different categories, and readers can browse and search for content in the same category directly from the category entrance. Categories can be direct content such as articles and pages, or other categories (if there are still categories under categories, the parent category can be called a first-level category, and the child category can be called a second-level category).

In the menu, categories can also provide a more intuitive layered content display effect, taking my blog homepage as an example.
Categories can be nested under categories, such as the "Technology Hall" section of my blog:

Categories can also be direct content, such as the "Other Features" section of my blog:

article

In WordPress, "Posts" are a type of dynamic content published on the website, usually used for blogs, news, updates, etc. Posts are arranged in chronological order, with the latest posts displayed at the front. They are one of the most commonly used content types in WordPress and are suitable for publishing time-related content, such as news, blog updates, comments, etc.

Take my blog as an example:

The red-framed parts in the above picture are all articles. The default sorting order is from top to bottom and from new to old in terms of publishing time (except for the top pinned article).

Key Features:

1. Time sensitive: Articles are published in chronological order, so they are suitable for websites with regularly updated content such as blogs and news sites.
2. Categories and Tags：Articles can be classified into different categories and tags to help organize and categorize content, making it easier for users to find related articles.
3. Hierarchy: There is no hierarchical structure of articles, all articles are equal and are arranged in chronological order
4. Dynamic content: Articles are typically covered by new articles over time, but they remain in the archive and users can still find past articles by category, tag, date, or search function.
5. Comments: Articles often come with a comment feature that allows readers to interact with the content and express their views and opinions.
6. RSS Feed: Article content can be subscribed via RSS (Really Simple Syndication), and users can receive the latest article updates in their RSS readers.
7. Placement: Usually displayed on the blog homepage or article list page, and can be filtered and sorted by category, tag, time and other conditions.

Note: The content I usually write is in the form of articles.

page

In WordPress, "pages" are a type of static content that are usually used to publish permanent content on a website. Unlike articles, pages are not arranged in chronological order and are not associated with categories or tags. Pages are usually used to publish information that is not updated frequently or needs to be retained for a long time.

Taking my blog as an example, the contents of the page include "Say":

"Archive":

"Message Board":

"Friendly Links":

etc.

Key Features:

1. Static content：The page is suitable for information that does not need to be updated frequently, such as "About Us", "Contact Us", "Services", "Privacy Policy", etc.
2. Categories and Tags: Pages do not use a category or tag system. Pages are more suitable for independent, permanent content rather than dynamic content that needs to be categorized.
3. Hierarchy：Pages support hierarchical structure, which means that a page can be set as a subpage of another page, which is convenient for organization and management. For example, you can create a page called "Company Introduction" and add subpages such as "Team Members" and "History" under it.
4. Do not display publication date: Unlike articles, pages do not usually display a publication date because their content is usually not time-dependent.
5. No categories or tags: Pages do not use a category or tag system, which makes them more suitable for non-blog type content.
6. Page Templates: Many WordPress themes offer a variety of page templates, allowing you to choose different layouts and designs for different pages.
7. Placement: Typically used for fixed parts of a website, usually linked in the site's main navigation menu or footer as part of the site's structure.

Note: The Argon theme provides three page templates for common blog functions: comment, archive, and message board. Different types of themes provide different numbers of templates and different functions.

Left column

The left column is a very important display part of the Argon theme and is provided by default.
The left column of the original version shows the red frame on the left side of the default homepage, as shown below:

For the full version, see the left column of my blog homepage:

Is it a lot more domineering?

Gadgets

Widgets are some customizable content modules in the Argon theme. Users can add these modules to the sidebar, footer or other widget areas of the website. These widgets can help you enrich the content and functionality of the website and provide a better user experience. There are mainly 3 types of widgets:

Among them, "Left column widgets" and "Site overview additional content" are mainly optimizations for the left column. The right column widgets will only appear when you select three columns in the Argon theme. The actual effect can be seen in my blog:

Note: The options available to the widget depend on the plugins you have installed.

Additional knowledge: Icon Fonts

What are Icon Fonts

Icon fontsIcon Fonts is a technology that stores icons in font files. Unlike traditional bitmap icons, icon fonts use vector graphics, so they can be scaled as needed without losing quality, which makes them ideal for responsive web design.

This concept is too abstract, so let’s take my blog as an example:

In the pictures above, all the icons in the red boxes are icon fonts. This is a feature I have been wanting for a long time, but I didn’t know what it was called at the time, and I didn’t know what keywords to use to search (all the results were favicon.ico, website icons, which are completely different things), so I was anxious for a long time.

How Icon Fonts Work

Unlike general images (including the favicon.ico mentioned above) that are loaded in the form of URLs, icon files are loaded in the form ofIt appears in the form of, as shown below:

The navigation tab bar in the above picture can only be filled with text and can only display text, but icon fonts can display icons in areas that can only display text. This is due to the aforementioned "storing icons in font files": font files are not only used to render text characters, but can also contain icon fonts. These icons are stored in font files as font glyphs. When the browser loads and renders these font files, it can display both text and icons. This allows icon fonts to be easily controlled in size, color, and style through CSS, just like text.

The font source is from CSS@font-faceRules are used to reference, for example:

Through this rule, the browser knows that it should download the font file at the specified local path (or URL) and apply it to the corresponding text on the web page.

When the browser parses the HTML and CSS files, it will find and load the necessary font files according to the font definition in the CSS. If the font file is hosted on a local server, the browser will send a request to the server; if the font file is hosted on a CDN, the browser will send a request to the CDN, and the same is true for icon fonts.

Note: Since icon fonts are considered "fonts", browsers automatically load and render these icons to ensure consistent display effects on different devices, so icon fonts are widely supported by most modern browsers and have good compatibility.

How to Use Icon Fonts

默认情况下，wordpress并没有图标字体库(例如上面规则中的’FontAwesome’，就是最受欢迎的图标字体库之一，提供了数千个免费和高级图标)，所以需要通过插件的方式单独安装：

Then use Font Awesonme's icon font immediately. Its official website address is as follows:https://fontawesome.com/.

Suppose we select one of the icons, such as the house in the upper left corner of the picture above, and click in:

Click on the picture aboveYou can copy the icon address. Please mark this knowledge point as it will be used later.

Practice: Using Argon Theme to Build a Novice Blog Framework

Note: Once again, I would like to reiterate that this practice is mainly about building a blog framework theme and does not involve too many technical details, otherwise it would be impossible to finish writing it.

Create common blog pages

In Argon, there are three page templates, namely, talk, archive, and message board. Create these three pages first:

Similarly, create a message board and archive page (select their own templates respectively). Note that the discussion on the message board should be enabled. The final page is as follows:

Create demonstration first-level classification and demonstration second-level classification

Similarly, create multiple secondary categories:

The final classification is as follows:

Create a top navigation menu and author personal link menu

Top navigation menu

Then add the previous three pages to the top navigation menu, at the same level as the demonstration first-level category:


Then take a look at the actual effect:

It’s very similar to my blog.

Author Personal Links Menu

I'll just randomly create a few links for this one, but first I'll need to create a new menu like the top navigation menu:

Similarly, add several other arbitrary links, and the final result is as follows:

Create a Gadget

Among the widgets, "Left Sidebar Widgets" and "Site Overview Additional Content" are the most commonly used. Both of them enrich the left sidebar. As for "Right Sidebar Widgets", this must be coordinated with the "Three Columns" option of the Argon theme, and the three columns themselves are not very beautiful, and not many people use them (except me, but I am also hesitant, it seems that it is indeed not very useful, and the key is that it does not look very good~), so it is not involved in this article. I will simply take "Site Overview Additional Content" and "Left Sidebar Widgets" as examples.

Then add a poem position, so that you can appear to be very cultured:


You can adjust the display order of the added content, for example, I want the time progress bar to be below the poem:

Similarly, operate the "left column widget" and add a "login/logout" function. I won't demonstrate the process. The final effect is as follows:

Note 1: As more and more plugins are installed, more options will be available in the "Site Overview" and "Left Sidebar Widgets" sections.

Note 2: These widget areas are just the default ones provided by Argon, which are usually sufficient. However, if you think they are not enough, you can use the block tool to add them yourself.

The finishing touch: icon fonts

Up to now, the basic framework of the entire blog has been built:

Simple and elegant, it is still worth a try, but does it feel too plain? You can also add a little embellishment: icon fonts. All the text corresponding to the menu items can be decorated with icon fonts in front.

First, according to the previous introduction, find your favorite icon for a menu item on the official website of Font Awesonme, then paste the "address" of the corresponding icon font before the navigation label text of the menu corresponding item, and then save the menu. Take the Google link as an example:

The same method is used to handle the navigation labels of other menu items. The final effect is as follows (I just used two icon fonts to get the meaning right):

Since then, the framework has been basically built. Many other display options, such as background images, avatars, announcements, using the Argon theme style to display the backend management interface, etc., are all set in the theme Argon options:

You can try it slowly by yourself, I will not say more (otherwise it will be another long article), and there are many Argon theme configuration tutorials on the Internet, you can refer to them.

Common plug-ins

I will briefly say a few words about this issue, because some plug-ins are indeed particularly important for WordPress.

1. Anti-spam plugin "Akismet"

This is one of the two default plugins that comes with WordPress. It is very useful. If you have enabled the comment function, you really need this:

2. WP Githuber MD

A plug-in that provides full-featured markdown syntax support for WordPress websites. I usually write articles directly in markdown format using obsidian, but WordPress does not support markdown by default. After using this plug-in, for most articles that do not contain special characters, you can directly paste and publish the written markdown format content (special characters still need to be converted into html).
The interface for creating a new article before and after the plugin is installed is as follows:

After installing the plugin, it looks like this:

3. WP Mail SMTP

Enable WordPress to send external emails (needed by plugins or its own functions):

4. Font Awesome

This has been mentioned before, so I won’t repeat it here.

These are the plugins that I think are the minimum necessary to install for WordPress to provide basic functions. As for other optional plugins, there are too many of them. There are several SEO-related options, and I can’t list them all. Not everyone can use them, so I won’t mention them.

Note: You should be careful when using wordpress plugins. In the early stage, you may spend a lot of time trying out the functions brought by different plugins. This is normal, and I am no exception. However, although plugins are convenient, they may also bring vulnerabilities to wordpress. For example, after I used "TranslatePress" to make my blog support multiple languages, trp-ajax.php began to be scanned a lot every day:

I checked and it seems that there are loopholes in some permissions of this page. The new version may fix it, but it is quite dangerous for friends who have not upgraded to the new version in time. Therefore, it is best to keep only the necessary plug-ins and not use the dispensable ones if possible.

Afterword

There are so many things involved in WordPress that a series of tutorials can actually be written (taking plug-ins as an example, it is not excessive to write an article to introduce the functions provided by a good plug-in). However, I only have a partial understanding of it now, so I can only give a general idea. I really don’t have the ability to write a series of tutorials. Therefore, the knowledge points introduced in this article are basically just centered around the big goal of "building a personal blog framework". It aims to help everyone quickly get through the novice period of WordPress. For other technical details in the future, you will need to build the blog framework and then continue to study in depth.

However, there are many WordPress tutorials online. Just search and you will find a lot of them. WordPress is the most widely used CMS in the world (more than 60% in market share. Even the White House website was changed from Drupal to WordPress by the Trump administration in 2017). So, if you use WordPress to build a website, you can still brag that it uses the same technology as the White House website. The key is that no one can accuse you of talking nonsense.

As for the theme, it is not important to use Argon or not. If you don't like Argon, you can change it to one you like. The configurations are similar. It's just a matter of habit. This article just uses Argon as an example for demonstration. After all, I am only familiar with it. Of course, Argon itself is lightweight enough (the zip package is only 5.5MB, and I see some themes are 20-30MB, which are probably invincible), and I really like the style.

However, for a blog, the most important thing is not how cool the theme is or how many functions it has, but persistence: as long as the blog exists and the content is updated (no matter what the blog content is about), there will always be like-minded friends who can find you in the ocean of the Internet and then walk with you.

Another 1: In fact, after completing these steps, from a certain perspective, you can also claim to the outside world that you have done some front-end work.

Another 2: Actually, I didn’t want to write this article (it’s too troublesome to write, and I have to take a lot of screenshots. As a serious lazy person, I’m not suitable for this kind of delicate work), but considering that the article I’m currently conceiving, with a name similar to “Zero-cost, one-stop solution for building a website from scratch”, is indeed lacking content in this regard, so I can only write it reluctantly.