从我的博客的界面可看出，我这个网站是用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，完全可以自己来定义一个插件，这才是主要的。。。如果不喜欢插件的话，那静态网站更加适合（感觉自己又水了一篇。。。）
本文出自于http://www.bioinfo-scrounger.com转载请注明出处