Создание таблицы в стиле администратора?

44

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

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

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

Ян Фабри
источник
3
Существует новый блог для руководства по стилю интерфейса WordPress, вы можете найти его полезным. dotorgstyleguide.wordpress.com/outline
sorich87
2
Примечание для self: scribu добавил новую систему табличных таблиц в WP 3.1 с базовым классом WP_List_Table. Этот вопрос, вероятно, может быть дополнен информацией о том, как его использовать.
Ян Фабри

Ответы:

29

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

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

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

sorich87
источник
это также должно иметь автоматическую нумерацию страниц, как это? (например, показ поста 1-20)
Michiel Standaert
@MichielStandaert Нет.
kaiser
@MichielStandaert если вы хотите постраничный результат вы можете использовать paginate_links
tiltdown
Благодарность ! (Но я все еще спрашиваю, почему они не использовали :oddдля строки вместо того, чтобы добавить класс каждые две строки ...)
Захари Дахан
Очевидно, есть «лучшие» решения (как и другие ответы здесь), но для быстрой основной таблицы это именно то, что я искал. Спасибо!
Риного
26

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

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

Гиды:

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

Выгоды?

ДА!

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

кайзер
источник
1
Небольшая подсказка в виде ссылки, чтобы увидеть разметку, классы для интерфейса администратора, без
единой
1
> Доступ этого класса помечен как закрытый. Это означает, что он не предназначен для использования разработчиками плагинов и тем, поскольку он может быть изменен без предупреждения в любом будущем выпуске WordPress. Если вы все еще хотите использовать этот класс, вам следует сделать копию для использования и распространения вместе с вашим собственным проектом или использовать ее на свой страх и риск.
Остин Прай
@ AustinPray Копия ? Нет, пожалуйста, не делай этого. Доступны бета-версии, RC и другие предварительные релизы WP. Просто обновите вашу реализацию / расширение. Если вам действительно нужно идти боком, просто напишите что-нибудь получше. Основной код не что хорошо.
Кайзер
@ Кайзер Не стреляйте в посланника, это не мои слова. Я цитировал из WP Codex. Хотя подписка на вечное регрессионное тестирование с каждой бета-версией и RC звучит не лучше, чем копирование класса. Я согласен, что писать свой собственный простой класс - лучший путь вперед.
Остин Прай
@AustinPray Никаких обид. :) Кодекс написан такими людьми, как ты и я. На самом деле, вы можете пойти и отменить это утверждение, и люди процитируют его.
Кайзер
13

Используйте этот пример (написанный как плагин) для создания ваших админ-таблиц:

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

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

шлифовальная машинка
источник
3
Я думаю, что это должен быть принятый ответ. Также см. Эту статью в журнале Smashing Magazine, в которой излагается аналогичный подход: wp.smashingmagazine.com/2011/11/03/…
julien_c
0

Возможно, вы захотите добавить фильтр в свой пользовательский список типов записей в админке? Приведенный ниже ответ показывает, как это сделать с помощью таксономии, но вы можете легко использовать другие критерии в своей restrict_manage_postsцепочке:

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

MikeSchinkel
источник
Я прошу прощения за неясный вопрос. В моем первом примере это была таблица сообщений, и я действительно мог бы попытаться использовать для этого существующую таблицу сообщений (даже если я хочу показать только заголовки сообщений, а затем все пользовательские столбцы?). Но теперь я отредактировал свой вопрос на конкретном примере: у меня есть таблица доменов, поэтому нет эквивалентной существующей таблицы, которую я мог бы расширить.
Ян Фабри
@Jan : ах. Да, я думаю, вы нашли правду, что нет хорошего инкапсулированного способа сделать это, кроме написания (дублирования) HTML. У меня часто была такая же проблема. Возможно, создайте заявку в trac с просьбой об этом улучшении и укажите здесь ссылку / билет #, чтобы мы могли ее поддержать.
MikeSchinkel