Дерево рубрик на вордпресс

Массив с иерархической структурой терминов (рубрик)

Иногда нужно получить не плоский массив рубрик (терминов), а многомерный массив (древовидный, дерево из категорий), в котором будет сохранена иерархия (вложенность, дерево) терминов.

К примеру, у нас есть следующая структура рубрик:

— Животные — — Бабочки 1 — — Бабочки 2 — — Бабочки 3 — — Самые распространенные бабочки — — — Белые — Растения

Нам нужно получить такую же структуру, но в виде древовидного массива.

Для этого используем такую функцию:

/** * @param array $terms * @param array $result_tree * @param int $parent_id */ function make_hierarchical_terms( & $terms, & $result_tree, $parent_id = 0 ) < foreach ( $terms as $i =>$term ) < if ( $term->parent == $parent_id ) < $result_tree[ $term->term_id ] = $term; unset( $terms[ $i ] ); > > foreach ( $result_tree as $term ) < $term->children = []; make_hierarchical_terms( $terms, $term->children, $term->term_id ); > >

$categories = get_terms( 'category', [ 'hide_empty' => false ] ); $category_tree = []; make_hierarchical_terms( $categories, $category_tree ); print_r( $category_tree );

Array ( [1] => WP_Term Object ( [term_id] => 1 [name] => Животные [slug] => animals [term_group] => 0 [term_taxonomy_id] => 1 [taxonomy] => category [description] => [parent] => 0 [count] => 5 [filter] => raw [children] => Array ( [18] => WP_Term Object ( [term_id] => 18 [name] => Бабочки 1 [slug] => babochki-1 [term_group] => 0 [term_taxonomy_id] => 18 [taxonomy] => category [description] => [parent] => 1 [count] => 5 [filter] => raw [children] => Array() ) [24] => WP_Term Object ( [term_id] => 24 [name] => Бабочки 2 [slug] => babochki-2 [term_group] => 0 [term_taxonomy_id] => 24 [taxonomy] => category [description] => [parent] => 1 [count] => 1 [filter] => raw [children] => Array() ) [25] => WP_Term Object ( [term_id] => 25 [name] => Бабочки 3 [slug] => babochki-3 [term_group] => 0 [term_taxonomy_id] => 25 [taxonomy] => category [description] => [parent] => 1 [count] => 1 [filter] => raw [children] => Array() ) [26] => WP_Term Object ( [term_id] => 26 [name] => Самые распространенные бабочки [slug] => babochki-4 [term_group] => 0 [term_taxonomy_id] => 26 [taxonomy] => category [description] => [parent] => 1 [count] => 2 [filter] => raw [children] => Array ( [27] => WP_Term Object ( [term_id] => 27 [name] => Белые [slug] => belye [term_group] => 0 [term_taxonomy_id] => 27 [taxonomy] => category [description] => [parent] => 26 [count] => 0 [filter] => raw [children] => Array() ) ) ) ) ) [22] => WP_Term Object ( [term_id] => 22 [name] => Растения [slug] => rasteniya [term_group] => 0 [term_taxonomy_id] => 22 [taxonomy] => category [description] => [parent] => 0 [count] => 0 [filter] => raw [children] => Array() ) )

Создатель YouTube канала wp-plus, на котором делюсь своим опытом. Активный пользователь wp-kama.ru. WordPress-разработчик. Разработка сайтов и лендингов. Доработка существующих проектов. Сопровождение ресурсов.

Источник

Как создать и настроить древовидные рубрики в WordPress: шаг за шагом руководство

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

В этой статье мы рассмотрим, как создать и настроить древовидные рубрики в WordPress, шаг за шагом.

Шаг 1: Войти в административную панель WordPress

Войдите в административную панель WordPress, используя свои учетные данные.

Шаг 2: Перейти в раздел «Рубрики»

На панели управления административной панели щелкните на «Рубрики» в секции «Публикации». Вы будете перенаправлены на страницу, где можно управлять существующими рубриками и создавать новые.

Шаг 3: Создать новую рубрику

На странице «Рубрики» найдите секцию «Добавить новую рубрику». Введите название рубрики в поле «Name» и выберите родительскую рубрику, если необходимо. Родительская рубрика означает, что эта новая рубрика будет вложена в другую рубрику и будет отображаться как дочерняя рубрика.

Шаг 4: Настройка отображения рубрики

После создания рубрики, на этой же странице можно в настройках управлять отображением рубрики на вашем сайте. Можно изменить слаг, который будет использоваться в URL-адресе этой рубрики. Также можно добавить описание рубрики для лучшего понимания ее содержания.

Шаг 5: Использование древовидных рубрик в навигации

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

Заключение

Теперь вы знаете, как создать и настроить древовидные рубрики в WordPress. Они помогут вам управлять контентом на сайте и организовывать его в логические категории. Следуйте этому шаг-за-шагом руководству, чтобы быстро создать структуру рубрик на вашем WordPress-сайте.

Источник

WordPress. Виджет «Дерево категорий»

Давайте создадим плагин, который будет добавлять еще один виджет «Дерево категорий» к тем, что доступны изначально, сразу после установки WordPress. Виджет категорий блога уже имеется в поставке, но наше дерево категорий будет изначально свернуто, т.е. будут показаны только категории верхнего уровня, а все потомки скрыты.

При клике по категории, у которой есть дочерние категории — будут показаны дочерние. Если у категории нет потомков — тогда будет просто переход на страницу категории. Практической ценности этот плагин не имеет, сделан исключительно с целью изучения WordPress.

Простой вариант

Итак, создаем директорию category-tree-widget , а внутри нее — три файла: category-tree-widget.php , category-tree-widget.js и Category_Tree_Widget.php .

 /* Plugin Name: Виджет «Дерево категорий» Plugin URI: https://tokmakov.msk.ru Description: Добавляет виджет категорий блога в виде дерева Version: 1.0 Author: Евгений Токмаков Author URI: https://tokmakov.msk.ru */ require 'Category_Tree_Widget.php'; /* * Регистрируем виджет «Дерево категорий» */ add_action( 'widgets_init', function ()  register_widget('Category_Tree_Widget'); > ); /* * Подключаем js-файл, который будет изначально скрывать все дочерние * категории и показывать их по клику на родительской категории */ add_action( 'wp_enqueue_scripts', function ()  wp_enqueue_script( 'category-tree-widget', // будет зарегистрирован под этим именем plugin_dir_url(__FILE__) . 'category-tree-widget.js', [ // должен быть подключен после jquery 'jquery', ], null, // версии нет, поэтому null true // подключаем перед закрывающим тегом body ); > );

jQuery(document).ready(function ($)  $('#category-tree-widget ul').hide(); $('#category-tree-widget li a').on('click', function (event)  /* * Если у этого элемента дерева есть дочерние узлы и они в данный момент * свернуты, то по ссылке переходить не надо, а надо их просто показать. */ var closed = $(this).next().is('ul') && !$(this).next().is(':visible') if (closed)  event.preventDefault(); $(this).next().slideDown('normal'); > >); >);

После установки и активации плагина, виджет станет доступным в числе прочих и его можно будет разместить в сайдбаре. Этот виджет сформирует примерно такой html-код:

id="category-tree-widget"> class="cat-item cat-item-123">href=". ">Первая категория  class="cat-item cat-item-197 current-cat-parent current-cat-ancestor">href=". ">Вторая категория class="children"> class="cat-item cat-item-206 current-cat">href=". ">Дочерняя категория    class="cat-item cat-item-196">href=". ">Третья категория class="children"> class="cat-item cat-item-204">href=". ">Дочерняя категория class="children"> class="cat-item cat-item-205">href=". ">Дочерняя дочерней      class="cat-item cat-item-198">href=". ">Четвертая категория  

Сложный вариант

У простого варианта есть существенный недостаток — ссылка служит и для перехода на страницу категории и для показа дочерних категорий. Поэтому добавим слева от ссылок иконки, при клике по которым будут показываться или скрываться дочерние категории.

 /* Plugin Name: Виджет «Дерево категорий» Plugin URI: https://tokmakov.msk.ru Description: Добавляет виджет категорий блога в виде дерева Version: 1.0 Author: Евгений Токмаков Author URI: https://tokmakov.msk.ru */ require 'Category_Tree_Widget.php'; /* * Регистрируем виджет «Дерево категорий» */ add_action( 'widgets_init', function ()  register_widget('Category_Tree_Widget'); > ); /* * Подключаем css и js файлы виджета «Дерево категорий» */ add_action( 'wp_enqueue_scripts', function ()  /* * Подключаем css-файл */ wp_enqueue_style( 'category-tree-widget', // будет зарегистрирован под этим именем plugin_dir_url(__FILE__) . 'category-tree-widget.css', [ // должен быть подключен после bootstrap 'current-theme-bootstrap', ] ); /* * Подключаем js-файл */ wp_enqueue_script( 'category-tree-widget', // будет зарегистрирован под этим именем plugin_dir_url(__FILE__) . 'category-tree-widget.js', [ // должен быть подключен после jquery 'jquery', ], null, // версии нет, поэтому null true // подключаем перед закрывающим тегом body ); > );

 /** * Класс виджета, который позволяет вывести категории * блога в виде дерева */ class Category_Tree_Widget extends WP_Widget  /** * Cоздание виджета */ function __construct()  parent::__construct( 'category_tree_widget', 'Дерево категорий блога', // заголовок виджета ['description' => 'Иерархия категорий, дочерние категории можно свернуть или развернуть'] // описание ); > /** * Метод выводит категории блога в общедоступной части сайта */ public function widget($args, $instance)  // к заголовку применяем фильтр $title = apply_filters('widget_title', $instance['title']); echo $args['before_widget']; // выводим заголовок виджета if ( ! empty($title))  echo $args['before_title'] . $title . $args['after_title']; > // выводим дерево категорий $this->tree(0); echo $args['after_widget']; > /* * Форма настроек виджета в панели управления */ public function form($instance)  $title = ''; if (isset($instance['title']))  $title = $instance['title']; > // заголовок виджета $id = $this->get_field_id('title'); $name = $this->get_field_name('title'); $value = esc_attr($title); ?> for=" $id; ?>">Заголовок type="text" class="widefat" id=" $id; ?>" name=" $name; ?>" value=" $value; ?>" />   > /* * Сохранение настроек виджета в панели управления */ public function update($new_instance, $old_instance)  $instance = array(); $instance['title'] = ! empty($new_instance['title']) ? strip_tags($new_instance['title']) : ''; return $instance; > /* * Выводит список категорий блога в виде вложенного списка */ private function tree($parent)  $categories = get_categories([ 'hide_empty' => true, 'parent' => $parent ]); if (!empty($categories))  $icons = [ 'plus' => ' ', 'right' => ' ', ]; ?>  $parent ? '' : ' '; ?>>  foreach ($categories as $category): ?>  $icon = $icons['right']; if ($this->hasChildren($category->term_id))  $icon = $icons['plus']; > $link = get_category_link($category->term_id); ?>  $icon; ?> href=" $link; ?>"> $category->name; ?>   $this->tree($category->term_id); ?>   endforeach; ?>   > > /* * Возвращает true, если у категории блога есть дочерние категории */ private function hasChildren($id)  $categories = get_categories([ 'hide_empty' => true, 'parent' => $id ]); return !empty($categories); > >

jQuery(document).ready(function ($)  $('#category-tree-widget ul').hide(); $('#category-tree-widget li b').on('click', function ()  var $icon = $(this); var closed = $icon.siblings('ul') && !$icon.siblings('ul') .is(':visible'); if (closed)  $icon.siblings('ul').slideDown('normal', function ()  $icon.removeClass('glyphicon-plus').addClass('glyphicon-minus'); >); > else  $icon.siblings('ul').slideUp('normal', function ()  $icon.removeClass('glyphicon-minus').addClass('glyphicon-plus'); >); > >); >);

#category-tree-widget < list-style: none; padding-left: 0; >#category-tree-widget ul < list-style: none; padding-left: 25px; >#category-tree-widget .glyphicon < color: #777; border: 1px solid #777; padding: 1px; border-radius: 2px; font-size: 10px; margin-right: 5px; >#category-tree-widget .glyphicon-plus, #category-tree-widget .glyphicon-minus

Источник