Разработка сайтов на WordPress и фреймворке Yii2

Здесь Вы можете заказать полный пакет услуг по разработке сайта. Начиная от написания ТЗ до программирования на PHP, JavaScript и верстке.

Как создать таблицу в админке WordPress. Часть 1

Как создать таблицу в админке WordPress. Часть 1

В этой статье, продолжим разработку нашего плагина создания шортковод. И рассмотрим вопрос создания таблиц в панели администратора. Можно было бы конечно обойтись и без нее, предусмотрев N`ое количество полей для наших шорткодов. Но когда у нас появится возможность создавать неограниченное их количество. Это будет неоценимым плюсом для нашего плагина. Тем более что мы сможем заодно, подтянуть наши знания в плане программирования под WP.

И начнем мы как всегда из самого начала — создания файлов плагина (в последующих статьях это описываться не будет). Создадим в каталоге «/wp-content/plugins/» каталог «wp2fl-lessons-table-create-part1» а в нем файл «wp2fl-lessons-table-create-part1.php».

В начало файла вставляем комментарий описывающий наш плагин:

/*
Plugin Name: WP2FL. Lessons "Tabele Create" Part 1
Plugin URI: plugin url
Description: Урок. Создание таблицы. Часть 1
Version: 2.0
Author: Pavel
Author URI: author site url
License: GPL2
*/

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

Далее указываем:

defined('ABSPATH') or die('No script kiddies please!');

тем самым ограничивая доступ к нашему файлу, если его захотят вызвать на прямую (т. е. из строки браузера).

Вызываем класс обеспечивающий формирование меню и отображение таблицы:

if(is_admin() == TRUE)
{
    new WP2FL_INIT_Lessons_Menu_Table_Create();
}

при этом, доступ будет иметь только лишь администратор.

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

Далее, создаем наш класс:

class WP2FL_INIT_Lessons_Menu_Table_Create
{
/* … */
}

в дальнейшем, заполним его следующими кодом:

public function __construct()
{
	add_action('admin_menu', array($this, 'createMenu'));
}

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

public function createMenu()
{
	add_menu_page('WP2FL. Lessons "Tabele Create"', 'WP2FL. Lessons "Tabele Create"', 'manage_options', 'wp2fl_init_lessons_menu_table_create', array($this, 'createTable'));
}

Добавляем в боковую панель администратора пункт меню с названием «WP2FL. Lessons Tabele Create». Функция «add_menu_page» принимает семь следующих параметров:

$page_title — название страницы
$menu_title — название пункта меню
$capability — уровень доступа к странице с нашей таблицей
$menu_slug — ID страницы (уникальный параметр), будет использоваться в ссылках на нашу страницу с настройками
$function — функция отвечающая за формирование страницы настроек
$icon_url — ссылка на иконку для пункта меню
$position — позиция пункта меню по отношению к другим пунктам

И вызывает метод «createTable» нашего класса:

public function createTable()
{
	$Table = new WP2FL_Lessons_Menu_Table_Create();
	$Table -> prepare_items();

	?>
		<div class="wrap">
			<h2>Example List Table</h2>
			<?php $Table -> display(); ?>
		</div>
	<?php
}

Здесь все достаточно просто:

1. вызываем класс «WP2FL_Lessons_Menu_Table_Create()» отвечающий за создание таблицы.

2. подготавливаем «prepare_items()» наши данные для отображения

3. формируем простую HTML разметку и отображаем нашу таблицу «display()»

На этом этапе мы закончили с формированием пунктов меню. И можно перейти к созданию таблицы.

Класс создающий простую таблицу в панели администратора WordPress

И первое что нам нужно чтобы создать класс «WP2FL_Lessons_Menu_Table_Create()», отвечающий за формирование нашей таблицы — это подключить файл с базовым (родительским классом).

if(class_exists('WP_List_Table') == FALSE)
{
    require_once(ABSPATH.'wp-admin/includes/class-wp-list-table.php');
}

подключив его, создаем наш:

class WP2FL_Lessons_Menu_Table_Create extends WP_List_Table
{
/* … */
}

далее, создаем метод «prepare_items()»:

public function prepare_items()
{
	//Sets
	$per_page = 5;

	/* Получаем данные для формирования таблицы */
	$data = $this -> table_data();

	/* Устанавливаем данные для пагинации */
	$this -> set_pagination_args( array(
		'total_items' => count($data),
		'per_page'    => $per_page
	));

	/* Делим массив на части для пагинации */
	$data = array_slice(
		$data,
		(($this -> get_pagenum() - 1) * $per_page),
		$per_page
	);

	/* Устанавливаем данные колонок */
	$this -> _column_headers = array(
		$this -> get_columns(), /* Получаем массив названий колокнок */
		$this -> get_hidden_columns(), /* Получаем массив названий колонок которые нужно скрыть */
		$this -> get_sortable_columns() /* Получаем массив названий колонок которые можно сортировать */
	);

	/* Устанавливаем данные таблицы */
	$this -> items = $data;
}

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

Т.к. в уроке мы не рассматриваем взаимодействие с БД, данные беруться из массива (см. метод «table_data()»).

Код:

$this -> _column_headers = array(
	$this -> get_columns(),
	$this -> get_hidden_columns(),
	$this -> get_sortable_columns()
);

обязателен, и отвечает за формирование наших колонок. Выше указанные методы будут описаны ниже.

public function get_columns()
{
	return array(
		'ex_id'			=> 'ID',
		'ex_title'		=> 'Title',
		'ex_author'		=> 'Author',
		'ex_description'=> 'Description',
		'ex_price'		=> 'Price',
	);
}

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

public function get_hidden_columns()
{
	return array();
}

Метод выше, возвращает массив колонок которые нужно скрыть. Зачем это нужно? придумайте сами 🙂

public function get_sortable_columns()
{
	return array(
		'ex_id' => array('ex_id', false),
		'ex_title' => array('ex_title', true),
		'ex_author' => array('ex_author', false),
		'ex_price' => array('ex_price', false),
	);
}

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

Принцип формирования массива следующий, к примеру:

'ex_id' => array('ex_id', false)

где:
ex_id — название колонки для которой будет применена сортировка (в примере выше идет первым)
ex_id — значение GET переменной «orderby», названия колонки (в примере выше идет вторым)
false — тип сортировки по умолчанию (false — asc, true — desc)

результат будет следующий: «...&orderby=ex_id&order=asc»

Далее:

private function table_data()
{
	return array(
		array(
			'ex_id'			=> 1,
			'ex_title'		=> 'Уличный кот по имени Боб',
			'ex_author'		=> 'Боуэн Джеймс',
			'ex_description'=> 'Мировой бестселлер!Готовится экранизация! Он был одиноким бездомным музыкантом, но увидел на',
			'ex_price'		=> '61,00',
		),
		/* ... */
		array(
			'ex_id'			=> 13,
			'ex_title'		=> 'Кульбабове вино',
			'ex_author'		=> 'Брэдбери Рэй',
			'ex_description'=> 'Події повісті Рея Бредбері «Кульбабове вино» розгортаються влітку 1928 року у вигаданому містечку Гр… ',
			'ex_price'		=> '45,90',
		),
	);
}

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

И последнее:

public function column_default($item, $column_name )
{
	switch($column_name)
	{
		case 'ex_id':
		case 'ex_title':
		case 'ex_author':
		case 'ex_description':
		case 'ex_price':
			return $item[$column_name];
		default:
			return print_r($item, true);
	}
}

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

Результатом всего этого является следующая таблица:

Таблица в админкеКод плагина можно скачать по следующей ссылке.

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

6 комментариев к статье "Как создать таблицу в админке WordPress. Часть 1"

  1. Василий

    Добрый день
    следующая часть статьи так и не вышла, или я просто не могу её найти?

    ответить
    1. Pavel

      Здравствуйте, Василий!
      Вы правы, она так и не вышла. Хотя код есть и работает. Вы можете скачать его перейдя по этой ссылке.
      Там так же можно найти некоторые полезные библиотеки для разработки WP.
      Удачи Вам!

      ответить
      1. Василий

        спасибо! буду вникать.
        P.S.
        сожалею, что статья не вышла - умение оформлять свой код в плагины было бы полезно для многих грамотных разработчиков

        ответить
        1. Pavel

          Согласен с Вами.
          Просто я обленился 🙁
          Ну ничего, скоро встанет все на круги своя.

          ответить
  2. Василий

    Благодаря этой статье и официальному примеру https://wordpress.org/plugins/custom-list-table-example/
    история с созданием табличного плагина для админки стала понятной.
    осталась одна непонятка - как правильно обрабатывать row_actions из column_booktitle везде есть примеры про get_bulk_actions(), но, например, про вывод формы редактирования записи - ни слова не нашел

    ответить
    1. Pavel

      Сейчас подробнее ответить не могу. Но форма редактирования к таблице ни как не относится. С таблицы Вы просто делаете ссылку на другой URL, а там уже отображаете форму.

      ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *