DIVI und Woocommerce – Benutzername im Header
Füge den folgenden Code in die functions.php-Datei deines Child Themes ein:
function display_username_in_top_header() {
if (is_user_logged_in()) {
$current_user = wp_get_current_user();
$username = $current_user->display_name;
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
var usernameElement = document.createElement("div");
usernameElement.classList.add("et-username-display");
usernameElement.innerHTML = "Hallo, ' . esc_js($username) . '";
var headerContainer = document.querySelector(".et_header_style_slide #et-top-navigation nav");
if (headerContainer) {
headerContainer.appendChild(usernameElement);
}
});
</script>';
}
}
add_action('wp_footer', 'display_username_in_top_header');Wir haben den Hook wp_footer verwendet, um sicherzustellen, dass das Script am Ende der Seite eingefügt wird. Das obige Script erstellt ein neues HTML-Element, fügt den Benutzernamen hinzu und hängt dieses Element an das Navigationsmenü an. Du kannst den CSS-Selektor im querySelector anpassen, um den Benutzernamen an einer anderen Stelle im Top Header anzuzeigen.
Stelle sicher, dass der folgende CSS-Code in der style.css-Datei deines Child Themes vorhanden ist, um den Benutzernamen im Top Header zu stylen:
.et-username-display {
display: inline-block;
padding: 0 10px;
line-height: 80px;
font-size: 14px;
color: #fff;
}Die obige Lösung sollte den Benutzernamen an der gewünschten Stelle im Top Header anzeigen. Du kannst den CSS-Code und den CSS-Selektor im JavaScript-Code weiter anpassen, um das Erscheinungsbild und die Platzierung des Benutzernamens zu optimieren.
Hinterlasse einen Kommentar
An der Diskussion beteiligen?Hinterlasse uns deinen Kommentar!