WordPress新建页面模板如何创建与使用？-网站模板-锦华智联科技

下面我将为你提供一份从基础到高级的、非常详细的 WordPress 新建页面模板教程。

（图片来源网络，侵删）

第一步：理解页面模板的工作原理

WordPress 的页面模板系统遵循一个简单的规则：

模板文件：你需要在当前主题的根目录下创建一个 PHP 文件。
模板头注释：在这个 PHP 文件的开头，你必须添加一个特殊的注释块，告诉 WordPress 这是一个页面模板，这个注释块至少需要包含 Template Name:。
WordPress 识别：当你添加了这个注释块后，WordPress 就会在编辑页面时，在右侧的“页面属性” > “模板”下拉菜单中显示这个模板的名称。
应用模板：你可以在任何页面上选择并应用这个模板，该页面就会使用这个模板文件来渲染内容。

第二步：创建一个简单的页面模板

假设我们要创建一个名为“全宽无侧边栏”的页面模板。

复制并修改 `page.php`

最简单、最安全的方法是复制你当前主题的 page.php 文件，并将其重命名，我们将其重命名为 page-full-width.php。

为什么复制 page.php？
- page.php 是 WordPress 的默认页面模板，它包含了所有页面都需要的核心代码，如 get_header(), get_footer(), the_content() 等。
- 通过复制它,我们保留了主题原有的结构和功能，然后只修改我们想要改变的部分。

添加模板头注释

打开你刚刚创建的 page-full-width.php 文件，在文件的最顶部添加以下代码：

（图片来源网络，侵删）

<?php
/**
 * Template Name: 全宽无侧边栏
 * Description: 一个没有侧边栏，全宽显示内容的页面模板。
 */
?>

Template Name: 全宽无侧边栏：这是在 WordPress 后台显示的名称，可以自定义。
Description: ...：这是可选的，用于描述模板的用途，方便你和其他开发者理解。

你的 page-full-width.php 文件内容看起来应该像这样（以默认的 Twenty Twenty-One 主题为例）：

<?php
/**
 * Template Name: 全宽无侧边栏
 * Description: 一个没有侧边栏，全宽显示内容的页面模板。
 */
get_header();
?>
    <main id="primary" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', 'page' );
            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        endwhile; // End of the loop.
        ?>
    </main><!-- #primary -->
<?php
// get_sidebar(); // <-- 注释掉或删除这行，是移除侧边栏的关键！
get_footer();
?>

修改模板布局

在上面的代码中,我们做了两件重要的事：

添加了模板头注释：如上所述。
移除了侧边栏：我们注释掉了 get_sidebar(); 这行代码，这告诉 WordPress 在这个页面模板中不要加载侧边栏文件（通常是 sidebar.php）。

你还可以在这个文件里做任何你想做的修改,

改变 HTML 结构的类名（将 site-main 的宽度从 container 改为 container-fluid）。
在 the_content() 前后添加自定义的 HTML 或 PHP 代码。
的显示方式等。

第三步：使用模板文件

模板文件已经创建好了,现在我们需要在 WordPress 后台应用它。

（图片来源网络，侵删）

创建或编辑页面：
- 登录 WordPress 后台。
- 转到 页面 > 添加新，或者编辑一个现有的页面。
选择模板：
- 在右侧的编辑栏中,找到 页面属性 框块。
- 在模板的下拉菜单中，你应该能看到你刚刚创建的 “全宽无侧边栏”。
- 选择它。
发布/更新页面：
- 填写页面标题和内容,然后点击 “发布” 或 “更新” 按钮。

当你访问这个页面时,它就会使用你创建的 page-full-width.php 模板来显示，并且不会有侧边栏。

第四步：进阶技巧

技巧1：创建完全空白的模板

如果你想创建一个“着陆页”或“启动页”，它可能不需要 WordPress 的标准头部、底部或标题。

创建一个新文件,page-blank.php。
添加模板头注释。
写入你自己的 HTML 结构，完全不使用 get_header() 和 get_footer()。

<?php
/**
 * Template Name: 空白模板
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <!-- 在这里放置你的自定义内容 -->
    <div class="my-custom-landing-page">
        <h1>欢迎来到我的网站！</h1>
        <p>这是一个使用空白模板创建的页面。</p>
    </div>
    <?php wp_footer(); ?>
</body>
</html>

技巧2：基于页面标题或 ID 应用不同逻辑

你希望一个模板能根据不同页面的内容展示不同的东西,你可以在模板文件中使用条件判断。

<?php
/**
 * Template Name: 动态服务展示模板
 */
get_header();
?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        // 获取页面标题
        $page_title = get_the_title();
        // 根据页面标题显示不同的内容
        if ( $page_title === '网站开发' ) {
            // 显示网站开发相关的服务
            echo '<h2>我们的网站开发服务</h2>';
            echo '<p>包括响应式设计、电商网站、企业官网等。</p>';
        } elseif ( $page_title === 'UI/UX 设计' ) {
            // 显示UI/UX设计相关的服务
            echo '<h2>我们的 UI/UX 设计服务</h2>';
            echo '<p>包括用户研究、原型设计、交互设计等。</p>';
        } else {
            // 默认显示页面内容
            get_template_part( 'template-parts/content', 'page' );
        }
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main><!-- #primary -->
<?php
get_sidebar();
get_footer();
?>

技巧3：使用高级自定义字段

更高级的做法是结合 Advanced Custom Fields (ACF) 这样的插件，你可以为页面模板添加自定义字段，然后在模板中调用这些字段的数据。

安装并激活 ACF 插件。
为你的页面模板（服务页面”）创建一个字段组，比如添加一个“服务特色图标”和“服务描述”字段。
在你的页面模板文件中,调用这些字段：

<?php
/**
 * Template Name: 服务页面模板 (使用ACF)
 */
get_header();
?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            </header><!-- .entry-header -->
            <div class="entry-content">
                <?php
                // 获取自定义字段
                $service_icon = get_field('service_icon'); // 假设字段名是 service_icon
                $service_description = get_field('service_description'); // 假设字段名是 service_description
                if( $service_icon ): ?>
                    <img src="<?php echo esc_url($service_icon['url']); ?>" alt="<?php echo esc_attr($service_icon['alt']); ?>" />
                <?php endif; ?>
                <?php if( $service_description ): ?>
                    <p class="service-description"><?php echo esc_html($service_description); ?></p>
                <?php endif; ?>
                <?php
                // 显示页面编辑器中的内容
                the_content();
                ?>
            </div><!-- .entry-content -->
        </article><!-- #post-<?php the_ID(); ?> -->
        <?php
        endwhile; // End of the loop.
        ?>
</main><!-- #primary -->
<?php
get_footer();
?>

第五步：最佳实践和注意事项

使用子主题：强烈建议在子主题中创建和修改模板文件，这样，当父主题更新时，你的自定义修改不会被覆盖，保证了网站的安全性。
命名规范：模板文件名最好以 page- 开头，page-showcase.php，这样很容易识别其用途。
保持简洁：模板文件应该专注于布局和结构，尽量把复杂的逻辑和样式分离出去，样式可以放在子主题的 style.css 中，复杂的逻辑可以写成自定义的 PHP 函数放在 functions.php 中。
使用 get_template_part()：如果你的页面中有多个部分（如内容区、相关文章区、推荐区等），可以将每个部分拆分成单独的文件（如 content-service.php, related-posts.php），然后在主模板中使用 get_template_part() 来调用它们，这会让你的代码更清晰、更易于维护。
测试：创建模板后，一定要在不同页面和不同设备上进行测试，确保它按预期工作。

希望这份详细的教程能帮助你成功创建自己的 WordPress 页面模板！

WordPress新建页面模板如何创建与使用？

目录

第一步：理解页面模板的工作原理

第二步：创建一个简单的页面模板

复制并修改 page.php

添加模板头注释

修改模板布局

第三步：使用模板文件

第四步：进阶技巧

技巧1：创建完全空白的模板

技巧2：基于页面标题或 ID 应用不同逻辑

技巧3：使用高级自定义字段

第五步：最佳实践和注意事项

复制并修改 `page.php`