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

Вітаю вас, шановні читачі та гості блогу. Так, так, так. Я ледар і давно не писав. Кинути легко, а от знову почати писати — значно важче. Але я дуже сподіваюся, що ця ситуація зміниться найближчим часом. Адже по WP я здобув чимало цікавих знань. Створив кілька плагінів, виконав декілька проєктів по бекенду. Ну а з версткою у мене поки що по-старому.

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

Першу статтю з цього циклу можна знайти за цим посиланням. Через те, що минуло трохи часу, я змінив назви деяких класів та методів, але суть та поставлені задачі залишилися незмінними. Думаю, така плутанина піде вам на користь, бо доведеться трохи подумати — що до чого.

Базовий клас плагіна «Plance_INIT_Lessons2»

Перше, що нам потрібно — змінити конструктор класу «Plance_INIT_Lessons2» (нагадаю, що в першій статті назва класу була іншою). Тепер наш конструктор має наступний вигляд:

public function __construct()
{
	add_action('admin_menu', array($this, 'createMenu'));
	add_filter('set-screen-option', array($this, 'setScreenOption'), 10, 3);
	add_action('admin_head', array($this, 'adminHead'));
	add_action('plugins_loaded', array($this, 'loadTextdomain'));
}

де:
Підключаємо меню, у ньому є невеликі зміни

add_action('admin_menu', array($this, 'createMenu'));

Підключаємо фільтр для перевірки, яка сторінка спрацювала, щоб знати чи зберігати опції (нижче — трохи детальніше)

add_filter('set-screen-option', array($this, 'setScreenOption'), 10, 3);

Тут ми вказуємо стилі для нашого плагіна

add_action('admin_head', array($this, 'adminHead'));

А для підключення мовного файлу використовуємо:

add_action('plugins_loaded', array($this, 'loadTextdomain'));

Як виявилося — саме тут це робити не обов’язково. Але для краси залишимо так, як є.

Переходимо до нашого меню. Існуючий метод потрібно замінити на наступний:

public function createMenu()
{
	$hook = add_menu_page(
		'Table', 
		'Table', 
		'manage_options', 
		__CLASS__, 
		array($this, 'createTable')
	);

	add_action('load-'.$hook, array($this, 'showScreenOptions'));
}

У даному випадку нас цікавить хук наприкінці методу. Використовуючи його, ми можемо створювати код саме для цієї сторінки. Я називаю його «action» методом, за аналогією з MVC-програмуванням. Чому так? Ви дізнаєтеся у наступних статтях. А от у `array($this, 'createTable')` ми вказуємо «view» метод, який відповідає за відображення. Але про це пізніше.

Далі переходимо до нашого методу `showScreenOptions`, у ньому знаходиться наступний код:

add_screen_option('per_page', array(
	'label' => __('Records', 'plance'),
	'default' => 10,
	'option' => 'plance_per_page'
));

Тут ми налаштовуємо значення пагінації для сторінки, тобто скільки записів у таблиці відображати на одній сторінці. Цю опцію можна змінити в інтерфейсі, натиснувши на посилання вгорі екрану «Налаштування екрана».

Далі ми можемо налаштувати меню та вкладки довідки для нашого плагіна:

get_current_screen() -> add_help_tab(array(
	'id'		=> 'plance-tab-1',
	'title'		=> __('Tab 1', 'plance'),
	'content'	=> ''.__('Content 1', 'plance').'',
));

Вони з’являються після натискання кнопки «Допомога», що вгорі екрана.

У кінці методу ініціалізуємо нашу таблицю:

$this -> _Table = new Plance_Table_Lessons2();

Будь ласка, зверніть увагу на метод `adminHead`, який відповідає за стилі нашого плагіна:

public function adminHead()
{
	if(__CLASS__ == (isset($_GET['page']) ? esc_attr($_GET['page']) : ''))
	{
		echo '<style type="text/css">';
		echo '.wp-list-table .column-cb { width: 4%; }';
		echo '.wp-list-table .column-ex_id { width: 5%; }';
		echo '.wp-list-table .column-ex_title { width: 30%; }';
		echo '.wp-list-table .column-ex_author { width: 15%; }';
		echo '.wp-list-table .column-ex_description { width: 36%; }';
		echo '.wp-list-table .column-ex_price { width: 10%; }';
		echo '</style>';
	}
}

Особливо описувати нічого 🙂 стилі як стилі.

На початку йде невелика перевірка. Назва сторінки має збігатися з глобальною змінною `$_GET['page']`. Чому? Бо назва сторінки і є назвою нашого плагіна.

Щодо локалізації — все просто, я навіть не буду це описувати. Погляньте на реалізацію методу `loadTextdomain` — і вам усе стане зрозуміло. Якщо ж виникнуть питання — запрошую в коментарі.

Пам’ятаєте, вище я писав, що `array($this, 'createTable')` я називаю методом виду (view)? Я називаю його так, тому що в ньому зазвичай реалізовую логіку відображення плагіна, а в методі «action» — обробку, валідацію, зв’язок з моделлю та видом (але про це в наступних статтях).

Перейдемо до методу `createTable`, і побачимо наступне:

public function createTable()
{
	$this -> _Table -> prepare_items();
	?>

<div class="wrap">

<h2><?php echo __('Example List Table', 'plance')?></h2>


<form method="get">
				<input type="hidden" name="page" value="<?php echo __CLASS__ ?>" />
				<?php $this -> _Table -> search_box('search', 'search_id'); ?>
				<?php $this -> _Table -> display(); ?>
			</form>

		</div>

	<?php
}
?>

Где:
Подготовка данных таблицы для отображения

<?php
$this -> _Table -> prepare_items();

Оскільки форма відправляється методом GET, потрібно вказати параметр `page` у прихованому полі:

<input type="hidden" name="page" value="<?php echo __CLASS__ ?>" />

Тут ми відображаємо форму пошуку та саму таблицю:

<?php $this -> _Table -> search_box('search', 'search_id'); ?>
<?php $this -> _Table -> display(); ?>

де:
search — назва кнопки пошуку
search_id — ідентифікатор кнопки (у методі він комбінується з іншим рядком).