Как создать таблицу в админке 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>», сделав его жирнее. Это всего лишь простой пример, сложная вариация и другой подходя будет рассмотрен в следующем уроке.

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

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

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