Motyw Astra oraz wtyczka Spectra (zarówno w wersji darmowej, jak i płatnej) mają domyślnie ustawione konkretne breakpointy. Są to tzw. punkty przełamania, czyli szerokości ekranu, przy których układ strony zmienia się, by dopasować się do urządzenia użytkownika, na którym witryna jest wyświetlana.
W przypadku Astry zmiana tych punktów wpływa na wygląd nagłówka (np. kiedy menu zmienia się w „hamburgera”) oraz układ stopki. W Spektrze breakpointy decydują o tym, jak zachowują się poszczególne bloki dodawane przez ten plugin przy różnych szerokościach ekranu, czyli kiedy przełączają się na widok Desktop, Tablet lub Mobile.
Choć oba te narzędzia stworzył ten sam zespół (Brainstorm Force), to domyślnie korzystają one z różnych wartości, co może powodować niespójności w wyglądzie strony na tabletach oraz urządzeniach mobilnych. Z tego poradnika dowiesz się, jak ustawić pod potrzeby swojego projektu.
Jakie wartości najlepiej ustawić?
Standardowo motyw Astra oraz wtyczka Spectra operują na trzech widokach. Ponieważ możemy zdefiniować dwa punkty przełamania (dla tabletu i smartfona), w tym poradniku będzie bazować na poniższych, popularnych wartościach:
- Powyżej 1024 px – widok Desktop (komputery)
- 769 – 1024 px – widok Tablet
- 768 px i mniej – widok Mobile (smartfony)
Może jednak te wartości ustawić zgodnie z założeniami swojego projektu.
Jak zmienić breakpointy w motywie Astra?
Domyślne ustawienia w motywie Astra to 921 px dla tabletu oraz 544 px dla telefonów. Aby to zmienić, musisz dodać krótki fragment kodu PHP do pliku functions.php swojego motywu potomnego lub skorzystać z wtyczki typu „WPCode”.
Kod dla widoku tabletu:
// Ustaw swój breakpoint dla motywu Astra dla tabletów
add_filter( 'astra_tablet_breakpoint', function() {
return 1024;
});Kod dla widoku mobilnego:
// Ustaw swój breakpoint dla motywu Astra dla urządzeń mobilnych
add_filter( 'astra_mobile_breakpoint', function() {
return 768;
});Jak zmienić breakpointy we wtyczce Spectra?
W przypadku wtyczki Spectra domyślne punkty to 976 px (tablet) oraz 767 px (mobile). Tutaj proces wygląda inaczej – wartości te zmieniamy za pomocą zdefiniowania stałych PHP w pliku wp-config.php.
Plik ten znajdziesz w głównym katalogu swojej instalacji WordPressa. Dostęp do niego uzyskasz przez menedżer plików w panelu hostingu lub klienta FTP. Poniższy kod wklej najlepiej przed linią:/* That's all, stop editing! Happy publishing. */
Kod dla widoku tabletu:
// Ustaw swój breakpoint dla wtyczki Spectra dla tabletów
define( 'UAGB_TABLET_BREAKPOINT', '1024' );Kod dla urządzeń mobilnych:
// Ustaw swój breakpoint dla wtyczki Spectra dla urządzeń mobilnych
define( 'UAGB_MOBILE_BREAKPOINT', '768' );Aby nowe ustawienia weszły w życie, konieczne może być wyczyszczenie pamięci podręcznej (cache) Twojej witryny lub przeprowadzenie regeneracja plików CSS generowanych przez tę wtyczkę. To drugie zrobisz to w prosty sposób:
- Wejdź w menu: Spectra > Ustawienia.
- Wybierz zakładkę „Generowanie aktywów”.
- Kliknij przycisk „Regeneruj aktywa”.
Ważna uwaga dotycząca bezpieczeństwa
Modyfikacje w pliku wp-config.php są kluczowe dla działania całej strony. Nawet mały błąd w tym miejscu może spowodować awarię witryny. Zawsze rób kopię zapasową pliku przed edycją, a jeśli nie czujesz się pewnie – poproś o pomoc specjalistę.
