Edukia Marketing

Gehitu etxeko ikono bat WordPress nabigazio menuan kodea erabiliz

WordPress maite dugu eta ia egunero lan egiten dugu. WordPress-en aktibo dagoen nabigazio-menua ikaragarria da - erabiltzeko erraza den arrastatu eta jaregin funtzio polita. Batzuetan, zure gaian erabili nahi duzun menu bat sortzen duzu hasierako esteka sartu gabe. Hona hemen kode batzuk etxeko esteka menuari gehituz WordPress Admin-eko menu-aukerak erabili gabe.

Gehitu Home HTML entitate bat WordPress Nav menura

An erabiliz HTML entitatea (🏠) zure hasierako orria irudikatzeko, Hasiera nahiko ohikoa dela dioen esteka baino. Goiko kodea erabiliz, aldaketa txiki bat egin ahal izan nuen testua baino HTML entitate bat sartzeko:

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;
}

Gehitu Home SVG bat WordPress Nav menura

An erabiliz SVG Zure hasierako orria irudikatzeko, Hasiera dioen esteka bat baino, nahiko erabilgarria da. Goiko kodea erabiliz, aldaketa txiki bat egin ahal izan nuen testua baino SVG bat sartzeko:

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;
}

Gehitu Home FontAwesome Home WordPress Nav menura

erabiltzen ari bazara Font Awesome zure webgunean, haien ikonoa ere erabil dezakezu. Goiko kodea erabiliz, aldaketa txiki bat egin ahal izan nuen testua baino ikonoa sartzeko:

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;
}

Gehitu hasierako irudi bat WordPress Nav menura

Zure hasierako orria irudikatzeko irudi bat erabiltzea, hasiera dioen esteka baino, aukera ere bada. Goiko kodea erabiliz, aldaketa txiki bat egin ahal izan nuen testua baino SVG bat sartzeko:

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;
}

Hona hemen kode honek egiten duenaren banaketa:

  • Erabiltzen du add_filter engantxatzeko funtzioa wp_nav_menu_items iragazkiak WordPress nabigazio menu bateko elementuak aldatzeko aukera ematen du.
  • The add_home_link funtzioa definitu da aldaketa kudeatzeko. Funtzio honek bi parametro hartzen ditu: $items (lehendik dauden menuko elementuak) eta $args (menuaren argumentuak).
  • Barruan add_home_link funtzioa, uneko orria erabiltzen duen orrialdea den egiaztatzen du is_front_page(). Hasierako orria den ala ez, CSS klase bat esleitzen dio hasierako estekari estilo-helburuetarako.
  • Ondoren, hasierako estekaren HTMLa eraikitzen du, hasierako orrialderako esteka duen irudi bat barne. Ordezkatu beharko zenuke [path to your home image] zure etxeko irudirako benetako bidearekin.
  • Azkenik, hasierako esteka gehitzen du menuko elementuen hasieran eta aldatutako menuko elementuak itzultzen ditu.

Ziurtatu kode hau zure gaiari gehitzen duzula functions.php fitxategian Child Theme eta pertsonalizatu behar den moduan. Zure gaiak beste egitura bat erabiltzen badu edo arazoren bat aurkitzen badu, baliteke kodea horren arabera egokitu behar izatea. Eta, noski, ziurtatu hasierako ikonorako irudi-bide baliozkoa duzula.

Douglas Karr

Douglas Karr -ren CMO da OpenINSIGHTS eta ren sortzailea Martech Zone. Douglasek MarTech startup arrakastatsu batzuei lagundu die, Martech-en erosketetan eta inbertsioetan 5 milioi dolar baino gehiagoko diligentzian lagundu du eta enpresei laguntzen jarraitzen du salmenta eta marketin estrategiak ezartzen eta automatizatzen. Douglas nazioartean ezaguna den eraldaketa digitala eta MarTech aditua eta hizlaria da. Douglas Dummie's gidaren eta negozioen lidergoaren liburu baten egilea ere bada.

Gaiarekin lotutako artikuluak

Itzuli gora botoia
Itxi

Adblokea hauteman da

Martech Zone eduki hau kosturik gabe eskaintzeko gai da, gure webgunea iragarkien diru-sarreren, kideen esteken eta babesen bidez dirua irabazten dugulako. Eskertuko genuke gure gunea ikusten duzun bitartean iragarkien blokeatzailea kentzea.