创建WordPress自定义页面模板：为特殊页面打造专属布局

本文是《WordPress主题开发从入门到精通》系列教程的第八篇。我们将学习如何创建自定义页面模板，实现联系页面、产品展示页等特殊布局。

到目前为止，我们的主题对所有页面都使用相同的page.php模板。但现实中，不同的页面往往需要不同的布局和功能。比如联系页面需要显示表单，产品展示页面需要网格布局，全宽页面需要去掉侧边栏等等。

WordPress的自定义页面模板功能就是为了解决这个问题而生的。今天我们就来学习如何创建和使用它们。

什么是自定义页面模板？它能做什么？

自定义页面模板允许你为特定的页面创建独特的布局，而不影响其他页面。你可以把它想象成给特定页面定制的"皮肤"。

常见的使用场景包括：

联系页面：包含联系表单、地图、公司信息
产品展示页：网格布局展示产品，包含筛选功能
全宽页面：去掉侧边栏，让内容区域更宽
登陆页面：特殊的营销页面布局
团队介绍页：展示团队成员的照片和信息
归档页面：自定义的文章或产品归档布局

这些特殊页面如果使用标准的页面模板，往往无法满足设计需求。自定义模板给了我们完全的控制权。

方法一：创建通用的自定义模板

最简单的自定义模板是创建一个可以被多个页面选择的通用模板。

在主题根目录创建一个新文件，命名为page-fullwidth.php（全宽页面模板）：

<?php
/**
 * 模板名称：全宽页面模板
 * 描述：没有侧边栏的全宽页面布局
 * 
 * @package My_First_Theme
 */

get_header(); ?>

<div class="content-wrapper fullwidth-layout">
    <main class="main-content fullwidth-content">

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="page-<?php the_ID(); ?>" <?php post_class( 'page-fullwidth' ); ?>>

                <header class="page-header">
                    <h1 class="page-title"><?php the_title(); ?></h1>
                </header>

                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="page-featured-image">
                        <?php the_post_thumbnail( 'large' ); ?>
                    </div>
                <?php endif; ?>

                <div class="page-content">
                    <?php the_content(); ?>
                </div>

            </article>

        <?php endwhile; ?>

    </main>
</div>

<?php get_footer(); ?>

关键点： 文件开头的注释块中的模板名称：全宽页面模板是必须的，WordPress通过这个来识别这是自定义模板。

现在创建一个联系页面模板page-contact.php：

<?php
/**
 * 模板名称：联系页面模板
 * 描述：包含联系表单和公司信息的联系页面
 * 
 * @package My_First_Theme
 */

get_header(); ?>

<div class="content-wrapper contact-layout">
    <main class="main-content contact-content">

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="page-<?php the_ID(); ?>" <?php post_class( 'page-contact' ); ?>>

                <header class="page-header">
                    <h1 class="page-title"><?php the_title(); ?></h1>
                    <?php if ( get_the_excerpt() ) : ?>
                        <p class="page-description"><?php echo get_the_excerpt(); ?></p>
                    <?php endif; ?>
                </header>

                <div class="contact-sections">

                    <!-- 左边：联系表单 -->
                    <div class="contact-form-section">
                        <h2>给我们留言</h2>
                        <?php
                        // 这里可以插入联系表单代码
                        // 可以是联系表单7短码，或者自定义HTML表单
                        echo do_shortcode( '[contact-form-7 id="123" title="联系表单"]' );
                        ?>
                    </div>

                    <!-- 右边：联系信息 -->
                    <div class="contact-info-section">
                        <h2>联系信息</h2>
                        <div class="contact-details">
                            <div class="contact-item">
                                <h3>地址</h3>
                                <p>北京市朝阳区某某街道123号</p>
                            </div>
                            <div class="contact-item">
                                <h3>电话</h3>
                                <p>+86 10 1234 5678</p>
                            </div>
                            <div class="contact-item">
                                <h3>邮箱</h3>
                                <p>contact@example.com</p>
                            </div>
                            <div class="contact-item">
                                <h3>工作时间</h3>
                                <p>周一至周五: 9:00-18:00</p>
                            </div>
                        </div>
                    </div>

                </div>

            </article>

        <?php endwhile; ?>

    </main>
</div>

<?php get_footer(); ?>

方法二：创建特定页面的模板

你还可以为特定的页面创建专属模板。WordPress会按照这个命名规则来识别：page-{slug}.php 或 page-{id}.php。

比如，你有一个"关于我们"页面，它的URL别名是"about"，那么可以创建page-about.php：

<?php
/**
 * 关于我们页面模板
 * 
 * @package My_First_Theme
 */

get_header(); ?>

<div class="content-wrapper about-layout">
    <main class="main-content about-content">

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="page-<?php the_ID(); ?>" <?php post_class( 'page-about' ); ?>>

                <header class="page-header">
                    <h1 class="page-title"><?php the_title(); ?></h1>
                </header>

                <div class="about-sections">

                    <!-- 公司介绍 -->
                    <section class="company-intro">
                        <h2>公司简介</h2>
                        <div class="intro-content">
                            <?php the_content(); ?>
                        </div>
                    </section>

                    <!-- 团队展示 -->
                    <section class="team-showcase">
                        <h2>我们的团队</h2>
                        <div class="team-members">
                            <?php
                            // 这里可以显示团队成员
                            // 假设团队成员是通过自定义字段或自定义文章类型添加的
                            $team_members = get_posts( array(
                                'post_type' => 'team',
                                'posts_per_page' => 6
                            ) );

                            if ( $team_members ) :
                                echo '<div class="team-grid">';
                                foreach ( $team_members as $member ) {
                                    setup_postdata( $member );
                                    echo '<div class="team-member">';
                                    echo '<h3>' . get_the_title( $member ) . '</h3>';
                                    echo '<p class="position">' . get_field( 'position', $member->ID ) . '</p>'; // 需要ACF插件
                                    echo '</div>';
                                }
                                echo '</div>';
                                wp_reset_postdata();
                            endif;
                            ?>
                        </div>
                    </section>

                </div>

            </article>

        <?php endwhile; ?>

    </main>

    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

在后台选择和使用模板

创建好模板文件后，在WordPress后台创建或编辑页面时，在"页面属性"模块中就能看到"模板"下拉选择框。

选择你创建的自定义模板，然后发布页面。访问这个页面时，WordPress会自动使用你选择的模板。

为自定义模板添加CSS样式

每个自定义模板都需要相应的样式支持。在style.css中添加：

/* 全宽页面模板样式 */
.fullwidth-layout {
    max-width: 1000px;
    margin: 0 auto;
}

.fullwidth-content {
    width: 100%;
    max-width: none;
}

.page-fullwidth .page-header {
    text-align: center;
    margin-bottom: 3rem;
}

.page-fullwidth .page-featured-image {
    margin: 2rem 0;
}

.page-fullwidth .page-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

/* 联系页面模板样式 */
.contact-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.contact-form-section,
.contact-info-section {
    background: #fff;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.contact-form-section h2,
.contact-info-section h2 {
    color: #333;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #f0f0f0;
}

.contact-item {
    margin-bottom: 1.5rem;
}

.contact-item h3 {
    color: #007cba;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.contact-item p {
    margin: 0;
    color: #666;
}

/* 关于我们页面样式 */
.about-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.about-sections {
    margin-top: 2rem;
}

.company-intro,
.team-showcase {
    margin-bottom: 4rem;
}

.company-intro h2,
.team-showcase h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #333;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.team-member {
    text-align: center;
    padding: 2rem;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.team-member h3 {
    margin-bottom: 0.5rem;
    color: #333;
}

.team-member .position {
    color: #007cba;
    font-style: italic;
    margin: 0;
}

/* 移动端响应式 */
@media (max-width: 768px) {
    .contact-sections {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-form-section,
    .contact-info-section {
        padding: 1.5rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }
}

高级技巧：在模板中使用自定义查询

自定义模板的强大之处在于可以显示特殊的内容。比如创建一个"最新文章"页面模板：

<?php
/**
 * 模板名称：文章归档模板
 * 描述：显示分类归档的文章列表
 * 
 * @package My_First_Theme
 */

get_header(); ?>

<div class="content-wrapper archive-layout">
    <main class="main-content archive-content">

        <header class="archive-header">
            <h1><?php the_title(); ?></h1>
            <p>浏览我们最新的文章和资讯</p>
        </header>

        <div class="archive-grid">
            <?php
            // 自定义查询，显示最新文章
            $archive_query = new WP_Query( array(
                'posts_per_page' => 12,
                'post_status'    => 'publish',
                'orderby'       => 'date',
                'order'         => 'DESC'
            ) );

            if ( $archive_query->have_posts() ) :
                while ( $archive_query->have_posts() ) : $archive_query->the_post();
                    ?>
                    <article class="archive-item">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <div class="archive-thumbnail">
                                <a href="<?php the_permalink(); ?>">
                                    <?php the_post_thumbnail( 'medium' ); ?>
                                </a>
                            </div>
                        <?php endif; ?>

                        <div class="archive-content">
                            <h2 class="archive-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <div class="archive-meta">
                                <time datetime="<?php echo get_the_date( 'c' ); ?>">
                                    <?php echo get_the_date(); ?>
                                </time>
                            </div>
                            <div class="archive-excerpt">
                                <?php the_excerpt(); ?>
                            </div>
                        </div>
                    </article>
                    <?php
                endwhile;

                // 自定义查询的分页
                echo '<div class="archive-pagination">';
                the_posts_pagination( array(
                    'total' => $archive_query->max_num_pages
                ) );
                echo '</div>';

                wp_reset_postdata();
            else :
                echo '<p>暂无文章</p>';
            endif;
            ?>
        </div>

    </main>
</div>

<?php get_footer(); ?>

模板的条件逻辑

你还可以在模板中添加条件判断，根据不同的情况显示不同的内容：

<?php
/**
 * 多功能页面模板
 * 
 * @package My_First_Theme
 */

get_header(); ?>

<div class="content-wrapper">
    <main class="main-content">

        <?php while ( have_posts() ) : the_post(); ?>

            <article id="page-<?php the_ID(); ?>" <?php post_class(); ?>>

                <header class="page-header">
                    <h1 class="page-title"><?php the_title(); ?></h1>
                </header>

                <div class="page-content">
                    <?php the_content(); ?>
                </div>

                <!-- 根据页面slug显示不同内容 -->
                <?php if ( is_page( 'contact' ) ) : ?>
                    <div class="contact-info">
                        <h2>快速联系</h2>
                        <p>电话: 123-456-7890</p>
                        <p>邮箱: info@example.com</p>
                    </div>
                <?php elseif ( is_page( 'about' ) ) : ?>
                    <div class="company-highlights">
                        <h2>公司亮点</h2>
                        <ul>
                            <li>成立10年+</li>
                            <li>服务1000+客户</li>
                            <li>专业团队支持</li>
                        </ul>
                    </div>
                <?php endif; ?>

            </article>

        <?php endwhile; ?>

    </main>
</div>

<?php get_footer(); ?>

最佳实践建议

有意义的命名：模板文件名要能反映其用途，如page-contact.php、page-fullwidth.php
保持简洁：每个模板只负责特定的布局，不要试图在一个模板中做太多事情
重用代码：把共用的部分（如页头、页脚）放在独立的文件中通过get_header()、get_footer()引入
文档注释：在模板开头添加清晰的注释，说明模板的用途
测试响应式：确保自定义模板在移动设备上显示正常

总结：自定义模板的无限可能

通过今天的学习，你应该已经掌握了创建自定义页面模板的方法。这是WordPress主题开发中非常强大的功能，它允许你：

为不同页面创建独特布局，满足不同的设计需求
显示特殊内容，如团队成员、产品列表等
实现复杂的功能，如联系表单、地图集成等
提升用户体验，为不同用途的页面提供最合适的界面

现在你的主题已经具备了创建专业网站所需的所有基本功能。在下一篇文章中，我们将学习如何优化WordPress主题的性能和加载速度，让你的网站运行得更快。

创建WordPress自定义页面模板：为特殊页面打造专属布局

什么是自定义页面模板？它能做什么？

方法一：创建通用的自定义模板

方法二：创建特定页面的模板

在后台选择和使用模板

为自定义模板添加CSS样式

高级技巧：在模板中使用自定义查询

模板的条件逻辑

最佳实践建议

总结：自定义模板的无限可能

扫码分享

社交平台

打赏作者

相关阅读

评论框

评论列表

搜索

热门搜索

登录账号

注册账号

找回账号