WPML позволяет создавать стилизованные навигационные меню с помощью собственного HTML-кода для пунктов меню.

Начнем с примера. Допустим, вы хотите добавить значки и краткие описания к верхним навигационным меню, как в этом примере:

Элементы в раскрывающихся меню содержат значки и описание
Элементы в раскрывающихся меню содержат значки и описание

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

Шаг 1) Добавление настраиваемых полей на страницах

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

Добавление настраиваемых полей для значка и описания на странице
Добавление настраиваемых полей для значка и описания на странице

Шаг 2) Построение функции темы, которая будет создавать пункты меню

Нам необходимо создать функцию, которая будет генерировать HTML-код для пунктов меню. По умолчанию, каждый пункт меню получает заголовок. С помощью этой функции мы сможем разместить произвольный HTML-код внутри пунктов меню.

WPML продолжит выполнять построение всего меню, включая эффект раскрывания, разделы и прочее. Благодаря этой функции мы можем управлять содержимым каждого элемента.

Вот моя функция:

function text_for_menu($page_id, $menu_level){
  $ret = '';
  $icon = get_post_meta($page_id,'icon',true);
  $description = get_post_meta($page_id,'Description',true);
  if($menu_level==0){
    if ($icon) $ret .= '<img width="24" height="24" style="vertical-align: middle; margin:0 5px 0 5px;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
    $ret .= '<br /><span>'.$description.'</span>';
  } else {
    if ($icon) $ret .= '<img width="16" height="16" style="vertical-align: middle; margin:0 5px 0 0;" src="'.$icon.'" alt="icon" />';
    $ret .= get_the_title($page_id);
  }
  return $ret;
}

Что она делает:

  1. Получает содержимое настраиваемых полей, которые имеют названия «значок» и «Описание»: get_post_meta($page_id,’icon’,true);
  2. Проверяет принадлежность элемента к уровню меню. Пункты верхнего меню – ‘0’, а раскрывающиеся элементы – ‘1’.
  3. К пунктам верхнего меню она добавляет значок размером 24×24, затем заголовок страницы, а после описание.
  4. К пунктам раскрывающегося меню она добавляет значок размером 16×16, а затем заголовок страницы.

Шаг 3) Привязка функции к WPML

Последнее, что мы делаем – указываем WPML использовать эту функцию для сознания пунктов меню, добавив следующую строку в functions.php:

add_filter('icl_nav_page_html', 'text_for_menu', 1, 2);

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