使用 JQuery 隐藏<li>基于类名的主菜单元素

Question

On a wordpress website, I am using the following code inside the head section of header.php to check if users are logged in (not in wordpress admin but a separate login area) and if they are not, I would like to hide a specific menu item (using the li element's class name with JQuery):

<?php

if (isset($_COOKIE["username"])) {  

    // Do all relevant code for logged in users here

    }

else {
?>
<script type="text/javascript">

 $(document).ready(function() {        
    $('#menu-main-navigation-1 li.menu-item-123').hide();        


 });      

</script>
<?php
    // Do all relevant code for logged-out users here  

    }
?> 

The ul element's id is menu-main-navigation-1 and the class of the li that needs to be hidden is menu-item menu-item-type-custom menu-item-object-custom menu-item-123

I have tried both with $(document).ready(function() and without but it didn't make any difference, the menu item still shows up.

Answer 1

Calling hide is not a very good idea. It only changes the item's visibility but it will be still present in the source. If you absolutely have to do it in javascript, call remove , but this method still doesn't account for those users who have it disabled.

But fortunately, you can remove elements from the wordpress menu by hooking before the html generation:

 function filter_remove_menu_item_for_anons($menu_items, $args) {
    foreach($menu_items as $k => $item) {
      if ($item->ID == 123) {
        unset($menu_items[$k]);
      }
    }
    return $menu_items;
  }
  add_filter('wp_nav_menu_objects', 'filter_remove_menu_item_for_anons', 10, 2);

Just register the filter based on your session checks.

If you have several menus and need finer control, you can do additional checks with the args parameter.

However, if the user knows the URL, he will still be able to access the content, and you should consider other solution .

Answer 2

Another approach ... you can also use CSS to hide the list item - which is probably better.

<?php
  if (isset($_COOKIE["username"])) {

  } else {
?>

   <style>
      #menu-main-navigation-1 li.menu-item-123 { display: none !important; }
   </style>

<?php
    }
?> 

Note: if they disable CSS, the list will show up. The original approach, if you disable JavaScript... same thing.