1. 全栈程序员必看首页

WordPress个人博客美化

全栈程序员-站长 • • 未分类 • 阅读 4

WordPress个人博客美化WordPress 个人博客美化个人博客 https www xiaohuangyr top 有兴趣可以访问一下以下截图是电脑端访问的效果 和手机差很多一 基本概念 1 起因双十一的时候 因为阿里云折扣力度很大 就购买了三年的 ECS 云服务器 又在阿里云购买了一个域名 配置如下 CPU amp 内存 1 核 2GiB 操作系统 Ubuntu20 0464 位实例规格 ecs n4 small 实例规格族 共享计算型随后在云服务器上安装了宝塔面板 然后利用 WordPress 部署搭

WordPress个人博客美化

个人博客：https://www.xiaohuangyr.top/

有兴趣可以访问一下

以下截图是电脑端访问的效果，和手机差很多

在这里插入图片描述

一、基本概念

1、起因

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

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

配置如下：

CPU&内存：1核2 GiB

操作系统：Ubuntu 20.04 64位

实例规格：ecs.n4.small

实例规格族：共享计算型

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

2、云服务器百度百科

云服务器(Elastic Compute Service, ECS)是一种简单高效、安全可靠、处理能力可弹性伸缩的计算服务。其管理方式比物理服务器更简单高效。用户无需提前购买硬件，即可迅速创建或释放任意多台云服务器。

云服务器帮助您快速构建更稳定、安全的应用，降低开发运维的难度和整体IT成本，使您能够更专注于核心业务的创新。

3、WordPress百度百科

WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统（CMS）来使用。

WordPress是一款个人博客系统，并逐步演化成一款内容管理系统软件，它是使用PHP语言和MySQL数据库开发的，用户可以在支持 PHP 和 MySQL数据库的服务器上使用自己的博客。

WordPress有许多第三方开发的免费模板，安装方式简单易用。不过要做一个自己的模板，则需要你有一定的专业知识。比如你至少要懂的标准通用标记语言下的一个应用HTML代码、CSS、PHP等相关知识。

二、博客美化过程

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

在这里插入图片描述

2. 安装了一点插件

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

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

  • 登入WordPress后台仪表盘-->外观-->主题编辑器-->右侧主题文件中选中footer.php
  • 在适当位置添加代码 
    <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备号</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": 999, "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; }
  • 点击更新文件
  • 返回博客首页，刷新即可看到更换后的鼠标样式

上面路径要正确，图片放在哪里就写哪里

上面用到的鼠标样式素材来自于https://chaozhuowang.com/924.html

在这里插入图片描述

自定义鼠标样式之后的效果图如下：（右边标题旁边蓝色小人儿就是）
在这里插入图片描述

7、文章归类

哦，我还没来得及整理…

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232075.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号