NekoLab

修改Wordpress主题模板的CSS

尽管网上公开的Wordpress主题很丰富,但模板总有些不尽如人意的地方,特别是字体大小、页边距、段间距这种参数。修改起来其实很简单,没有什么技术难度,也不需要理解CSS和HTML代码。只需要定位到CSS文件中设置相应参数的那一行就可以了。比如我们要修改主页上大标题的字体大小,下面是简单步骤。

以下教程以Chrome浏览器为例,其他浏览器也有类似功能。

1. 审查元素

右键点击要修改样式的大标题上,点“检查”来查看这段文本对应的代码,会高亮显示在弹出的框中。

2. 找到对应的HTML代码行

HTML结构是一级套着一级的,刚才可能没有选取到文本本身,而是包含着文本的某个元素。在HTML查看器里点小箭头,展开一些层级,当鼠标停留在每一行上,网页对应的位置会被选中,直到找到需要修改的位置。在这里,我们找到了包含标题文本”TEA IN AUTUMN”的一行,点击它,右边的窗口就会改变,显示对应这个元素的CSS属性,其中就包含了字体大小、颜色、间距这样的参数。

3. 找到CSS参数名

在右边CSS窗口里打开”computed”选项卡,往下面翻,font-size这个名字就告诉了参数的含义。点开小箭头,能看到这个参数被很多个地方修改过,更靠上方的修改会覆盖下面的值,所以一个个条目都会被划掉。这里第一条没被划掉的是100%,没有描述字体具体有多大,再往下才是字体真正的大小3.6em,我们需要修改的是这里。条目右边style.css链接冒号的最后就是这个参数在style.css文件中的行号1059,于是可以定位到文件对应的位置。

4. 在CSS文件中修改相应位置

登录Wordpress后台,在菜单Appearance->Editor里面可以编辑主题的所有文件,在右边列表的最下面找到style.css文件打开它,一般都有几千行。复制到一个能显示行号的文本编辑器里面,找到这一行,果然有site-title的font-size属性,修改它然后复制到网页源文件里就好了。

有时候未必一次能找到正确的位置,或者css文件有好几个地方出现相同的参数,需要反复尝试一下。