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 . '🏠' . $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 funtzioawp_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 duis_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.