Content Marketing

Fügen Sie mithilfe von Code ein Home-Symbol zum WordPress-Navigationsmenü hinzu

Wir lieben WordPress und arbeiten praktisch jeden Tag damit. Das in WordPress aktive Navigationsmenü ist unglaublich – eine nette Drag-and-Drop-Funktion, die einfach zu verwenden ist. Manchmal erstellen Sie jedoch ein Menü, das Sie im gesamten Thema verwenden möchten, ohne den Home-Link einzuschließen. Hier ist ein Code Hinzufügen des Home-Links zum Menü ohne die Menüoptionen in WordPress Admin zu verwenden.

Fügen Sie dem WordPress-Navigationsmenü eine Home-HTML-Entität hinzu

Verwenden Jahr HTML entity (?) to represent your home page rather than a link that says Home is pretty common. Utilizing the code above, I was able to make a minor edit to include an HTML entity rather than the text:

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

Fügen Sie dem WordPress-Navigationsmenü eine Home-SVG hinzu

Verwenden Jahr SVG Die Darstellung Ihrer Homepage anstelle eines Links mit der Aufschrift „Home“ ist ebenfalls sehr nützlich. Mithilfe des obigen Codes konnte ich eine kleine Änderung vornehmen, um eine SVG-Datei anstelle des Textes einzubinden:

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

Fügen Sie eine Home-Schriftart „Awesome Home“ zum WordPress-Navigationsmenü hinzu

Wenn Sie mit Font Ehrfürchtig Auf Ihrer Website können Sie auch deren Symbol verwenden. Mithilfe des obigen Codes konnte ich eine kleine Änderung vornehmen, um deren Symbol anstelle des Textes einzubinden:

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

Fügen Sie dem WordPress-Navigationsmenü ein Home-Bild hinzu

Auch die Verwendung eines Bildes zur Darstellung Ihrer Homepage anstelle eines Links mit der Aufschrift „Home“ ist möglich. Mithilfe des obigen Codes konnte ich eine kleine Änderung vornehmen, um eine SVG-Datei anstelle des Textes einzubinden:

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

Hier ist eine Aufschlüsselung dessen, was dieser Code bewirkt:

  • Es nutzt die add_filter Funktion zum Einhängen in die wp_nav_menu_items Mit dem Filter können Sie die Elemente in einem WordPress-Navigationsmenü ändern.
  • Das add_home_link Es wird eine Funktion definiert, die die Änderung verarbeitet. Diese Funktion benötigt zwei Parameter: $items (die vorhandenen Menüpunkte) und $args (die Menüargumente).
  • Im Inneren der add_home_link Mit dieser Funktion wird überprüft, ob die aktuelle Seite die verwendete Startseite ist is_front_page(). Je nachdem, ob es sich um die Startseite handelt oder nicht, weist es dem Home-Link zu Gestaltungszwecken eine CSS-Klasse zu.
  • Anschließend wird der HTML-Code für den Home-Link erstellt, einschließlich eines Bildes mit einem Link zur Homepage. Sie sollten ersetzen [path to your home image] mit dem tatsächlichen Pfad zu Ihrem Heimbild.
  • Schließlich wird der Home-Link an den Anfang der Menüelemente angehängt und die geänderten Menüelemente zurückgegeben.

Stellen Sie sicher, dass Sie diesen Code zu Ihrem Theme hinzufügen functions.php Datei in Ihrem Child Theme und passen Sie es nach Bedarf an. Wenn Ihr Theme eine andere Struktur verwendet oder auf Probleme stößt, müssen Sie möglicherweise den Code entsprechend anpassen. Und stellen Sie natürlich sicher, dass Sie über einen gültigen Bildpfad für das Home-Symbol verfügen.

Douglas Karr

Douglas Karr ist CMO von Öffnen Sie EINBLICKE und Gründer der Martech Zone. Douglas hat Dutzenden erfolgreicher MarTech-Startups geholfen, war bei der Due Diligence von MarTech-Akquisitionen und -Investitionen im Wert von über 5 Milliarden US-Dollar behilflich und unterstützt weiterhin Unternehmen bei der Umsetzung und Automatisierung ihrer Vertriebs- und Marketingstrategien. Douglas ist ein international anerkannter Experte und Redner für digitale Transformation und MarTech. Douglas ist außerdem Autor eines Dummie-Ratgebers und eines Buchs über Unternehmensführung.

Ähnliche Artikel

Nach oben-Taste
Menu

Adblock erkannt

Martech Zone ist in der Lage, Ihnen diese Inhalte kostenlos zur Verfügung zu stellen, da wir unsere Website durch Werbeeinnahmen, Affiliate-Links und Sponsoring monetarisieren. Wir würden uns freuen, wenn Sie Ihren Werbeblocker entfernen würden, während Sie unsere Website besuchen.