目录
大纲
WP建站和运维

使用全局样式设计网站

引言

通过全局样式设计网站。学习目标是修改全局样式以体现自身品牌特色。内容包括更改排版、色彩布局、使用字体库功能、如何应用调色板修改强调色,以及修改区块的全局样式(以引用区块为例)。在开始前可参考两个资源:字体配对。好的设计原则是为标题选择一种字体样式,为正文选择另一种字体样式。Google Fonts有一篇相关文章。另一个资源是字体配对网站FONTPAIR,其配对标签中提供了搭配协调的字体组合。色彩方案是设计前需考虑的另一点。这里推荐两个免费资源:Coolors提供趋势调色板及色码(建议记录备用),Canva也提供免费调色板。

全局样式

现在进入仪表板。查看左侧站点工具栏,点击”外观”→”编辑器”。进入设计板块的”样式”菜单,会看到样式手册图标(后续课程讲解)和铅笔图标(悬停显示”编辑样式”)。点击铅笔图标进入样式浏览。

浏览样式

打开右上角半月形右侧菜单,悬停显示”样式”,选择”浏览样式”。Twenty Twenty-Four主题提供8种变体,包含不同颜色与字体组合。点击任意变体可即时查看区块效果。此处保持默认主题,仅修改部分颜色以匹配调色板,然后返回样式板块。

排版

本板块管理字体族、尺寸、外观设置(从文本到链接和按钮)。如前所述,设计建议标题使用一种字体族,正文使用另一种兼容字体族。新功能预设允许查看不同字体组合,即使使用默认主题也可自由修改字体。主题自带字体列于此处,包含多种组合变体。

字体库

新功能支持管理字体。悬停图标打开字体库,可查看主题字体或上传/安装字体。以安装Google Fonts为例:授权访问后浏览390页字体库(录制时数据),选择Open Sans作为正文字体。选取400常规体(比300稍深)、700粗体、400斜体及对应粗体,共四种变体后点击安装。返回库标签可见已激活字体。上传功能需支持TTF/OTF/WOFF/WOFF2格式,选择标题字体(如Bellota)时仅安装常规体和粗体。完成后关闭库,右侧菜单将显示新增选项。

元素

下方元素板块支持全局修改文本。安装新字体后,进入文本设置改为Open Sans常规体,点击保存。

标题

保存后进入标题设置。可为所有标题设置相同字体族(每页一个h1,按结构使用h2/h3等)。可调整各层级字体大小(例如增大h3),将字体族改为Bellota粗体。因该字体较小,选择4.5rem单位(便于移动端适配)。保存后检查效果,将h3改为Open Sans但增大尺寸。前端预览确认更改后退出排版设置。

颜色

本板块用于微调所选调色板。默认调色板含10种颜色,可点击调色板查看实色/渐变选项。点击三点图标选择”显示详情”查看颜色名称,修改强调色3为深红色,确认后保存。可添加自定义颜色,完成后返回颜色菜单。

字体颜色

下方颜色区设置基础文本/背景/标题颜色(含h1等)。以按钮为例:点击按钮颜色选项,设置文本(保持白色)和背景(改为红色),保存后全局按钮样式即更新。

布局

布局板块设置主内容区域样式,提供内容宽度(像素单位)及默认内边距。调整时可通过标题区域实时预览变化。区块间距为默认设置,检查后退出。

区块

区块板块列出主题所有区块,支持全局或特定区块外观定制。建议优先使用全局样式,避免单独修改每个区块导致混乱。以引用区块为例:滚动至示例区域,引用区块包含段落和作者署名。可通过排版选项更改字体(如Open Sans常规体或斜体),调整大小后保存。

结语

以上为使用全局样式设计网站的基础方法。请自行探索站点并查看更多课程。

实践

使用下方WordPress Playground测试技能:

浏览主题提供的各种样式变体。

使用字体库安装自选字体集合。

将文本排版改为不同字体样式。

在布局→尺寸中扩大主内容区域宽度。