在上一篇教程中，我详细讲解了 WordPress 网站发布文章的流程与注意事项，主要围绕默认区块编辑器和常规属性设置，适用于大多数博客类内容。本文将在此基础上，聚焦更具结构性与展示性的“独立页面”创建与配置。
这类页面通常作为站点的 Hub 页面、项目介绍页、专题落地页，甚至直接作为首页，需要更灵活的排版、更丰富的模块组合，以及对主题与插件功能的更深入运用。
1. 什么是独立页面？与文章有何区别？
在 WordPress 中，“页面（Page）”和“文章（Post）”是两种不同的内容类型。虽然它们都可以通过编辑器进行撰写和发布，但用途、结构以及展示方式却截然不同。
1.1 页面（Page）适合承载“静态内容”
页面通常用于创建不随时间变化的固定内容，如：
- 关于我们（About）
- 联系方式（Contact）
- 服务介绍 / 项目展示
- 下载中心 / 成果页
- 自定义专题页、Hub 聚合页
- 首页、登陆页、活动页……
这些页面更像是网站结构的一部分，而不是内容流中的一篇“文章”。它们不属于分类、也不会自动出现在博客文章列表中，更不会按时间排序。
1.2 文章（Post）适合发布“动态内容”
相对而言，文章更适合用于发布时间相关的内容，例如：
- 博客日志
- 教程连载
- 新闻更新
- 系列笔记
文章默认按时间倒序排列，可以归入分类和标签系统，利于内容归档与更新展示。
1.3 功能上的关键区别
| 项目 | 页面（Page） | 文章（Post） |
|---|---|---|
| 结构归类 | 不属于分类和标签 | 可设置分类和标签 |
| 展示位置 | 通常用于菜单、首页或自定义区域 | 显示在文章列表中 |
| 时间排序 | 无时间性，固定存在 | 按发布时间排序 |
| 页面模板支持 | 可选用全宽/无边栏等模板样式 | 多数使用统一文章模板 |
| 适合内容类型 | 落地页、关于页、功能聚合页等 | 博客文章、教程、新闻等内容 |
1.4 页面对站点结构的重要性
你可以把“页面”看作是网站的骨架结构，它们组成了用户访问的关键入口。一个好的页面结构，能有效提升站点的专业感与导航效率。例如：
- 使用页面创建专题聚合页（如 WordPress 入门教程），引导用户阅读相关内容；
- 使用页面打造简洁的引导页（Landing Page），提升转化率；
- 使用页面设计首页布局，形成统一的视觉风格和信息传递节奏。
2. 如何规划与构建一个高质量页面
创建页面的步骤和文章基本一致，真正拉开差距的是内容的组织方式与页面的模块构建能力。一个高质量的独立页面，往往不是单纯的“内容堆叠”，而是经过合理结构规划和视觉布局设计的结果。
2.1 从目的出发，先规划页面结构
在开始制作页面之前，建议先明确以下几个问题：
- 这个页面的目标是什么？是展示信息？引导点击？汇聚内容？
- 谁是你的目标读者？他们的核心关注点是什么？
- 你希望用户在这个页面上完成什么行为？
根据目标不同，页面的结构也会不同。比如：
- 项目页：可能包含简介、图片展示、外链下载、联系方式
- 专题页 / Hub 页：可能需要多个内容模块，如文章聚合、标签跳转、内页导航
- 首页：通常包括视觉横幅、简介、模块化导航、精选内容等
建议先在纸上画出草图或思维导图，提前规划模块顺序与信息层级，有助于后续编辑时不跑题、不堆砌。
2.2 利用古腾堡编辑器构建页面模块
如果你想保持站点轻量，又不额外付费购买插件。WordPress 自带的的古腾堡（Gutenberg）编辑器就是个不错的选择，它非常适合页面构建，不像传统编辑器（TinyCME）那样强调连贯性，而是鼓励用“区块”堆叠结构。
你可以用以下这些原生区块快速搭建页面内容：
- 封面（Cover）：用于制作视觉头图或横幅，适合做页面开头
- 栏目（Columns）：创建左右结构、图文并排布局
- 媒体与文本：常用于插图介绍、图右文左的场景
- 按钮、嵌入、分隔线、组块：增强页面交互性与分段感
也可以结合使用“短代码区块”、“HTML 自定义区块”嵌入第三方内容，如地图、表单、视频等。
2.3 灵活运用主题与插件扩展功能
有些主题提供了页面模板选项（如“全宽”、“无边栏”），适合用来制作视觉性更强的页面。你可以在右侧设置栏中选择合适的模板，控制页面布局基础。如果你需要更复杂的布局能力，可以考虑使用扩展构建器插件：
- Gutenberg 插件拓展（如 Kadence Blocks、GenerateBlocks）
- Elementor / Spectra / Stackable 等可视化页面构建器
- 简洁需求也可用 ACF 插件 + 自定义字段实现模块化数据填充
3. 一个真实的页面创建案例
上边的图册展示了 Kevin's Space 当前正在使用的首页界面。该页面由 Impeka 主题与 WPBakery Page Builder 共同构建，从结构、模块到交互样式，已经接近一个完整的企业官网，远超传统博客式 WordPress 首页的排版模式。
整个页面从上到下依次包括：全屏 Slider、最新博文、沉浸式图片块、本站介绍、精选文章、最近更新内容、画册展示、订阅留言区以及页面底部。此外，还设计了独立的主导航菜单、顶部按钮栏、个性化模态弹窗等功能模块，整体逻辑清晰、视觉丰富。
这类页面的构建，得益于 Impeka 主题所提供的模块化设计体系、可视化样式管理、响应式布局预设，再结合 WPBakery 强大的页面搭建能力，实现起来其实并不复杂。
当然，难点不在技术，而在设计与构思。我在制作本页面时，参考了主题官方提供的多套 DEMO 模板，并基于中文语境进行了本地化改造，同时根据本站的定位不断微调、优化和精简结构，避免“功能过剩”带来的视觉疲劳和加载负担。
3.1 WPBakery 编辑器使用体验与优势
截图中所示的编辑界面，来自 WPBakery 的页面构建器。相比 WordPress 默认的古腾堡编辑器（Gutenberg），WPBakery 在以下几个方面具有显著优势：
- 可视化编辑：提供 Backend Editor（后端模式） 和 Frontend Editor（前端实时编辑模式），后者为所见即所得，非常适合新手直观拖拽构建页面。
- 模块丰富：内置了几十种通用内容区块，如图文排版、按钮、栏目、表格、轮播、计数器、弹窗等，几乎涵盖所有网站常见布局需求。
- 灵活排版：支持行列结构自由组合、响应式分栏设置，配合主题样式可以快速实现复杂页面设计。
- Classic Mode：适用于进阶用户，通过纯文本+短代码方式快速调整结构，适合开发者与熟悉 HTML 的用户。
WPBakery 的一大优势在于其庞大的模板库和全球生态支持，加上诸多主题（包括 Impeka、Bridge、Salient 等）默认集成或兼容该编辑器，使其成为当前 WordPress 中最受欢迎的页面构建工具之一。不过，它也有一些小缺点，比如：
- 界面仅支持英文，对中文用户有一定门槛；
- 模块过多时编辑区可能较为拥挤，加载稍慢；
- 与 Gutenberg 无法无缝切换，存在一定锁定风险。
3.2 熟悉主题的功能并灵活使用
在当前的创作需求下，大多数现代 WordPress 主题都内置了许多个性化功能，比如灯箱、弹窗、提示框、滑块、滚动动画等。这其中，Kevin's Space 使用的 Impeka（现 Somentra）主题，无疑是功能最全面的一类，它内建了大量模块与样式，几乎可以实现各种网页表现效果。
以本站首页为例，顶部的全屏 Slider 不仅可以自定义数量、图片、按钮，还可以设置每张图的动画方式、摘要文字的对齐方式、大小、颜色，甚至支持在图片上叠加富媒体内容。所有这些，都已集成在了主题之中，无需额外插件。
此外，Impeka 还支持为每个页面单独设置菜单样式、侧边栏、弹窗内容、特色图像开关、页面标题显示样式等。这种细致的定制能力，使得每个页面都能灵活呈现，组合出几乎无限的页面形式，具体见「Impeka 主题下载 & 介绍」。
我想说的是：尽可能去了解并熟悉你正在使用的主题，充分挖掘它原生提供的模块和功能。很多时候，我们习惯一遇到需求就去找插件解决，但其实主题往往已经内置了解决方案。只有在确认主题功能无法满足时，再谨慎地引入插件，以免功能重复、页面变慢或产生兼容性问题。毕竟，少即是多，稳定最重要。
3.3 利用自定义代码片段丰富页面
当主题和插件的功能已经无法完全满足你的页面设计需求时，其实可以进一步借助自定义代码片段来实现更多个性化效果。比如本站首页的第三屏，就是通过调用 API 自动提取 Bing 每日一图 并展示在页面上，形成一张满屏的高清背景图。这种方式不仅增强了视觉冲击力，也与本站“摄影”主题高度契合，使整个页面显得更加专业、大气。
实现方式其实很简单，以下是我使用的代码片段：
// 为首页输出 Bing 每日一图及其说明
function get_bing_daily_image() {
$response = wp_remote_get('https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1');
if (is_wp_error($response)) return [];
$data = json_decode(wp_remote_retrieve_body($response), true);
return isset($data['images'][0]) ? [
'url' => 'https://www.bing.com' . $data['images'][0]['url'],
'title' => $data['images'][0]['title'],
'copyright' => $data['images'][0]['copyright']
] : [];
}
// 将必要的 Html 和 Css 插入到特定位置
function add_bing_daily_image_css() {
if (!is_page(7520)) return;
$image_info = get_bing_daily_image();
if ($image_info) {
$image_url = esc_url($image_info['url']);
$image_title = esc_html($image_info['title']);
$image_copyright = esc_html($image_info['copyright']);
echo "<style>.bing-daily-background{background-image:url('$image_url');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;position:relative;height:100vh;}.bing-image-info{position:absolute;bottom:20px;right:20px;color:white;background:rgba(0,0,0,0.7);padding:10px;border-radius:5px;display:none;z-index:10;}
.grve-blog-grid .grve-post-content p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;}
.grve-header-menu li.grve-first-level:not(.grve-menu-element-first-level) > .grve-link-wrapper:not(.grve-menu-element-link-wrapper) > a {letter-spacing:0}
h3, .grve-h3 {font-size:26px;line-height:32px;}
</style>";
// 以上 CSS 第二行控制首页“最近更新”的摘要行数
echo "<script>document.addEventListener('DOMContentLoaded',function(){var bgContainer=document.querySelector('.bing-daily-background');var bgInfo=document.createElement('div');bgInfo.className='bing-image-info';bgInfo.innerHTML='<strong>$image_title</strong><br><em>$image_copyright</em>';bgContainer.appendChild(bgInfo);if(bgContainer.offsetHeight>0){bgInfo.style.display='block';}});</script>";
}
}
add_action('wp_head', 'add_bing_daily_image_css');你还可以进一步优化页面性能，例如：通过条件判断，仅在首页加载特定的 CSS 和 JS 文件，避免这些资源影响其他页面的加载速度，从而让整个站点运行得更加轻盈、高效。
以上，就是我构建 Kevin's Space 首页的整体思路与操作过程。如果你在搭建过程中也有类似的需求，或者对某些细节还有疑问，欢迎在评论区留言，我们一起探讨、一起成长。
[…] 从零开始，教你做好 WordPress 个性化独立页面 05/21/2025 […]