Jak ukryć menu na pojedynczej stronie WordPressa
Dlaczego warto ukryć menu na wybranej stronie WordPress?
Ukrycie menu na pojedynczej stronie WordPress może być kluczowe przy tworzeniu dedykowanych stron lądowania, formularzy zapisów na newsletter czy stron podziękowań. Takie rozwiązanie zwiększa konwersję dzięki eliminacji elementów rozpraszających uwagę użytkownika i pozwala mu skupić się wyłącznie na głównym celu strony.
W tym praktycznym przewodniku pokażę Ci, jak w prosty sposób ukryć górne menu tylko na wybranej stronie, bez ingerowania w wygląd pozostałych podstron Twojej witryny.
🧭 Krok 1: Identyfikacja numeru ID strony WordPress
Pierwszym krokiem jest znalezienie unikalnego identyfikatora strony, na której chcesz ukryć menu:
- Zaloguj się do panelu administracyjnego WordPress używając swoich danych logowania.
- Przejdź do sekcji Strony → Wszystkie strony w menu bocznym panelu WordPress.
- Znajdź na liście stronę, na której chcesz ukryć menu (np. „Zapis na newsletter”) i najedź na nią kursorem, aby wyświetlić opcje.
- Kliknij opcję „Edytuj”, aby przejść do edycji wybranej strony.
- W pasku adresu Twojej przeglądarki zobaczysz adres URL podobny do poniższego:
…/post.php?post=1717&action=edit
✅ Najważniejsza informacja: Liczba widoczna po fragmencie post= to właśnie unikalny identyfikator (ID) Twojej strony. W tym przykładzie ID strony to 1717. Zapamiętaj lub zapisz tę liczbę, ponieważ będzie ona potrzebna w następnym kroku.
🎨 Krok 2: Dodanie niestandardowego kodu CSS do ukrycia menu
Teraz gdy znasz już ID strony, możesz dodać specjalny kod CSS, który ukryje menu tylko na tej konkretnej podstronie:
- W panelu administracyjnym WordPress przejdź do sekcji:
Wygląd → Dostosuj → Dodatkowy CSS
To narzędzie pozwala na dodawanie niestandardowych stylów CSS bez modyfikowania plików motywu.
- W polu edycji kodu CSS wklej poniższy fragment, zastępując liczbę 1717 Twoim numerem ID strony:
.page-id-1717 header {
display: none !important;
}
Ten kod CSS używa selektora .page-id-[ID], który odnosi się tylko do konkretnej strony o podanym ID, a następnie ukrywa element header (nagłówek), który zwykle zawiera menu.
Kliknij przycisk „Opublikuj” lub „Zapisz zmiany”, aby zastosować wprowadzone modyfikacje CSS.
✅ Oczekiwany efekt po wdrożeniu zmian
Po poprawnym wykonaniu powyższych kroków, menu (znajdujące się w elemencie header) zostanie całkowicie ukryte wyłącznie na stronie o wskazanym ID. Wszystkie pozostałe strony i wpisy na Twojej witrynie WordPress zachowają standardowy wygląd z widocznym menu nawigacyjnym.
To rozwiązanie jest szczególnie przydatne dla:
- Stron lądowania (landing pages) zoptymalizowanych pod konwersję
- Formularzy zapisów na newsletter, gdzie chcesz skupić uwagę użytkownika
- Stron podziękowań po dokonaniu zakupu lub rejestracji
- Specjalnych stron promocyjnych z ograniczoną nawigacją
❓Rozwiązywanie typowych problemów i dodatkowe wskazówki
Jeśli po zastosowaniu powyższego kodu menu nadal jest widoczne, problem może wynikać z niestandardowej struktury motywu WordPress. W takim przypadku spróbuj zastosować alternatywne selektory CSS:
- Wariant dla motywów używających innej klasy dla nagłówka:
.page-id-1717 .site-header {
display: none !important;
}
- Bardziej szczegółowy selektor, który celuje w konkretne elementy menu:
.page-id-1717 .main-navigation,
.page-id-1717 .nav-menu,
.page-id-1717 .menu-main-container {
display: none !important;
}
- Możesz także użyć Narzędzi deweloperskich w przeglądarce (F12 lub prawy przycisk myszy → Zbadaj), aby zidentyfikować dokładną klasę lub ID elementu menu w Twoim motywie.
📱 Optymalizacja dla urządzeń mobilnych
Pamiętaj, że na urządzeniach mobilnych menu może mieć inną strukturę HTML. Aby zapewnić ukrywanie menu również na telefonach i tabletach, warto dodać dodatkowy kod CSS:
@media only screen and (max-width: 768px) {
.page-id-1717 .mobile-menu,
.page-id-1717 .menu-toggle,
.page-id-1717 .hamburger-menu {
display: none !important;
}
}
🔍 Podsumowanie
Ukrycie menu na pojedynczej stronie WordPress to prosta, ale skuteczna technika poprawiająca UX i wskaźniki konwersji na stronach docelowych. Dzięki prostemu kodowi CSS możesz dostosować wygląd wybranej strony bez wpływania na ogólną nawigację witryny. Jeśli potrzebujesz bardziej zaawansowanych modyfikacji, warto rozważyć stworzenie niestandardowego szablonu strony w WordPress.