Как создать собственные админ-таблицы в WordPress правильным способом

  1. Об авторе Страстный веб-разработчик из Лиона. Джереми любит создавать приятные и сильные веб-приложения,...
  2. До и после стола
  3. Содержимое
  4. Как это делается в WordPress?
  5. Наш пример таблицы
  6. Использование класса таблицы списка
  7. Как добавить элементы до и после таблицы
  8. Как отобразить строки таблицы
  9. Реализация
  10. Где мы это пишем?
  11. Прежде чем мы начнем
  12. Создайте таблицу
  13. Покажите это
  14. Заключение

Об авторе

Страстный веб-разработчик из Лиона. Джереми любит создавать приятные и сильные веб-приложения, обычно основанные на PHP. WordPress ботаник, он любит jQuery, твитов о сети ... Подробнее о Джереми ...

Таблицы списков WordPress являются очень распространенным элементом интерфейса администратора WordPress, но создание одной из этих таблиц не совсем интуитивно понятно, если вы еще этого не сделали. В этой статье мы увидим, как правильно генерировать некоторые нативные админ-таблицы.

Таблицы списков являются общим элементом в интерфейсе администрирования WordPress. Они используются почти на всех стандартных страницах администратора со списками, и разработчики часто интегрируют их в свои плагины. Но создание одной из этих таблиц не совсем интуитивно понятно, если вы не делали этого раньше, и я видел, как люди пытаются копировать ее, используя CSS-классы WordPress в пользовательской разметке и даже копируя CSS с нуля.

В этой статье мы увидим, как WordPress предоставляет функциональные возможности, которые можно использовать для создания собственных таблиц администратора. Мы рассмотрим типичную таблицу WordPress и ее различные компоненты и покажем, как правильно ее реализовать.

Дальнейшее чтение на SmashingMag:

Презентация таблицы WordPress

Чтобы лучше понять различные элементы, о которых мы будем говорить, давайте возьмем менеджер ссылок по умолчанию, который вы видите, когда нажимаете «Ссылки» в меню администратора. Вот что вы видите:

Страница по умолчанию для управления ссылками в WordPress 3
Страница по умолчанию для управления ссылками в WordPress 3.2.

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

До и после стола

Интерфейс администратора WordPress является последовательным, поэтому вы привыкнете находить элементы в определенных местах во время навигации.

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

Во второй части этой статьи мы увидим, как взаимодействовать с этими двумя областями и как отображать там параметры.

Говоря о последовательности, каждая таблица администратора в WordPress имеет верхний и нижний колонтитулы.

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

Содержимое

Очевидно, что причина, по которой вы бы создали таблицу, заключается в том, чтобы поместить в нее некоторый контент. Этот контент будет идти в строках между верхним и нижним колонтитулом.

Как это делается в WordPress?

Как мы только что видели, таблица WordPress имеет три семейства элементов. Давайте посмотрим, как этого добиться, на конкретном примере.

Наш пример таблицы

В большинстве случаев данные, которые мы хотим отобразить, будут представлены в форме таблицы SQL. Мы будем использовать таблицу ссылок по умолчанию в WordPress в качестве нашего примера, но концепции применимы к любой таблице базы данных и могут быть легко адаптированы к вашим потребностям. Наша таблица будет иметь следующую структуру:

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

Использование класса таблицы списка

Чтобы создать таблицу HTML в WordPress, нам не нужно много писать HTML. Вместо этого мы можем положиться на драгоценную работу класса WP_List_Table. Как объясняется Кодексом WordPress Этот класс является мощным инструментом для генерации таблиц.

Он предназначен для внутренних разработчиков, поэтому мы можем сосредоточиться на наиболее важной задаче (обработка данных), оставляя другие задачи (такие как рендеринг HTML) для WordPress.

Класс WP_List_Table - это, по сути, небольшая структура, функциональность которой мы можем использовать при подготовке нашей таблицы. Это объектно-ориентированный подход, потому что мы будем создавать объект, расширяющий WP_List_Table, и использовать его вместо непосредственного использования WP_List_Table.

Давайте создадим класс Link_List_Table с помощью простого конструктора:

class Link_List_Table extends WP_List_Table {/ ** * Конструктор, мы переопределяем родительский элемент для передачи наших собственных аргументов * Обычно мы фокусируемся на трех параметрах: метках в единственном и множественном числе, а также на том, поддерживает ли класс AJAX. * / function __construct () {parent :: __ construct (array ('singular' => 'wp_list_text_link', // Метка Singular 'множественное число = =' wp_list_test_links ', // метка множественного числа, также это может быть одна из таблиц css class 'ajax' => false // Мы не будем поддерживать Ajax для этой таблицы)); }}

Это отправная точка нашей таблицы. Теперь у нас есть объект, который имеет доступ к свойствам и методам его родителя, и мы настроим его в соответствии с нашими потребностями.

Имея в виду три типа элементов, которые мы видели ранее, давайте теперь посмотрим, что добавить в наш класс, чтобы получить тот же результат.

Как добавить элементы до и после таблицы

Чтобы отобразить содержимое до или после таблицы, нам нужно добавить метод с именем extra_tablenav в наш класс. Этот метод может быть реализован следующим образом:

/ ** * Добавить дополнительную разметку на панели инструментов до или после списка * @param string $ which, помогает вам решить, добавлять ли разметку после (внизу) или до (вверху) списка * / function extra_tablenav ($ which) { if ($ which == "top") {// Код, который идет перед таблицей, находится здесь echo "Hello, I'm before the table"; } if ($ which == "bottom") {// Код, который идет после таблицы, есть эхо "Hi, I'm after the table"; }}

Интересно то, что метод extra_tablenav принимает один параметр с именем $ which, и эта функция вызывается дважды Link_List_Table (один раз перед таблицей и один раз после). Когда он вызывается раньше, значение параметра $ which является верхним, а когда он вызывается второй раз, после таблицы его значение является нижним.

Затем вы можете использовать это для позиционирования различных элементов, которые вы хотели бы видеть до и после таблицы.

Эта функция существует в родительском классе WP_List_Table в WordPress, но она ничего не возвращает, поэтому, если вы не переопределите ее, ничего плохого не произойдет; таблица просто не будет иметь никакой разметки до или после нее.

В верхнем и нижнем колонтитулах у нас есть заголовки столбцов, и некоторые из них можно сортировать.

Мы добавим в наш класс метод с именем get_columns, который используется для определения столбцов :

/ ** * Определить столбцы, которые будут использоваться в таблице * @return array $ columns, массив столбцов для использования с таблицей * / function get_columns () {return $ columns = array ('col_link_id' => __ ('ID'), 'col_link_name' => __ ('Name'), 'col_link_url' => __ ('Url'), 'col_link_description' => __ ('Description'), 'col_link_visible' => __ ( «Видимый»)); }

Приведенный выше код создаст массив в виде 'column_name' => 'column_title'. Этот массив затем будет использоваться вашим классом для отображения столбцов в верхнем и нижнем колонтитулах, в том порядке, в котором вы их написали, поэтому определить это довольно просто.

В таблице ссылок много полей, но не все они нас интересуют. С нашим методом get_columns мы выбрали отображение только нескольких из них: идентификатор, имя, URL, описание ссылки, а также видимость ссылки.

В отличие от метода extra_tablenav, get_columns является родительским методом, который должен быть переопределен для работы. Это имеет смысл, потому что если вы не объявите какие-либо столбцы, таблица сломается.

Чтобы указать столбцы, к которым нужно добавить функцию сортировки , мы добавим метод get_sortable columns в наш класс:

/ ** * Решите, какие столбцы активировать в сортировке * @return array $ sortable, массив столбцов, которые могут быть отсортированы пользователем * / public function get_sortable_columns () {return $ sortable = array ('col_link_id' => 'link_id', 'col_link_name' => 'link_name', 'col_link_visible' => 'link_visible'); }

Здесь мы снова создали массив PHP. Модель для этого является 'column_name' => 'Соответствующая_Database_field'. Другими словами, имя столбца должно совпадать с именем столбца, определенным в методе get_columns, а поле соответствующего поля_данных должно совпадать с именем соответствующего поля в таблице базы данных.

Код, который мы только что написали, указывает, что мы хотели бы добавить функциональность сортировки к трем столбцам («ID», «Name» и «Visible»). Если вы не хотите, чтобы пользователь мог сортировать какие-либо столбцы, или если вы просто не хотите реализовывать этот метод, WordPress просто предполагает, что ни один столбец не может быть отсортирован.

На данный момент наш класс готов справиться с довольно многими вещами. Давайте теперь посмотрим, как отобразить данные.

Как отобразить строки таблицы

Первые шаги в подготовке таблицы списка очень быстрые. Нам просто нужно решить еще несколько вопросов при обработке данных.

Чтобы таблица списка отображала ваши данные, вам нужно подготовить свои элементы и назначить их в таблицу. Это обрабатывается методом prepare_items:

/ ** * Подготовить таблицу с различными параметрами, разбивкой на страницы, столбцами и элементами таблицы * / function prepare_items () {global $ wpdb, $ _wp_column_headers; $ screen = get_current_screen (); / * - Подготовка вашего запроса - * / $ query = "SELECT * FROM $ wpdb-> links"; / * - Параметры упорядочения - * / // Параметры, которые будут использоваться для упорядочения результата $ orderby =! Empty ($ _ GET ["orderby"])? mysql_real_escape_string ($ _ GET ["orderby"]): 'ASC'; $ order =! empty ($ _ GET ["order"])? mysql_real_escape_string ($ _ GET ["order"]): '; if (! empty ($ orderby) &! empty ($ order)) {$ query. = 'ORDER BY'. $ orderby. ' .»$ Заказ; } / * - Параметры пагинации - * / // Количество элементов в вашей таблице? $ totalitems = $ wpdb-> query ($ query); // вернуть общее количество затронутых строк // сколько отображать на странице? $ perpage = 5; // Какая это страница? $ paged =! empty ($ _ GET ["paged"])? mysql_real_escape_string ($ _ GET ["paged"]): '; // Номер страницы if (empty ($ paged) ||! Is_numeric ($ paged) || $ paged <= 0) {$ paged = 1; } // Сколько страниц у нас всего? $ totalpages = ceil ($ totalitems / $ за страницу); // настроить запрос, чтобы учитывать нумерацию страниц, если (! empty ($ paged) &&! empty ($ perpage)) {$ offset = ($ paged-1) * $ perpage; $ query. = 'LIMIT'. (int) $ offset. ','. (int) $ perpage; } / * - Зарегистрировать нумерацию страниц - * / $ this-> set_pagination_args (массив ("total_items" => $ totalitems, "total_pages" => $ totalpages, "per_page" => $ perpage,)); // Ссылки на страницы создаются автоматически в соответствии с этими параметрами / * - Зарегистрировать столбцы - * / $ columns = $ this-> get_columns (); $ _wp_column_headers [$ экран-> ID] = $ столбцов; / * - получить элементы - * / $ this-> items = $ wpdb-> get_results ($ query); }

Как видите, этот метод немного сложнее, чем предыдущие, которые мы добавили в наш класс. Итак, давайте посмотрим, что на самом деле здесь происходит:

  1. Подготовка запроса Первое, что нужно сделать, это указать общий запрос, который будет возвращать данные. Здесь это общий SELECT в таблице ссылок.
  2. Параметры порядка Второй раздел предназначен для параметров порядка, поскольку мы указали, что наша таблица может быть отсортирована по определенным полям. В этом разделе мы получаем поле (если оно есть), по которому можно упорядочить нашу запись ($ _GET ['order']) и сам порядок ($ _GET ['orderby']). Затем мы корректируем наш запрос, чтобы учесть их, добавив предложение ORDER BY.
  3. Параметры нумерации страниц В третьем разделе рассматриваются нумерация страниц. Мы указываем, сколько элементов в нашей таблице базы данных и сколько показать на странице. Затем мы получаем номер текущей страницы ($ _GET ['paged']) и затем адаптируем запрос SQL для получения правильных результатов на основе этих параметров пагинации.
  4. Регистрация Эта часть функции берет все подготовленные нами параметры и присваивает их нашей таблице.
  5. Готов к работе Наша таблица списка теперь содержит всю информацию, необходимую для отображения наших данных. Он знает, какой запрос выполнить, чтобы получить записи из базы данных; он знает, сколько записей будет возвращено; и все параметры нумерации страниц готовы. Это важный метод вашего класса таблицы списка. Если вы не реализуете это должным образом, WordPress не сможет получить ваши данные. Если метод отсутствует в вашем классе, WordPress вернет ошибку, сообщающую, что метод prepare_items должен быть переопределен.
  6. Отображение строк Это оно! Наконец, мы добрались до метода, отвечающего за отображение записей данных. Он называется display_rows и реализован следующим образом.

/ ** * Показать строки записей в таблице * @return string, повторить разметку строк * / function display_rows () {// Получить записи, зарегистрированные в методе prepare_items $ records = $ this-> items; // Получить столбцы, зарегистрированные в списке методов get_columns и get_sortable_columns ($ columns, $ hidden) = $ this-> get_column_info (); // Цикл для каждой записи if (! Empty ($ records)) {foreach ($ records as $ rec) {// Открытие строки echo '<tr id = "record _'. $ Rec-> link_id. '">' ; foreach ($ столбцы как $ column_name => $ column_display_name) {// Атрибуты стиля для каждого col $ class = "class = '$ column_name column- $ column_name'"; $ style = ""; if (in_array ($ column_name, $ hidden)) $ style = 'style = "display: none;"'; $ attribute = $ class. $ Стиль; // редактировать ссылку $ editlink = '/wp-admin/link.php?action=edit&link_id='.(int)$rec->link_id; // Отображение переключателя ячеек ($ column_name) {case "col_link_id": echo '<td'. $ Attribute. '>'. Stripslashes ($ rec-> link_id). '</ Td>'; перерыв; case "col_link_name": echo '<td'. $ attribute. '> '.stripslashes ($ REC-> link_name). </ td> '; перерыв; case "col_link_url": echo '<td'. $ attribute. '>'. stripslashes ($ rec-> link_url). '</ td>'; перерыв; case "col_link_description": echo '<td'. $ attribute. '>'. $ rec-> link_description. '</ td>'; перерыв; case "col_link_visible": echo '<td'. $ attribute. '>'. $ rec-> link_visible. '</ td>'; перерыв; }} // Закрыть строку echo '</ tr>'; }}}

Эта функция получает данные, подготовленные методом prepare_items, и просматривает различные записи для создания разметки соответствующей строки таблицы.

С помощью этого метода вы можете контролировать отображение данных. Если вы не хотите добавлять этот метод в свой класс, тогда класс будет использовать метод родителя для отображения данных в стиле WordPress по умолчанию.

Ваш класс таблиц списков завершен и готов к использованию на одной из ваших страниц.

Все методы, которые мы добавили в наш класс, уже существуют в родительском классе WP_List_Table. Но чтобы ваш дочерний класс работал, вы должны переопределить как минимум два из них: get_columns и prepare_items.

Реализация

Теперь, когда наш класс таблицы списка готов, давайте посмотрим, как мы можем использовать его на странице по нашему выбору.

Где мы это пишем?

Код, который мы рассмотрим в этом разделе, должен быть написан на странице, где вы хотите отобразить таблицу администратора.

Мы создадим очень простой демонстрационный плагин под названием «Test WP List Table». По сути, этот плагин добавит ссылку в подменю WordPress «Плагины». Поэтому наш код будет записан в файле плагина.

Прежде чем мы начнем

Важно: класс WP_List_Table недоступен в плагинах по умолчанию. Вы можете использовать следующий фрагмент кода, чтобы убедиться, что он там есть:

// Наш класс расширяет класс WP_List_Table, поэтому нам нужно убедиться, что он существует, если (! Class_exists ('WP_List_Table')) {require_once (ABSPATH. 'Wp-admin / includes / class-wp-list-table.php' ); }

Кроме того, если вы создали свой класс Links_List_Table во внешнем файле, обязательно включите его перед началом создания экземпляра.

Создайте таблицу

Первым шагом является создание экземпляра нашего класса таблицы списка, а затем вызов метода prepare_items для извлечения данных в вашу таблицу:

// Подготовить таблицу элементов $ wp_list_table = new Links_List_Table (); $ Wp_list_table-> prepare_items ();

Покажите это

Теперь объект $ wp_list_table готов отображать таблицу в любом месте.

Создайте разметку своей страницы, и там, где вы решите отобразить таблицу, вызовите метод display ():

// Таблица элементов $ wp_list_table-> display ();

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

Он также автоматически генерирует все ссылки на страницы, поэтому результат должен выглядеть следующим образом:

В загрузке, сопровождающей эту статью, вы найдете полный файл PHP, содержащий определение класса и пример его реализации. Он называется testWPListTable.php и написан в виде простого плагина, который вы можете поместить в папку плагинов WordPress и активировать, если хотите посмотреть, что он делает.

Заключение

Создание класса PHP просто для отображения таблицы данных может показаться излишним. Но этот класс очень легко создавать и настраивать. И как только это будет сделано, вы будете рады, что части таблиц, которые трудно реализовать, такие как разбиение на страницы и переупорядочение, теперь позаботились.

Кроме того, поскольку сгенерированная разметка - это именно то, что поддерживает WordPress, если обновление будет выпущено однажды, ваши таблицы останутся в хорошей форме.

Код PHP, который мы использовали, прост и понятен. И освоение функций по умолчанию не займет много времени.

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

Для получения дополнительной информации прочитайте страницу Кодекса, посвященную Таблицы списка WordPress и посмотрите на другого пример таблицы пользовательских списков ,

Я надеюсь, что вы нашли эту статью полезной, и я желаю вам удачи с таблицами списков!

Как это делается в WordPress?
Empty ($ _ GET ["orderby"])?
Empty ($ _ GET ["order"])?
»$ Заказ; } / * - Параметры пагинации - * / // Количество элементов в вашей таблице?
Totalitems = $ wpdb-> query ($ query); // вернуть общее количество затронутых строк // сколько отображать на странице?
Perpage = 5; // Какая это страница?
Empty ($ _ GET ["paged"])?
Is_numeric ($ paged) || $ paged <= 0) {$ paged = 1; } // Сколько страниц у нас всего?
Php?
Где мы это пишем?

Новости

Социальные сети в России, зима 2015-2016 Цифры, тренды, прогнозы | Блог Brand Analуtics — все о бренд мониторинге и социальной аналитике
Представляем данные регулярного исследования активной аудитории социальных сетей в России, зима 2015-2016. В исследовании представлены данные по аудитории, возрасту, полу и региональному распределению

SMM маркетинг от А до Я
Развитие социальных сетей породило новую огромную бизнес отрасль — СММ маркетинг. Это когда мы приходим с нашим продуктом в какую-нибудь соцсеть, находим там нашу целевую аудиторию, и предлагаем ей наш

Полезно знать
20.02.2014 Что такое Pinterest. Визуальный PR и маркетинг Pinterest или ПИНТЕРЕСТ – социальная сеть, использующая вместо текстов картинки и изображения, которые можно добавлять в аккаунт,

Фейсбук Моя страница: ВХОД на свою страницу Facebook
Фейсбук (Facebook) Моя страница — это личная страница каждого зарегистрированного пользователя самой большой в мире социальной сети.  Фейсбук даёт возможность людям с разных уголков Земли общаться между

Анализ социальных сетей
АНАЛИЗ СОЦИАЛЬНЫХ СЕТЕЙ (social network analysis) - новое направление структурного подхода, основными целями которого являются исследование взаимодействий между социальными объектами и выявление условий

Социальные сети для продвижения бизнеса: какие выбрать?
  Привет, друзья! Социальные сети занимают львиную часть времени в нашей жизни. Ежедневный просмотр новостей, любимых групп и переписка с друзьями – это любимое дело большинства молодых людей. Вот и

ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА - VI Студенческий научный форум (15 февраля - 31 марта 2014 года)
ВРЕДНОЕ ВЛИЯНИЕ СОЦИАЛЬНЫХ СЕТЕЙ НА ЗДОРОВЬЕ ЧЕЛОВЕКА Гущина Н. В., Люлина Н.В. С распространением всемирной паутины рост социальных сетей по всему миру стал глобальным явлением. С каждым

Влияние социальных сетей на подростков. Пропаганда суицида в сетях
Почему мы любим интернет? Почему молодым людям, подросткам сказать «Привет» стало проще, познакомившись в интернете, чем просто подойти в реальности? Почему все «сидят» в социальных сетях? Социальные сети

Маркетинг в социальных сетях (SMM) для продвижения компании
Деятельность в социальных сетях, на блогах и форумах по повышению лояльности клиентов получила название SMM — от аббревиатуры английского звучания этого термина – Social Media Marketing. Аудитория

Фейсбук (Facebook) - что это за сеть: как пользоваться ФБ
Фейсбук — это самая популярная и большая социальная сеть в мире. Если Вам интересно узнать больше о Facebook, про то как пользоваться сетью и о некоторых «фишках» ФБ — этот материал именно для вас!