编程马·菜鸟教程

Appearance

10.5 步骤4：编写文章页与页面 ​

在完善了首页后，我们需要编写文章页和页面，实现文章详情和页面内容的显示。本章节将详细介绍如何编写和优化主题的文章页与页面，确保它们能够正确显示内容，并具有良好的响应式设计。

创建 single.php 文件 ​

single.php 是主题的文章详情页模板文件，它将显示文章的详细内容。我们需要确保它能够正确显示文章的标题、内容、作者信息、评论等内容。

1. 创建 single.php 文件 ​

在主题文件夹中创建一个 single.php 文件，内容如下：

php
<?php get_header(); ?>

<main class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article class="post post-single">
                            <?php if (has_post_thumbnail()) : ?>
                                <div class="post-thumbnail">
                                    <?php the_post_thumbnail('post-thumbnail', array('class' => 'img-fluid')); ?>
                                </div>
                            <?php endif; ?>
                            <header class="post-header">
                                <h1 class="post-title"><?php the_title(); ?></h1>
                                <div class="post-meta">
                                    <span class="post-date"><?php the_date(); ?></span>
                                    <span class="post-author">By <?php the_author(); ?></span>
                                    <span class="post-category"><?php the_category(', '); ?></span>
                                    <?php if (has_tag()) : ?>
                                        <span class="post-tags"><?php the_tags('', ', ', ''); ?></span>
                                    <?php endif; ?>
                                </div>
                            </header>
                            <div class="post-content">
                                <?php the_content(); ?>
                            </div>
                            <footer class="post-footer">
                                <?php if (get_the_author_meta('description')) : ?>
                                    <div class="author-bio">
                                        <div class="author-avatar">
                                            <?php echo get_avatar(get_the_author_meta('user_email'), 100); ?>
                                        </div>
                                        <div class="author-info">
                                            <h3 class="author-name"><?php the_author(); ?></h3>
                                            <p class="author-description"><?php the_author_meta('description'); ?></p>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </footer>
                            
                            <!-- Comments -->
                            <?php if (comments_open() || get_comments_number()) : ?>
                                <div class="post-comments">
                                    <?php comments_template(); ?>
                                </div>
                            <?php endif; ?>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <p><?php esc_html_e('No posts found', 'simple-blog'); ?></p>
                <?php endif; ?>
            </div>
            <div class="col-md-4">
                <?php get_sidebar(); ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

2. 添加文章页样式 ​

在 style.css 文件中添加文章页的样式：

css
/* Single Post Styles */
.post-single {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.post-single .post-title {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-md);
}

.post-single .post-content {
    margin-bottom: var(--spacing-xl);
}

.post-single .post-content p {
    margin-bottom: var(--spacing-md);
}

.post-single .post-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
}

.post-single .post-content h2 {
    font-size: 1.8rem;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.post-single .post-content h3 {
    font-size: 1.5rem;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.post-single .post-content ul,
.post-single .post-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.post-single .post-content li {
    margin-bottom: var(--spacing-xs);
}

/* Author Bio Styles */
.author-bio {
    display: flex;
    align-items: flex-start;
    background-color: var(--background-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-xl);
}

.author-avatar {
    margin-right: var(--spacing-md);
}

.author-avatar img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.author-info h3 {
    margin-bottom: var(--spacing-sm);
}

.author-description {
    margin: 0;
    color: var(--light-text-color);
}

/* Comments Styles */
.post-comments {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--border-color);
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.comment-body {
    display: flex;
}

.comment-author {
    margin-right: var(--spacing-md);
}

.comment-author img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.comment-content {
    flex: 1;
}

.comment-meta {
    margin-bottom: var(--spacing-sm);
}

.comment-meta a {
    color: var(--text-color);
    font-weight: 500;
}

.comment-meta time {
    font-size: 0.9rem;
    color: var(--light-text-color);
}

.comment-reply {
    margin-top: var(--spacing-sm);
}

.comment-reply-link {
    font-size: 0.9rem;
    color: var(--primary-color);
}

.comment-form {
    margin-top: var(--spacing-lg);
}

.comment-form label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.comment-form textarea {
    resize: vertical;
    min-height: 150px;
}

.comment-form input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-form input[type="submit"]:hover {
    background-color: var(--accent-color);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .post-single {
        padding: var(--spacing-lg);
    }
    
    .post-single .post-title {
        font-size: 1.8rem;
    }
    
    .author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .author-avatar {
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
    
    .comment-body {
        flex-direction: column;
    }
    
    .comment-author {
        margin-right: 0;
        margin-bottom: var(--spacing-sm);
    }
}

创建 page.php 文件 ​

page.php 是主题的页面模板文件，它将显示页面的内容。我们需要确保它能够正确显示页面的标题和内容。

1. 创建 page.php 文件 ​

在主题文件夹中创建一个 page.php 文件，内容如下：

php
<?php get_header(); ?>

<main class="main-content">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article class="page">
                            <header class="page-header">
                                <h1 class="page-title"><?php the_title(); ?></h1>
                            </header>
                            <div class="page-content">
                                <?php the_content(); ?>
                            </div>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <p><?php esc_html_e('No pages found', 'simple-blog'); ?></p>
                <?php endif; ?>
            </div>
            <div class="col-md-4">
                <?php get_sidebar(); ?>
            </div>
        </div>
    </div>
</main>

<?php get_footer(); ?>

2. 添加页面样式 ​

在 style.css 文件中添加页面的样式：

css
/* Page Styles */
.page {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.page-title {
    font-size: 2.2rem;
    margin-bottom: var(--spacing-lg);
}

.page-content {
    margin-bottom: var(--spacing-lg);
}

.page-content p {
    margin-bottom: var(--spacing-md);
}

.page-content img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
}

.page-content h2 {
    font-size: 1.8rem;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.page-content h3 {
    font-size: 1.5rem;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.page-content ul,
.page-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.page-content li {
    margin-bottom: var(--spacing-xs);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .page {
        padding: var(--spacing-lg);
    }
    
    .page-title {
        font-size: 1.8rem;
    }
}

测试文章页与页面 ​

现在，我们已经创建了文章页和页面的模板文件，接下来我们需要测试它们是否能正常工作。

步骤1：更新主题文件 ​

将创建的 single.php 和 page.php 文件上传到主题目录中。

步骤2：添加文章和页面 ​

在WordPress后台，添加一些文章和页面，以便测试文章页和页面的显示效果。

步骤3：测试文章页 ​

在浏览器中访问一篇文章，检查文章页是否正确显示，包括文章标题、特色图片、发布日期、作者、分类、标签、内容、作者信息和评论。

步骤4：测试页面 ​

在浏览器中访问一个页面，检查页面是否正确显示，包括页面标题和内容。

步骤5：测试响应式设计 ​

在不同屏幕尺寸下测试网站，确保文章页和页面在不同设备上都能正常显示。

小结 ​

编写文章页与页面是主题开发的重要步骤，它们是网站的重要组成部分。通过本章节的学习，你应该：

  1. 了解如何创建 single.php 文件，实现文章详情页的显示
  2. 掌握如何添加文章页的样式，包括文章内容、作者信息和评论的样式
  3. 了解如何创建 page.php 文件，实现页面的显示
  4. 掌握如何添加页面的样式，确保页面内容的正确显示
  5. 了解如何测试文章页和页面的功能和响应式设计

在后续的章节中，我们将继续完善主题的功能，包括添加响应式样式、测试与调试等。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建