Jak dodac pływające menu na stronie WordPress bez płatnych wtyczek?

Pływające menu. Dodanie pływającego menu na stronie WordPress może znacząco poprawić nawigację i wygodę użytkowników. Pokażę Ci, jak krok po kroku dodać pływające menu bez konieczności korzystania z płatnych wtyczek. Skorzystamy z darmowych rozwiązań i prostych metod, aby uzyskać profesjonalny efekt.

Dlaczego warto używać pływającego menu?

Pływające menu, znane również jako sticky menu, pozostaje widoczne na ekranie, nawet podczas przewijania strony. Dzięki temu użytkownicy mają zawsze dostęp do kluczowych elementów nawigacyjnych, co zwiększa wygodę korzystania ze strony. Takie menu może także poprawić współczynnik konwersji, ponieważ najważniejsze linki są zawsze pod ręką.

Pływające menu – Dodanie przy pomocy CSS

Najprostszym sposobem na dodanie pływającego menu jest wykorzystanie CSS. Pokażę Ci, jak to zrobić krok po kroku.

Krok 1: Znajdź identyfikator lub klasę swojego menu

Zaloguj się do panelu administracyjnego WordPress i przejdź do zakładki „Wygląd” > „Dostosuj”. Następnie znajdź swoje menu i zanotuj jego identyfikator (ID) lub klasę (class). Najczęściej używane identyfikatory to #menu lub .navbar.

Krok 2: Dodaj odpowiedni kod CSS

Przejdź do zakładki „Wygląd” > „Edytor motywu” i znajdź plik style.css. Dodaj poniższy kod CSS, zastępując #menu lub .navbar odpowiednim identyfikatorem lub klasą:

#menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Krok 3: Zapisz zmiany

Zapisz zmiany w pliku style.css. Twoje menu powinno teraz być pływające i pozostawać widoczne podczas przewijania strony.

Pływające menu – Dodanie przy pomocy JavaScript

Jeśli potrzebujesz bardziej zaawansowanych funkcji, możesz użyć JavaScript, aby dodać przyklejone menu.

Krok 1: Dodaj kod JavaScript

Przejdź do zakładki „Wygląd” > „Edytor motywu” i znajdź plik header.php. Dodaj poniższy kod JavaScript tuż przed zamknięciem tagu </head>:

<script>
  window.onscroll = function() {myFunction()};
  var menu = document.getElementById("menu");
  var sticky = menu.offsetTop;

  function myFunction() {
    if (window.pageYOffset >= sticky) {
      menu.classList.add("sticky");
    } else {
      menu.classList.remove("sticky");
    }
  }
</script>

Krok 2: Dodaj odpowiedni kod CSS

Przejdź do pliku style.css i dodaj poniższy kod CSS:

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Krok 3: Zapisz zmiany

Zapisz zmiany w plikach header.php i style.css. Twoje menu powinno teraz być przyklejone i aktywować się przy przewijaniu strony.

Wykorzystanie darmowych wtyczek | Pływające menu

Jeśli nie czujesz się komfortowo z edytowaniem kodu, możesz skorzystać z darmowej wtyczki.

WP Sticky Menu (or Anything!) on Scroll
To prosta i darmowa wtyczka, która pozwala na łatwe dodanie pływającego menu. Wystarczy zainstalować wtyczkę, przejść do jej ustawień i wybrać element, który ma być pływający.

Kliknij, aby sprawdzić wtyczkę.