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.