跳过导航
已更新
7 6 月, 2024

WPML CMS 导航插件允许您使用自己的 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在WPML 的icl_nav_page_html 中添加一个名为text_for_menu的函数。 这是一个标准的 WP 过滤器,因此您可以多次调用它,并添加越来越多的字段。