wordpress 添加页面模板-网站模板-锦华智联科技

使用页面构建器插件（最简单、推荐新手）

如果你不熟悉代码，或者希望拥有更强大的拖拽式设计功能,使用页面构建器是最佳选择。

（图片来源网络，侵删）

流行的页面构建器插件：

Elementor (免费版功能已非常强大)
Beaver Builder
Bricks Builder

操作步骤（以 Elementor 为例）：

安装并激活插件：
- 在 WordPress 后台，进入 插件 -> 安装插件。
- 搜索 "Elementor"，然后点击 现在安装，安装完成后点击 激活。
编辑页面：
（图片来源网络，侵删）
- 创建一个新页面（或编辑一个现有页面）,进入页面编辑器。
- 你会看到默认的“经典编辑器”和“Elementor 编辑器”两个选项，点击 使用 Elementor 编辑器。
设计页面：
- Elementor 会打开一个全屏的拖拽式编辑界面，你可以从左侧的元素库（如标题、文本、图片、画廊、按钮等）中拖拽模块到画布上。
- 你可以自由调整每个模块的位置、样式、颜色、字体等,实时预览效果。
保存并发布：
- 设计完成后，点击右上角的 更新 或 发布 按钮。

优势：

无需代码：完全可视化操作。
高度灵活：可以创建任何你能想象到的布局。
可重复使用：可以保存为模板,在其他页面中复用。

创建自定义页面模板（最灵活、适合开发者）

如果你想完全控制页面的 HTML 结构和 PHP 逻辑，或者需要集成复杂的自定义功能，那么创建自定义 PHP 模板是最佳选择。

步骤 1：创建模板文件

找到主题文件夹：
- 通过 FTP 或你的主机文件管理器，访问你的 WordPress 网站根目录。
- 进入 wp-content/themes/ 文件夹，然后进入你当前使用的主题文件夹（twentytwentyfour）。
创建模板文件：
- 在主题文件夹中，创建一个新的 PHP 文件，为了规范，文件名最好以 template- 开头，template-full-width.php 或 template-contact.php。

步骤 2：添加模板头部注释

这是最关键的一步！WordPress 通过这个注释来识别一个文件是否可以作为页面模板。

在你新创建的文件顶部,添加以下代码块：

<?php
/**
 * Template Name: 全宽度布局
 * Description: 一个没有侧边栏，全宽度的页面模板。
 */

Template Name: 必须填写，这将在 WordPress 后台的页面编辑器中显示给用户选择，全宽度布局”、“联系我们模板”等。
Description: 可选，更详细地描述这个模板的用途,方便用户理解。

步骤 3：编写模板内容

你可以在这个文件中编写你的 HTML 和 PHP 代码了,一个标准的页面模板通常包含以下结构：

<?php
/**
 * Template Name: 全宽度布局
 * Description: 一个没有侧边栏，全宽度的页面模板。
 */
// 获取网站头部信息 (header.php)
get_header();
// 如果有文章，则循环显示
if ( have_posts() ) :
    while ( have_posts() ) :
        the_post();
        ?>
        <main id="main" class="site-main">
            <div class="container">
                <?php
                // 显示页面标题
                the_title( '<h1 class="entry-title">', '</h1>' );
                // 显示页面内容
                the_content();
                // 如果页面有“分页”，则显示分页链接
                wp_link_pages( array(
                    'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwentyfour' ),
                    'after'  => '</div>',
                ) );
                ?>
            </div>
        </main><!-- #main -->
        <?php
    endwhile; // 结束 the_loop
endif;
// 获取网站底部信息 (footer.php)
get_footer();

代码解释：

get_header(): 加载你主题中的 header.php 文件。
have_posts() 和 the_post(): WordPress 的主循环,用于获取并显示当前页面的内容。
the_title(): 显示页面标题。
the_content(): 显示页面内容（你在编辑器中输入的文字、图片等）。
get_footer(): 加载你主题中的 footer.php 文件。

步骤 4：应用模板

上传文件：将你创建好的 template-full-width.php 文件通过 FTP 上传到你的主题文件夹中。
编辑页面：
- 在 WordPress 后台，进入 页面 -> 所有页面。
- 选择一个你想要应用此模板的页面（或创建一个新页面），然后点击 编辑。
选择模板：
- 在页面编辑器的右侧栏，找到 页面属性 模块。
- 在 模板 的下拉菜单中，你会看到你刚刚创建的模板名称（全宽度布局”）。
- 选择它，然后点击 更新 或 发布 按钮。

访问这个页面,你就会看到它应用了你自定义的模板布局。

进阶技巧：使用模板层次结构

你可能希望某个特定的页面（ID 为 42 的“关于我们”页面）使用一个特殊的模板，你可以利用 WordPress 的模板层次结构来实现,而无需在页面属性中选择。

创建特定模板文件：
- 在你的主题根目录下，创建一个名为 page-about.php 的文件。
- 在这个文件中,你可以编写完全自定义的代码。
WordPress 自动应用：
- 当你访问任何 ID 为 42 的页面时，WordPress 会自动优先查找并使用 page-about.php 这个模板，而忽略你在页面属性中选择的模板和其他通用的 page.php。

这种命名规则适用于：

page-{slug}.php (页面别名为 contact，则使用 page-contact.php)
page-{id}.php (页面 ID 为 12，则使用 page-12.php)
page-{post_type}.php (页面类型为 product，则使用 page-product.php)

方法	优点	缺点	适用人群
页面构建器	无需代码，可视化操作，功能强大，灵活性高	可能增加网站加载速度，对服务器有一定要求	所有人，特别是新手和不熟悉代码的用户
自定义 PHP 模板	完全控制代码，轻量，加载速度快，适合复杂逻辑	需要 PHP 和 HTML/CSS 知识，修改后需上传文件	开发者、有代码基础的主题制作者

对于绝大多数用户，我强烈推荐从 方法一（页面构建器） 开始，它简单易用且功能强大，只有当你需要实现非常特定的、页面构建器难以完成的功能时，才需要考虑 方法二（自定义 PHP 模板）。