如何让WordPress 文章标题更好看?5 分钟教你用CSS 自己改样式!

如何让WordPress 文章标题更好看?如何将文章标题加上背景色?如何修改标题的样式?如何让文章标题更加凸显出来呢?

这些都是WordPress 新手站长很常问的问题,因为WordPress 内建的文章样式,原本也是参考英文使用者而去做出的设计,所以应用在中文上真的不是很好看。

接下来,我将教你如何使用最正确的WordPress 修改方式,去改变网站标题的样式,让你的文章标题变得更吸睛、更好看!

1、利用CSS 修改样式

要修改WordPress 中的文章标题( Heading ),你会需要用到一个叫做CSS的标记语言。

在进入CSS 的介绍之前,为了让你更加了解CSS 的功能,所以我先准备了一个「乳酪蛋糕做法」的例子给你看,相信看完之后,你应该就对CSS 有深刻的印象了。

  • 以下是用WordPress 预设的文章样式写出来的东西:
  • 以下是用CSS 改变后的样貌:

你可以很明显地看到,标题的部分左边多了一条线,并且有背景颜色,看起来跟内文有明显的区别,因此也有起到凸显标题的作用,而这就是CSS 的威力。

好的,既然我们上面提到了很多次CSS,那么究竟什么是CSS 呢?

2、CSS 简单介绍

什么是CSS?

CSS 又称为阶层式样式表( Cascading Style Sheets ),详细内容可以参考MDN的介绍,在这篇文章我不会详细解讲,简单来说,你只要知道CSS 是用来掌管网站外观的一种标记语言就行了。

修改样式一定要用CSS 吗?能不能用外挂解决?

你可能会问说:「我没有任何程式背景,能不能用外挂做到相同的效果呢?」。

在这边先跟你说句抱歉,可能没办法;如果你想要自订WordPress 文章标题的样式,那么自己写CSS 会是你最好的解法。

原因在于,一般我们不会在WordPress 文章中使用任何外挂去写文章,第一个原因是之后你删除外挂或是换主题时,文章有用到外挂的部分都会出问题;再来就是使用外挂将会导致页面载入速度变慢、以及影响主机效能等负面影响。

但其实不用对CSS 太害怕,因为严格来说CSS 并不算是一个程式语言,而是一个标记语言,它并不具有程式语言里面有的逻辑,例如:函式、回圈、判断式,因此学习CSS 其实是非常简单上手的。

CSS 盒模型( Box-Model )

针对修改文章标题,你只会用到一个CSS 的重要概念:盒模型( Box-Model ),盒模型主要是由以下四个元素所组成:

理想中的盒模型外观
  1. 内容( Content ) – HTML 元素所占的空间大小
  2. 内距( Padding ) – 内容到边线之间的范围
  3. 边线( Border ) – 内距与外距之间的范围
  4. 外距( Margin ) – 边线之外的范围

以刚刚的文章标题为例,会是长这样子:

  • 边框、内距、外距,都可以分别指定,例如这个例子之中,只有左边框下外距上/下/左内距
  • 在这个例子之中,我们想要左边要一条线作为强调,因此只要显示左边框即可。
  • 因为边框是包覆在内距之外,线段的长度是被内距所决定的,也就是内距越宽,边框就越长。
  • 外距是用来将整个区块与其它部分做分隔的部分,在这边WordPress 预设是只用下外距,避免跟照片/文字挤在一起。

看起来还是没有很好懂吗?没关系,接下来你照着范例实作一次就能更了解了。

3、开始自订文章标题

简单讲解完CSS 的Box-Model 之后,那我们就来实际做一次文章一开始的范例吧,希望做完之后,你也有能力修改成自己想要的外观。

范例标题作法

前往WordPress 编辑文章,建立一个任一大小的标题( Heading )。

点击刚刚建立的标题,选择右边的区块,并在最下面的「附加的CSS 类别」中边输入一段你自定义的文字,例如我输入的cheese-cake

这是一个被称为「class」的CSS 属性,你可以先把它理解成标签的作用,所以说我们,对这个标题贴上了一个叫做cheese-cake的标签,等等会用到。

接着回到网站前台,点选WordPress 最上方黑框框处的自訂选项,进入自订模式。

找到最下方的附加的 CSS栏位。

将以下代码复制贴上至空白处,并按下发布。

.cheese-cake{
    background-color: #f7f7f7;
    padding: 16px 0 16px 24px;
    border-left: 8px solid #e85a5a;
    color: #333 !important;
}

完成之后,你应该就会得到这样子样式的标题了!

如果你之后想要制作出一样的样式标题,那你只要在想要的标题中再写上一样的CSS 类别,即可完成!

刚刚发生了什么事?

刚刚我们做了一个复制贴上程式码的动作,就造成了这个结果,是为什么呢?

.cheese-cake{
    background-color: #f7f7f7; /* 告訴電腦背景顏色 */
    padding: 16px 0 16px 24px; /* 告訴電腦內距要多大 */
    border-left: 8px solid #e85a5a; /* 告訴電腦左邊框要多寬、跟顏色 */
    color: #333 !important; /* 告訴電腦文字顏色 */
}

刚刚贴上的这段CSS 程式码的意思,是只要有 cheese-cake 这个class 的内容,都会受到这段程式码影响。

而为什么你会有cheese-cake这个 class 呢?那是因为我们在Step 1 的时候,有自己定义class。

而如果想要在自订CSS 的栏位中选择到这个class的话,我们必须要在程式码前面加上一个.,这个的话只能请你背起来,因为是固定用法。

至于程式码的内容,其实就算你不懂CSS,多少也能猜出在讲什么,因为上面都是写英文,不过我还是稍微讲解一下:

  • background-color: #f7f7f7;-> 代表背景颜色是#f7f7f7 这个颜色
  • padding: 16px 0 16px 24px;-> 分别代表内距上、右、下、左各项的数值
  • border-left: 8px solid #e85a5a;-> 代表左边线的粗细以及颜色
  • color: #333 !important;-> 代表字体颜色是#333 这个颜色,!important代表它的优先等级是最高的。

评论奖励空投代币