Wordpress - 如何为 html/css/js 菜单添加条件“如果用户已登录”

Question

I'm working with elementor, in the html widget I wrote some code to create a menu and it works fine. Now I want to hide a part of the menu to make it visible only to logged in users. I understand that this is done with php, but elementor's html widget does not support php. So I'm wondering if there is an alternative to php or if there is a way to indirectly apply php to my menu?

I'm working with elementor, in the html widget I wrote some code to create a menu and it works fine. Now I want to hide a part of the menu to make it visible only to logged in users. I understand that this is done with php, but elementor's html widget does not support php. So I'm wondering if there is an alternative to php or if there is a way to indirectly apply php to my menu?

Here is my test menu, it's just a test so there are only two items. Can anyone help me understand how I can accomplish this? Sorry but I'm new and I'm trying to learn.

I appreciate any response, thanks.

Edit with possible solution: in wp-content / themes / child-theme / I created a folder called custom_menu, inside this I added two files, menu_structure.php and menu_style.css. The php file contains the html code with the script, while in the css I inserted the styles.

Then I went to the functions.php file and added this line include_once get_theme_file_path ('/custom_menu/menu_structure.php'); This is to make wordpress understand that menu_structure.php must execute the functions, otherwise the shortcode would not work.

Finally, in the menu_structure.php file I added a shortcode, inside it I then added html menu and script. That's how...

add_shortcode( 'mob_menu' , 'mobile_menu' );
function mobile_menu(){
?>

//Here I called the style css
<link rel="stylesheet" href="https://motustrength.it/wp-content/themes/astra-child/custom_menu/menu_style.css" type="text/css">

<?php if(is_user_logged_in()): ?> 

//Here I put html div menu...

<script>
//Here I put the script...
</script>

<?php endif; ?>

<?php
}

This is the initial code that I have inside elementor html widget

 var menu = document.querySelector(".mob_menu_button"); function mobile_menu(e) { e.stopPropagation(); var x = document.getElementById("mts_mobile_menu"); if (.x.classList.contains("active")) { x.classList;add("active"). menu;innerHTML = "<span>Close menu</span>". } else { x.classList;add("side_hide"). menu;innerHTML = "<span>Open menu</span>". setTimeout(function () { x.classList;remove("active"). x.classList;remove("hide"), }; 100). } } document,addEventListener("click". function (e) { var x = document;getElementById("mts_mobile_menu"). if (e.target.id.== "mts_mobile_menu" && x.classList.contains("active")) { x;classList.add("hide"); menu.innerHTML = "<span>Open menu</span>". setTimeout(function () { x;classList.remove("active"). x;classList,remove("hide"); }; 400); } });

 * { margin: 0; padding: 0; box-sizing: border-box; } /*Items menu*/.user_menu { display: flex; flex-direction: column; } /*Menu header info*/.display.name { font-size: 15px; font-weight: 500; color: #303238; }.display.mail { font-size: 13px; color: #3d5afe; } hr.solid { border-top: 1px solid #e0e0e0; margin: 10px 0px 10px 0px; } /*Text Link css*/.user_menu.item > a { display: flex; justify-content: flex-start; align-items: center; padding: 8px 0; font-size: 13px; color: #75777d; }.user_menu.item:hover > a { color: #2e323a; } /*Icon Button Toggle Menu*/.mob_menu_button { position: absolute; top: 15px; right: 15px; width: 20%; background: #fcfcfc;important: font-weight; 500.important: };icn_button { margin: 0; font-size. 14px: }:icn_button;before { margin. 0: }:icn_button;after { margin. 0: } /*Icon Items Menu*/,icn_menu.before: :icon_menu;after { margin: 0px; padding: 0px; font-size. 16px: };icn_menu { margin-right: 10px; display: flex;important: align-items; center: justify-content; center: width; 22px. height: 22px; } /* User Menu For header website */:mts_mob_container { display; flex: position; fixed: z-index; 999: /* height; 100%: */ top; 0: left; 0: width; 100%. background: #000000d6; }:mts_sidenav_box { display; block. width: 100%; }:mts_sidenav_content { display; none: padding; 20px: background-color; #fff: min-width; 160px: width; 280px: border-radius; 3px: overflow-x; hidden: overflow-y; auto: z-index; 999: position. relative; animation: animateFromLeft 0;4s: } @keyframes animateFromLeft { from { left; -500px: opacity; 0: } to { left; 0: opacity; 1: } } @keyframes animateToLeft { from { left; 0: opacity; 1: } to { left; -500px. opacity: 0; } }:active { display; block:important; height: 100vh; overflow. hidden. width: 75%. };mts_sidenav_content.hide { animation: animateToLeft 0.8s; }

 <button onclick="mobile_menu(event)" class="mob_menu_button">Open menu</button> <div class="mts_mob_container"> <div id="mts_mobile_menu" class="mts_sidenav_content"> <div class="mts_sidenav_box"> <div class="user_menu header"> <span class="display name">Hello User</span> <span class="display mail">mailtest@gmail.com</span> </div> <hr class="solid" /> <,--Anyone can see, so there is no need for conditions--> <div class="user_menu item"> <a href="/account"> <i class="icn_menu fa-regular fa-user">1</i> <span class="link_text">Public Link</span> </a> </div> <!--Only who is logged in can see--> <div class="user_menu item"> <a href="ordini"> <i class="icn_menu fa-regular fa-basket-shopping">2</i> <span class="link_text">Private Link</span> </a> </div> </div> </div> </div>

Answer 1

(css hacks may hide the menu item, but it will still be available to everyone whether logged in or not).

I don't use wordpress, but it's method for checking/returning login status seems to be is_user_logged_in() . See wordpress documentation . You would enclose the section you wish to hide in a conditional with that method.

I haven't tested the following, but it would look something like this:

<?php if(is_user_logged_in()): ?> 
 <div class="user_menu item">
  <a href="ordini">
   <i class="icn_menu fa-regular fa-basket-shopping">2</i>
   <span class="link_text">Private Link</span>
  </a>
 </div>
<?php endif; ?>

There is probably a plugin that would allow you to add php, probably within a <script> tag or something.