Блок довільних полів у адмінці WordPress своїми руками

Зміст:

Щоб не створювати довільні поля повністю вручну, можна використовувати мій клас PHP для зручного створення метаполів запису .

Щоб вивести подібний блок елементів таксономій, дивіться опис події: Метаполі для рубрик (таксономій) у WordPress


В одна частина

Перш ніж почати розповідати про те, як створити довільний блок даних в адмін-панелі на сторінці редагування постів , який керуватиме вказаними довільними полями, слід зазначити, що WordPress — платформа, яка, мабуть, як ніяка інша піддається розширенню з найменшими зусиллями. Зокрема, саме тому під WordPress написано так багато плагінів – все дуже просто, потрібно лише знати ази PHP та розуміти принцип роботи системи.

Кожен, хто досить близько знайомий з WordPress, неодноразово зустрічався з поняттям «довільні поля» і за їх допомогою вирішував деякі нетривіальні завдання.

Довільні поля WordPress — дуже зручний інструмент, коли потрібно «прикріпити» до конкретної посади будь-які додаткові дані. Такими даними може бути будь-що, починаючи від логічних true/false (1/0), закінчуючи об’ємними текстами, масивами та іншим. Наприклад, ми можемо створити нове довільне поле Titleі в його значення написати текст (альтернативний заголовок посту), потім у коді шаблону використовувати наступний код, щоб вивести цей текст:

<title><?php echo get_post_meta($post->ID, 'title', true); ?></title>

Слід зазначити, що функцію get_post_meta() можна використовувати поза Циклом WordPress, тобто. де завгодно у шаблоні. В даному прикладі ми використовуємо її в <head> частини документа, щоб дати html сторінці заголовок, відмінний від заголовка самої статті (іноді корисно для SEO).

Блок довільних полів у WordPress

Інший приклад: використовуючи довільні поля ми можемо виконувати чи виконувати дії, залежно від цього, які дані ми маємо значення довільного поля. Наприклад, розміщуючи у довільному полі логічні цифри 1або 0ми можемо виводити або не виводити будь-яку інформацію для поточного посту.

Довільні поля використовуються в WordPress часто-густо, різними плагінами оцінки постів (WP-PostRatings), SEO плагінами (Platinum SEO Pack), що дозволяють вказати Title, Description, Keywords посту, моїм плагіном для створення мініатюр (Kama Thumbnail) . Образно кажучи, кожне четверте нестандартне завдання вирішується за допомогою довільних полів, тому якщо ви ще не знаєте, як їх використовувати, то ознайомтеся з цим мануалом . А нижче ми поговоримо про те, як створити окремий блок із потрібними нам довільними полями та як зробити це без плагінів.

Мало хто знає, що якщо створити довільне поле ключ якого (назва) починається на _(нижнє підкреслення), наприклад _my_special_key, то таке поле не буде виводитися в списку довільних полів при редагуванні постів і буде вважатися “внутрішнім” довільним полем, яке використовується системою. Створити таке поле можна лише запитом до бази даних, наприклад, використовуючи функції update_post_meta() .


Перш ніж розпочати створення

Забігаючи вперед, скажу, що нижченаведені опис буде корисно, тільки тим хто хоч трохи розуміється на HTML, тобто. якщо ви зовсім не в зуб ногою в HTML і PHP, то читати все що нижче – марнування часу.

Припустимо, що ми робимо сайт на замовлення і при цьому на сайті використовуються довільні поля. Пояснювати замовнику, яке поле вибирати зі списку, щоб додати ту чи іншу інформацію до посту, проблематично, до того ж, це швидко забувається. Саме тому вже давно написані плагіни, завдяки яким можна легко створити блок довільних полів, де не потрібно вибирати поле (ключ) і лише потім вписувати значення. У таких блоках потрібно відразу вписувати значення і є можливість описати кожне поле, при одному погляді на які стає зрозумілим його призначення. Блок, який ми зараз створимо, буде виглядати так:

Кастомний блок довільних полів

А дані такого блоку в довільних полях, після збереження посту, будуть записані так:

Довільні поля в WordPress

Що ми бачимо? — Непотрібні для сторонніх очей ключі довільних полів (про них я говорив вище), які до того ж потрібно ще й вибирати зі списку, що випадає (а їх там може бути зовсім не 4, а куди більше…): description, robotmeta, selectі title. Зрозуміло, створити мета блок довільних полів — чудова ідея.


Створюємо мета блок довільних полів

Для створення метаблоку нам знадобляться всього 2 хуки: add_meta_boxesі add_meta_box() і деякі знання html і php . Додаємо наступний код до файлу теми functions.php :


#1. Створимо новий мета блок для постів

Назвемо його “Додаткові поля”:

// Підключаємо функцію активації мета блоку (my_extra_fields)
add_action('add_meta_boxes', 'my_extra_fields', 1);

function my_extra_fields() {
	add_meta_box( 'extra_fields', 'Додаткові поля', 'extra_fields_box_func', 'post', 'normal', 'high' );
}


#2. Заповнимо цей блок полями html форми

Робиться це через вказану в add_meta_box()функцію extra_fields_box_func(). Саме вона відповідає за зміст мета блоку:

<?php
// код блоку
function extra_fields_box_func( $post ){
	?>
	<p><label><input type="text" name="extra[title]" value="<?php echo get_post_meta($post->ID, 'title', 1); ?>" style="width :50%" /> ? заголовок сторінки (title)</label></p>

	<p>Опис статті (description):
		<textarea type="text" name="extra[description]" style="width:100%;height:50px;"><?php echo get_post_meta($post->ID, 'description', 1); ?></textarea>
	</p>

	<p>Видимість поста: <?php $mark_v = get_post_meta($post->ID, 'robotmeta', 1); ?>
		 <label><input type="radio" name="extra[robotmeta]" value="" <?php checked( $mark_v, '' ); ?> /> index,follow</label>
		 <label><input type="radio" name="extra[robotmeta]" value="nofollow" <?php checked( $mark_v, 'nofollow' ); ?> /> nofollow</label>
		 <label><input type="radio" name="extra[robotmeta]" value="noindex" <?php checked( $mark_v, 'noindex' ); ?> /> noindex</label>
		 <label><input type="radio" name="extra[robotmeta]" value="noindex,nofollow" <?php checked( $mark_v, 'noindex,nofollow' ); ?> /> noindex,nofollow</label>
	</p>

	<p><select name="extra[select]">
			<?php $sel_v = get_post_meta($post->ID, 'select', 1); ?>
			<option value="0">----</option>
			<option value="1" <?php selected( $sel_v, '1' )?> >Вибери мене</option>
			<option value="2" <?php selected( $sel_v, '2' )?> >Ні, мене</option>
			<option value="3" <?php selected( $sel_v, '3' )?> >Краще за мене</option>
		</select> ? вибір за вами</p>

	<input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
	<?php
}

Всі назви полів я оформив у масив extra[], щоб потім простіше було опрацювати ці дані.

Заховане поле name="extra_fields_nonce"потрібно для перевірки при збереженні даних.


#3. Зберігаємо дані

На цьому етапі ми вже створили блок довільних полів, тепер потрібно обробити дані полів при збереженні посту. Обробити, означає записати їх у базу даних або видалити від туди. Для цього використовуємо хук save_post , який спрацьовує в момент збереження посту. У цей момент ми отримаємо дані з масиву extra[]та обробимо їх:

// Включаємо оновлення полів при збереженні
add_action( 'save_post', 'my_extra_fields_update', 0);

## Зберігаємо дані, при збереженні посту
function my_extra_fields_update( $post_id ){
	// базова перевірка
	if (
		   empty( $_POST['extra'] )
		|| ! wp_verify_nonce( $_POST['extra_fields_nonce'], __FILE__ )
		|| wp_is_post_autosave( $post_id )
		|| wp_is_post_revision( $post_id )
	)
		return false;

	// Все ОК! Тепер потрібно зберегти/видалити дані
	$_POST['extra'] = array_map( 'sanitize_text_field', $_POST['extra'] ); // Чистимо всі дані від пробілів по краях
	foreach( $_POST['extra'] as $key => $value ){
		if( empty($value) ){
			delete_post_meta($post_id, $key); // видаляємо поле якщо значення порожнє
			continue;
		}

		update_post_meta($post_id, $key, $value); // add_post_meta() працює автоматично
	}

	return $post_id;
}

Ось і все, блок довільних полів готовий !

Тепер, змінюючи html код, ми можемо редагувати вміст мета блоку. Але не забуваємо, що назви полів мають вигляд масиву зі значенням ключа довільного поля: name="extra[meta_key]".


Блок довільних полів для довільного типу записів

Якщо потрібно створити блок для іншого типу записів, допустимо page(для сторінок), то реєструємо ще один мета блок і описуємо його html код нової функції, яку так само потрібно вказати при реєстрації блоку ( extra_fields_box_page_func). Функцію обробки полів за збереження посту створювати не треба, головне вказати назви полів як масивів extra[]:

function my_extra_fields() {
	add_meta_box( 'extra_fields', 'Додаткові поля', 'extra_fields_box_func', 'post', 'normal', 'high' );
	add_meta_box( 'extra_fields', 'Додаткові поля', 'extra_fields_box_page_func', 'page', 'normal', 'high' );
}

## html код блоку для типу записів page
function extra_fields_box_page_func(){
   ?>
   <!-- Тут поля html форми -->
   <?php
}


Складнощі з типом checkbox

Недоліком такого методу є те, що масив extra[]обов’язково повинен бути визначений, нехай навіть він передає порожнє значення, інакше поле не буде оброблено при збереженні даних. У зв’язку з цим виникає проблема при використанні типу checkbox: <input type="checkbox", тому що checkbox передає дані тільки, якщо галочка виставлена ​​і взагалі нічого не передає, якщо галки немає. А нам потрібно, щоб він передавав порожнє значення, щоб код видаляв значення, якщо воно було збережено до цього.

Щоб обійти цю “недугу” я зробив так: перед полем чекбоксу створюємо hidden поле з name як у чекбоксу та порожнім значенням. І виходить, якщо галочка стоїть, то значення hidden поля перебивається, якщо галки немає, то береться порожнє значення hidden поля.

Тобто. checkbox потрібно викликати так:

<input type="hidden" name="extra[my_checkbox]" value="" />
<input type="checkbox" name="extra[my_checkbox]" value="1" />

Такий самий трюк іноді може стати в нагоді і для поля з типом radio.

Приклад реального коду з типами checkbox:

<?php
// Підключаємо функцію активації мета блоку (my_extra_fields)
add_action('admin_init', 'my_extra_fields', 1);

function my_extra_fields() {
	add_meta_box( 'extra_fields', 'Додаткові поля', 'extra_fields_box_func', 'post', 'normal', 'high' );
}

// код блоку
function extra_fields_box_func( $post ){
?>
	<p><label><input type="text" name="extra[title]" value="<?php echo get_post_meta($post->ID, 'title', 1); ?>" style="width :50%" /> ? заголовок сторінки (title)</label></p>

	<p>Опис статті (description):
		<textarea type="text" name="extra[description]" style="width:100%;height:50px;"><?php echo get_post_meta($post->ID, 'description', 1); ?></textarea>
	</p>

	<p>Видимість поста: <?php $mark_v = get_post_meta($post->ID, 'robotmeta', 1); ?>
		<label><input type="radio" name="extra[robotmeta]" value="" <?php checked( $mark_v, '' ); ?> /> index,follow</label>
		<label><input type="radio" name="extra[robotmeta]" value="nofollow" <?php checked( $mark_v, 'nofollow' ); ?> /> nofollow</label>
		<label><input type="radio" name="extra[robotmeta]" value="noindex" <?php checked( $mark_v, 'noindex' ); ?> /> noindex</label>
		<label><input type="radio" name="extra[robotmeta]" value="noindex,nofollow" <?php checked( $mark_v, 'noindex,nofollow' ); ?> /> noindex,nofollow</label>
	</p>

	<p><select name="extra[select]" />
			<?php $sel_v = get_post_meta($post->ID, 'select', 1); ?>
			<option value="0">----</option>
			<option value="1" <?php selected( $sel_v, '1' )?> >Вибери мене</option>
			<option value="2" <?php selected( $sel_v, '2' )?> >Ні, мене</option>
			<option value="3" <?php selected( $sel_v, '3' )?> >Краще за мене</option>
		</select> ? вибір за вами</p>

	<p>
		<input type="hidden" name="extra[white]" value="">
		<label><input type="checkbox" name="extra[white]" value="1" <?php checked( get_post_meta($post->ID, 'white', 1), 1 )?> /> білий </label>
		<input type="hidden" name="extra[red]" value="">
		<label><input type="checkbox" name="extra[red]" value="1" <?php checked( get_post_meta($post->ID, 'red', 1), 1 )?> /> червоний </label>
		<input type="hidden" name="extra[black]" value="">
		<label><input type="checkbox" name="extra[black]" value="1" <?php checked( get_post_meta($post->ID, 'black', 1), 1 )?> /> чорний </label>
	</p>

	<input type="hidden" name="extra_fields_nonce" value="<?php echo wp_create_nonce(__FILE__); ?>" />
<?php
}

// Включаємо оновлення полів при збереженні
add_action('save_post', 'my_extra_fields_update', 0);

/* Зберігаємо дані, при збереженні посту */
function my_extra_fields_update( $post_id ){
	// базова перевірка
	if (
		   empty( $_POST['extra'] )
		|| ! wp_verify_nonce( $_POST['extra_fields_nonce'], __FILE__ )
		|| wp_is_post_autosave( $post_id )
		|| wp_is_post_revision( $post_id )
	)
		return false;

	// Все ОК! Тепер потрібно зберегти/видалити дані
	$_POST['extra'] = array_map( 'sanitize_text_field', $_POST['extra'] );
	foreach( $_POST['extra'] as $key => $value ){
		if( empty($value) ){
			delete_post_meta($post_id, $key); // видаляємо поле якщо значення порожнє
			continue;
		}

		update_post_meta($post_id, $key, $value); // add_post_meta() працює автоматично
	}

	return $post_id;
}


Ще один приклад створення метабоксу (ООП)

Цей приклад показує, як створити одне поле, в якому зберігатиметься масив даних. Масив можна розширювати або зменшувати через натискання + або видалити (працює на скрипті).

Це приклад створення поля “повторювач”, як у плагіна ACF (поле repeater у платній версії).

В результаті отримаємо такий метабокс:

<?php

New My_Best_Metaboxes;

class My_Best_Metaboxes {

	public $post_type = 'post';

	static $meta_key = 'company_address';

	public function __construct() {
		add_action( 'add_meta_boxes', array( $this, 'add_metabox' ) );
		add_action( 'save_post_' . $this->post_type, array( $this, 'save_metabox' ) );
		add_action( 'admin_print_footer_scripts', array( $this, 'show_assets' ), ​​10, 999 );
	}

	## Додає матабокси
	public function add_metabox() {
		add_meta_box( 'box_info_company', 'Інформація про компанію', array( $this, 'render_metabox' ), $this->post_type, 'advanced', 'high' );
	}

	## Відображає метабокс на сторінці редагування посту
	public function render_metabox( $post ) {

		?>
		<table class="form-table company-info">

			<tr>
				<th>
					Адреси компанії <span class="dashicons dashicons-plus-alt add-company-address"></span>
				</th>
				<td class="company-address-list">
					<?php
					$input = '
					<span class="item-address">
						<input type="text" name="'. self::$meta_key .'[]" value="%s">
						<span class="dashicons dashicons-trash remove-company-address"></span>
					</span>
					';

					$addresses = get_post_meta( $post->ID, self::$meta_key, true );

					if ( is_array ( $ addresses ) ) {
						foreach ( $addresses as $addr ) {
							printf($input, esc_attr($addr));
						}
					} else {
						printf($input, '');
					}
					?>
				</td>
			</tr>

		</table>

		<?php
	}

	## Очищає та зберігає значення полів
	public function save_metabox( $post_id ) {

		// Check if it's not an autosave.
		if ( wp_is_post_autosave( $post_id ) )
			return;

		if ( isset( $_POST[self::$meta_key] ) && is_array( $_POST[self::$meta_key] ) ) {
			$addresses = $_POST[self::$meta_key];

			$addresses = array_map( 'sanitize_text_field', $addresses ); // очищення

			$addresses = array_filter( $addresses ); // приберемо порожні адреси

			if ( $addresses )
				update_post_meta( $post_id, self::$meta_key, $addresses );
			else
				delete_post_meta( $post_id, self::$meta_key );

		}
	}

	## Підключає скрипти та стилі
	public function show_assets() {
		if ( is_admin() && get_current_screen()->id == $this->post_type ) {
			$this->show_styles();
			$this->show_scripts();
		}
	}

	## Виводить на екран стилі
	public function show_styles() {
		?>
		<style>
			.add-company-address {
				color: #00a0d2;
				cursor: pointer;
			}
			.company-address-list .item-address {
				display: flex;
				align-items: center;
			}
			.company-address-list .item-address input {
				width: 100%;
				max-width: 400px;
			}
			.remove-company-address {
				color: brown;
				cursor: pointer;
			}
		</style>
		<?php
	}

	## Виводить на екран JS
	public function show_scripts() {
		?>
		<script>
			jQuery(document).ready(function ($) {

				var $companyInfo = $('.company-info');

				// Додає бокс із введенням адреси фірми
				$('.add-company-address', $companyInfo).click(function() {
					var $list = $('.company-address-list');
						$item = $list.find('.item-address').first().clone();

					$item.find('input').val(''); // Чистимо значення

					$ list.append ($ item);
				});

				// Видаляє бокс із введенням адреси фірми
				$companyInfo.on('click', '.remove-company-address', function () {
					if ($('.item-address').length > 1) {
						$(this).closest('.item-address').remove();
					}
					else {
						$(this).closest('.item-address').find('input').val('');
					}
				});

			});
		</script>
		<?php
	}

}


Плагіни для створення блоків довільних полів

У статті я говорив про плагіни, які створюють мета блоки, що заміняють довільні поля, але жодного разу не згадав жоден. Виправляюсь:

  • Advanced Custom Fields (ACF) – мабуть, найпопулярніший і гнучкий плагін для створення довільних полів. З гарною документацією.

  • Custom Field Suite – схожий на ACF, тільки менш наворочений.

  • Carbon Fields – схожий на ACF тільки без візуального налаштування, все робиться в коді. Добре підійде для розробників. Безкоштовний.

  • CMB2 – CMB2 інструмент для розробників для створення: метабоксів, метаполів. Дозволяє легко керувати записами, елементами таксономії, користувачами, коментарями або створювати довільні сторінки налаштувань.

  • Custom Field Template – справжній комбайн. З ним можна створити будь-яку форму, для будь-яких типів постів, вказати форми для окремих постів та рубрик. Думаю здебільшого, можна обійтися без такого комбайна.

  • kc-settings – ураган, а не плагін, хоч і не прихильник плагінів, але рекомендую.


Висновок

Простота в налаштуванні блоку довільних полів при створенні його таким способом втрачається! Я в жодному разі не хочу сказати, що створювати блоки в такий спосіб краще ніж використовувати плагіни. Однак такий підхід є більш гнучким, тому що ми можемо створити абсолютно будь-які поля і розташувати/стилізувати їх як нам заманеться.

До того ж, зазвичай немає потреби створювати кілька таких блоків і часто їх редагувати, як це можна робити використовуючи плагіни. Наприклад, на цьому блозі я використовую такий підхід і зовсім невеликий код у functions.php позбавляє мене необхідності використовувати черговий плагін.

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

Схожі записи

Залишити коментар

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