Jak wyświetlić mobilną wersję witryn WordPress z komputera

W miarę jak technologia postępuje, coraz więcej osób korzysta z urządzeń mobilnych do przeglądania internetu. Jest to trend, który wielu twórców stron internetowych zauważyło, dlatego teraz tworzą one mobilne wersje swoich stron. W rezultacie konieczne jest sprawdzenie, jak wyglądają te strony na różnych urządzeniach mobilnych. Ten artykuł pokaże, jak wyświetlić mobilną wersję witryn WordPress z komputera.

1. Użyj narzędzi deweloperskich w przeglądarce

Najprostszym i najpopularniejszym sposobem wyświetlania mobilnej wersji strony internetowej na komputerze jest użycie narzędzi deweloperskich dostępnych w większości przeglądarek. Przykładowo, w Google Chrome możesz to zrobić w następujący sposób:

Kliknij prawym przyciskiem myszy na stronie i wybierz “Narzędzia deweloperskie” lub użyj skrótu klawiaturowego (F12 lub Ctrl+Shift+I).
W narzędziach deweloperskich znajdź i kliknij ikonę “Toggle device toolbar” (skrót klawiaturowy Ctrl+Shift+M), która znajduje się w lewym górnym rogu.
Wybierz model urządzenia, na którym chcesz przetestować swoją stronę.
Odśwież stronę (F5).

2. Użyj wtyczki WordPress

Istnieje wiele wtyczek WordPress, które pozwalają zmusić witrynę do wyświetlania jej wersji mobilnej na komputerach stacjonarnych. Przykładowo, wtyczka “Mobile Preview” pozwala na wyświetlanie mobilnej wersji strony na komputerze stacjonarnym.

Aby zainstalować i skonfigurować tę wtyczkę, wykonaj następujące kroki:

Zaloguj się do panelu administracyjnego WordPress.
Przejdź do sekcji “Wtyczki” > “Dodaj nową”.
Wyszukaj “Mobile Preview” i kliknij “Zainstaluj teraz”.
Po instalacji aktywuj wtyczkę.
Przejdź do sekcji “Ustawienia” > “Mobile Preview” i skonfiguruj preferowane ustawienia.

3. Użyj snippeta PHP

Jeśli jesteś bardziej zaawansowany technicznie, możesz zastosować poniższy fragment PHP do swojego tematu WordPress, aby wymusić wyświetlanie mobilnej wersji strony na komputerach stacjonarnych. Pamiętaj, że zawsze powinieneś tworzyć kopię zapasową swojej strony przed wprowadzaniem jakichkolwiek zmian w kodzie.

function force_mobile_theme($theme) {
    if (isset($_GET['mobile']) && $_GET['mobile'] == 'yes') {
        return 'mobile-theme-name';
    } else {
        return $theme;
    }
}
add_filter('template', 'force_mobile_theme');
add_filter('option_template', 'force_mobile_theme');
add_filter('option_stylesheet', 'force_mobile_theme');

W tym kodzie, mobile-theme-name powinien być nazwą folderu Twojego motywu mobilnego. Możesz teraz przetestować mobilną wersję swojej strony na komputerze, dodając “?mobile=yes” na końcu URL.

4. Użyj usługi online

Wreszcie, istnieje wiele serwisów online, które pozwalają na testowanie wyglądu strony internetowej na różnych urządzeniach. Niektóre z nich to:

MobileTest.me
BrowserStack
Responsinator

Wymagają one wprowadzenia adresu URL strony, a następnie wyświetlają, jak strona będzie wyglądać na różnych urządzeniach mobilnych. Niektóre z tych usług są płatne, ale oferują bezpłatne próbne wersje.

Każda z tych metod ma swoje zalety i wady, dlatego warto przetestować różne podejścia, aby zobaczyć, które z nich najlepiej spełnia Twoje wymagania. Pamiętaj, że ostatecznym celem jest zapewnienie, aby Twoja strona internetowa wyglądała i działała tak samo dobrze na urządzeniach mobilnych, jak i na komputerach stacjonarnych.

Sprawdź ofertę 1500+ wtyczek i szablonów Premium WordPress!

SKLEP