犇犇犇犇
2020-03-15 15:40:11
L指Linux，N指Nginx，M一般指MySQL，也可以指MariaDB，P一般指PHP
对 linux 比较熟悉的话可以直接命令安装，但是由于本人是第一次部署服务器
这里我用的是宝塔，个人感觉使用感不错）有可视化界面，能直接查看，上传文件。而且后续安装也比较方便。还珂以不通过腾讯云登录服务器。
输入
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
这样就安装成功了，其中
这里的链接以及用户名密码很重要 。建议截图保存。可以直接通过链接及用户名密码访问服务器。
输入链接和用户名密码便可以登陆宝塔linux面板了，
选择环境 lnmp。
如果是1G内存，这里珂以适当把 php 版本调高一些比如 php-7.1
如果 php 版本过低可能导致 wordpress 部分插件无法使用及显示 bug
当然版本之后是可以更新和修改的。
这一步可能要安装较长的时间（雾
点击左侧网站，添加站点
如下图，域名输入你的域名（带www.)，数据库这里选择 MySQL 创建，php版本的话就是安装的 php 版本。 PHP-71 表示 php-7.1 。其他的选项都默认就好了。这里数据库密码系统会随机生成一个。这个密码需要记录一下，后面安装 wordpress的时候会用到。 (注意不要和服务器的用户名密码搞混)
这一步比较简单，就是添加服务器的ip地址，这里每个服务商具体方法都不一样。这里直接百度 您的服务商 域名泛解析 即可。
网上很多教程都是到 wordpress官网 下载然后安装到服务器上的，需要涉及到各种目录以及代码，对萌新极不友好。
但其实宝塔可以直接一键安装qwq
如图，点击软件商店，然后点击最右侧的一键部署，翻一翻就能找到 wordpress
如果找不到的话可以更新软件列表。直接点一键部署。
这里的填写方案与之前新建站点的必须一样，域名填写你的域名（带www.)，数据库填安装站点时的数据库及密码， php 版本于之前一致。
直接访问您的站点。
如果前期所有准备都正确弄好了，这时候访问站点应该会出现 wordpress 的安装界面
接下去只要根据安装向导一步一步操作即可，安装仍然需要之前已经记下的数据库用户名及密码。
这里需要填写 wordpress 注册信息。这里的信息为新注册的wordpress的信息，与之前的所有密码无关。
站点标题就写博客是干嘛的，比如我就写 犇犇犇犇's BLOG 这个之后可以修改，随便写即可。
用户名密码为新注册 wordpress 的用户名，以后需要用这组用户名及密码来登陆管理 wordpress 后台。
电子邮件就写你的电子邮件，如果忘记密码的时候可以用。
到这里为止我们一共有4组比较重要的密码。
第一组为服务器用户密码，是注册购买主机的时候获得的，用于服务器输入指令。
第二组为宝塔用户密码，是安装宝塔时候的网址及用户名密码，用于登陆宝塔。
第三组为数据库的用户名密码，是我们在新建站点的时候输入的。不过我们已经安装好了 wordpress 所以这组密码暂时没用了qwq
第四组为刚才注册安装 wordpress 的时候设置的，用于登陆 wordpress 后台编辑主题及文章。
这四组密码互不相关，但都很重要。
然后我们就进入博客后台了
至此，wordpress 搭建就正式完成了qwq 接下来就可以自己进行各种设置，美化了，这里主要就根据自己喜好来吧。
浏览器输入 http://你的域名/wp-admin 可以快速进入后台仪表盘。
点击外观，主题，添加。
这里可以直接搜索想要的主题名称，也可以点 上传主题 来上传本地文件。
这篇文章会用 NexT 主题来演示
https://github.com/MaZhaolin/Next-theme-for-WordPress
这里再来推荐几个比较好看的Wordpress主题：
Kratos-pjax主题
下载链接：
https://github.com/xb2016/kratos-pjax
作者博客链接：
https://moedog.org/787.html
sakura主题
下载链接：
https://github.com/mashirozx/Sakura2
作者博客链接：
https://2heng.xin/theme-sakura/
hestia主题
官网：
https://themeisle.com/themes/hestia/
演示网站：
https://demo.themeisle.com/hestia/
这里就根据喜好自行选择吧）
点击外观，自定义
点击颜色>，选择颜色，发布
就能选择背景颜色了，个人建议根据博客主题选择浅一点的颜色qwq
点击背景图片，选择图像，发布。
下面的选项可以实现对图像进行平移，以及随着页面移动的效果。
使用宝塔可以直接修改，及上传下载文件。
进入宝塔，点击文件，找到 wordpress 所在的文件夹，打开
这就是 wordpress 的目录了。大概简述一下。
wordpress 目录内有3个文件夹wp-admin wp-content wp-includes
wp-admin 是通过仪表盘登陆 wordpress 后看到的管理界面，一般不会改动。
wp-content 包括插件，主题和您其他上传的内容
其中 plugins 文件夹包含所有插件，themes 文件夹包含所有主题。uploads 文件夹，包含所有你上传图片，音频，视频和其他文件。
wp-includes 包含所有文件和库。
其中js文件夹放置JavaScript，css文件夹放css。
我们可以在 wordpress 仪表盘中上传文件，比如当您在使用插件或者是写文章时导入媒体时选择图片，音频，视频。这些文件会自动被放入文件夹。 如果我们要手动加入js或者css来美化网页，就可以在本地编辑好，然后直接通过宝塔上传至对应文件夹。
文件打开方式为
路径为数据库目录开始，把后面一段都复制下来就可以了。 如果要上传js 。一般 js 目录为 数据库/wp-includes/js/ 所以我们在宝塔打开这个目录
点击上传，然后选择本地 js 文件即可。
点击外观，主题编辑器
这里可以更改网页源代码，要制作动态背景，特效，插入 js 和 css 都是在这里实现的。
我们发现右侧一栏有主题页眉和主题页脚。一般动这两个文件。这两个文件会对整个博客产生效果。
几乎所有的网页美化都是通过JS以及CSS实现的
如果你要加入css文件，一般打开主题页眉。
由于每个主题不同，所以上面内容也不同。但是插入位置是一样的。
找到尾部 </head><body> 这个位置。我们插入的位置就是在 <body> 前面， </head> 内部。
css 要用 <style> </style> 框起来，比如修改网页透明度为 0.8 ，那么添加的代码为 <style>body { opacity:0.8; }</style>
如果引入文件的话就照着上面 <link ?>就行了
同 css ，如果你要 js ，就打开主题页脚。
在倒数第三行 </bofy> 前加上 script 。
和 css 一样，js要用<script> </script>框起来。
当然也珂以插入链接，方式为js文件一般放在 /wp-includes/js 中，所以一般插入方式为 <script type="text/javascript" src="/wp-includes/js/文件名"></script>
当然 src="地址" 不一定要用本地地址。这里也可以放其他网站的 js 网址。比如可以调用链接 http://www.12cow.com/wp-includes/js/ribbon.js 来调用我博客的彩带js。
这里提供一些我从网上找来的一些比较好看的 js 以及 css 模板。
你可以把源码复制，弄成
所以我百度网盘还有一份
链接：https://pan.baidu.com/s/1rNiMlrUCjpA41juBALhBOA
提取码：eark
需要自取（雾
支持 js,css,html
直接在输入框里输入代码就行了qwq
由于未知原因，有的脚本在我的调试工具可能显示不出来，目前还在测试中
以下代码仅为本人在制作博客的代码整理，不保证代码无锅。效果以具体使用为准
鼠标点击出现爱心： /wp-includes/js/love.js
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/love.js"></script> 鼠标点击显示文字：/wp-includes/js/text.js
其中 var a = new Array 下一行可以自定义成想要的字符。
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/text.js"></script> 鼠标点击产生烟花爆炸：
需要anime.min.js ， fireworks.js 这两个 js 文件，直接把下面这段代码贴入页脚即可。
代码：
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/anime.min.js"></script>
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/fireworks.js"></script>点击产生冒点特效：/wp-includes/js/maodian.js
代码：
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script src="http://www.12cow.com/wp-includes/js/maodian.js"></script>樱花背景： /wp-includes/js/sakura.js
代码：
<script zindex="-2" src="http://www.12cow.com/wp-includes/js/sakura.js"></script>彩带背景：/wp-includes/js/ribbon.js
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/ribbon.js"></script>粒子球：/wp-includes/js/ball.js
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/ball.js"></script>墨水：/wp-includes/js/ink.js
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/ink.js"></script>线条：/wp-includes/js/canvas-nest.min.js
代码：
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="http://www.12cow.com/wp-includes/js/canvas-nest.min.js">
</script>其中 color 参数为线条RGB颜色值；opacity 为线条的透明度；count 为线条数量；这些参数可以根据自己的需要自定义。
比如我博客的参数为 color="100,149,237" opacity='1' zIndex="-2" count="250"
雪花：/wp-includes/js/snow.js
代码：
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/snow.js"></script>代码雨：/wp-includes/js/code_rain.js
代码：
<canvas id="code_rain_canvas" width="1440" height="900"></canvas>
<script type="text/javascript" src="http://www.12cow.com/wp-includes/js/code_rain.js">
<style>
#code_rain_canvas
{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: 4;
}
</style>
</script>这里采用 css。直接按上文添加css代码 代码：
<style>body { opacity:0.8; }</style>首先上传你的鼠标图案。由于浏览器兼容问题，比较推荐用 .cur 后缀名。
然后将他上传至服务器。我这里上传的目录是/wp-content/uploads/2020/02/mouse.cur
同样，这里是添加css代码
<style>
body {
cursor: url(https://www.12cow.com/wp-content/uploads/2020/02/mouse.cur),auto;
background-color: @theme_background;
}
</style>其中 cursor:url() 中填写的是你自己上传的文件地址（目录）。
我们使用 MathJax 来实现。但是由于我从 github 上下载的的貌似缺失文件一直使用不了，所以这里直接从MathJax官网中调用
虽然这里是js，但是我们要把它和插入css时一样将它插入header.php中
否则会导致 LaTeX 显示错误
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']],displayMath: [ ['$$','$$'], ["\\[","\\]"] ]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
示例：我博客左下角那个qwq
先贴上标准 js 代码
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
//jsonpath模型id
jsonPath: "https://unpkg.com/[email protected]/assets/koharu.model.json",
"scale": 1
},
"display": {
"position": "left", //板娘的位置
"width": 150, //宽度
"height": 300, //高度
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.8, //透明度
"opacityOnHover": 0.2
}
});
</script>现在来讲一下参数
jsonPath ，这里是板娘的样式
可以参照这篇文章
只需要把最后koharu.model.json中的模型名称koharu改成你想要的就行了。比如我博客的是z16
position 这里是板娘出现的位置
你可以选择让她出现在左侧右侧。左侧就是left，右侧就是right
width,height 这个是板娘的高度
由于模型大小是固定的，所以板娘只会根据长宽
也就是说如果要让板娘显示完整，height一定要为width的两倍。
如果我们直接输入参数，会导致板娘并不会随着设备的缩放而改变大小，所以在PC显示可能没问题，但是一旦缩放页面，或者使用手机则体验感很不好。
给张图感受下，这就是手机的视角）
不过这也是可以解决的，也就是根据当前页面大小自动缩放。
我们用document.body.clientWidth读取当前页面宽度。这样就可以根据这个宽度缩放了。
贴上本人的参数：
"width": document.body.clientWidth/10,
"height":document.body.clientWidth/5
浏览器标题就是
这个也珂以自定义。
自定义浏览器标题
我们可以通过js自定义浏览网页时的浏览器标题，和离开网页时的浏览器标题，以及重新返回页面时的浏览器标题。好抽象啊，自己试一下就知道了
js代码：
<script>
window.onfocus = function () {
document.title = '再次见到你真好 ~';
setTimeout(function(){
document.title = '犇犇犇犇\'S BLOG';
}, 1500);
};
window.onblur = function () {
document.title = '等等，你别走啊！~';
};
</script>第一个为重新返回页面时的浏览器标题
第二个为浏览网页时的浏览器标题
第三个为离开网页时的浏览器标题
自定义logo
这个通过css实现。
css代码：
<link rel="icon" href="/wp-content/uploads/2020/02/头像.jpg">href为图像的地址或目录。
也珂以通过一下js代码实现在不同状态下同时显示出不同的浏览器标题以及logo
伪代码如下：
<script>
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "此时的网页logo地址");
document.title = '离开网页的浏览器标题';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "此时的网页logo地址");
document.title = '重新返回页面时浏览器标题' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
</script>安装wordpress后，默认是显示文章全文。但是有一些文章很长，直接在首页显示全文会使浏览很不方便qwq。
这里我们通过修改index.php(首页模板）来实现。
通过主题编辑器打开index.php
找到一下代码<?php the_content(); ?>
就是这个位置qwq
the_content 函数就是调用文章内容。
如果要首页只显示文章标题
直接将<?php the_content(); ?>改为<?php get_the_content(); ?>
首页显示文章摘要
将<?php the_content(); ?>改为以下代码。
代码：
<?php
/**
* The default template for displaying content
*
* Used for both singular and index.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Twenty
* @since 1.0.0
*/
?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
<?php
get_template_part( 'template-parts/entry-header' );
if ( ! is_search() ) {
get_template_part( 'template-parts/featured-image' );
}
?>
<div class="post-inner <?php echo is_page_template( 'templates/template-full-width.php' ) ? '' : 'thin'; ?> ">
<div class="entry-content">
<?php
if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) {
the_excerpt();
} else {
if(!is_single()) {
the_excerpt();
} else {
the_content(__('(more…)'));
}
}
?>
</div><!-- .entry-content -->
</div><!-- .post-inner -->
<div class="section-inner">
<?php
wp_link_pages(
array(
'before' => '<nav class="post-nav-links bg-light-background" aria-label="' . esc_attr__( 'Page', 'twentytwenty' ) . '"><span class="label">' . __( 'Pages:', 'twentytwenty' ) . '</span>',
'after' => '</nav>',
'link_before' => '<span class="page-number">',
'link_after' => '</span>',
)
);
edit_post_link();
// Single bottom post meta.
if ( is_single() ) {
get_template_part( 'template-parts/entry-author-bio' );
}
?>
</div><!-- .section-inner -->
<?php
if ( is_single() ) {
get_template_part( 'template-parts/navigation' );
}
/**
* Output comments wrapper if it's a post, or if comments are open,
* or if there's a comment number – and check for password.
* */
if ( ( is_single() || is_page() ) && ( comments_open() || get_comments_number() ) && ! post_password_required() ) {
?>
<div class="comments-wrapper section-inner">
<?php comments_template(); ?>
</div><!-- .comments-wrapper -->
<?php
}
?>
</article><!-- .post -->
</div>
<div class="read-more">
<a href="<?php the_permalink(); ?>">阅读全文 >> </a>
</div>
</article>直接复制进去替换代码就行了。这应该是最简单的做法）
建议在替换前先做一下备份。
可以使用WP Githuber MD插件。
点击插件，安装插件，搜索，现在安装，启用。
然后回到文章编辑页面
这样Markdown就生效了。
有两种方式。第一是用网易云的外链播放器，第二个使用Hermit插件。
网易外链播放器对于网易云音乐上有的歌曲能使用。
先打开网易云音乐
点击歌曲下方的生成外链播放器
这里可以选择样式，是否自动播放，width和length可以修改大小。
直接将HTML代码贴入想要添加音乐的地方即可。
对于本地音乐或者是网易云不支持的音乐，这里推荐Hermit插件。
wordpress直接搜索Hermit并安装。
点音乐库，新建音乐
然后可以导入本地音乐以及封面。
使用：在写文章的界面的界面会多出一个添加音乐的按钮
点击本地音乐，就能选择之前的导入音乐库的音乐了。
下方能选择能选择1.自动播放 2.循环播放
wordpress默认会根据文章的发布时间排序。但是也可以通过更改index.php(首页模板），配置orderby参数来实现手动排序。
点开文章，点击右上角显示选项，
回到页面底部
点击输入新栏目，然后在名称这里输入order，值这里输入置顶级别。这个数越大，级别越高。比如我这篇文章需要置顶，就输入一个很大的数。文章会根据这个数字排序。点击添加自定义栏目。
同上对所有文章都添加order。
然后外观，主题编辑器，打开首页模板（index.php)
在开头找到<div class="container">下添加代码
由于这里代码中的美元符号会被误认为是
https://www.luogu.com.cn/paste/ny761vnk
代码如下图所示
更新代码，回到首页，文章就会根据order排序了。所有文章必须手动输入order，否则文章可能不会显示。这样就算是实现了手动排序吧。
当然您也可以把'meta_key' => 'views' 来根据阅读量排序。也能配合其他插件实现其他排序方法。
wordpress自带有评论系统，并且支持评论嵌套。
自带评论修改
评论框添加图片：
wordpress评论文件是comment.php
我们可以通过添加css的方式添加评论区背景。点击外观，自定义。
贴入代码：
#comment {
background-image:url(/wp-content/uploads/2020/02/comment.png);
background-repeat: no-repeat;
background-position: center;
}其中 background-image:url(); 为您的图片地址，点击上方的发布即可
删去站点
wordpress评论默认为评论，姓名，电子邮件，站点。而站点这一项不是必填的，而且会让人产生误解，不知道填啥。
这个可以通过更改模板函数(functions.php)实现。
点击外观，主题编辑器，模板函数(functions.php)，在尾部贴入代码。
代码链接：
https://www.luogu.com.cn/paste/gvb6elpf
然后保存代码即可。
第三方评论插件
如果对页面以及其他美化要求，我们也可以使用第三方评论插件。
比较知名的国内有畅言，多说（这个已经死了），国外有
畅言是免费的，但是由于只有备案的服务器才能使用畅言，否则只能试用15天，对非大陆地区的服务器很不友好。但是如果备过案的话还是能使用的。这里就不说了。
这里推荐一下插件
discus 是一款评论及论坛的插件。直接到wordpress搜索插件wpDiscuz第一个就是了。
可以支持评论点赞，评论嵌套，评论根据点赞数排序，功能较强大，总体效果还是不错的qwq。
看我写的那么多字，也给我点赞赏呗
这里可以使用 imwptip 插件，wordpress后台搜索并安装
然后就能上传赞赏二维码了
只要将鼠标悬浮在赞赏上，就会有二维码了。
效果如图所示，各位扫一下呗qwq
关于博客的搭建暂时就说到这里了，希望能对 wordpress 建站有帮助吧qwq
这时候可以查看下mysql的状态，多半是mysql出现了问题，重启一下。
打开服务器终端输入
/etc/init.d/mysqld stop
/etc/init.d/mysqld start
重启mysql服务。
这是文件解码出现了问题。可能是因为浏览器，先尝试刷新页面或者换其他浏览器。如果仍然无法解决，可能是因为调用代码比如 js 的时候解码的问题。这时候可以尝试将调用link直接变为代码输入。
举个栗子：
比如网页标题显示乱码，我们找到对应js
<script type="text/javascript" src="/wp-includes/js/fireworks.js"></script>
将link指向的代码改为直接输入
<script>
window.onfocus = function () {
document.title = '再次见到你真好 ~';
setTimeout(function(){
document.title = '犇犇犇犇\'S BLOG';
}, 1500);
};
window.onblur = function () {
document.title = '等等，你别走啊！~';
};
</script>其实这个并不是代码的问题，是php的警告。php在版本为7.2或以上的时候会报警告。解决的话只需要把php的警告关掉就行了。百度上有很多关闭php警告的教程，但是也有一种更加简单粗暴的方法，就是把php版本换为7.1。
回到宝塔，点击软件商店，搜索安装php7.1
然后切换php版本。点击网站，设置
php版本，将版本切换至php7.1。
回到博客主页，警告消失了就说明php修改成功了。
以上就是全文了(貌似上万个字了)，个人认为还是写的比较详细的qwq
希望能有一些帮助吧（雾
写文章不易qwq
求评论qwq
求点赞qwq
如果有建议珂以评论私信qwq