Html/CSS结果页/板球记分卡在WordPress

Question

我是网页设计的新手，正在创建一个基于WordPress平台的体育网站。

该网站将报道的体育项目之一是板球。我的网站几乎完成了，但我被一些非常重要的CSS/Html数据表卡住了。如果这里有人能指导/帮助我如何创建下面链接中的表格，或者是否有人可以从现有网站复制html/css并对其进行样式设置，我将不胜感激。

我只需要一份表格，不需要排序选项

类似的记分卡尽可能轻将是伟大的

Wordpress中的CSS/html是否可以实现这些功能，或者对于这样的表有更好的选择吗？

Answer 1

这里有两个可以使用的解决方案：

解决方案#1:TabPress插件

通过图形面板，您可以完全自定义表格。你可以设置自己的CSS，可以有colspan、rowspan或所有这些。查看演示。如果你不想在编码上花费太多时间，那就试一试吧。

解决方案2:WP_List_Table

它从WordPress 3.1开始提供。WP 3.1使用它来构建您可以在管理面板中看到的表。例如，显示帖子的表使用此类。但是，您可以禁用一些功能，如分拣、批量操作等。

下面是从我的一个博客中提取的示例代码。我想显示一个没有排序选项的统计表。调用ff_show_stats()以显示PHP代码中的表。

if( ! class_exists( 'WP_List_Table' ) ) {
    require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}
class FFStatsTable extends WP_List_Table {
    function __construct(){
    }
    function get_columns(){
        $columns = array(
            'id' => 'ID',
            'creation' => 'Creation',
            'country' => 'Country'
            // Add as much column as you want
            // 'column_name_in_query' => 'Displayed column name' 
        );
        return $columns;
    }
    function column_default( $item, $column_name ) {
        switch( $column_name ) { 
        case 'id':
        case 'creation':
        case 'country':
            return $item[ $column_name ];
        default:
            return print_r( $item, true ) ; //Show the whole array for debugging purposes
        }
    }
    function prepare_items() {
        global $wpdb;
        $columns = $this->get_columns();
        $hidden = array();
        $sortable = array();//Empty array for disabling sorting
        $this->_column_headers = array($columns, $hidden, $sortable);
        $this->items = $wpdb->get_results(
            "SELECT id,creation,country FROM wp_my_table WHERE my_condtion=TRUE",
            ARRAY_A 
        );
    }    
}
function ff_show_stats() {
    $myListTable = new FFStatsTable();
    echo '<div class="wrap"><h2>Stats</h2>'; 
    $myListTable->prepare_items(); 
    $myListTable->display(); 
    echo '</div>'; 
}

您可以在这里获得更详细的示例代码：http://plugins.svn.wordpress.org/custom-list-table-example/tags/1.2/list-table-example.php