Sisu Marketing

Lisage koodi abil WordPressi navigeerimismenüüsse avalehe ikoon

Me armastame WordPressi ja töötame sellega peaaegu iga päev. WordPressis aktiivne navigeerimismenüü on uskumatu – kena pukseerimisfunktsioon, mida on lihtne kasutada. Mõnikord loote menüü, mida soovite kogu oma teemas kasutada, ilma kodulinki lisamata. Siin on mõni kood kodulingi lisamine menüüsse ilma WordPressi administraatori menüüvalikuid kasutamata.

Lisage WordPressi navigeerimismenüüsse Home HTML-i olem

Kasutades HTML olem (🏠), mis esindab teie kodulehte, mitte linki, mis ütleb, et Kodu on üsna tavaline. Kasutades ülaltoodud koodi, sain teha väikese muudatuse, et lisada teksti asemel HTML-üksus:

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

Lisage WordPressi navigeerimismenüüsse Home SVG

Kasutades SVG oma kodulehte esindama, mitte linki, mis ütleb, et Kodu on samuti üsna kasulik. Kasutades ülaltoodud koodi, sain teha väikese muudatuse, et lisada teksti asemel 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;
}

Lisage WordPressi navigeerimismenüüsse Home FontAwesome Home

Kui kasutate Font Awesome saidil saate kasutada ka nende ikooni. Kasutades ülaltoodud koodi, sain teha väikese muudatuse, et lisada teksti asemel nende ikooni:

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

Lisage WordPressi navigeerimismenüüsse kodupilt

Võimalik on kasutada ka pilti oma kodulehe tähistamiseks, mitte linki, mis ütleb Kodu. Kasutades ülaltoodud koodi, sain teha väikese muudatuse, et lisada teksti asemel 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;
}

Siin on selle koodi jaotus:

  • Ta kasutab add_filter funktsioon külge haakimiseks wp_nav_menu_items filter võimaldab teil muuta WordPressi navigeerimismenüü üksusi.
  • . add_home_link funktsioon on määratletud modifikatsiooni käsitlemiseks. Sellel funktsioonil on kaks parameetrit: $items (olemasolevad menüüelemendid) ja $args (menüü argumendid).
  • Toas add_home_link funktsiooni, kontrollib see, kas praegune leht on esileht is_front_page(). Olenevalt sellest, kas see on esileht või mitte, määrab see stiili eesmärgil kodulingile CSS-klassi.
  • Seejärel koostab see avalehe lingi HTML-i, sealhulgas pildi koos lingiga avalehele. Peaksite asendama [path to your home image] tegeliku teega teie kodupildi juurde.
  • Lõpuks lisab see menüüelementide algusesse lingi Avaleht ja tagastab muudetud menüüelemendid.

Lisage see kood kindlasti oma teemadele functions.php fail oma Lapse Theme ja kohandage seda vastavalt vajadusele. Kui teie teema kasutab teistsugust struktuuri või esineb probleeme, peate võib-olla koodi vastavalt kohandama. Ja muidugi veenduge, et teil oleks koduikooni jaoks kehtiv pilditee.

Douglas Karr

Douglas Karr on CMO of OpenINSIGHTS ja selle asutaja Martech Zone. Douglas on aidanud kümneid edukaid MarTechi idufirmasid, on aidanud Martechi omandamisel ja investeeringutel üle 5 miljardi dollari ulatuses läbi viia ning jätkab ettevõtete abistamist nende müügi- ja turundusstrateegiate rakendamisel ja automatiseerimisel. Douglas on rahvusvaheliselt tunnustatud digitaalse transformatsiooni ja MarTechi ekspert ja esineja. Douglas on ka Dummie juhendi ja ärijuhtimise raamatu autor.

seotud artiklid

Tagasi üles nupule
lähedal

Adblock tuvastatud

Martech Zone suudab teile seda sisu tasuta pakkuda, kuna teenime oma saidi rahaks reklaamitulu, sidusettevõtete linkide ja sponsorluse kaudu. Oleksime tänulikud, kui eemaldaksite meie saidi vaatamise ajal oma reklaamiblokeerija.