Wordpress의 로그인/로그 오프 드롭 다운 메뉴는 어떻게 편집합니까?

Question

저는 워드 프레스 웹 사이트의 드롭 다운 로그인 모달을 만들려고 벽에 부딪혔습니다. 현재 사용자가 로그인 버튼을 선택하면 로그인 모드가 표시되지만 로그인이 성공하면 로그인 버튼 (레이블이 사용자 이름으로 변경됨)과 함께 '드롭 다운'레이블이 붙은 다른 버튼이 드롭 다운 옵션과 함께 표시됩니다 '내 계정'페이지로 이동하여 로그 아웃하십시오 (아래 그림 참조). (가)에 자신의 이름으로 지금 버튼을 선택하면 사용자가 로그인 버튼을 선택 성공적으로 로그인 한 사용자에게 '로그인'에서 로그인 버튼의 라벨을 변경 한 후 이름을 위해

내가 원하는 것은 '내 계정'또는 '로그 아웃'옵션이있는 드롭 다운 메뉴가 여기에 표시됩니다. 따라서 두 번째 버튼은 없으며 하나만 있습니다. 내가 충분히 명확하게 설명했으면 좋겠다. 나는 필자가 가지고있는 두 개의 자바 스크립트 함수를 결합하려고 시도하고있다. 나가 일을 보내려고 노력했기 때문에 이것을 고치는 법에 대한 제안은 대단히 환영합니다! 대단히 감사드립니다!

자바 스크립트 : (이 초기 로그인 모달 요구)

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(); 
    }); 
}); 

자바 스크립트 & HTML : (드롭 다운에 대한 호출) 내가 사용하는 것이 가장 쉬운 방법은 워드 프레스를 활용한다

<?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

후크. 드롭 다운에 후크를 사용하여 간단하게 get_currentuserinfo();

이 요청은 사용자의 로그인 이름을 표시합니다.