子比主题文章列表排版：修复细节问题

根据上述图示，当我们将后台每页显示的文章数量设置为10或12时，分类页面在宽屏和窄屏设备上的显示样式会出现不一致。

那么，如何处理这个问题呢？以下是解决方法：

在 functions.php 中插入钩子代码如下：

// 后台设置增加字段
add_action('admin_init', 'dp_posts_home_key');
function dp_posts_home_key() {
	add_settings_field('home_posts_per_page', '首页每页显示', 'dp_home_posts_per_page_function', 'reading');
	register_setting('reading','home_posts_per_page');
}
function dp_home_posts_per_page_function() {
    echo '<input name="home_posts_per_page" type="number" step="1" min="1" id="home_posts_per_page" value="'.get_option('home_posts_per_page').'" class="small-text"> 篇文章';
}

// 首页文章输出条数
function modify_main_query($query) {
    // 确保我们只修改主查询，并且是在前台页面
    if ($query->is_home() && $query->is_main_query()) {
        // 修改每页显示的帖子数量
        $home_page_posts = get_option('home_posts_per_page');
        if ($home_page_posts) {
            $query->set('posts_per_page', $home_page_posts);
        }
    }
}
add_action( 'pre_get_posts', 'modify_main_query' );

这样，我们可以通过独立设置首页的文章显示数量，避免了因默认列表数量而导致分类页样式不兼容的问题。