Дадайце значок дома ў меню навігацыі WordPress з дапамогай кода

Мы любім WordPress і працуем з ім практычна кожны дзень. Меню навігацыі, актыўнае ў WordPress, неверагоднае - добрая функцыя перацягвання, якая простая ў выкарыстанні. Часам вы ствараеце меню, якое хочаце выкарыстоўваць ва ўсёй тэме, але не ўключаючы спасылку на хатнюю старонку. Вось код даданне хатняй спасылкі ў меню без выкарыстання параметраў меню ў WordPress Admin.

Дадайце хатні 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;
}

Дадайце Home 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;
}

Дадайце Home FontAwesome Home у навігацыйнае меню 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

Выкарыстанне выявы для прадстаўлення вашай хатняй старонкі, а не спасылкі з надпісам 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 . '<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.
• ,en add_home_link функцыя вызначана для апрацоўкі мадыфікацыі. Гэтая функцыя прымае два параметры: $items (існуючыя пункты меню) і $args (аргументы меню).
• Усярэдзіне add_home_link функцыя, яна правярае, ці з'яўляецца бягучая старонка галоўнай з дапамогай is_front_page(). У залежнасці ад таго, галоўная гэта старонка ці не, яна прысвойвае клас CSS галоўнай спасылцы ў мэтах стылю.
• Затым ён стварае HTML для спасылкі "Галоўная старонка", уключаючы выяву са спасылкай на галоўную старонку. Вы павінны замяніць [path to your home image] з фактычным шляхам да выявы вашага дома.
• Нарэшце, ён дадае спасылку Home да пачатку пунктаў меню і вяртае змененыя пункты меню.

Не забудзьцеся дадаць гэты код у вашу тэму functions.php файл у вашым дзіця Theme і наладзіць яго па меры неабходнасці. Калі ваша тэма выкарыстоўвае іншую структуру або сутыкнецца з якімі-небудзь праблемамі, вам можа спатрэбіцца адпаведным чынам наладзіць код. І, вядома, пераканайцеся, што ў вас ёсць правільны шлях выявы для хатняга значка.