WordPress个人博客美化

在这里插入图片描述

一、基本概念

1、起因

双十一的时候，因为阿里云折扣力度很大，就购买了三年的ECS云服务器。

又在阿里云购买了一个域名。

配置如下：

随后在云服务器上安装了宝塔面板，然后利用WordPress部署搭建了个人博客。

2、云服务器百度百科

3、WordPress百度百科

二、博客美化过程

1. 个人网站使用的WordPress主题：Twenty Fifteen

在这里插入图片描述

2. 安装了一点插件

这里参考的知乎文章，安不安装目前对我个人的使用没啥影响。

3. 在网站底部添加备案号链接

登入WordPress后台仪表盘-->外观-->主题编辑器-->右侧主题文件中选中footer.php

在适当位置添加代码

<a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备2021026522号</a>

点击更新文件
返回博客首页，刷新即可看到备案号

4、修改站点身份

登入WordPress后台仪表盘-->外观-->自定义-->站点身份（也可以选择其他选项自行修改，如配色等）
设置Logo、站点标题、站点图标等
Logo是使用https://www.uugai.com/这个网站生成的

在这里插入图片描述

5、添加鼠标点击特效

登入WordPress后台仪表盘-->外观-->主题编辑器-->右侧主题文件中选中footer.php

在适当位置添加代码

<script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
            y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({
                "top": y - 180,
                "opacity": 0
            },
            1500,
            function() {
                $i.remove();
            });
        });
    });
    </script>

点击更新文件
返回博客首页，刷新即可看到效果

在这里插入图片描述

添加了鼠标点击样式之后的效果图如下：
在这里插入图片描述

6、自定义鼠标样式

登入WordPress后台仪表盘-->外观-->主题编辑器-->右侧主题文件中选中style.css

在适当位置添加代码

 /** 普通指针样式**/
body {
cursor: url(https://chaozhuowang.com/images/sbys/sbys1_1.png), default;
}

/** 链接指针样式**/
a:hover{cursor:url(https://chaozhuowang.com/images/sbys/sbys1_2.png), pointer;
}