Skip navigation
Обновлено
7 июня, 2024

Дополнение к плагину WPML CMS Navigation позволяет Вам создавать красивые меню навигации с собственным 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 в функцию WPML icl_nav_page_html. Это стандартный фильтр WP, поэтому Вы можете вызывать его несколько раз и добавлять все новые и новые поля.