Ajouter une icône d'accueil au menu de navigation WordPress à l'aide du code

Nous aimons WordPress et travaillons avec pratiquement tous les jours. Le menu de navigation actif dans WordPress est incroyable – une fonctionnalité glisser-déposer intéressante et facile à utiliser. Parfois, vous créez un menu que vous souhaitez utiliser dans tout votre thème sans inclure le lien d'accueil. Voici du code ajouter le lien d'accueil au menu sans utiliser les options de menu dans WordPress Admin.

Ajouter une entité HTML d'accueil au menu de navigation WordPress

Utilisation de l'année HTML entité (🏠) pour représenter votre page d'accueil plutôt qu'un lien indiquant Accueil est assez courant. En utilisant le code ci-dessus, j'ai pu apporter une modification mineure pour inclure une entité HTML plutôt que le texte :

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

Ajouter un SVG maison au menu de navigation WordPress

Utilisation de l'année SVG pour représenter votre page d'accueil plutôt qu'un lien indiquant Accueil est également très utile. En utilisant le code ci-dessus, j'ai pu apporter une modification mineure pour inclure un SVG plutôt que le texte :

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

Ajouter une maison FontAwesome Home au menu de navigation WordPress

Si vous utilisez Font Awesome sur votre site, vous pouvez également utiliser leur icône. En utilisant le code ci-dessus, j'ai pu apporter une modification mineure pour inclure leur icône plutôt que le texte :

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

Ajouter une image d'accueil au menu de navigation WordPress

Utiliser une image pour représenter votre page d'accueil plutôt qu'un lien indiquant Accueil est également une possibilité. En utilisant le code ci-dessus, j'ai pu apporter une modification mineure pour inclure un SVG plutôt que le texte :

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

Voici un aperçu de ce que fait ce code :

• Il utilise le add_filter fonction pour se connecter au wp_nav_menu_items Le filtre vous permet de modifier les éléments d'un menu de navigation WordPress.
• Les add_home_link la fonction est définie pour gérer la modification. Cette fonction prend deux paramètres : $items (les éléments de menu existants) et $args (les arguments du menu).
• À l'intérieur de l' add_home_link fonction, il vérifie si la page actuelle est la première page en utilisant is_front_page(). Selon qu'il s'agit de la première page ou non, il attribue une classe CSS au lien d'accueil à des fins de style.
• Il construit ensuite le code HTML du lien Accueil, y compris une image avec un lien vers la page d'accueil. Tu devrais remplacer [path to your home image] avec le chemin réel vers l'image de votre maison.
• Enfin, il ajoute le lien Accueil au début des éléments de menu et renvoie les éléments de menu modifiés.

Assurez-vous d'ajouter ce code à votre thème functions.php déposer dans votre enfant Thème et personnalisez-le selon vos besoins. Si votre thème utilise une structure différente ou rencontre des problèmes, vous devrez peut-être ajuster le code en conséquence. Et, bien sûr, assurez-vous de disposer d’un chemin d’image valide pour l’icône d’accueil.