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 的函数添加到 WPML 的 icl_nav_page_html。这是个标准的 WP 过滤器,因此您可以多次调用它并添加更多的字段。