Wp_List_Table not responsive

时间:2015-04-30 作者:Samir B

im使用wp_list_table 在我的后端主题上初始化,以显示我保存在数据库中的一些信息,但有很多信息,我想让它响应,根据屏幕大小显示/隐藏一些元素。

我以为它会自动发生,就像在显示帖子的表中一样,但事实并非如此。

以下是小屏幕中所有帖子的示例posts on small screen

这是我在小屏幕上的wp\\u list\\u表wp_list_table on small screen

我如何在没有黑客的情况下修复这个bug,wordpress core有什么解决方案吗?类似帖子

谢谢

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

我正在使用wp list table,没有(php)类,但只使用html,我想与大家分享我的研究成果。如果您在自己构建wp列表表时需要一个响应表,那么需要注意以下事项:

添加类column-primary 至页眉th 和车身td. 如果缺少此类,则移动视图中的表会变得凌乱toggle-row 分类为column-primary 要展开行,请添加data-colname 至车身td- 手机中的内容显示在在中间。没有data-colname 标签丢失(通常显示在表格标题中)/ul>


responsive wp-list-table on mobile view

最终HTML代码应如下所示:

<table class="wp-list-table widefat striped">
    <thead>
    <tr>
        <th class="column-primary">primary Field Name</th>
        <th>Label 2</th>
        <th>Label 3</th>
    </tr>
    </thead>
    <tbody>
    <tr class="is-expanded">
        <td class="column-primary" data-colname="Name">primary field content
            <button type="button" class="toggle-row">
                <span class="screen-reader-text">show details</span>
            </button>
        </td>
        <td data-colname="Label 2">Content 2</td>
        <td data-colname="Label 3">Content 3</td>
    </tr>
    <tr>
        <td class="column-primary" data-colname="Name">unexpanded row
            <button type="button" class="toggle-row">
                <span class="screen-reader-text">show details</span>
            </button>
        </td>
        <td data-colname="Label 2">Content 2</td>
        <td data-colname="Label 3">Content 3</td>
    </tr>
    </tbody>
</table>

SO网友:Latz

响应列表表是WordPress v4的开发目标。3:https://make.wordpress.org/core/2015/04/30/dev-chat-summary-april-29th/

更好的响应列表-这涉及到一些PHP端API的更改以及UI工作。这里的基本思想是,窄屏幕设备通常也是移动设备,其带宽可能有限。这正是您不想加载更多页面来查看重要信息的情况,而我们当前的截断策略与此直接冲突。

如果你想参与开发,请联系@helen。

SO网友:Dunimas

这是因为需要设置主列。如果您告诉WP主列是什么,它的格式将与上面所示的默认WordPress表类似。像这样:

在方法内prepare_items():

$this->_column_headers = array( $columns, $hidden, $sortable, $primary );

Definitions

要显示的列:

$columns = array()
要隐藏的列:

$hidden = array()
可以排序的列:

$sortable = array()
主列的名称(在列数组中提供):

$primary = string

结束

相关推荐

mobile vs responsive sites

美国一家医疗诊所的网络公司告诉我,对他们来说,建立一个常规的WP网站和一个单独的WP移动网站比建立一个单一的WP响应网站更便宜。什么是更好的传统智慧。是否只对那些负担不起常规和移动站点的用户做出响应,或者它处理的设备是否比移动站点多?