WoldPress从0开始建站（二）：大哥你看我美不美

 
  上文 ： WordPress从0开始建站（一）：教练，我想建网站！，WordPress已经安装成功，今天我们来解决昨天遗留的三个问题：

• 初步实现网站美化
• 快速导入CSDN博客
• CSS样式定制网站

  话不多说，且看如何实现。（这该死的沙雕作者终于不在前面扯那么多废话了）
 

一、初步美化 ：大哥你看我美不美

 

1. 登陆

   浏览器输入进入你的公网IP地址，登陆WordPress进入管理界面：

   

2. 选主题

   选择：外观–>主题–>添加，进入到主题选择界面，选一个你喜欢的主题。

   比如我选择的是：Bhari 主题，点击安装后，再次进入到主题管理界面便可以看到它了。

   

   ​ 启用主题，并开始自定义。

3. 自定义主题简介

   进入到自定义界面：
   

   ​ 可以看到，左侧红框便是用来自定义主题，同时它也被我分为两部分：

   • 1部分：1部分比较简单，大家自己琢磨一会儿就能明白了。在接下来我们会举几个例子供参考。
   • 2部分：2部分便是自己添加CSS来改变网站主题样式了，在 三、CSS样式定制有详细讲诉。

4. 实例：修改顶部图像

   在上图1部分，我们看到有一栏叫做：顶部图像，点击进入后选择添加图像：
   

   嗷~很不幸，出错了：没有上级目录写权限。这是因为我们对目录wp-content操作权限不够。

   打开Xshell，连接云服务器，键入以下命令，修改目录wp-content权限为777（可被任意用户读写）

   chmod -R 777 /var/www/html/wp-content # -R表示还同时修改wp-content子目录权限为777
   

   这个时候，我们再次选择文件便发现，可以正常选择图像了~（我没合适图就不修改了hhh）

 

二、导入CSDN博客

 
  来到我们的新窝，虽然还很简陋，但是 斯是陋室，惟吾德馨 嘛~可问题他喵的又来了，怎么让别人知道我们的德馨 呢？如果你写过CSDN博客，那么自然希望快速转入，很遗憾，在我写这篇博文之前还没找到一个能用的办法快速导入CSDN博客（可能因为毕竟作者500°近视）。

  那么我有吗？那当然~有一个不（很）成熟的办法献丑（炫耀）一下。

1. 导出CSDN

   进入我们的CSDN博客，点击编辑，可以在右侧看到：导出为HTML文件 ：
   

   点击导出，保存导出后的HTML文件。

2. 导入WordPress

   进入控制台（仪表盘），选择新建文章，进入代码编辑模式：
   

   用记事本（当然也可以其它）打开刚刚下载的博客HTML文件，复制粘贴。

   同时插入<!--more-->这段代码，使得首页只展示代码前文字。
   

   点击发布，查看文章。发现问题：

   • 点击查看文章，显示错误找不到文章

   • 他人输入你IP（或域名）地址，文章图片不显示

   • 代码高亮不够满意

3. 优化：解决文章不显示

   • 问题

     

   • 解决

     设置固定链接朴素模式即可：

     
     再次刷新界面便发现可以查看文章了。

4. 优化：解决图片不显示和文章两侧留白

   • 问题
     

   • 解决

     图片不显示，是因为CSDN反盗链，在头部设置忽略refer。

     <meta name="referrer" content="no-referrer">
     

     

5. 优化：解决代码高亮

   • 解决

     代码高亮可以下载一个插件名为：highlight.js

     

     接着你可以在已下载的插件 启用，同时设置你喜欢的样子全都有~

     我个人比较喜欢：vs 高亮模式

  当然了，到现在你可能还有很多不满意的部分：

• 超链接下面多出虚线
• 首行不缩进
• 每篇文章前面莫名出现一大片留白
• …

  这些都可以通过自定义CSS样式来解决，且看下文分解。

三、定制CSS样式

    这部分需要了解一些CSS样式知识，当然这并不难。我的前端水平估计比之各位看官老爷都远不如，这里仅仅举例说一些比较典型的问题。

1. 去除文章前大片留白

   • 问题：

     

   • 解决

     /*1.文章第一个无内容p标签导致无效留白：将它隐藏即可*/
      div.entry-content > p:nth-child(1)
     {
     	display:none;
     }
     /*2.文章里的a标签去除下面虚线*/
     .content-area a
     {
     	border-bottom:none; /*取消下划线：text-decoration:none;*/
     }
     

2. 自动首行缩进

   • 问题

     导入的文章不能自动首行缩进，影响排版美观。

   • 解决

     /*每段首行2字符*/
     p
     {
         text-indent:2em;
     	padding:5px;
     }
     

     但是这么做会带来一些问题：code、kbd、继续阅读a标签等标签也在p标签中，导致它们前面无效留白：

     

     因此要设置取消它们的首行缩进：

     /*恢复误伤的友军*/
     p code,p kbd,a.more-link,blockquote p
     {
     	text-indent:0;
     }
     

3. 设置头部背景

   • 问题

     网站头部背景纯白不美观：
     

   • 解决

     很多网站都有反盗链，直接引用URL，可能会不显示图片。可以先在媒体库 添加图片：

     
     然后单击图片，复制URL地址：

     
     在自定义CSS中加上：

     .site-header
     {
     	background-image:url("http://47.101.211.128/wp-content/uploads/2019/05/QQ图片20190428091349.jpg")
     }
     

     这样便成功修改头部背景图片了。

4. 改变代码背景颜色

   • 问题

     代码背景颜色不好看，想改成比如和CSDN一样的：
     

   • 解决

     首先修改pre标签背景（code标签包含代码在pre标签中）：

     /*pre标签背景颜色设置*/
     pre
     {
     	background-color:#fafafa;
     }
     

     然后取消掉code标签边框，同时设置背景颜色和pre标签一致：

     /*取消代码边框和设置背景*/
     code.prism , code.hljs
     {
         border:none;
     	background-color:#fafafa;
     }
     

   • 效果
     

5. 居中的一些问题

   • 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学习书屋，当然由于还在备案的原因，首页图标部分显示不正常。

  由于作者喜欢折腾（有自虐倾向的沙雕网友），接下来有时间还会整整其他建站方式。大家喜欢可以点个赞,也可以关注我，坚持每篇原创认真细致是我的风格~