使用代码将主页图标添加到 WordPress 导航菜单

Douglas Karr 周四，九月14，2023

1 阅读3分钟

我们喜欢 WordPress 并且几乎每天都使用它。 WordPress 中的导航菜单令人难以置信——这是一个很好的拖放功能，易于使用。有时，您创建一个希望在整个主题中使用的菜单，但不包含主页链接。这是一些代码将主页链接添加到菜单不使用 WordPress 管理中的菜单选项。

将主页 HTML 实体添加到 WordPress 导航菜单

使用一年 HTML 实体 (🏠) 来表示您的主页，而不是表示“主页”的链接非常常见。利用上面的代码，我能够进行较小的编辑以包含 HTML 实体而不是文本：

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '&#x1F3E0;' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

将主页 SVG 添加到 WordPress 导航菜单

使用一年 SVG的表示您的主页而不是显示“主页”的链接也非常有用。利用上面的代码，我可以进行较小的编辑以包含 SVG 而不是文本：

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path d="M8.293 1.293a.5.5 0 0 1 .414 0l6.25 3a.5.5 0 0 1 .25.434V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4.727a.5.5 0 0 1 .25-.434l6.25-3a.5.5 0 0 1 .414 0zM8 2.618L2.354 5.293 2 5.534V13a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V5.534L13.646 5.293 8 2.618z"/><path fill="#000" d="M7.293 0a1 1 0 0 1 .914 0l6.25 3a1 1 0 0 1 .5.867V13a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3.867a1 1 0 0 1 .5-.867l6.25-3z"/></svg>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

将主页 FontAwesome 主页添加到 WordPress 导航菜单

如果你正在使用字体真棒在您的网站上，您还可以使用他们的图标。利用上面的代码，我能够进行较小的编辑以包含它们的图标而不是文本：

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item"';
     else
          $class = '';

     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<i class="fa fa-home"></i>' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

将主页图像添加到 WordPress 导航菜单

使用图像来代表您的主页而不是显示“主页”的链接也是一种可能。利用上面的代码，我可以进行较小的编辑以包含 SVG 而不是文本：

add_filter( 'wp_nav_menu_items', 'add_home_link', 10, 2 );
function add_home_link($items, $args) {
     if (is_front_page())
          $class = 'class="current_page_item home-icon"';
     else
          $class = 'class="home-icon"';
  
     $homeMenuItem =
          '<li ' . $class . '>' .
          $args->before .
          '<a href="' . home_url( '/' ) . '" title="Home">' .
          $args->link_before . '<img src="[path to your home image]" height="15" width="14" />' . $args->link_after .
          '</a>' .
          $args->after .
          '</li>';
     $items = $homeMenuItem . $items;
     return $items;
}

以下是这段代码的作用的细分：

它使用 add_filter 函数挂钩 wp_nav_menu_items 过滤器允许您修改 WordPress 导航菜单中的项目。
add_home_link 定义函数来处理修改。该函数有两个参数： $items （现有菜单项）和 $args （菜单参数）。
里面的 add_home_link 函数，它检查当前页面是否是首页 is_front_page()。根据它是否是首页，它会为主页链接分配一个 CSS 类以用于样式设置。
然后，它构建主页链接的 HTML，包括带有主页链接的图像。你应该更换 [path to your home image] 与您的主页图像的实际路径。
最后，它将主页链接附加到菜单项的开头并返回修改后的菜单项。