本文旨在指导开发者如何在 WordPress 自定义模板文件中嵌入 HTML 表格，并确保表格与主题风格保持一致。文章将提供三种不同的解决方案，涵盖直接在模板中添加表格、修改现有内容模板以及创建新的内容模板等方法，并详细说明每种方法的优缺点和适用场景，帮助开发者根据实际需求选择最佳方案。
在 WordPress 中创建自定义模板并添加 HTML 表格是常见的需求，尤其是在需要展示来自自定义数据库的数据时。然而，直接在模板文件中添加表格可能会导致样式错乱，与主题的整体风格不协调。以下介绍几种解决此问题的方法，并提供相应的代码示例。
方法一：直接在模板文件中嵌入 HTML 表格
这是最直接的方法，但需要注意表格的样式控制。确保表格的 CSS 样式与主题的样式表相兼容。
<?php
// the_post();
get_template_part( 'template-parts/content/content-page' );
// my added table
echo '<table><th></th><th></th></table>';
// 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();
}
get_footer();
?>注意事项：
- 这种方法适用于表格结构简单，数据量较小的情况。
- 如果表格包含大量数据或复杂的逻辑，建议使用其他方法，以提高代码的可维护性。
- 务必检查表格的 CSS 样式，确保与主题风格一致。可以通过自定义 CSS 类或直接修改主题的样式表来实现。
- 如果需要从自定义 MySQL 表中获取数据，则需要在此处编写 PHP 代码来连接数据库并提取数据，然后将数据填充到表格中。
方法二：修改现有的内容模板
可以修改主题的现有内容模板，例如 content-page.php，将表格添加到该模板中。
<?php
// the_post();
get_template_part( 'template-parts/content/content-page' );
// my added table
?>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
</table>
<?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();
}
get_footer();
?>注意事项：
- 修改主题的现有模板可能会影响其他页面的显示，因此需要谨慎操作。
- 建议在修改之前备份原始模板文件。
- 同样需要注意表格的 CSS 样式，确保与主题风格一致。
- 这种方法适用于需要在多个页面中显示相同表格的情况。
方法三：创建新的内容模板
创建一个新的内容模板，例如 content-table.php，并在需要显示表格的模板中加载它。
首先，创建 content-table.php 文件：
<table class="custom-table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</tbody>
</table>然后，在需要显示表格的模板中加载 content-table.php：
<?php
// the_post();
get_template_part( 'template-parts/content/content-page' );
get_template_part( 'template-parts/content/content-table' );
// 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();
}
get_footer();
?>注意事项：
- 这种方法是最灵活的，可以方便地在多个页面中重用表格。
- 需要创建额外的模板文件，但可以提高代码的可维护性。
- 同样需要注意表格的 CSS 样式，确保与主题风格一致。
- 可以在 content-table.php 中编写 PHP 代码来连接数据库并提取数据，然后将数据填充到表格中。
总结：
选择哪种方法取决于具体的需求和项目的复杂程度。如果只需要在单个页面中显示一个简单的表格，可以直接在模板文件中嵌入 HTML 表格。如果需要在多个页面中显示相同的表格，可以修改现有的内容模板或创建新的内容模板。无论选择哪种方法，都需要注意表格的 CSS 样式，确保与主题风格一致。同时，如果需要从自定义 MySQL 表中获取数据，则需要在相应的模板文件中编写 PHP 代码来连接数据库并提取数据。
