WordPress – So fügen Sie die Bedingung “wenn Benutzer angemeldet” für das HTML/CSS/JS-Menü hinzu

Question 1

Ich arbeite mit Elementor, im HTML-Widget habe ich Code geschrieben, um ein Menü zu erstellen, und es funktioniert gut. Jetzt möchte ich einen Teil des Menüs ausblenden, um es nur für angemeldete Benutzer sichtbar zu machen. Ich verstehe, dass dies mit PHP gemacht wird, aber das HTML-Widget von Elementor unterstützt kein PHP. Ich frage mich also, ob es eine Alternative zu PHP gibt oder ob es eine Möglichkeit gibt, PHP indirekt auf mein Menü anzuwenden?

Hier ist mein Testmenü, es ist nur ein Test, also gibt es nur zwei Punkte. Kann mir jemand helfen zu verstehen, wie ich das erreichen kann? Entschuldigung, aber ich bin neu und versuche zu lernen.

Ich freue mich über jede Antwort, danke.

Bearbeiten mit möglicher Lösung: In wp-content / themes / child-theme / habe ich einen Ordner namens custom_menu erstellt, darin habe ich zwei Dateien hinzugefügt, menu_structure.php und menu_style.css. Die PHP-Datei enthält den HTML-Code mit dem Skript, während ich im CSS die Stile eingefügt habe.

Dann ging ich zur Datei functions.php und fügte diese Zeile hinzu include_once get_theme_file_path (‘/custom_menu/menu_structure.php’); Damit soll WordPress verständlich gemacht werden, dass menu_structure.php die Funktionen ausführen muss, sonst würde der Shortcode nicht funktionieren.

Schließlich habe ich in der Datei menu_structure.php einen Shortcode hinzugefügt, darin habe ich dann ein HTML-Menü und ein Skript hinzugefügt. So geht das…

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
}

Dies ist der anfängliche Code, den ich im Elementor-HTML-Widget habe

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">[email protected]</span>
            </div>

            <hr class="solid" />

            <!--Anyone can see, so there is no need for conditions-->
            <div class="user_menu item">
              <a href="https://stackoverflow.com/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>

Question 2

(CSS-Hacks können den Menüpunkt ausblenden, aber er ist immer noch für alle verfügbar, ob eingeloggt oder nicht).

Ich verwende WordPress nicht, aber es scheint eine Methode zum Überprüfen / Zurückgeben des Anmeldestatus zu sein is_user_logged_in(). Sehen WordPress-Dokumentation. Mit dieser Methode würden Sie den Abschnitt, den Sie ausblenden möchten, in eine Bedingung einschließen.

Ich habe folgendes nicht getestet, aber es würde in etwa so aussehen:

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

Es gibt wahrscheinlich ein Plugin, mit dem Sie PHP hinzufügen können, wahrscheinlich innerhalb einer <script> Etikett oder so.