在管理员风格中创建一个表?

时间:2010-09-06 作者:Jan Fabry

以管理区域中显示帖子或用户的表格的样式创建带有表格的页面的建议方法是什么?

我正在扩展the Cache Images plugin, 它包含一个带有域的表和来自该域的许多图像。因此,我没有可以构建的等效现有表(在这个问题的第一个版本中,我问了一个有帖子的表,但我可以(也许)在那里)expand the existing post table).

我应该立足于the post overview page, 从<table class="widefat">, 还是现在有更好的功能来处理这个问题?您知道一个干净、空的带有分页的表的示例吗,我可以根据它来进行工作?

7 个回复
最合适的回答,由SO网友:sorich87 整理而成

这是我通常使用的:

<table class="widefat fixed" cellspacing="0">
    <thead>
    <tr>

            <th id="cb" class="manage-column column-cb check-column" scope="col"></th> // this column contains checkboxes
            <th id="columnname" class="manage-column column-columnname" scope="col"></th>
            <th id="columnname" class="manage-column column-columnname num" scope="col"></th> // "num" added because the column contains numbers

    </tr>
    </thead>

    <tfoot>
    <tr>

            <th class="manage-column column-cb check-column" scope="col"></th>
            <th class="manage-column column-columnname" scope="col"></th>
            <th class="manage-column column-columnname num" scope="col"></th>

    </tr>
    </tfoot>

    <tbody>
        <tr class="alternate">
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr>
            <th class="check-column" scope="row"></th>
            <td class="column-columnname"></td>
            <td class="column-columnname"></td>
        </tr>
        <tr class="alternate" valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
        <tr valign="top"> // this row contains actions
            <th class="check-column" scope="row"></th>
            <td class="column-columnname">
                <div class="row-actions">
                    <span><a href="#">Action</a> |</span>
                    <span><a href="#">Action</a></span>
                </div>
            </td>
            <td class="column-columnname"></td>
        </tr>
    </tbody>
</table>
希望这有帮助。

SO网友:kaiser

使用核心API,而不仅仅是其CSS,通常您只需使用WP_List_Table

指南:

  • 更多信息,请参阅法典here.WP Engineer - 太多了,无法复制Smashing Magazine 在线

好处

是!

您可以添加分页、搜索框、操作和任何您可以想象(并能够编码)的魔法。

SO网友:Sander

使用以下示例(编写为插件)创建管理表:

http://wordpress.org/extend/plugins/custom-list-table-example/

它使用内置WP_List_Table

SO网友:bueltge

您还可以使用此小插件查看WP中后端的可能性:https://github.com/bueltge/WordPress-Admin-Style

SO网友:Guss

对于那些希望实施WP_List_Table, 请注意,我找到的所有指南都已经过时了,要么编写了多余的代码,要么要求您做一些不再有效的事情。

下面是一个在某种程度上有效的最小示例。它应该很容易理解,没有“指南”,并会让你开始。

包括:

快速过滤器(视图)

  • 搜索框
  • 行操作
    • 缺少:

      页面大小配置(我实际上没有看到Wordpress页面使用此配置)

    • 批量操作
    • 下拉过滤器
      • class My_List_Table extends WP_List_Table {
        
            function __construct() {
                parent::__construct([
                    \'singular\' => \'employee\',
                    \'plural\' => \'employees\',
                ]);
            }
        
            function get_columns() {
                return [
                    \'name\'      => __(\'Name\'),
                    \'employer\' => __(\'Employer\'),
                    \'rank\'     => __(\'Rank\'),
                    \'phone\'    => __(\'Telephone\'),
                    \'joined\'   => __(\'Join Date\'),
                ];
            }
        
            /* Optional - without it no column is sortable */
            public function get_sortable_columns() {
                return [
                   // keys are "column_name" like above
                   // values are "order" field names as per what your data model needs
                    \'name\'     => \'name\',
                    \'employer\' => \'employer\',
                    \'rank\'     => \'rank\',
                    \'joined\'   => \'joined\',
                ];
            }
        
            public function prepare_items() {
               // support the search box
                $search = @$_REQUEST[\'s\'] ? wp_unslash(trim($_REQUEST[\'s\']))) : \'\';
               // get number of records per page setting from option storage
                $per_page = $this->get_items_per_page(\'my_list_table_per_page\');
               // fill data array with your model items. In my implementation these
               // are StdClass instances with various fields, but it can be anything
               // we\'ll see in a minute how.
                $this->items = get_model_items([
                    \'offset\' => ($this->get_pagenum()-1)*$per_page,
                    \'count\' => $per_page,
                    \'orderby\' => @$_GET["orderby"] ?: \'id\', // default order field, if not specified
                    \'order\' => @$_GET["order"] ?: \'ASC\', // default order direction
                    \'search\' => $search, // pass search field if set
                    \'status\' => @$_REQUEST[\'status\'] // pass view filter, if set [see get_views()]
                );
                $this->set_pagination_args([
                    "total_items" => get_model_item_count(),
                    "per_page" => $per_page,
                ]);
               // `get_model_item_count` should be the total number of records after
               // filtering (views and search) but before paging. This may be hard/inefficient
               // to do with MySQL. If you want to put the results of `COUNT(*)` here,
               // no one will blame you.
            }
        
            public function column_default($item, $column_name) {
                // default column presentation
                // Most of my object fields are printable as is, so we have a generic
                // method to handle that.
                return $item->$column_name;
            }
        
            /* Optional, unless you have data that requires special formatting */
            public function column_joined($item) {
                // The \'joined\' field is a DateTime object and can\'t be implicitly
               // converted to string by the built-in logic, so we\'ll need to do it
                return $item->joined->format("Y-m-d");
            }
        
           /* Optional - draw quick filters on top of the table */
            public function get_views() {
                $makelink = function($filter_val, $name) { // DRYing tool for view makers
                    $filter_name = \'status\';
                    return \'<a href="\'
                        . esc_url(add_query_arg($filter_name, $filter_val)) . \'" \' .
                        (@$_REQUEST[$filter_name]==$filter_val ? 
                            \'class="current" aria-current="page"\' : \'\'). ">" .
                        $name . "</a>";
                };
                return [
                    \'all\' => $makelink(false, __(\'All\')),
                    \'green\' => $makelink(\'green\', __(\'Newbs\')),
                    \'pros\' => $makelink(\'pro\', __(\'Experts\')),
                    \'bofh\' => $makelink(\'veteran\', __(\'Crusty fellows\')),
                ];
            }
        
            /* Optional: row actions */
            public function handle_row_actions($item, $column_name, $primary) {
                $out = parent::handle_row_actions($item, $column_name, $primary);
                if ($column_name === $primary)
                    $out .= $this->row_actions([
                        \'edit\' => sprintf(\'<a href="%s">%s</a>\',
                            add_query_arg(\'employee_id\', $item->id, admin_url(\'admin.php?page=edit-employee\')),
                            __("Edit")),
                        \'delete\' => sprintf(\'<a href="%s">%s</a>\',
                            add_query_arg(\'employee_id\', $item->id, admin_url(\'admin.php?page=delete-employee\')),
                            __("Delete")),
                    ]);
                return $out;
            }
        
        }
        
        然后是管理页面功能(用于add_menu_page/add_submenu_page) 可能如下所示:

        function drawAdminPage() {
            $my_list_table = new My_List_Table();
            $my_list_table->prepare_items();
            ?>
            <div class="wrap">
            <h1 class="wp-heading-inline"><?php _e(\'Admin Page Title\')?></h1>
            <hr class="wp-header-end">
            <?php $my_list_table->views() ?>
            <form id="employee-filter" method="get">
            <input type="hidden" name="page" value="<?php echo $_REQUEST[\'page\']?>">
            <?php $my_list_table->search_box(__(\'Search\'), \'employee\') ?>
            <?php $my_list_table->display(); ?>
            </form>
            </div>
            <?php
        }
        

    SO网友:MikeSchinkel

    您可能想考虑在admin中的自定义帖子类型列表中添加一个过滤器?下面的链接答案显示了如何使用分类法,但您可以在restrict_manage_posts 挂钩:

    SO网友:Zeth

    这里有很多好的选择。但是没有一个快速的脏的:

    <table class="widefat striped fixed">
        <thead>
            <tr>
                <th>Header1</th>
                <th>Header2</th>
                <th>Header3</th>
            </tr>
        </thead>
    
        <tbody>
            <tr>
                <td>Content1</td>
                <td>Content2</td>
                <td>Content3</td>
            </tr>
        </tbody>
    
        <tfoot>
            <tr>
                <th>Footer1</th>
                <th>Footer2</th>
                <th>Footer3</th>
            </tr>
        </tfoot>
    </table>
    

    Explanation

    widefat-类由common.css, 加载到admin中,使其看起来像WP表
  • striped-班级把它变成了条纹(真让人惊讶)
  • fixed-类添加CSS:table-layout: fixed;
  • 结束

    相关推荐

    WP-ADMIN似乎正在重定向

    我的w-admin登录有一个奇怪的问题。这是从我升级到3.0以后才开始的,当我转到wp admin时,登录表单显示正常,但当我输入用户名并通过时,每次都会再次显示登录表单。使用密码恢复功能会导致电子邮件未找到错误。我知道用户名密码和电子邮件是正确的,b/c我可以访问mysql数据库,我可以看到值(至少用户名和电子邮件) 有人知道会出什么问题吗