Wie kann ich dieses Drop-down-Menü für die Anmeldung/Abmeldung für Wordpress bearbeiten?

Question

Ich habe eine Wand getroffen zu versuchen, eine Dropdown-Login-Modal für meine Wordpress-Website zu erstellen. Wenn ein Benutzer die Anmeldeschaltfläche auswählt, wird das Anmeldemodal angezeigt. Bei erfolgreicher Anmeldung wird neben der Anmeldeschaltfläche (deren Bezeichnung sich auf den Benutzernamen ändert) eine weitere Schaltfläche mit der Aufschrift "Dropdown" mit den Dropdown-Optionen angezeigt Gehen Sie auf die Seite "Mein Konto" und loggen Sie sich aus (Bild unten).

Was ich will, ist für den Benutzer die Login-Schaltfläche auswählen, anmelden erfolgreich und die Login-Button Label ändert sich von ‚login‘ an die Nutzer nennen dann, wenn die die Schaltfläche jetzt mit ihrem Namen auswählen, die auf Es wird dort das Drop-Down-Menü mit den Optionen "Mein Konto" oder "Abmelden" angezeigt. Es gibt also keinen zweiten Knopf, nur einen. Ich hoffe, ich habe das klar genug erklärt, ich versuche im Wesentlichen, die beiden JavaScript-Funktionen zu kombinieren, die ich habe. Bitte irgendwelche Vorschläge, wie das zu beheben ist sehr willkommen, weil ich Tage damit verbracht habe zu versuchen! Vielen Dank im Voraus!

Javascript: (dies erfordert die Erstanmeldung modal)

jQuery(document).ready(function($) { 
    //show the login dialog box on click 
    $('a#show_login').on('click', function(e){ 
     $('body').prepend('<div class="login_overlay"></div>'); 
     $('form#login').fadeIn(500); 
     $('div.login_overlay, form#login a.close').on('click', function(){ 
      $('div.login_overlay').remove(); 
      $('form#login').hide(); 
     }); 
     e.preventDefault(); 
    }); 

    //perform AJAX login on form submit 
    $('form#login').on('submit', function(e){ 
     $('form#login p.status').show().text(ajax_login_object.loadingmessage); 
     $.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: ajax_login_object.ajaxurl, 
      data: { 
       'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin 
       'username': $('form#login #username').val(), 
       'password': $('form#login #password').val(), 
       'security': $('form#login #security').val() }, 
      success: function(data){ 
       $('form#login p.status').text(data.message); 
       if (data.loggedin == true){ 
        document.location.href = ajax_login_object.redirecturl; 
       } 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

Javascript & HTML: (Anrufe für das Drop-Down)

<?php if (is_user_logged_in()) { ?> 
    <a class="login_button" href="<?php echo wp_logout_url(home_url()); ?>"><?php global $current_user; get_currentuserinfo(); echo $current_user->user_firstname ;?></a> 
    <div class="dropdown"> 
    <button onclick="myFunction()" class="login_button">Dropdown</button> 
     <div id="myDropdown" class="dropdown-content"> 
      <a href="http://localhost:8888/devo-wordpress/cart/my-account">MY ACCOUNT</a> 
      <a href="<?php echo wp_logout_url(home_url()); ?>">LOGOUT</a> 
     </div> 
    </div> 

    <script> 
     // when the user clicks on the button, toggle between hiding and showing the dropdown content 
     function myFunction() { 
      document.getElementById("myDropdown").classList.toggle("show"); 
     } 
     //close the dropdown if the user clicks outside of it 
     window.onclick = function(event) { 
      if (!event.target.matches('.login_button')) { 
      var dropdowns = document.getElementsByClassName("dropdown-content"); 
      var i; 
      for (i = 0; i < dropdowns.length; i++) { 
       var openDropdown = dropdowns[i]; 
       if (openDropdown.classList.contains('show')) { 
       openDropdown.classList.remove('show'); 
       } 
      } 
      } 
     } 
    </script> 

Answer 1

Die einfachste Methode, würde ich die Vorteile von Wordpress nimmt Haken. Verwenden Sie den Hook für das Drop-Down-Menü, indem Sie einfach get_currentuserinfo();

Diese Anforderung zeigt den Anmeldenamen des Benutzers an.