it-swarm.com.de

Wie kann ich den Text eines wp_nav_menu <a> -Tags einbinden und bearbeiten?

Ich versuche, den Text zu ändern, der für die Ankertags im wp_nav_menuli angezeigt wird.

Ich habe das tatsächlich mit jQuery geschafft, nichts Besonderes, weil ich mit Sicherheit kein Profi bin. Sie können den Basiscode hier sehen:

jQuery(document).ready(function () {

    jQuery('.menu-item-30 > a').html('<i class="fas fa-home"></i>');

});

Es funktioniert, dieser Code findet das Anker-Tag im gewünschten Navigationsmenü und ändert das Symbol in ein kleines Häuschen für die Homepage. Das Problem ist, dass ich beim Laden der Seite für die kürzeste Sekunde vor dem Laden des Hauses den Originaltext in diesem Ankertag sehen kann, der "home" ist und unprofessionell aussieht. Ich versuche zu sagen, dass die Seite geladen wird und dieser Code dann merklich nachläuft.

Daher dachte ich mir, dass hier vielleicht Filter und Haken ins Spiel kommen. Soweit ich weiß, können Sie jQuery jedoch nicht wirklich in PHP einbinden und als Filter festlegen, oder? Vielleicht muss ich nur "ready" in jQuery auf etwas anderes ändern.

Wie kann ich daher den Text zwischen <a> und </a> von 'Home' in <i class="fas fa-home"></i> ändern, während er gleichzeitig geladen wird, während die Seite geladen wird und nicht danach?

1
Ruke

Eine Möglichkeit, einen solchen Effekt zu erzielen, ist die Verwendung von wp_nav_menu_objects hook.

function modify_home_in_nav_menu_objects( $items, $args ) {
    foreach ( $items as $k => $object ) {
        // you can also target given page using this if:
        // if ( 'page' == $object->object && 2 == $object->object_id ) {
        if ( 30 == $object->ID ) {
            $object->title = '<i class="fas fa-home"></i>';
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_objects', 'modify_home_in_nav_menu_objects', 10, 2 );

PS. Sollte es wirklich fas und nicht fa sein?

0