如何编辑WordPress自定义模板文件添加自定义表并解决表格对齐问题

TwentyTwentyOne主题的正文内容默认包裹在带特定边距、最大宽度限制的容器类中，你直接在get_template_part()调用后输出裸<table>标签，没有套用主题的内容容器结构，所以脱离了全局内容布局约束，才会偏移到屏幕左侧，不需要更换开发模板，仅需补充容器结构即可修复。

修复后的代码示例 #

<?php
//  the_post();
    get_template_part( 'template-parts/content/content-page' );
// my added table
?>
<!-- 套用TwentyTwentyOne主题原生内容容器类，和页面其余内容布局对齐 -->
<div class="entry-content">
    <table>
        <tr>
            <th>自定义表头1</th>
            <th>自定义表头2</th>
        </tr>
        <?php
        // 此处可添加自定义MySQL表数据读取逻辑，动态输出表格行
        global $wpdb;
        $custom_table_data = $wpdb->get_results("SELECT * FROM 你的自定义表名称");
        foreach ($custom_table_data as $row) {
            echo "<tr><td>{$row->对应字段1}</td><td>{$row->对应字段2}</td></tr>";
        }
        ?>
    </table>
</div>
<?php
// end added table
    // If comments are open or there is at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) {
        comments_template();
    }
endwhile; // End of the loop.

get_footer();

可选优化规则 #

• 若添加entry-content类后宽度不符合预期，可按需给外层div追加主题自带的对齐类：需和正文默认宽度一致加alignnone，需宽屏显示加alignwide，需通栏显示加alignfull
• 建议将自定义模板放在子主题目录下开发，避免后续主主题更新覆盖你修改的代码
• 若需要调整表格本身的间距、边框等样式，可给<table>标签添加自定义类，在后台「外观-自定义-额外CSS」中添加对应样式规则即可，不需要依赖区块编辑器或第三方插件

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