WordPress: Используем радиокнопки для таксономии

Пользовательская таксономия в WordPress - просто фантастический инструмент. Он позволяет организовать записи так как нужно, а всю черную работу берет на себя. Однако и у него есть свои ограничения. При редактировании записи таксономия открывает свой метабокс в котором доступны либо список чекбоксов (для иерархической таксономии), либо облако тегов. Только два варианта.

Такое ограничение становится проблемой, когда нужно четко ограничить выбор тега автором только одним термином для каждой записи. Конечно, можно использовать крюк save_post и удалять "лишние" термины, но такой подход наносит урон удобству пользования интерфейсом. Лучше всего в таких случаях представить таксономию в другом виде. В данном уроке выполняется такое действие. Описываемый код нужно добавить в файл functions.php используемой темы. Здесь будет описано подключение радио кнопок, хотя можно использовать любой другой метод, например, выпадающее меню.

Шаг 1. Удаляем метабокс таксономии по умолчанию

WordPress автоматически генерирует метабокс таксономии. Поэтому первый делом его надо удалить, чтобы освободить место для своего элемента. Допустим, что наша пользовательская таксономия имеет имя ‘mytaxonomy’ (если вы хотите изменить метабокс для категорий или меток, то имя таксономии надо заменить на ‘category’ или ‘post_tag’ соответственно).

Для удаления метабокса используется функция remove_meta_box, которую надо вызвать внутри функции, обрабатывающей крюк admin_menu. Функция remove_meta_box принимает три аргумента.

1. ID: атрибут id нужного элемента, который содержит метабокс . Обычно, для иерархической таксономии он имеет вид ‘mytaxonomydiv’, или ‘tagsdiv-mytaxonomy’ для обычной таксономии.
2. Тип: тип страницы, для которой выводится метабокс (например, ‘post’ или ‘page’). Если ваш метабокс выводится для нескольких различных типов страниц  придется вызывать функцию remove_meta_box для каждого типа отыдельно.
3. Контекст: normal, advanced, или side.

add_action( 'admin_menu', 'myprefix_remove_meta_box');
function myprefix_remove_meta_box(){
   remove_meta_box('mytaxonomydiv', 'post', 'normal');
}

Шаг 2. Добавляем собственный метабокс

Используем крюк add_meta_boxes с функцией, которая будет добавлять метабокс. В функции вызываем add_meta_box с несколькими аргументами:

1. ID: идентификатор элемента метабокса, нужно задать уникальное значение.
2. Заголовок: заголовок метабокса.
3. Возвратная функция: имя функции, которая будет генерировать содержание метабокса.
4. Тип записи: описывалось выше. Функцию надо вызывать для каждого типа отдельно.
5. Контекст: описывалось выше.
6. Приоритет: Приоритет контекста.

//Добавляем новый метабокс таксономии 
 add_action( 'add_meta_boxes', 'myprefix_add_meta_box');
 function myprefix_add_meta_box() {
     add_meta_box( 'mytaxonomy_id', 'Радиокнопки','myprefix_mytaxonomy_metabox','post' ,'side','core');
 }

  function myprefix_mytaxonomy_metabox( $post ) {
     echo 'Метабокс таксономии';
  }

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

Шаг 3. Выводим радио кнопки

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

Рассмотрим функцию более подробно.

Сначала определяем переменные. В переменной $taxonomy задаем имя нашей таксономии. Также переменной $name будет задаваться имя tax_input[mytaxonomy]. Это имя для элемента ввода внутри метабокса по умолчанию.Теперь WordPress автоматически обновит термины таксономии.

//Получаем объект таксономии
$taxonomy = 'mytaxonomy';
$tax = get_taxonomy($taxonomy);//Объект таксономии

//Имя формы
$name = 'tax_input[' . $taxonomy . ']';

//Получаем все термины для таксономии
$terms = get_terms($taxonomy,array('hide_empty' => 0));

Нужно получить id текущего термина записи (нужен только один).

$postterms = get_the_terms( $post->ID,$taxonomy );
$current = ($postterms ? array_pop($postterms) : false);
$current = ($current ? $current->term_id : 0);

Метабокс категорий имеет закладку, которая выводит 'часто используемые' термины. Для воспроизведения данного функционала нам потребуется 10 популярных терминов. /снова воспользуемся функцией get_terms, но в этот раз выбираем 10 самых популярных терминов и упорядочиваем их по количеству обращений (число записей, которые имеют данную таксономию).

$popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );

Далее выводим закладки ‘Все категории’ и ‘Часто используются’. Если закладки не нужны, то просто пропускаем данный код:

<!-- Выводим закладки-->
<ul id="<?php echo $taxonomy; ?>-tabs" class="category-tabs">
	<li class="tabs"><a href="#<?php echo $taxonomy; ?>-all" tabindex="3"><?php echo $tax->labels->all_items; ?></a></li>
	<li class="hide-if-no-js"><a href="#<?php echo $taxonomy; ?>-pop" tabindex="3"><?php _e( 'Часто используются' ); ?></a></li>
</ul>

Затем определяем, что будет выводиться, когда выбирается закладка "Все категории":

<!-- Выводим термины таксономии -->
<div id="<?php echo $taxonomy; ?>-all" class="tabs-panel">
	<ul id="<?php echo $taxonomy; ?>checklist" class="list:<?php echo $taxonomy?> categorychecklist form-no-clear">
		<?php   foreach($terms as $term){
			$id = $taxonomy.'-'.$term->term_id;
			echo "<li id='$id'><label class='selectit'>";
			echo "<input type='radio' id='in-$id' name='{$name}'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
			echo "</label></li>";
		}?>
	</ul>
</div>

Здесь выводится список внутри элемента div, а каждый элемент списка является радиокнопкой. Можно заменить список выпадающим меню или дургим элемнетом интерфейса.

Теперь делаем тоже для закладки "Часто используются":

<!-- Выводим популярные термины таксономии -->
<div id="<?php echo $taxonomy; ?>-pop" class="tabs-panel" style="display: none;">
	<ul id="<?php echo $taxonomy; ?>checklist-pop" class="categorychecklist form-no-clear" >
		<?php   foreach($popular as $term){
			$id = 'popular-'.$taxonomy.'-'.$term->term_id;
			echo "<li id='$id'><label class='selectit'>";
			echo "<input type='radio' id='in-$id'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
			echo "</label></li>";
		}?>
	</ul>
</div>

Шаг 4. Код возвратной функции полностью

//Возвратная функция для установки метабокса
function myprefix_mytaxonomy_metabox( $post ) {
    //Имя таксономии
    $taxonomy = 'mytaxonomy';

    //получаем объект таксономии и терминыы
    $tax = get_taxonomy($taxonomy);
    $terms = get_terms($taxonomy,array('hide_empty' => 0));

    //Имя формы
    $name = 'tax_input[' . $taxonomy . ']';

    //Получаем текущий и популярные термины
    $popular = get_terms( $taxonomy, array( 'orderby' => 'count', 'order' => 'DESC', 'number' => 10, 'hierarchical' => false ) );
    $postterms = get_the_terms( $post->ID,$taxonomy );
    $current = ($postterms ? array_pop($postterms) : false);
    $current = ($current ? $current->term_id : 0);
    ?>

    <div id="taxonomy-<?php echo $taxonomy; ?>" class="categorydiv">

        <!-- Закладка-->
        <ul id="<?php echo $taxonomy; ?>-tabs" class="category-tabs">
            <li class="tabs"><a href="#<?php echo $taxonomy; ?>-all" tabindex="3"><?php echo $tax->labels->all_items; ?></a></li>
            <li class="hide-if-no-js"><a href="#<?php echo $taxonomy; ?>-pop" tabindex="3"><?php _e( 'Часто используются' ); ?></a></li>
        </ul>

        <!-- Выводим все термины -->
        <div id="<?php echo $taxonomy; ?>-all" class="tabs-panel">
            <ul id="<?php echo $taxonomy; ?>checklist" class="list:<?php echo $taxonomy?> categorychecklist form-no-clear">
                <?php   foreach($terms as $term){
                    $id = $taxonomy.'-'.$term->term_id;
                    echo "<li id='$id'><label class='selectit'>";
                    echo "<input type='radio' id='in-$id' name='{$name}'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
                   echo "</label></li>";
                }?>
           </ul>
        </div>

        <!-- Выводим популярные термины -->
        <div id="<?php echo $taxonomy; ?>-pop" class="tabs-panel" style="display: none;">
            <ul id="<?php echo $taxonomy; ?>checklist-pop" class="categorychecklist form-no-clear" >
                <?php   foreach($popular as $term){
                    $id = 'popular-'.$taxonomy.'-'.$term->term_id;
                    echo "<li id='$id'><label class='selectit'>";
                    echo "<input type='radio' id='in-$id'".checked($current,$term->term_id,false)."value='$term->term_id' />$term->name<br />";
                    echo "</label></li>";
                }?>
           </ul>
       </div>

    </div>
    <?php
}

Шаг 5. Немного JavaScript

C именами ID и радиокнопок в возвратной функции нужно быть очень внимательным. Если вы попробуете выше приведенный код, то увидите, что WordPress автоматически обрабатывает обновление терминов. кроме того, код JavaScript в WordPress автоматически управляет навигацией закладок. Здесь есть одна заминка.  Радиокнопки на закладках "Все категории" и "Часто используются" не синхронизированы. Если вы планировали отказаться от закладки "Часто используются", то данный момент можно пропустить. Иначе, нужно добавить немного кода JavaScript для исправления ошибки.

В возвратной функции мы будем использовать крюк, который запускает добавленный JavaScript код. Имя данному крюку  - admin_enqueue_scripts. Так как мы добавляем нашу функцию с помощью крюка в возвратной функции, то она будет загружаться только тогда, когда нужно. Добавьте следующую строку в возвратную функцию:

add_action('admin_enqueue_scripts','myprefix_radiotax_javascript');

Когда JavaScript загружается на страницу администратора, запускается наша функция. Данная функция только регистрирует и добавляет в очередь наш JavaScript код, который добавляется в нижний колонтитул:

function myprefix_radiotax_javascript(){
	wp_register_script( 'radiotax', get_template_directory_uri() . '/js/radiotax.js', array('jquery'), null, true ); // Здесь определяется, что данный скрипт надо загружать в нижнем колонтитуле
	wp_enqueue_script( 'radiotax' );
}

Для кода JavaScript нужно создать файл radiotax.js в папке js вашей темы. В него нужно скопировать код:

jQuery(document).ready(function($) {
	var taxonomy = 'mytaxonomy';
	$('#' + taxonomy + 'checklist li :radio, #' + taxonomy + 'checklist-pop :radio').live( 'click', function(){
		var t = $(this), c = t.is(':checked'), id = t.val();
		$('#' + taxonomy + 'checklist li :radio, #' + taxonomy + 'checklist-pop :radio').prop('checked',false);
		$('#in-' + taxonomy + '-' + id + ', #in-popular-' + taxonomy + '-' + id).prop( 'checked', c );
	});
});

Что здесь делается? Проверяются и синхронизируются радиокнопки на обеих закладках.

Заключение

Всю остальную работу проделает WordPress. Однако, в нашем коде есть направления для улучшений. Например, задача добавления новой категории осталась без решения.

• Комментарии