编程马·菜鸟教程

Appearance

10.4 步骤3：编写首页 ​

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

完善 index.php 文件 ​

index.php 是主题的默认模板文件，它将显示文章列表。我们需要确保它能够正确显示文章列表，并具有良好的响应式设计。

1. 优化文章列表布局 ​

我们需要优化文章列表的布局，确保它在不同屏幕尺寸下都能正常显示。在 style.css 文件中添加文章列表的样式：

css
/* Post List Styles */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -var(--spacing-md);
}

.col-md-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
    padding: 0 var(--spacing-md);
}

.col-md-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    padding: 0 var(--spacing-md);
}

/* Post Styles */
.post {
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.post-header {
    margin-bottom: var(--spacing-md);
}

.post-title {
    font-size: 1.8rem;
    margin-bottom: var(--spacing-sm);
}

.post-title a {
    color: var(--text-color);
    transition: color 0.3s ease;
}

.post-title a:hover {
    color: var(--primary-color);
}

.post-meta {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin-bottom: var(--spacing-md);
}

.post-meta span {
    margin-right: var(--spacing-md);
}

.post-meta span:last-child {
    margin-right: 0;
}

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

.post-footer {
    margin-top: var(--spacing-md);
}

.read-more {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.read-more:hover {
    background-color: var(--accent-color);
    color: var(--white);
    transform: translateY(-2px);
}

/* Pagination Styles */
.pagination {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.pagination .page-numbers {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-md);
    margin: 0 var(--spacing-xs);
    border-radius: var(--border-radius);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagination .page-numbers:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.pagination .current {
    background-color: var(--primary-color);
    color: var(--white);
}

.pagination .prev, .pagination .next {
    background-color: var(--primary-color);
    color: var(--white);
}

.pagination .prev:hover, .pagination .next:hover {
    background-color: var(--accent-color);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .col-md-8,
    .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .col-md-4 {
        margin-top: var(--spacing-lg);
    }
    
    .post {
        padding: var(--spacing-md);
    }
    
    .post-title {
        font-size: 1.5rem;
    }
    
    .pagination .page-numbers {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin: 0 var(--spacing-xs);
    }
}

2. 添加特色图片支持 ​

我们可以为文章添加特色图片，使文章列表更加美观。首先，在 functions.php 文件中添加特色图片支持：

php
// Add theme support for post thumbnails
add_theme_support('post-thumbnails');
// Set post thumbnail size
set_post_thumbnail_size(800, 450, true);

然后，在 index.php 文件中添加特色图片的显示：

php
<article class="post">
    <?php if (has_post_thumbnail()) : ?>
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('post-thumbnail', array('class' => 'img-fluid')); ?></a>
        </div>
    <?php endif; ?>
    <header class="post-header">
        <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <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>
        </div>
    </header>
    <div class="post-content">
        <?php the_excerpt(); ?>
    </div>
    <footer class="post-footer">
        <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
    </footer>
</article>

最后，在 style.css 文件中添加特色图片的样式：

css
/* Post Thumbnail Styles */
.post-thumbnail {
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.post:hover .post-thumbnail img {
    transform: scale(1.05);
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

3. 添加文章摘要自定义 ​

我们可以自定义文章摘要的长度和样式，使文章列表更加美观。在 functions.php 文件中添加自定义摘要长度和更多文本：

php
/**
 * Custom excerpt length.
 */
function simple_blog_excerpt_length($length) {
    return 20;
}
add_filter('excerpt_length', 'simple_blog_excerpt_length', 999);

/**
 * Custom excerpt more.
 */
function simple_blog_excerpt_more($more) {
    return '...';
}
add_filter('excerpt_more', 'simple_blog_excerpt_more');

4. 添加分类和标签显示 ​

我们可以在文章列表中显示文章的分类和标签，使文章列表更加完整。在 index.php 文件中添加分类和标签的显示：

php
<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>

然后在 style.css 文件中添加标签的样式：

css
/* Post Tags Styles */
.post-tags {
    display: inline-block;
    margin-top: var(--spacing-xs);
}

.post-tags a {
    display: inline-block;
    padding: 0 var(--spacing-sm);
    margin-right: var(--spacing-xs);
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.post-tags a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

测试首页 ​

现在，我们已经完善了首页的代码，接下来我们需要测试它是否能正常工作。

步骤1：更新主题文件 ​

将修改后的 index.php、functions.php 和 style.css 文件上传到主题目录中。

步骤2：添加文章 ​

在WordPress后台，添加一些文章，并为每篇文章设置特色图片。

步骤3：测试文章列表 ​

在浏览器中访问网站，检查文章列表是否正确显示，包括文章标题、特色图片、发布日期、作者、分类和标签。

步骤4：测试分页 ​

在WordPress后台，设置文章每页显示的数量（在"设置" > "阅读"中），然后添加足够多的文章，使文章列表出现分页。在浏览器中访问网站，检查分页是否正确显示。

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

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

小结 ​

编写首页是主题开发的重要步骤，它是网站的门面，直接影响用户的第一印象。通过本章节的学习，你应该：

  1. 了解如何优化文章列表的布局，确保它在不同屏幕尺寸下都能正常显示
  2. 掌握如何添加特色图片支持，使文章列表更加美观
  3. 了解如何自定义文章摘要的长度和样式
  4. 掌握如何添加分类和标签显示，使文章列表更加完整
  5. 了解如何测试首页的功能和响应式设计

在后续的章节中，我们将继续完善主题的功能，包括编写文章页与页面、添加响应式样式等。

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

基于 VitePress 构建