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备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; }
点击更新文件
返回博客首页,刷新即可看到更换后的鼠标样式
上面路径要正确,图片放在哪里就写哪里
上面用到的鼠标样式素材来自于https://chaozhuowang.com/924.html
自定义鼠标样式之后的效果图如下:(右边标题旁边蓝色小人儿就是)
7、文章归类
哦,我还没来得及整理…
WordPress个人博客美化相关推荐
- Wordpress(Argon)主题博客美化
前言 常言道:工欲善其事必先利其器,在发表文章前,美化博客,使其利于自己的观看与管理极其重要,所以我四处搜寻,得到了以下美化代码. 但是,有时候我们走得太远,会忘了为什么出发.希望阅览本文章的人不要忘 ...
- LAMP搭建phpMyadmin管理平台以及wordpress个人博客系统
具体请参考http://maoqiu.blog.51cto.com/8570467/1384026 这篇博文 安装phpMyadmin工具 [root@www ~]# mkdir /usr/local ...
- 【分享】博客美化(6)为你的博文自动添加目录
博客园美化相关文章目录:博客园博客美化相关文章目录 这篇文章使用的代码来自于博客园的marvin,非常感谢.在他的文章:如何给你的为知笔记添加一个漂亮的导航目录中,介绍了给文章自动添加目录的过程,我当 ...
- 【分享】博客美化(6)为你的博文自动添加目录【转】
转自:http://www.cnblogs.com/asxinyu/p/4344153.html 阅读目录 1.目录样式文件 2.为文章添加固定的信息 3.自动生成目录代码 博客园美化相关文章目录:博 ...
- 【博客美化】评论带头像,且支持旋转
[博客美化]评论带头像,且支持旋转 好久没有更新关于博客园页面美化的文章了,这一次主要是写一下关于评论带头像,且支持旋转的内容,希望各位小伙伴能够喜欢!!! 1.效果图 2.添加CSS代码 设置-页面 ...
- 2011年100佳精美的WordPress免费博客模板
WordPress 是最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装方式简单易用.这篇文章与大家分享2011年100佳精美的 WordPress ...
- 【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- 阿里云ECS服务器搭建wordpress个人博客网站【详细图文教程】
阿里云ECS服务器搭建wordpress个人博客网站[小白专用的图文教程] 在阿里云上搭建使用个人博客主要分为以下几个步骤: 1.购买阿里云ECS主机 2.购买域名 3.申请备案 4.环境配置 5.安 ...
- 【博客美化】08.添加扩大/缩小浏览区域大小 按钮
博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加Git ...
最新文章
- HashMap多线程并发问题分析
- 7.10.7740.16
- 8-5 Navicat工具与pymysql模块
- java工程师应该学习的知识点
- mysql存储过程的一个小例子
- 你必须掌握的Python数据分析工具之Pandas
- Unity中一个安卓设备拆装项目,从使用到放弃ab包过程记录
- ARUA2017创新转型峰会(ATIC)启动上海
- c语言入门自学 零基础学c语言教程
- 集成App Linking服务后无法正确跳转到应用的解决方案
- C# 30分钟完成百度人脸识别——进阶篇(文末附源码)
- power Designer VBS 脚步 通过 excel 生成实体,不用一个一个的输入。
- Pentaho Data Integration初步安装
- python中cat,stac,transpose,permute,squeeze区别用法
- c语言实现单链表逆序算法,C语言解字符串逆序和单向链表逆序问题的代码示例...
- MatLab专用变量
- tableau应用——某汽车销售分析
- 台达变频器vfb—d参数表_台达变频器参数设置一览表
- 浅谈县级融媒体中心运营利器之融媒体直播车
- Centos7 挂载新硬盘(SSD|M.2)的操作方法
热门文章
- 分享券商量化交易接口申请流程
- eip协议通信_NT151应用案例:西门子PLC S7-1200与派克ACR9000的通信(Part 2)
- WRF4.3和WPS的编译和安装
- 职称计算机考试在线答题,职称计算机考试试题答题技巧
- 计算机的心智-操作系统之哲学原理
- 哈工大计算机研究生复试笔试,2011年哈工大计算机研究生复试(机考+面试)周
- 使用psacct或acct工具监控Linux用户活动
- java计算机毕业设计汽车美容管理(附源码、数据库)
- 软件测试培训靠谱吗?2个月的软件测试培训班能到底能学到技术么?
- java 获取邮编_java利用爬虫技术抓取(省、市(区号\邮编)、县)数据