php - 如何在管理区域复制 WordPress 风格的表格

Question

我正在为 WordPress 编写一个插件，我需要为管理区域模拟 WP 表的功能(和样式)。我指的是出现在任何菜单页面上的那些基本表格，例如列出页面或评论的表格。

我在这方面取得了一些进展:我已经设法通过简单地使用他们在自己的表格中使用的相同 CSS 类和 HTML 来复制 WP 样式，但我不确定这是正确的方法接近这个。我实际上只需要分页和过滤功能，没有别的。我想我可以把我自己的逻辑放在这里并完成它，但我想知道是否有更简单、更合适的方法来做到这一点。

那么，关于如何应该在 WordPress 的管理区域中构建一个表以使其与默认表的样式/功能相匹配，有什么想法吗？

(顺便说一句，我没有使用自定义帖子类型，只是使用自定义顶级管理菜单。因此需要从头开始制作表格。)

这是我用来显示我的自定义管理页面的代码(为简单起见，有一些文字值):

HTML:

<div class="wrap">
    <h1><?= $helper->esc_html__(get_admin_page_title()) ?></h1>

    <hr class="wp-header-end">
    <br>

    <form>
        <div class="tablenav top">
            <div class="alignleft actions">
                <label for="filter-by-date" class="screen-reader-text">Filter by date</label>

                <select name="filter-by-date">
                    <option value="all" selected>All dates</option>
                    <option value="last-month">Last month</option>
                    <option value="last-week">Last week</option>
                    <option value="today">Today</option>
                </select>

                <input type="submit" name="filter-action" class="button" value="Filter">
            </div>

            <div class="tablenav-pages">
                <?php
                    // translators: %d: Total number of elements
                    $elements_count = sprintf($helper->esc_html__('%d elements'), $requests_count);
                ?>

                <span class='displaying-num'><?= $elements_count ?></span>

                <span class="pagination-links">
                    <span class="tablenav-pages-navspan" aria-hidden="true">«</span>

                    <a class="prev-page" href="#">
                        <span class="screen-reader-text">Previous page</span>
                        <span aria-hidden="true">‹</span>
                    </a>

                    <span class="paging-input">
                        <label for="current-page-selector" class="screen-reader-text">Current page</label>
                        <input type="text" name="paged" id="current-page-selector" class="current-page" value="2" size="1" aria-describedby="table-paging">
                        <span class="tablenav-paging-text"> of <span class="total-pages">3</span></span>
                    </span>

                    <a class="next-page" href="#">
                        <span class="screen-reader-text">Next page</span>
                        <span aria-hidden="true">›</span>
                    </a>

                    <span class="tablenav-pages-navspan" aria-hidden="true">»</span>
                </span>
            </div>
        </div>
    </form>

    <table class="wp-list-table widefat fixed striped">
        <thead>
            <tr>
                <th class="manage-column column-primary"><?= $helper->esc_html__('Movie Title') ?></th>
                <th class="manage-column"><?= $helper->esc_html__('Release') ?></th>
                <th class="manage-column"><?= $helper->esc_html__('Language') ?></th>
                <th class="manage-column"><?= $helper->esc_html__('User') ?></th>
                <th class="manage-column"><?= $helper->esc_html__('Date') ?></th>
                <th class="manage-column"><?= $helper->esc_html__('Actions') ?></th>
            </tr>
        </thead>

        <tbody id="the-list">
            <!-- If there are any requests, display each record, otherwise, inform the user -->
            <?php if ($requests_count): ?>
                <?php foreach ($requests as $request): ?>
                          <tr class="is-expanded">
                              <td class="column-primary" data-colname="Movie Title">
                                  <strong><?= $helper->esc_html__($request->title) ?></strong>
                              </td>

                              <td data-colname="Release">
                                  <?php if ($request->release === null): ?>
                                      <span class="sr-text-info"><?= $helper->esc_html__('Not Specified') ?></span>
                                  <?php else: ?>
                                      <?= esc_html($request->release); ?>
                                  <?php endif; ?>
                              </td>

                              <td data-colname="Language"><?= $helper->esc_html__($request->language) ?></td>

                              <td data-colname="User">
                                  <?php if ($request->user === null): ?>
                                      <span class="sr-text-info"><?= $helper->esc_html__('Anonimous') ?></span>
                                  <?php else: ?>
                                      <?= esc_html($request->user); ?>
                                  <?php endif; ?>
                              </td>

                              <td data-colname="Date">
                                  <?php
                                      $date = new DateTime($request->date);

                                      // translators: draft request date format, see http://php.net/date
                                      $request_date_fmt = $helper->__('m/d/Y, g:i a');

                                      echo esc_html($date->format($request_date_fmt));
                                  ?>
                              </td>

                              <td data-colname="Actions">
                                  <a class="button" href="#">Delete</a>
                              </td>
                          </tr>
                <?php endforeach; ?>
            <?php else: ?>
                      <tr class="is-expanded">
                          <td class="sr-text-center" colspan="6">
                              <span class="sr-text-info"><?= $helper->esc_html__('There are no requests to show.') ?></span>
                          </td>
                      </tr>
            <?php endif; ?>
        </tbody>
    </table>
</div>

提前致谢!

Answer 1

最好的选择是扩展原生WP_List_Table WordPress Core 中已经提供的类。虽然这 在核心中是一个私有(private)类，但它在未来可能不会发生太大变化，我个人认为扩展它是安全的。

当您定义自己的类并扩展 WP_List_Table 时，您需要做的就是使用数据逻辑创建自己的方法。最好的部分是父 WP_List_Table 类将为您处理一切(标记、样式、分页等)。

WP Engineer有一个很好的初学者指南来帮助你入门。您还可以在网络上搜索“WP_List_Table 指南”、“WP_List_Table 教程”等，您会在网上找到大量示例。