janfabry
  • 0
Гуру

Создать таблицу в админке?

  • 0

Каков рекомендуемый способ создания страницы с таблицей в стиле таблиц, показывающих сообщения или пользователей в админке?

Я расширяю плагин Cache Images, и он содержит таблицу с доменами и количеством изображений из этого домена. Таким образом, нет эквивалентной существующей таблицы, на которой я мог бы основываться (в первой версии этого вопроса я спрашивал о таблице с сообщениями, но там я мог бы (возможно) расширить существующую таблицу сообщений ).

Должен ли я просто основываться на странице обзора сообщения и начинать с <table class="widefat">, или есть лучшие функции, которые обрабатывают это сейчас? Знаете ли вы чистый, пустой пример таблицы с пейджингом, на котором я мог бы основывать свою работу?

Share
  1. Существует новый блог руководства по стилю пользовательского интерфейса WordPress, он может оказаться вам полезным. dotorgstyleguide.wordpress.com/outline

    • 0
  2. Это то, что я обычно использую:

    <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>
    

    Надеюсь, это поможет.

    • 0
  3. Используйте Core API, а не только его CSS

    Обычно вы просто используете экземпляр WP_List_Table класса.

    Гиды:

    • Подробнее об этом в Кодексе здесь.
    • Вот также руководство от WP Engineer — слишком много, чтобы его копировать.
    • И еще один путеводитель по Smashing Magazine онлайн.

    Преимущества?

    ДА!

    Вы можете добавить разбиение на страницы, поля поиска, действия и любую другую магию, которую только можете себе представить (и умеете программировать).

    • 0
  4. Используйте этот пример (написанный как плагин) для создания таблиц администратора:

    http://wordpress.org/extend/plugins/пользовательский-список-таблица-пример/

    Он использует встроенный класс WP_List_Table.

    • 0
  5. Также вы можете использовать этот небольшой плагин для просмотра возможностей бэкенда в WP: https://github.com/bueltge/WordPress-Admin-Style

    • 0
  6. Для тех, кто хочет внедрить 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
    }
    
    • 0
  7. Возможно, вы захотите добавить фильтр в свой список настраиваемых типов сообщений в админке? Связанный ответ ниже показывает, как это сделать с таксономией, но вы можете легко использовать другие критерии в своем restrict_manage_posts крючке:

    Дайте мне знать, если у вас есть дополнительные вопросы.

    • 0
  8. Здесь есть много хороших вариантов. Но нет быстрого и грязного:

    <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>
    

    Объяснение

    • -class widefat используется common.css загруженным в админку, чтобы он выглядел как WP-таблица.
    • -class striped делает его полосатым (какой сюрприз).
    • -class fixed добавляет CSS:table-layout: fixed;
    • 0

Оставить ответ

You must login to add an answer.