Додајте икона за почеток во менито за навигација на WordPress користејќи код

Douglas Karr Четврток, септември 14, 2023

1 Прочитани се минути 3

Го сакаме WordPress и работиме со него буквално секој ден. Менито за навигација активно во WordPress е неверојатно – убава функција за влечење и спуштање која е лесна за користење. Сепак, понекогаш креирате мени што сакате да го користите низ вашата тема, без да ја вклучите домашната врска. Еве некој код додавање на домашната врска до менито без користење на опциите од менито во WordPress Admin.

Додајте домашен HTML ентитет во менито на WordPress Nav

Користење на 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;
}

Додајте Home SVG во менито на WordPress Nav

Користење на SVG да ја претставувате вашата почетна страница наместо врска која вели дека Home е исто така доста корисна. Користејќи го кодот погоре, можев да направам мала промена за да вклучам 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;
}

Додајте Home FontAwesome Home во менито на WordPress Nav

Ако користите Фонт Прекрасно на вашиот сајт, можете да ја користите и нивната икона. Користејќи го кодот погоре, можев да направам мала промена за да ја вклучам нивната икона наместо текстот:

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 Nav

Можност е и користењето слика за претставување на вашата почетна страница наместо врска што вели Дома. Користејќи го кодот погоре, можев да направам мала промена за да вклучам 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 за врската Home, вклучувајќи слика со врска до почетната страница. Треба да замените [path to your home image] со вистинската патека до вашата домашна слика.
Конечно, ја додава врската Home на почетокот на ставките од менито и ги враќа изменетите ставки од менито.

Погрижете се да го додадете овој код на вашата тема functions.php датотека во вашата дете Тема и приспособете го по потреба. Ако вашата тема користи различна структура или наиде на какви било проблеми, можеби ќе треба соодветно да го прилагодите кодот. И, се разбира, погрижете се да имате валидна патека на сликата за иконата за почеток.