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

Question

我正在使用 elementor，在 html 小部件中，我编写了一些代码来创建菜单，它工作正常。 现在我想隐藏菜单的一部分，使其仅对登录用户可见。 我知道这是用 php 完成的，但是 elementor 的 html 小部件不支持 php。所以我想知道是否有 php 的替代方案，或者是否有办法间接将 php 应用到我的菜单？

我正在使用 elementor，在 html 小部件中，我编写了一些代码来创建菜单，它工作正常。 现在我想隐藏菜单的一部分，使其仅对登录用户可见。 我知道这是用 php 完成的，但是 elementor 的 html 小部件不支持 php。所以我想知道是否有 php 的替代方案，或者是否有办法间接将 php 应用到我的菜单？

这是我的测试菜单，这只是一个测试，所以只有两个项目。 任何人都可以帮助我了解如何实现这一目标吗？ 抱歉，我是新手，我正在努力学习。

我感谢任何回应，谢谢。

使用可能的解决方案进行编辑：在 wp-content / themes / child-theme / 我创建了一个名为 custom_menu 的文件夹，我在其中添加了两个文件，menu_structure.php 和 menu_style.css。 php 文件包含带有脚本的 html 代码，而在 css 中我插入了 styles。

然后我去了 functions.php 文件并添加了这一行 include_once get_theme_file_path ('/custom_menu/menu_structure.php'); 这是为了让 wordpress 明白 menu_structure.php 必须执行这些功能，否则短代码将无法工作。

最后，在 menu_structure.php 文件中，我添加了一个短代码，然后在其中添加了 html 菜单和脚本。 这就是如何...

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
}

这是我在 elementor html 小部件中的初始代码

 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 可能会隐藏菜单项，但无论是否登录，每个人仍然可以使用它）。

我不使用 wordpress，但它检查/返回登录状态的方法似乎是is_user_logged_in() 。 请参阅wordpress 文档。 您可以使用该方法将要隐藏的部分包含在条件中。

我没有测试以下内容，但它看起来像这样：

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

可能有一个插件允许您添加 php，可能在<script>标记或其他内容中。