如何为WordPress分类模板添加侧边栏并调整布局

问题解决步骤 #

1. 移除冗余的侧边栏注册代码

你不需要单独注册新的taxonomy_sidebar，直接复用主题原有的sidebar_widgets即可——这个侧边栏已经包含了Careers页面的筛选组件，完全适配职位分类页的需求。删除你添加的以下代码：

function taxonomy_widgets_init() {
    register_sidebar( array(
    'name' => 'Taxonomy sidebar',
    'id' => 'taxonomy_sidebar',
    ) );
}
add_action( 'widgets_init', 'taxonomy_widgets_init' );

2. 修正taxonomy.php的HTML结构（解决报错+布局问题）

你的报错和布局异常，核心原因是模板嵌套了重复的页面结构（比如<main>标签），且没有沿用主题原有的布局CSS类。修改后的taxonomy.php代码如下：

<?php
/**
 * Template for displaying taxonomy archive pages.
 *
 * @package WordPress
 * @subpackage AUTOPARTS
 * @since AUTOPARTS 1.0
 */

get_header(); ?>

<!-- 沿用主题原有的布局容器类，确保样式匹配 -->
<div class="content-wrapper has-sidebar">
    <!-- 左侧侧边栏，使用原Careers页面的样式类和侧边栏ID -->
    <aside class="sidebar sidebar-left">
        <?php dynamic_sidebar( 'sidebar_widgets' ); ?>
    </aside>

    <!-- 主内容区域，调用主题对应的职位列表模板 -->
    <div class="main-content">
        <?php
            if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'classic' )
                get_template_part( 'index', 'classic' );
            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'masonry' )
                get_template_part( 'index', 'classic' );
            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 7) == 'gallery' )
                get_template_part( 'index', 'portfolio' );
            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 9) == 'portfolio' )
                get_template_part( 'index', 'portfolio' );
            else if ( substr(autoparts_get_theme_option('blog_style'), 0, 5) == 'chess' )
                get_template_part( 'index', 'chess' );
            else
                get_template_part( 'index', 'excerpt' ); 
        ?>
    </div>
</div>

<?php get_footer(); ?>

3. 微调布局样式（若侧边栏仍在底部）

如果侧边栏还是显示在页面底部，说明主题CSS未识别你的布局结构：

• 打开Careers页面的浏览器开发者工具，查看原页面的.content-wrapper、.sidebar、.main-content的CSS属性（比如是否用了flex布局或float）。
• 确保taxonomy.php中的容器类和原页面完全一致：
  • 若用Flex布局：给.content-wrapper添加display: flex;，.sidebar设固定宽度（如width: 25%;），.main-content设flex: 1;。
  • 若用Float布局：给.sidebar加float: left; width: 25%;，.main-content加float: right; width: 75%;，并在.content-wrapper末尾加<div style="clear: both;"></div>清除浮动。

4. 验证模板优先级

如果页面仍加载index.php，可以创建更精准的模板文件taxonomy-career-career-tag.php（对应你的职位标签分类），WordPress会优先使用这个文件而非通用的taxonomy.php。

内容的提问来源于stack exchange，提问作者Chris Costa