修改CSS自定义wordpress主题(伪)

从我的博客的界面可看出,我这个网站是用Wordpress搭建的,不可否认,由于其入手简单,功能繁多的插件以及友好的界面是一些初学者建立个人网站的首选(比如我)。尽管你不懂HTML/CSS/JS等,也能通过wordpress轻松地搭建一个属于自己的网站

当你的个人博客/网站步入正轨后,你可能会发现不少令人不满意的地方,但wordpress都能提供不少解决方法。比如对网站的界面不满意,那就换主题;觉得网站缺少一些必要的功能,那就添加插件;想更换下主题的一些字样和图片,那就修改主题等等,但是这些需要花时间一一去寻找,有时感觉找到一个喜欢的主题和插件也是件不容易的事情

总之,wordpress还是有不少令人不太满意的地方,不然也不会有人想把wordpress搭建的博客迁移到一些静态网站的博客,比如用hexo搭建博客。毕竟wordpress是用php和mysql,有时会有些不便的地方,比如我想上传我rmarkdown文档生成的静态网页就不行,因为其不支持静态网站。但hexo等搭建的静态网站则可以随心所欲地上传写好的网页。

虽然wordpress有不足之处,但是如果能懂些HTML/CSS的话,还是能做不少事情的,比如自己写一个自己喜欢的主题,当然这是很有难度的事情,需要花大量时间。但是用一些HTML/CSS知识来修饰下现有主题则是不错的主意,也就是这篇博文为什么用伪字,因为只是修改下主题。。。

其实修改主题的CSS样式对我来说也是无奈之举,因为简单的一些修改,我都已经用wordpress自带的主题自定义功能尝试过了,剩下的都是些“疑难杂症”,最终花了一个晚上的时间将这一过程梳理了下

首先需要了解wordpress是通过php代码和mysql数据库来完成网站的管理的,而整个网站的样式则是由一个CSS文件控制,先通过ftp将主机上主题文件夹中的style.css文件拉到本地,方便进行查看和修改

接着准备一本HTML/CSS书,或者网上教程网站如:w3school,这里并不是要从头看到尾,粗略扫一下了解下有哪些内容即可

然后就是开始修改CSS代码了,比如我的一个需求:觉得代码框过于难看,比较习惯markdown的一些显示风格,比如主题原始的代码框代码如下:

pre {
  background-color: #fff;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.42857;
  margin: 19px 0 10px;
  padding: 20px;
  white-space: pre-line;
  word-break: break-all;
  word-wrap: break-word;
}

简单查一下就能知道,其主要设定了背景颜色,外框线条,字体,行间距,内外边距以及文字的排布等等,那么我则需要按照一个markdown中的模板将其修改下即可,比如将背景颜色改一下,内外边距调一下,然后增加个滚轮(但是这个一直无效,暂时还不知道为啥)

pre {
/*  background-color: #fff; */
  background-color: #f8f8f8;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13px;
/*  line-height: 1.42857; */
  line-height: 19px;
/*  margin: 19px 0 10px; */
  margin: 15px 0; 
/*  padding: 20px; */
  padding: 6px 10px;
  overflow: auto;
/*  white-space: pre-line; */
/*  word-break: break-all; */
/*  word-wrap: break-word; */
}

这里要注意千万别把代码直接删了,还是注释掉比较安全,注释的方法为:/* XXXX */

比如我还改了段落间距,起初是在p{}里改margin和padding,结果发现一直无效,后来查了下,才发现原来其还有个后代选择器,需要在其下修改才是直接对应正文的段落间距。。。

.entry .entry-content p{
  font-family: 'Open Sans', sans-serif; 
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 15px;
}

然后将最不习惯的主页上文章标题的样式改了,原来一直是以大写显示的,个人觉得还是不要这个样式,所以将对应中的text-transform参数注释掉了

.entry .entry-header .entry-title{
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 4px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 36px;
  margin: 0 0 10px 0;
/*  text-transform: uppercase; */
  position: relative;
}

仔细看了下整个CSS样式文件,发现几乎都可以通过自定义一些CSS代码对整个主题的样式进行微调,至少满足自己的喜好嘛,最后将这个文件将原来的style.css覆盖即可,最好将初始未修改的备份下

看起来是不是蛮美好的,其实能修改的还是极有限的,主要自己CSS懂的还是太少了,如果再会点PHP,完全可以自己来定义一个插件,这才是主要的。。。如果不喜欢插件的话,那静态网站更加适合(感觉自己又水了一篇。。。)