上文 : WordPress从0开始建站(一):教练,我想建网站!,WordPress已经安装成功,今天我们来解决昨天遗留的三个问题:
- 初步实现网站美化
- 快速导入CSDN博客
- CSS样式定制网站
话不多说,且看如何实现。(这该死的沙雕作者终于不在前面扯那么多废话了)
一、初步美化 :大哥你看我美不美
-
登陆
浏览器输入进入你的公网IP地址,登陆WordPress进入管理界面:
-
选主题
选择:外观–>主题–>添加,进入到主题选择界面,选一个你喜欢的主题。
比如我选择的是:Bhari 主题,点击安装后,再次进入到主题管理界面便可以看到它了。
启用主题,并开始自定义。
-
自定义主题简介
进入到自定义界面:
可以看到,左侧红框便是用来自定义主题,同时它也被我分为两部分:
- 1部分:1部分比较简单,大家自己琢磨一会儿就能明白了。在接下来我们会举几个例子供参考。
- 2部分:2部分便是自己添加CSS来改变网站主题样式了,在 三、CSS样式定制有详细讲诉。
-
实例:修改顶部图像
在上图1部分,我们看到有一栏叫做:顶部图像,点击进入后选择添加图像:
嗷~很不幸,出错了:没有上级目录写权限。这是因为我们对目录wp-content操作权限不够。
打开Xshell,连接云服务器,键入以下命令,修改目录wp-content权限为777(可被任意用户读写)
chmod -R 777 /var/www/html/wp-content # -R表示还同时修改wp-content子目录权限为777
这个时候,我们再次选择文件便发现,可以正常选择图像了~(我没合适图就不修改了hhh)
二、导入CSDN博客
来到我们的新窝,虽然还很简陋,但是 斯是陋室,惟吾德馨 嘛~可问题他喵的又来了,怎么让别人知道我们的德馨 呢?如果你写过CSDN博客,那么自然希望快速转入,很遗憾,在我写这篇博文之前还没找到一个能用的办法快速导入CSDN博客(可能因为毕竟作者500°近视)。
那么我有吗?那当然~有一个不(很)成熟的办法献丑(炫耀)一下。
-
导出CSDN
进入我们的CSDN博客,点击编辑,可以在右侧看到:导出为HTML文件 :
点击导出,保存导出后的HTML文件。
-
导入WordPress
进入控制台(仪表盘),选择新建文章,进入代码编辑模式:
用记事本(当然也可以其它)打开刚刚下载的博客HTML文件,复制粘贴。
同时插入
<!--more-->
这段代码,使得首页只展示代码前文字。
点击发布,查看文章。发现问题:
-
点击查看文章,显示错误找不到文章
-
他人输入你IP(或域名)地址,文章图片不显示
-
代码高亮不够满意
-
-
优化:解决文章不显示
-
问题
-
解决
设置固定链接朴素模式即可:
再次刷新界面便发现可以查看文章了。
-
-
优化:解决图片不显示和文章两侧留白
-
问题
-
解决
图片不显示,是因为CSDN反盗链,在头部设置忽略refer。
<meta name="referrer" content="no-referrer">
-
-
优化:解决代码高亮
-
解决
代码高亮可以下载一个插件名为:
highlight.js
接着你可以在已下载的插件 启用,同时设置你喜欢的样子全都有~
我个人比较喜欢:
vs
高亮模式
-
当然了,到现在你可能还有很多不满意的部分:
- 超链接下面多出虚线
- 首行不缩进
- 每篇文章前面莫名出现一大片留白
- …
这些都可以通过自定义CSS样式来解决,且看下文分解。
三、定制CSS样式
这部分需要了解一些CSS样式知识,当然这并不难。我的前端水平估计比之各位看官老爷都远不如,这里仅仅举例说一些比较典型的问题。
-
去除文章前大片留白
-
问题:
-
解决
/*1.文章第一个无内容p标签导致无效留白:将它隐藏即可*/ div.entry-content > p:nth-child(1) { display:none; } /*2.文章里的a标签去除下面虚线*/ .content-area a { border-bottom:none; /*取消下划线:text-decoration:none;*/ }
-
-
自动首行缩进
-
问题
导入的文章不能自动首行缩进,影响排版美观。
-
解决
/*每段首行2字符*/ p { text-indent:2em; padding:5px; }
但是这么做会带来一些问题:code、kbd、继续阅读a标签等标签也在p标签中,导致它们前面无效留白:
因此要设置取消它们的首行缩进:
/*恢复误伤的友军*/ p code,p kbd,a.more-link,blockquote p { text-indent:0; }
-
-
设置头部背景
-
问题
网站头部背景纯白不美观:
-
解决
很多网站都有反盗链,直接引用URL,可能会不显示图片。可以先在媒体库 添加图片:
然后单击图片,复制URL地址:
在自定义CSS中加上:.site-header { background-image:url("http://47.101.211.128/wp-content/uploads/2019/05/QQ图片20190428091349.jpg") }
这样便成功修改头部背景图片了。
-
-
改变代码背景颜色
-
问题
代码背景颜色不好看,想改成比如和CSDN一样的:
-
解决
首先修改pre标签背景(code标签包含代码在pre标签中):
/*pre标签背景颜色设置*/ pre { background-color:#fafafa; }
然后取消掉code标签边框,同时设置背景颜色和pre标签一致:
/*取消代码边框和设置背景*/ code.prism , code.hljs { border:none; background-color:#fafafa; }
-
效果
-
-
居中的一些问题
-
a标签文字居中
设置:height == line-height 即可:
/*设置菜单a标签居中*/ #primary-menu>li a { height:45px; line-height:45px; text-align:center; }
-
input标签居中
这个居中比较特殊,最后通过设置内边距解决:
input.search-submit { padding:0 1em; }
-
其它的都可以按照你的需求私人定制,就不一一介绍了~
四、总结
相信大家现在应该能装扮自己的小窝了吧hhh~
大家感兴趣可以看看我最后完成的网站:灰太狼coder学习书屋,当然由于还在备案的原因,首页图标部分显示不正常。
由于作者喜欢折腾(有自虐倾向的沙雕网友),接下来有时间还会整整其他建站方式。大家喜欢可以点个赞,也可以关注我,坚持每篇原创认真细致是我的风格~