Настройка Структуры древовидных данных в WordPress с The Walker класса

В WordPress, А навигации menu, Список категорий или страниц, а также список комментариев всех их объединяет одна общая черта: они являются Визуальное представление древовидных structures,Это означает, что отношения superordination и подчинения существует среди элементов каждого дерева данных .

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

Начиная с версии 2.1, WordPress предоставляет Walkerабстрактный class¹С конкретной функцией обхода этих древовидные структуры данных.Но это абстрактный класс не производит никакой продукции сам по себе.Он должен быть продлен с конкретного класса ребенок, который строит HTML кирпичи для конкретных списков элементов.С этой точной функции, WordPress предоставляет Walker_Categoryкласс для получения вложенный список категорий, то Walker_Pageclass², Которая строит список страниц, и ряд других Walkerконкретные дочерние классы .

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

Прежде чем мы начнем, давайте посмотрим на наиболее важной концепции в этой статье .

Древовидных структур данных Link

Википедия определяет tree³как иерархической организации данных:

“Структура данных дерево может быть определена рекурсивно (локально) в коллекции узлов (начиная с корневого узла), где каждый узел представляет собой структуру данных, состоящую из стоимости, вместе со списком ссылок на узлы (в ‘детей’), с ограничениями, которые нет ссылок дублируются, и никто не укажет на корню “

Таким образом, структура характеризуется корневой элемент (на первом уровне), родительские элементы (которые непосредственно ссылаются на subordered элементы, названные дети), братья, сестры (которые являются элементами, размещенные на том же иерархическом уровне) и потомок и предок элементы (которые соединены более чем одной родитель-ребенок отношение) .

The wp_comments table structure — Каждый элемент в `wp_comments`ссылается на своего родителя по значению `comment_parent`поле.( Просмотр большой version ⁵)

В качестве примера такого рода структуры, let’с принять wp_commentsТаблица из базы данных WordPress.Оператор comment_parentполе хранит родительскую идентификатор каждого элемента в структуре, что позволяет создать ссылку из дочернего узла его родителя .

Что мы будем делать Link

Прежде чем двигаться вперед, I’покажу вам простой пример конкретного класса детской производить HTML разметку список категории .

Список категорий в WordPress является распечатана wp_list_categoriesТег шаблона.Когда мы называем эту функцию, выполняет Walker_Categoryкласс, который на самом деле строит HTML структуру, создавая что-то вроде следующего кода:

<li class="categories">Categories
   <ul>  
      <li class="cat-item cat-item-10">
         <a href="http://example.com/wordpress/category/coding/">Coding</a>
         <ul class="children">
            <li class="cat-item cat-item-39">
               <a href="http://example.com/wordpress/category/coding/php/">PHP</a>
            </li>
         </ul>
      </li>
      <li class="cat-item cat-item-11">
         <a href="http://example.com/wordpress/category/design/">Design</a>
      </li>
   </ul>
</li>

wp_list_categoriesбудет печатать продукта, произведенного с Walker_CategoryКласс бетона.Это будет элемент списка обертка держит вложенный список категорий .

Теперь предположим, что вы don’т, как такого рода список, и вы хотите, чтобы напечатать пользовательские HTML-код.Вы можете сделать этот трюк, определяя свой собственный Walkerпродление.В вашей темы functions.phpФайл, добавьте следующий код:

class My_Custom_Walker extends Walker
{
   public $tree_type = 'category';

   public $db_fields = array ('parent' => 'parent', 'id' => 'term_id');

   public function start_lvl( &$output, $depth = 0, $args = array() ) {
      $output .= "<ul class='children'>\n";
   }

   public function end_lvl( &$output, $depth = 0, $args = array() ) {
      $output .= "</ul>\n";
   }

   public function start_el( &$output, $category, $depth = 0, $args = array(), $current_object_id = 0 ) {
      $output .= "<li>" . $category->name . "\n";
   }

   public function end_el( &$output, $category, $depth = 0, $args = array() ) {
      $output .= "</li>\n";
   }
}

Даже если вы не знаете много о PHP classes⁶Код вполне описательный характер.Оператор start_lvl()Метод печатает startтег для каждого уровня дерева (обычно <ul> тегов), в то время как end_lvl()печатает в конце каждого уровня.В то же образом, start_elи end_elМетоды открывать и закрывать каждый элемент в списке .

Это просто простой пример, и мы won’т погружение вглубь Walkerсвойства и методы в настоящее время.I’буду только сказать, что конкретный класс детского My_Custom_Walkerрасширяет абстрактный класс Walker, Переосмысление некоторых из своих свойств и методов .

Как я уже писал выше, список категорий распечатана wp_list_categoriesТег шаблона, но HTML-структура строится по Walker_Categoryкласс.WordPress позволяет перейти обычай walkerкласс на templateтег.Новый walkerбудет создавать пользовательские HTML структуру, которая будет распечатана на экране wp_list_categories.

В качестве первого примера, let’создадим короткий код, который будет печатать новый разметку для списков категорий.В вашем functions.phpФайл, добавьте следующий код:

function my_init() {
   add_shortcode( 'list', 'my_list' );
}
add_action('init', 'my_init');

function my_list( $atts ){
   $list = wp_list_categories( array( 'echo' => 0, 'walker' => new My_Custom_Walker() ) );
   return $list;
}

Мы передаем в функцию массив двух аргументов: echoдержит результат в переменной, а walkerустанавливает обычай Walker(или Walker_Category) ребенок класс .

Наконец, шорткод [list]будет печатать полученный HTML код:

<ul>
   <li class="categories">Categories
      <ul>
         <li>Coding
            <ul class="children">
            <li>PHP</li>
            </ul>
         </li>
         <li>Design</li>
      </ul>
   </li>
</ul>

Как вы можете видеть, пример очень простой, но должно дать вам представление о нашей цели .

Оператор `Walker`Класса и его Extensions

Walkerclass⁷определяется в wp-includes/class-wp-walker.php¹⁹⁸как «класс для отображения различных древовидные структуры.”

Как я уже говорил раньше, it’S абстрактный class⁹и не производят никакого вывода по себе;скорее, он должен быть продлен путем определения одного или нескольких конкретных дочерних классов.Только эти конкретные классы ребенок будет производить HTML разметку.WordPress предоставляет несколько расширений Walkerкласс, каждый производстве иерархическую структуру HTML .

Посмотрите на таблице ниже:

Класс name	Определено in	Extends
`Walker_Page`	после template.php¹⁰	`Walker`
`Walker_PageDropdown`	после template.php¹¹	`Walker`
`Walker_Category`	категория-template.php¹²	`Walker`
`Walker_CategoryDropdown`	категория-template.php¹³	`Walker`
`Walker_Category_Checklist`	template.php¹⁴	`Walker`
`Walker_Comment`	комментарии-template.php¹⁵	`Walker`
`Walker_Nav_Menu`	NAV-меню template.php¹⁶	`Walker`
`Walker_Nav_Menu_Checklist`	NAV-menu.php¹⁷	`Walker_Nav_Menu`
`Walker_Nav_Menu_Edit`	NAV-menu.php¹⁸	`Walker_Nav_Menu`

Эта таблица показывает встроенный Walkerдочерние классы, файлы шаблонов они определены в, и соответствующего родительского класса .

Цель этой статьи заключается в поставить Walkerкласс для работы, так что мы должны погрузиться в его структуре .

Оператор `Walker`Structure__56 класса «|
`Walker`определяется в `wp-includes/class-wp-walker.php`¹⁹⁸,Это заявляет, четыре и шесть свойства основных методов, большинство из которых пусты и должны быть пересмотрены в конкретного ребенка классы .

Свойства являются:

`$tree_type`

`$db_fields`

`$max_pages`

`$has_children`

`$tree_type`

Это строка или массив данных, обрабатываемых Walkerкласс и его расширений .

public $tree_type;

Оператор Walkerкласс объявляет свойство, но не задать его значение.Чтобы использовать, он должен быть повторно объявлен в конкретный класс детей.Например, Walker_Pageкласс объявляет следующее $tree_typeнедвижимость:

public $tree_type = 'page';

В то время как Walker_Nav_menuзаявляет следующее $tree_type:

public $tree_type = array( 'post_type', 'taxonomy', 'custom' );

`$db_fields`

Так же, как $ tree_type$db_fieldsобъявлен без присвоенного значения.В Walker“Документация класс, он просто говорит, что его значение является массивом:

public $db_fields;

Элементы массива должны установить поля базы данных обеспечивая ID и родительский ID для каждого элемента пройденных данных набор .

Оператор Walker_Nav_Menuкласса redeclares $db_fieldsследующим образом:

public $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

$db_fields['parent']и $db_fields['id']будет использоваться display_elementМетод .

`$max_pages`

Это держит в памяти максимальное количество страниц, пройденный paged_walkerспособ.Ее начальное значение установлено в 1.

public $max_pages = 1;

`$has_children`

Это логическое установлен в trueесли текущий элемент имеет детей .

public $has_children;

После свойства, методы являются:

start_lvl
end_lvl
start_el
end_el
display_element
walk

`start_lvl`

Этот метод выполняется, когда Walkerкласс достигает корневой уровень нового поддерева.Как правило, это контейнер для поддеревьев элементов .

public function start_lvl( &$output, $depth = 0, $args = array() ) {}

start_lvl()принимает три аргумента:

Argument	Type	Description
`$output`	string	передается по ссылке;используется для добавления дополнительного content
`$depth`	int	глубина item
`$args`	array	массив дополнительных arguments

Потому что производит вывод HTML, start_lvlдолжны быть пересмотрены при продлении Walkerкласс.Например, start_lvlМетод Walker_Nav_MenuКласс выведет а ulЭлемент и определяется следующим образом:

public function start_lvl( &$output, $depth = 0, $args = array() ) {
   $indent = str_repeat("\t", $depth);
   $output .= "\n$indent<ul class=\"sub-menu\">\n";
}

`end_lvl`

Второй способ из Walkerкласс закрывает тег ранее открыл start_lvl.

public function end_lvl( &$output, $depth = 0, $args = array() ) {}

Оператор end_lvlМетод Walker_Nav_Menuзакрывает неупорядоченный список:

public function end_lvl( &$output, $depth = 0, $args = array() ) {
   $indent = str_repeat("\t", $depth);
   $output .= "$indent</ul>\n";
}

`start_el`

Этот метод открывает тег, соответствующий каждому элементу дерева.Очевидно, что если start_lvlоткрывает ulэлемент, то start_elдолжен открыть liэлемент.Оператор WalkerКласс определяет start_elследующим образом:

public function start_el( &$output, $object, $depth = 0, $args = array(), $id = 0 ) {}

Argument	Type	Description
`$output`	string	передается по ссылке;используется для добавления дополнительного content
`$object`	object	object
`$depth`	int	глубина item
`$args`	array	массив дополнительных arguments
`$id`	int	текущий элемент ID

`end_el`

Это закрывает тег открыт на start_el.

public function end_el( &$output, $object, $depth = 0, $args = array() ) {}

Наконец, we’ве достигли ядро Walkerкласс.Следующие два метода используются для iterare над элементами массивов объектов, извлеченных из базы данных .

`display_element`

Я won’т показать полный код здесь, потому что вы можете найти его в WordPress Trac²⁰,I’буду только сказать, что этот метод отображает элементы дерева .

public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {}

display_elementпринимает следующие аргументы:

Argument	Type	Description
`$element`	object	object
`$children_elements`	array	Список элементов, чтобы продолжить traversing
`$max_depth`	int	Максимальная глубина traverse
`$depth`	int	Глубина текущего element
`$args`	array	массив arguments
`$output`	string	передается по ссылке;используется для добавления дополнительного content

Этот метод не выдает HTML самостоятельно.Разметка будетпостроен с помощью вызова каждого из ранее описанных методов: start_lvlend_lvlstart_elи end_el.

`walk`

walkявляется ядром из Walkerкласс.Это перебирает элементов дерева в зависимости от величины $max_depthАргумент (см Trac для все code ²¹) .

public function walk( $elements, $max_depth ) {}

walkпринимает два аргумента .

Argument	Type	Description
`$elements`	array	массив elements
`$max_depth`	int	Максимальная глубина traverse

Другие методы используются для более специфических pourposes .

`paged_walk`

Это создает страницу вложенных элементов.Метод устанавливает, какие элементы дерева данных должны принадлежать странице, а затем строит разметку путем вызова display_elementи выводит результат .

public function paged_walk( $elements, $max_depth, $page_num, $per_page ) {}

`get_number_of_root_elements`

Это получает количество элементов первого уровня .

public function get_number_of_root_elements( $elements ){}

`unset_children`

Этот последний метод сбрасывает массив дочерних элементов для данного корневого элемента .

public function unset_children( $e, &$children_elements ){}

Теперь, we’ве введен Walkerсвойства и методы, мы можем изучить один из его возможных применений: изменение HTML структуры меню навигации.Разметка по умолчанию для меню навигации производится самая Walker_Nav_MenuКласс бетона.По этой причине, we’создадим новый бетон WalkerДочерний класс на основе Walker_Nav_MenuИ we’буду передать его wp_nav_menuзаменить выход .

Но расширяет Walker_Nav_Menuкласс всегда необходимо при восстановлении меню?! Конечно, нет

Большую часть времени, вызов на wp_nav_menuТег шаблона хватит .

Menus admin page — В странице редактирования “Меню”, установив местоположения тему для каждого пользовательского меню можно .

Основные настройки навигационного меню: `wp_nav_menu`Шаблон Tag

Навигационное меню могут быть включены в шаблоне файла темы с призывом к wp_nav_menu()Тег шаблона.Эта функция принимает только один аргумент, массив параметров, которые хорошо описанных в Codex²².

wp_nav_menu()могут быть включены в шаблонах следующим образом:

$defaults = array(
   'theme_location'     => '',
   'menu'            => '',
   'container'       => 'div',
   'container_class' => '',
   'container_id'    => '',
   'menu_class'         => 'menu',
   'menu_id'         => '',
   'echo'            => true,
   'fallback_cb'     => 'wp_page_menu',
   'before'          => '',
   'after'           => '',
   'link_before'     => '',
   'link_after'         => '',
   'items_wrap'         => '<ul id="%1$s" class="%2$s">%3$s</ul>',
   'depth'           => 0,
   'walker'          => ''
);

wp_nav_menu( $defaults );

WordPress предоставляет множество параметров для настройки меню навигации.Мы можем изменить контейнер в меню, (он по умолчанию в div), в container’с Класс CSS и ID, а также текстовые строки и разметки должны быть включены до и после якоря элемента и до и после названия элемента.Кроме того, мы можем изменить структуру корневого элемента (items_wrap) и depht издерево .

Таким образом, мы don’т нужно продлить Walker(или Walker_Nav_Menu) класс каждый раз, когда мы хотим внести изменения в структуры __47 параметра меню |только тогда, когда мы должны производить более сложные структурные настройки.Это происходит, когда мы должны назначить CSS классы для элементов меню, когда конкретное условие происходит, или когда мы должны добавить данные или HTML код для пунктов меню .

Это может быть сделано путем установки значения для walkerпараметр, который не будет ничего, но экземпляр пользовательского класса бетона.Так, отныне, we’LL погружение глубже и глубже в WordPress меню, изменять структуру меню добавления пользовательских полей в меню items’редактирования коробки.Как я уже сказал, we’сделаю эту работу посредством расширения Walker_Nav_Menu, Так it’пора познакомиться с ним .

Оператор `Walker_Nav_Menu`Class

Оператор Walker_Nav_Menuкласс определяется в wp-includes/nav-menu-template.php²³,Это класс используется WordPress для создания структуры меню навигации в.Каждый раз, когда вы хотите, чтобы сделать соответствующие изменения в структуре меню, по умолчанию, вы можете продлить Walker_Nav_Menu.

Класс бетона redeclares $tree_typeи $db_fieldsсвойства и start_lvlend_lvlstart_elи end_elметоды .

< ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Wordpress → 14.10.2015 by wp.smashingmagazine.com

Древовидных структур данных Link

Что мы будем делать Link

Оператор WalkerКласса и его Extensions

$tree_type

$db_fields

$max_pages

$has_children

start_lvl

end_lvl

start_el

end_el

display_element

walk

paged_walk

get_number_of_root_elements

unset_children

Основные настройки навигационного меню: wp_nav_menuШаблон Tag

Оператор Walker_Nav_MenuClass