Як створити таблицю в адмінці WordPress Частина 1

Як створити таблицю в адмінці WordPress Частина 1

У цій статті ми продовжимо розробку нашого плагіна для створення шорткодів і розглянемо питання створення таблиць у панелі адміністратора. Звичайно, можна було б обійтися без таблиць, передбачивши певну кількість полів для шорткодів. Але коли з’являється можливість створювати їх у необмеженій кількості — це стає вагомою перевагою нашого плагіна. Тим більше, це дозволяє одночасно поглибити знання у програмуванні під WordPress.

І почнемо ми, як завжди, з самого початку — створення файлів плагіна (в наступних статтях цей крок описуватись не буде). Створимо в каталозі «/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
Автор: Pavel
Автор URI: author site url
Ліцензія: 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. Виводимо таблицю через метод «display()» у HTML-розмітці

На цьому етапі ми завершили створення меню. Переходимо до реалізації таблиці.

Клас для створення простої таблиці у панелі адміністратора WordPress

Перше, що потрібно зробити, — це підключити файл із базовим класом:

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

Результатом буде така таблиця:

Таблиця в адмінці

Код плагіна можна завантажити за цим посиланням.

А у наступній статті ми розширимо можливості нашого класу — додамо форму пошуку, стилі, чекбокси і групові дії над записами.

Пости на схожі теми

З вашим WordPress сайтом проблеми? потрібний додатковий функціонал? нестандартний плагін чи згорнути нову сторінку?
Тоді напишіть мені через форму зворотного зв'язку, і я намагатимусь вам допомогти.

Напишіть коментар

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *