Мы любим 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=" 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;
}

Добавить WordPress Nav в главное меню FontAwesome Home

Если вы используете Font Awesome на своем сайте, вы также можете использовать его значок. Используя приведенный выше код, я смог внести небольшие изменения, включив вместо текста их значок:

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] с фактическим путем к вашему домашнему изображению.
  • Наконец, он добавляет ссылку «Домой» в начало пунктов меню и возвращает измененные пункты меню.
ЧИТАТЬ  Советы по управлению стрессом от жизни дома во время родов

Обязательно добавьте этот код в свою тему functions.php файл в дочерней теме и настройте его по мере необходимости. Если ваша тема использует другую структуру или у вас возникли проблемы, возможно, вам придется соответствующим образом скорректировать свой код. И, конечно же, убедитесь, что у вас есть действительный путь к изображению значка дома.

Source