Как создать таблицу в админке 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
}
&#091;/php&#093;

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

&#091;php&#093;
$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 — идентификатор для кнопки (в методе он комбинируется с другой строкой)

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