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; }
Что она делает:
- Получает содержимое настраиваемых полей, которые имеют названия «значок» и «Описание»: get_post_meta($page_id,’icon’,true);
- Проверяет принадлежность элемента к уровню меню. Пункты верхнего меню – ‘0’, а раскрывающиеся элементы – ‘1’.
- К пунктам верхнего меню она добавляет значок размером 24×24, затем заголовок страницы, а после описание.
- К пунктам раскрывающегося меню она добавляет значок размером 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, так что его можно вызывать несколько раз и добавлять все больше полей.