如何快速搭建自己的博客网站（二）

卜卜123a

已于 2024-01-10 12:11:23 修改

阅读量478

点赞数 11

分类专栏： web博客文章标签：网络前端 web

于 2024-01-10 10:30:52 首次发布

本文链接：https://blog.csdn.net/qq_45833217/article/details/135497126

版权

web博客专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如何快速搭建自己的博客网站（二）

上回书说道，利用azure的云服务器已经快速且成功搭建了自己的博客网站，并且给自己的博客网站设定了一个自定义的域名。

这次的帖子就是分享一下在WordPress管理后台中为我们的网站加入文章内容和美化。首先，还记得自己的WP管理员密码吗？复习一下，就是自己创建时候的这个密码：
在这里插入图片描述

想起来了吗小老弟，下面就开始自己的博客美化吧。

首先声明一点，因为我之前从来没有用过php，但是WP就是基于php开发的，但是我会那么一点点前端的东西，也仅仅只是了解，局限于看得懂的程度，如果你也和我一样，那么WordPress可谓是相当友好了，基础的功能几乎不需要自己编写，图形化界面就可以完成。当然，如果你是大佬，也可以做更多丰富的内容。

登录WP后台-选择一个主题

首先，在Azure的面板中找到你的应用程序，点击“浏览”，或者直接在浏览器中输入你的域名。在域名后边加上/wp-admin，回车即可访问到后台管理界面：

在第一次进入后台管理界面时，需要填写我们在Azure创建网站时的管理员账号和密码：

就像上边这样，但是你的图像可能不是那么的“花哨”，这里我使用的是大佬开发的二次元主题“Sakurairo”，这款主题非常之强大而且对新手十分友好，后边我会详细介绍关于“Sakurairo”的主题设定。
【关于Sakurairo的主题界面可以访问Github主页：Github-Sakurairo】

在进入后台之后，你会看到这样一个画面：

在画面的左侧就是WordPress一系列的后台管理功能。

我们常用的就是：

文章：用来写你的帖子
页面：制作新的网页Page
外观：设定你的主题
插件：安装额外的插件
用户：设定登录用户，例如作者，订阅者，游客，管理员等

你会发现，你的画面好像跟我帖子中展示的不太一样，没有关系，因为我在这里使用了“Sakurairo”的主题，所以会多一些东西出来。

主题这个东西，可以说就是WP最核心的基础，如果你想开启一个WP的网站，就必须要选择一款主题，具体的主题内容可以从外观-主题中去浏览。WP的好处就是官方给了许多的主题库，同时还有很多很多个人制作的主题，搭配一些插件非常的好用。

在这里，2021 2022 2023 这几款是非常好用的官方主题，如果你想用和我一样的“Sakurairo”主题的话（效果请参考我的博客），就需要点击画面中的添加新主题

或者你可以选择从主题商城中寻找一款自己喜欢的主题去添加。这里我一开始建站的时候没有浏览太多的资讯，所以就是从主题商城中找了一个开始练习，我个人非常建议自己可以从商城中随便找一款作为练手，尝试写一些帖子试一下。

这里给大家推荐一下上面画面中的【你好ELementor】，这个主题需要一个插件叫做ELementor，具体的功能大家可以自己下载体验，因为很简单所以没有什么需要讲解的地方。它会提供比WP自带的更多自定义的功能，当然也有觉得不好用的，大家可以从网上或者别的帖子去寻找一些更好用的插件和主题。可以参考大佬的帖子：2023年31个最适合博主的WordPress主题

重点来了，我还是非常建议喜欢二次元的朋友~~老二次元~~使用“Sakura”或者“Sakurairo”的主题。

因为我没有用过Sakura主题，我只用过基于Sakura优化的Sakurairo主题，基于没用过就没有发言权的原则，这里我给大家介绍一下Sakurairo主题，总而言之，我觉得非常的好用，首先就是比之前我使用的官方主题更加的顺滑（前端小白的自我感觉），一些动画还有图片加载非常的流畅，另外作为一个完全没有UI设计天赋的人，给我的感受就是“哇c，牛逼”。在Sakurairo的主题中，有随机壁纸的设定，包括自定义的后台管理页面，还有丰富的评论功能，非常适合小白新手进行简单的上手。

那么如何安装并使用“Sakurairo”主题呢？首先，访问它的github主页：https://github.com/mirai-mamori/Sakurairo

或者可以从Gitee镜像下载：https://gitee.com/mirai-mamori/Sakurairo

在Github中，从【release】下载最新的安装包，记得是ZIP格式。

下载完成之后，在【添加新主题】的地方点击，上传zip文件，之后就直接安装就可以啦。

安装成功之后，就可以从自己的主题那里启用“桜いろ”主题了。

设定主题的详细内容

根据Sakurairo的官方文档，里面详细介绍了每一个设置的具体内容，我觉得就没有必要在这个帖子里再赘述了，大家去参考就可以。
官方文档地址：https://docs.fuukei.org/Sakurairo/Preliminary/

这里主要说明一下我遇到的问题。给大家遇到问题时候提供一点思路。

问题：启动Sakurairo主题之后，WP遇到致命错误无法打开

问题描述：未登录的状态下会出现【此站点遇到致命错误】，登录任何一种账户之后可以顺利打开。

在我第一次尝试这个主题时，我右上角的登录已经完成，所以目前是登陆了管理员账号的状态。但是我从微信内置浏览器访问自己的网站时发现，竟然无法打开，出现了下面这样的错误：

经过我~~多年的经验~~，我觉得是主题出现了一些问题，和WordPress什么地方冲突了。原因很简单，在我切换到其他主题的时候，问题就消失了。但是这样可不行啊，我需要的是其他任何人在直接访问这个博客的时候就可以看到我的帖子内容，而不是需要登录管理员账户，而且，作为一个老二次元我就非常想用这个主题，怎么办呢？
开启debug log详细寻找原因吧。

目前在Azure上安装的WordPress是默认关闭Debug Log的，你需要去手动打开，在浏览网上的文章时候，只看到了要去文件夹下面修改wp-config.php文件。但是我是云服务器，我怎么去找到这个文件呢？
下面的步骤可能会帮到你。

首先，如果你是在其他的服务器上部署的，可能就需要一些例如FTP等工具进行访问服务器资源，但是微软的Azure有一个自带的SSH功能，我们可以直接使用它进行轻松的访问：

在自己的【应用服务】的那个web网站的资源中，搜索SSH就可以了，点击进入就可以打开命令端口，有一定的Linux基础的同学会比较熟悉，就是一个Linux命令端口。

如图所示，我们需要一些Linux操作去找到修改wp-config.php的地方：

cd指令去到一个文件夹目录
vim指令打开和编辑一个文件

如果你也是使用的和我一样的Azure部署的WordPress的话，那么wp-config文件应该位于：/var/www/wordpress/下面

运行指令：

cd var/www/wordpress
ls

就可以查看到自己WordPress文件夹下面的文件了，在下面的图中我们可以看到自己的wp-config文件：

接下来运行：

vim wp-config.php

就可以打开这个文件。顺带一提的是，不需要去sudo su获得root权限，这个ssh默认就是root权限。

在打开的文件中，我们可以看到如下所示：

<?php
/**
 * The base configuration for WordPress
 *
 * The wp-config.php creation script uses this file during the installation.
 * You don't have to use the website, you can copy this file to "wp-config.php"
 * and fill in the values.
 *
 * This file contains the following configurations:
 *
 * * Database settings
 * * Secret keys
 * * Database table prefix
 * * ABSPATH
 *
 * @link https://wordpress.org/documentation/article/editing-wp-config-php/
 *
 * @package WordPress
 */

// ** Database settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'database_name_here' );

/** Database username */
define( 'DB_USER', 'username_here' );

/** Database password */
define( 'DB_PASSWORD', 'password_here' );

/** Database hostname */
define( 'DB_HOST', 'localhost' );

/** Database charset to use in creating database tables. */
define( 'DB_CHARSET', 'utf8' );

/** The database collate type. Don't change this if in doubt. */
define( 'DB_COLLATE', '' );

/**#@+
 * Authentication unique keys and salts.
 *
 * Change these to different unique phrases! You can generate these using
 * the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}.
 *
 * You can change these at any point in time to invalidate all existing cookies.
 * This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define( 'AUTH_KEY',         'put your unique phrase here' );
define( 'SECURE_AUTH_KEY',  'put your unique phrase here' );
define( 'LOGGED_IN_KEY',    'put your unique phrase here' );
define( 'NONCE_KEY',        'put your unique phrase here' );
define( 'AUTH_SALT',        'put your unique phrase here' );
define( 'SECURE_AUTH_SALT', 'put your unique phrase here' );
define( 'LOGGED_IN_SALT',   'put your unique phrase here' );
define( 'NONCE_SALT',       'put your unique phrase here' );

/**#@-*/

/**
 * WordPress database table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix = 'wp_';

/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 *
 * For information on other constants that can be used for debugging,
 * visit the documentation.
 *
 * @link https://wordpress.org/documentation/article/debugging-in-wordpress/
 */
define( 'WP_DEBUG', false );

/* Add any custom values between this line and the "stop editing" line. */



/* That's all, stop editing! Happy publishing. */

/** Absolute path to the WordPress directory. */
if ( ! defined( 'ABSPATH' ) ) {
	define( 'ABSPATH', __DIR__ . '/' );
}

/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

在上面的代码中找到：

define( 'WP_DEBUG', false );

这时候需要把debug改成true。需要一点vim的操作知识。

首先输入:i进入到insert的模式，这样就可以修改内容了，在修改完成之后按键盘的ESC推出insert。

之后保存文件并退出，你需要输入：:wq!

因为这是一个只读的基础文件，所以需要一个感叹号去修改保存。注意，在vim里面不要忘记输:，只输入字母是没用的。具体的更多的关于Linux vim指令的操作可以查询其他的帖子。如果你的服务器上装有nano或者gedit这类指令的话就更方便了。

修改保存之后，重启WP，就可以查看到自己的错误日志。例如我的无法访问的情况，错误日志如下：

Fatal error: Uncaught TypeError: mysqli_num_fields(): Argument #1 ($result) must be of type mysqli_result, bool given in /home/site/wwwroot/wp-includes/class-wpdb.php:3868 Stack trace: #0 /home/site/wwwroot/wp-includes/class-wpdb.php(3868): mysqli_num_fields(false) #1 /home/site/wwwroot/wp-includes/class-wpdb.php(780): wpdb->load_col_info() #2 /home/site/wwwroot/wp-content/plugins/w3-total-cache/DbCache_WpdbInjection_QueryCaching.php(218): wpdb->__get('col_info') #3 /home/site/wwwroot/wp-content/plugins/w3-total-cache/DbCache_WpdbNew.php(122): W3TC\DbCache_WpdbInjection_QueryCaching->query('DESCRIBE IF;') #4 /home/site/wwwroot/wp-includes/class-wpdb.php(3146): W3TC\DbCache_WpdbNew->query('DESCRIBE IF;') #5 /home/site/wwwroot/wp-admin/includes/upgrade.php(2864): wpdb->get_results('DESCRIBE IF;') #6 /home/site/wwwroot/wp-content/themes/Sakurairo-2.6.3.1/functions.php(2059): dbDelta(Array) #7 /home/site/wwwroot/wp-includes/class-wp-hook.php(324): create_sakura_table('') #8 /home/site/wwwroot/wp-includes/class-wp-hook.php(348): WP_Hook->apply_filters(NULL, Array) #9 /home/site/wwwroot/wp-includes/plugin.php(517): WP_Hook->do_action(Array) #10 /home/site/wwwroot/wp-settings.php(621): do_action('after_setup_the...') #11 /home/site/wwwroot/wp-config.php(133): require_once('/home/site/wwwr...') #12 /home/site/wwwroot/wp-load.php(50): require_once('/home/site/wwwr...') #13 /home/site/wwwroot/wp-blog-header.php(13): require_once('/home/site/wwwr...') #14 /home/site/wwwroot/index.php(17): require('/home/site/wwwr...') #15 {main} thrown in /home/site/wwwroot/wp-includes/class-wpdb.php on line 3868

哇，这是啥，我反正是看不懂，问了一下GPT它给我的答案是：

这个错误是由于在WordPress中尝试执行数据库操作时发生了一个类型错误。错误消息指出问题发生在 wp-includes/class-wpdb.php 文件的第 3868 行，具体来说是 mysqli_num_fields() 函数接收到了一个不正确的参数类型。

错误解释：

函数 mysqli_num_fields()：这个函数期望接收一个 mysqli_result 对象作为参数，但是根据错误消息，它实际上收到了一个布尔值（bool）。
Stack trace：堆栈跟踪显示了错误发生的具体位置和路径。错误发生在多个函数调用之后，包括W3 Total Cache插件的 DbCache_WpdbInjection_QueryCaching 类和 DbCache_WpdbNew 类。
根本原因：这通常发生在数据库查询执行失败时，而不是返回 mysqli_result 对象，它返回了 false。这意味着某处的数据库查询出错了。

哦，明白了，所以就是主题中的某个东西和一个叫做“W3 Total Cache”的优化插件冲突了。

所以解决方法非常简单，只要我们去禁用这个插件就可以了。在插件-已安装的插件中找到这个W3 Total Cache，点击禁用就可以了。

如果你使用的是Azure部署的WordPress，默认情况下这个插件是开启的，所以只要禁用之后就会发现，诶，问题解决了。

顺带一提，可能大家会遇到各种各样的问题，这个解决方法只是给大家提供一个思路。

问题：应用主题之后页面出现乱码

顺带一提我还遇到了其他的问题，在我升级了WordPress之后，我的主页就变成了背景中显示了无数行下面的报错，同时一些UI资源无法加载：

Deprecated: Creation of dynamic property CSF_Field_slider::$field is deprecated in /home/site/wwwroot/wp-content/themes/Sakurairo-2.6.3.1/opt/classes/fields.class.php on line 14

Deprecated: Creation of dynamic property CSF_Field_slider::$value is deprecated in /home/site/wwwroot/wp-content/themes/Sakurairo-2.6.3.1/opt/classes/fields.class.php on line 15

Deprecated: Creation of dynamic property CSF_Field_slider::$unique is deprecated in /home/site/wwwroot/wp-content/themes/Sakurairo-2.6.3.1/opt/classes/fields.class.php on line 16

Deprecated: Creation of dynamic property CSF_Field_slider::$where is deprecated in /home/site/wwwroot/wp-content/themes/Sakurairo-2.6.3.1/opt/classes/fields.class.php on line 17

.......

类似上面的错误，其实就是由于我升级了WordPress之后，"Sakurairo"中的某些代码正在使用已废弃的PHP功能。具体来说，这些错误都与在fields.class.php文件中动态创建属性有关。

所以解决方法，或者说避免问题的方法就是：不要升级

这点其实很关键，在我研究中使用的树莓派也是，一些祖传代码或者脚本的运行环境不要去随便的升级，除非你自己非常了解，要不然就会出现各种错误，或者说等待主题作者的更新。

加入一些自己的自定义功能

具体的设置请参考官方文档，已经非常的详细了，买东西之后要看说明书，这点很关键。

如果你想要在页面上加入一些其他的效果，例如Live2D的看板娘，或者鼠标点击特效的话，一般情况下，只需要在主题的主题文件编辑器的footer文件中加入js的代码即可。

具体操作如下：（Live2D参考的是github大佬的代码，请去关注一下原作者并且给一个Star吧：Live2D看板娘）

对于Sakurairo的主题，在iro主题设置中找到全局设置-页尾设置，如下所示：

在【页尾附加代码】中加入：

<!-- 看板娘 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
<!--鼠标点击效果-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/maodian.js"></script>

即可获得看板娘效果。这是一个很方便的CDN的调用，关于CDN，之后帖子中我也会更新如何使用微软Azure的CDN和Front Door来方便写文章和上传资源。

也欢迎大家自己探索一些更有趣的功能，同时评论和支持一下这篇文章。

尊重原创作者才是支持科技进步知识分享的动力。希望大家在使用的时候可以多关注一下这些大佬的分享，正是因为这些大佬们无私的开源项目，才能让我们使用到这么好的主题hhh

感谢：
Sakurairo主题创作者@mirai-mamori