
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 Eine Entität (🏠) zur Darstellung Ihrer Homepage anstelle eines Links mit der Aufschrift „Home“ ist weit verbreitet. Mithilfe des obigen Codes konnte ich eine kleine Änderung vornehmen, um eine HTML-Entität 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 . '🏠' . $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 diewp_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 istis_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.
ehrfürchtige