归档： 文档

媒体库概述

媒体库是存储和管理网站所有多媒体文件的核心枢纽，包含图片、视频、音频、PDF文档、电子表格等多种文件类型。这些媒体资源可插入到文章和页面中，对提升网站视觉效果和用户体验至关重要。

媒体库导航

视图模式

• 网格视图：默认显示方式，以缩略图形式展示所有媒体文件
• 列表视图：显示文件名、文件类型等详细信息

筛选功能

1. 按媒体类型筛选（图片/视频/文档等）
2. 按上传日期筛选
3. 搜索功能（支持文件名和描述文字搜索）
4. 查看未使用的闲置媒体

文件上传

通过侧边栏或顶部的”添加新媒体文件”按钮，支持：

• 拖放单个/多个文件上传
• 传统文件选择方式
• 批量上传功能

媒体文件应用

插入媒体

通过区块编辑器可：

• 直接从电脑上传新文件
• 从媒体库选择现有文件
• 对于大视频文件，建议使用YouTube嵌入或视频区块

媒体属性编辑

图片编辑功能

1. 裁剪和缩放
2. 旋转和翻转
3. 尺寸调整（保持比例）
4. 恢复原始图片

图片优化指南

优化建议

• 上传前优化：使用TinyPNG等工具压缩
• 规范命名：使用描述性文件名（如”夏日促销海报.jpg”）
• 格式选择：WebP格式优先

优化工具

1. 在线工具：Squoosh.app、Bulk Resize
2. WordPress插件：WP Smush、Imagify
3. 设计软件：Photoshop导出优化功能

实践练习

1. 上传2张图片和1个PDF文档到媒体库
2. 使用筛选功能分别查看仅图片、仅文档
3. 创建新文章并插入媒体库图片
4. 通过视频区块添加YouTube视频
5. 编辑图片属性（ALT文本/标题/说明）
6. 调整图片尺寸后恢复原图

操作提示

• Unsplash可获取免费高质量图片
• 视频嵌入使用格式：https://youtu.be/视频ID
• ALT文本应简洁描述图片内容

引言

今天我们将深入内容创作的核心，学习使用强大的WordPress区块编辑器来创建文章和页面。

学习目标

• 理解区块编辑器的定义
• 掌握区块编辑器界面导航
• 区分内容编辑区与设置侧边栏
• 创建页面和文章
• 使用区块、模式和列表视图

区块编辑器简介

WordPress区块编辑器让您无需代码即可通过区块构建网站。登录仪表盘后，在左侧菜单选择”文章”或”页面”开始创建。我们以新建页面为例，点击顶部插入器可添加各种区块，包括段落、图片、栏目、图库、价格表等。

区块模式是另一项实用功能，提供预设的区块组合，可快速添加完整版块后再进行自定义。右侧媒体库支持从本地或Openverse（免费开源媒体库）添加素材。

添加区块的方法

有三种添加方式：点击左上角插入器、页面内插入器，或使用斜杠命令（如输入”/图片”添加图片区块）。最近使用的六个区块会显示在搜索框下方。

编辑器界面组成

界面分为三部分：

1. 内容编辑区：主体创作区域
2. 左侧边栏：区块选择器/列表视图
3. 右侧设置边栏：当前区块的详细设置选项

选中区块时会显示专属工具栏，包含转换区块类型、拖拽移动、文本对齐、加粗/斜体、添加链接等功能。点击三点菜单可展开更多选项。

列表视图的重要性

列表视图可清晰展示页面所有区块的层级结构，特别适合内容复杂的页面。您可以：

• 查看嵌套区块关系
• 通过拖拽调整区块顺序
• 快速定位特定区块
• 通过三点菜单进行批量操作

实战构建页面

让我们通过实例演示：

1. 添加图库区块并选择三张图片
2. 使用”在后面添加”功能插入预约表单模式
3. 通过列表视图选中父级区块，在设置边栏将三列布局改为两列
4. 为按钮区块更换绿色背景

站点编辑器中的页面操作

通过”外观→编辑器”进入站点编辑器后：

• 在内容区块中添加素材
• 使用相同方式继续构建页面
• 示例：添加YouTube嵌入区块并输入视频URL

创建文章的注意事项

文章创建流程与页面相同，但需注意：

• 分类、标签和特色图像的设置将在其他课程单独讲解
• 所有内容结构都通过区块搭建

总结

您现在应该已经掌握：

• 区块编辑器的基本导航
• 区块与模式的灵活运用
• 设置边栏的样式调整
• 列表视图的层级管理

引言

在WordPress仪表盘左下角的”设置”选项中，您可以配置网站的基础参数。本文将重点介绍几个关键设置，帮助您快速搭建网站框架。

学习目标

• 设置网站标题与副标题
• 调整时区设置
• 配置首页显示方式

网站标题与副标题

在”常规设置”中，网站标题和副标题不仅影响访客第一印象，更是SEO优化的重要元素：

• 标题：建议使用品牌名称（如”星辰科技”）
• 副标题：用简短语句说明网站定位（如”探索前沿数码科技”）

即使选择不在前台显示副标题，也建议填写完整，因为搜索引擎会收录这些信息。您可以通过两种方式修改：

1. 常规设置中直接编辑
2. 在站点编辑器中修改”网站标题”区块

时区配置

正确的时区设置能确保：

• 定时发布的内容准时上线
• 后台时间显示与本地时间一致

您还可以自定义日期格式和周起始日（适合不同地区习惯）。

首页显示设置

在”阅读设置”中，您有两种选择：

动态博客首页

默认显示最新文章列表，无需单独创建页面：

1. 系统自动使用”博客首页”模板
2. 通过”查询循环”区块控制文章展示方式
3. 进入”外观→编辑器”即可自定义模板

静态首页

创建独立首页的步骤：

1. 新建”首页”和”博客”两个页面
2. 在阅读设置中指定首页为静态页面
3. 选择”博客”页面作为文章展示页

注意：静态首页会自动应用默认页面模板（共享页眉页脚），而博客页必须使用专属模板且内容留空。

实践练习

请在WordPress Playground完成以下操作：

1. 更新网站标题和副标题
2. 调整时区至您所在地区
3. 创建”首页”和”博客”页面
4. 在阅读设置中配置静态首页，并关联已创建的页面

配置示例

核心定位差异

区块编辑器是内容创作的核心工具，专注于：

• 为文章/页面添加文本、图片等内容区块
• 通过组合区块构建单篇内容
• 在仪表盘的”文章”或”页面”模块中访问

站点编辑器则是整体设计控制中心，能够：

• 通过模板统一全站设计（页眉/页脚/侧边栏）
• 管理全局样式（色彩/排版/布局）
• 在”外观→编辑器”中访问

功能对比表

站点编辑器深度解析

核心功能模块

1. 导航管理：可视化编辑所有菜单结构
2. 样式中心：统一调整全站色彩、字体和区块样式
3. 模板体系：
   • 默认模板（应用于常规页面）
   • 特制模板（如”无标题页面”模板）
   • 内容容器区块（连接模板与具体内容）

模板运作原理

当创建”无标题页面”模板时：

1. 模板包含页眉、内容容器和页脚区块
2. 内容容器区块是关键桥梁，自动显示在区块编辑器中创建的具体内容
3. 通过列表视图可清晰查看模板层级结构

模板应用实例

更换页眉样式的操作流程：

1. 在模板库选择”居中LOGO页眉”模式
2. 关联现有导航菜单（如”生活方式”菜单）
3. 保存后前往页面编辑界面
4. 在右侧”模板”下拉菜单中选择新模板

协同工作场景

二者配合使用的典型场景：

• 内容创作者：在区块编辑器中撰写文章内容
• 网站设计师：通过站点编辑器确保所有文章都采用统一的模板样式
• 最终效果：内容自动注入模板的内容容器区块，保持全站风格一致

注意事项

• 文章页必须使用专用模板（不可更改）
• 修改模板将影响所有使用该模板的页面
• 通过”样式手册”可预览全局样式修改效果

简介

在本课程中，我们将运用目前学到的知识，通过设置页面、文章、站点标志和导航菜单来实践所学内容。

设置页面

首先，让我们创建页面。我将进入”页面”选项，点击”添加新页面”，然后可以选择主题自带的模板（我使用的是Twenty Twenty-Four默认主题）。选择一个吸引我的模板并命名为”首页”。发布后，返回页面添加下一页，这次不选择模板，命名为”博客”。接着创建”关于”页面并选择相关模板，最后创建无模板的”联系”页面。至此，我的页面已设置完成。

设置首页显示方式

接下来进入”设置”→”阅读”。在首页显示设置中，选择”静态页面”，将”首页”设为静态首页，”博客”页设为文章页。请注意：如果选择”最新文章”作为首页显示，您需要修改博客首页模板，因为此时没有创建具体页面。当我们打开静态首页的设置侧边栏时，会发现此页面被分配给了”页面模板”或默认模板，而博客页则被固定分配给了”博客首页模板”且不可更改。其他页面也都被分配了与首页相同的通用/默认模板。

设置文章

现在转向文章设置。如您所见，我已创建了两篇文章及分类/标签。分类用于内容的主題归类，标签则是内容的具体标识。举例来说，我将新建一篇关于纽约的文章，添加虚拟内容后，在侧边栏选择”旅行”分类，添加”城市”标签，最后设置文章特色图像（代表文章的主图）。发布后即可查看包含分类标签的三篇文章。

设置导航菜单

进入”外观”→”编辑器”打开站点编辑器。首页顶部可见主题提供的页眉模板，编辑时会提示”需通过编辑模板修改此区块”。点击”编辑模板”后即可修改页面模板的页眉（注意此修改会同步到博客首页模板）。右上角的导航菜单在我们创建页面时已自动生成。在列表视图中可见导航项仍属于页面列表，需在侧边栏点击”编辑”解除绑定才能单独管理项目。解绑后可通过列表视图或导航块工具栏调整顺序。

我决定在导航菜单添加社交链接：点击导航块的”插入器”，添加”社交图标”区块并选择平台（如X和Instagram），记得填写对应URL。通过导航块设置的三点菜单可以创建新菜单或选择现有菜单，还能调整对齐方式和方向。在”样式”选项中可进一步自定义导航菜单外观。

设置站点标志

主题提供的页眉模板包含”站点标志”区块。点击后可从媒体库选择或直接上传电脑中的图片。我将上传预先准备的标志图片并适当放大。

在页脚添加导航菜单

滚动到页脚区域，默认模板已包含”快速链接”等虚拟内容。通过列表视图选择导航块，在侧边栏选择对应菜单即可将导航菜单添加至页脚。

选择样式

当页眉页脚的导航菜单就位后，可以决定网站整体风格。进入”样式”可自定义排版、色彩和布局，或通过”浏览样式”查看主题预设的各种风格组合。这里我选择”铁锈”风格作为示例。

添加内容

完成页面、文章、导航菜单、标志和样式设置后，即可开始填充页面内容并修改已添加的模板。对于无模板的”联系”页面，可以从零开始构建。要调整文章显示方式，需编辑博客首页模板中的”查询循环”区块来控制动态内容的展示形式。

实践练习

请前往WordPress Playground完成以下任务：

1. 创建4个页面：首页、博客、关于、联系
2. 设置静态首页和文章页，分配您创建的首页和博客页
3. 创建文章并添加特色图（无本地图片可使用unsplash.com的免费图库）
4. 添加分类和标签并应用到文章（可参考视频示例）
5. 在站点编辑器中打开页面模板，为页眉添加站点标志（页面将自动出现在导航菜单）
6. 参照示例，在导航菜单添加含X和Instagram链接的社交图标区块（URL可填虚拟内容）

简介

本节课我们将创建并自定义页眉和页脚。区块主题允许我们使用区块构建整个网站，包括页面、文章、模板和模板部件。此前我们已经探索过嵌套区块和使用区块模式，现在我将利用主题自带的模式来定制站点的页眉页脚。这些模式已为您完成了大部分布局工作，是绝佳的创作基础。

静态首页与文章页设置

开始前需要说明：我使用的是Twenty Twenty-Four区块主题，在”设置→阅读”中已配置静态首页和文章页。因此在页面编辑器中可以看到，首页与其他导航菜单页面都被分配给了默认页面模板。

页眉页脚模式应用

进入站点编辑器后请注意：当前所有模板共享相同的页眉页脚。这意味着如果修改当前模板部件，所有相关模板都会自动更新；但若在某个模板中替换页眉/页脚，则需手动同步到其他模板。

添加页眉模式

在页面模板中打开列表视图，点击页眉区块的三点菜单选择”替换页眉”。从主题提供的模式中选择”全宽背景图页眉”开始定制：

1. 替换封面区块的背景图为媒体库中已上传的图片
2. 上传透明LOGO至站点标志区块
3. 将封面区块不透明度调为零（因选用浅色背景图）
4. 修改站点标题的字体、颜色并放大字号
5. 调整导航菜单的字体、颜色和尺寸
6. 为行区块添加内边距增强留白效果

完成设计后需保存，并手动将该页眉更新至404模板等其他相关模板。

自定义页脚模式

选择保留现有页脚模式进行修改（所有模板会自动同步更新）：

• 放大站点标志并添加副标题
• 将中间栏标题改为”快速链接”，替换虚拟导航菜单为实际创建的页眉导航
• 最右侧栏更新社交媒体链接（替换原占位符）
• 新增隐私政策和条款页面至第三栏导航

保存后，访问404模板等页面可立即看到同步更新的页脚效果。下图展示联系页面的前端呈现效果。

结语

页眉页脚模式能为您提供强大的设计基础，大幅提升创作效率。期待这些工具能助您打造理想的网站框架。