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

Przeglądanie mobilnej wersji Twojej strony WordPress w podglądzie na komputerze jest prostym, ale niezbędnym zadaniem.

Pozwala to sprawdzić, jak Twoja witryna wygląda na mniejszych ekranach, pomagając wykryć problemy z układem lub wady projektowe, które w przeciwnym razie mógłbyś przeoczyć.

Przez lata współpracowaliśmy z wieloma właścicielami stron internetowych, aby upewnić się, że ich witryny wyglądają świetnie i dobrze działają na urządzeniach mobilnych. Priorytetowo traktujemy również projekty przyjazne dla urządzeń mobilnych, kiedykolwiek tworzymy nowe strony i wpisy na stronie WPBeginner.

Jednym z problemów, które zauważyliśmy, jest to, że sprawdzanie wersji mobilnej na komputerze stacjonarnym może być trudne bez odpowiednich narzędzi.

Na szczęście narzędzie Dostosowywanie motywu WordPress i tryb urządzenia w narzędziach deweloperskich Google Chrome pozwalają szybko przeglądać i wprowadzać poprawki.

W tym przewodniku przeprowadzimy Cię przez obie metody przeglądania wersji mobilnej stron WordPress z poziomu komputera stacjonarnego.

Dlaczego warto podglądać układ mobilny

Ponad 50% odwiedzających Twoją witrynę będzie uzyskiwać do niej dostęp za pomocą telefonów komórkowych, a około 3% będzie korzystać z tabletów.

Oznacza to, że posiadanie witryny, która świetnie wygląda na urządzeniach mobilnych, jest bardzo ważne.

W rzeczywistości mobilność jest tak ważna, że Google używa teraz indeksu mobile-first do swojego algorytmu rankingowego stron internetowych. Oznacza to, że Google będzie używać mobilnej wersji Twojej strony do indeksowania. Dowiedz się więcej, czytając nasz ostateczny przewodnik po WordPress SEO.

Nawet jeśli używasz responsywnego motywu WordPress, nadal musisz sprawdzić, jak Twoja strona wygląda na urządzeniach mobilnych. Możesz chcieć utworzyć różne wersje kluczowych stron docelowych, które są zoptymalizowane pod kątem potrzeb użytkowników mobilnych.

Ważne jest, aby pamiętać, że większość podglądów mobilnych nie będzie całkowicie idealna, ponieważ istnieje tak wiele różnych rozmiarów ekranów mobilnych i przeglądarek. Twoim ostatecznym testem powinno być zawsze oglądanie Twojej strony na urządzeniu mobilnym.

W poniższych sekcjach przyjrzymy się, jak możesz wyświetlić mobilną wersję swojej strony WordPress na komputerze.

Omówimy 2 różne metody testowania wyglądu Twojej witryny na urządzeniach mobilnych za pomocą przeglądarek stacjonarnych. Możesz kliknąć poniższe linki, aby przejść do dowolnej sekcji:

• Metoda 1: Korzystanie z narzędzia dostosowywania motywu WordPress
• Metoda 2: Korzystanie z trybu urządzenia w narzędziach deweloperskich Google Chrome
• Dodatkowa wskazówka: Tworzenie treści specyficznych dla urządzeń mobilnych w WordPress
• Samouczek wideo
• Często zadawane pytania

Zacznijmy!

Metoda 1: Korzystanie z narzędzia dostosowywania motywu WordPress

Możesz użyć narzędzia Dostosowywanie motywu WordPress, aby wyświetlić podgląd mobilnej wersji swojej witryny WordPress.

Po prostu zaloguj się do swojego panelu WordPress i przejdź do ekranu Wygląd » Dostosuj.

Spowoduje to otwarcie narzędzia do dostosowywania motywu WordPress.

W zależności od używanego motywu, możesz zobaczyć nieco inne opcje w menu po lewej stronie.

Na dole ekranu po prostu kliknij ikonę telefonu komórkowego.

Zobaczysz wtedy podgląd tego, jak Twoja witryna wygląda na urządzeniach mobilnych.

Ta metoda podglądu wersji mobilnej jest szczególnie przydatna, gdy nie zakończyłeś tworzenia swojego bloga lub gdy jest on w trybie konserwacji.

Możesz teraz wprowadzać zmiany na swojej stronie internetowej i sprawdzać, jak wyglądają, zanim je opublikujesz.

Metoda 2: Korzystanie z trybu urządzenia w narzędziach deweloperskich Google Chrome

Następną metodą wyświetlania mobilnej wersji strony jest użycie przeglądarki Google Chrome.

Przeglądarka Google Chrome ma zestaw narzędzi deweloperskich, które pozwalają na przeprowadzanie różnych kontroli na dowolnej stronie internetowej, w tym podgląd tego, jak wygląda ona na urządzeniach mobilnych.

Po prostu otwórz przeglądarkę Google Chrome na swoim komputerze stacjonarnym i odwiedź stronę, którą chcesz sprawdzić. Może to być podgląd strony w Twojej witrynie, a nawet strona konkurencji.

Następnie musisz kliknąć prawym przyciskiem myszy na stronie i wybrać opcję „Zbadaj”.

Nowy panel otworzy się po prawej stronie lub na dole ekranu.

Będzie to wyglądać mniej więcej tak:

W widoku deweloperskim będziesz mógł zobaczyć kod źródłowy HTML swojej strony, CSS i inne szczegóły.

Następnie musisz kliknąć przycisk „Przełącz pasek narzędzi urządzenia”, aby przejść do widoku mobilnego.

Zobaczysz podgląd swojej strony internetowej zmniejszony do rozmiaru ekranu mobilnego.

Ogólny wygląd Twojej strony internetowej również zmieni się w widoku mobilnym. Na przykład menu zostaną zwinięte, a dodatkowe ikony przesuną się na lewo zamiast na prawo od menu.

Gdy najedziesz kursorem myszy na widok mobilny swojej witryny, stanie się on okręgiem. Możesz przesuwać ten okrąg myszą, aby naśladować ekran dotykowy na urządzeniu mobilnym.

Możesz również przytrzymać klawisz 'Shift', a następnie kliknąć i przesunąć myszą, aby symulować szczypanie ekranu mobilnego w celu powiększenia lub pomniejszenia.

Nad widokiem mobilnym Twojej witryny zobaczysz dodatkowe opcje.

Te ustawienia pozwalają na wykonanie kilku dodatkowych czynności. Możesz sprawdzić, jak Twoja witryna wyglądałaby na różnych typach smartfonów.

Na przykład, możesz wybrać urządzenie mobilne, takie jak iPhone, i zobaczyć, jak Twoja witryna się na nim wyświetla.

Możesz również symulować wydajność swojej witryny przy szybkich lub wolnych połączeniach 3G. Używając ikony obracania, możesz obracać ekran telefonu.

Dodatkowa wskazówka: Tworzenie treści specyficznych dla urządzeń mobilnych w WordPress

Ważne jest, aby Twoja strona internetowa miała responsywny projekt, dzięki czemu mobilni użytkownicy będą mogli łatwo nawigować po Twojej stronie.

Jednak samo posiadanie responsywnej witryny może nie wystarczyć. Użytkownicy urządzeń mobilnych często szukają innych rzeczy niż użytkownicy komputerów stacjonarnych.

Wiele motywów i wtyczek premium pozwala tworzyć elementy, które wyświetlają się inaczej na komputerach stacjonarnych niż na urządzeniach mobilnych. Możesz również użyć kreatora stron, takiego jak SeedProd, do edycji stron docelowych w widoku mobilnym.

Powinieneś rozważyć tworzenie treści specyficznych dla urządzeń mobilnych dla swoich formularzy generujących leady. Na urządzeniach mobilnych formularze te powinny prosić o minimalne informacje, najlepiej tylko o adres e-mail. Powinny również dobrze wyglądać i być łatwe do zamknięcia.

Więcej szczegółów znajdziesz w naszym przewodniku jak stworzyć stronę docelową w WordPress.

Innym świetnym sposobem na tworzenie wyskakujących okienek i formularzy generujących potencjalnych klientów, specyficznych dla urządzeń mobilnych, jest OptinMonster. Jest to najpotężniejszy na rynku plugin do wyskakujących okienek i narzędzie do generowania potencjalnych klientów dla WordPress.

OptinMonster ma specyficzne zasady wyświetlania ukierunkowane na urządzenia, które pozwalają pokazywać różne kampanie użytkownikom mobilnym w porównaniu do użytkowników komputerów stacjonarnych. Możesz połączyć to z funkcją geolokalizacji OptinMonster i innymi zaawansowanymi funkcjami personalizacji, aby uzyskać najlepsze konwersje.

Więcej informacji znajdziesz w naszym przewodniku jak tworzyć mobilne wyskakujące okienka, które konwertują.

Samouczek wideo

Zanim odejdziesz, możesz sprawdzić nasz samouczek wideo na temat tego, jak wyświetlić mobilną wersję stron WordPress z pulpitu.

Subskrybuj WPBeginner

Często zadawane pytania

Oto kilka pytań często zadawanych przez naszych czytelników na temat podglądu mobilnego układu Twojej witryny.

Czy te podglądy na pulpicie będą dokładnie odpowiadać rzeczywistym urządzeniom mobilnym?

Nie zawsze. Chociaż są pomocne w wykrywaniu oczywistych problemów z układem, te narzędzia oparte na komputerach stacjonarnych mogą jedynie naśladować wymiary ekranu, zachowanie przeglądarki i warunki sieciowe.

Mogą one nie wychwytywać osobliwości wydajności ani interakcji specyficznych dla sprzętu, takich jak gesty dotykowe.

Dlatego zawsze sugerujemy testowanie na rzeczywistych urządzeniach, w tym telefonach i tabletach, aby potwierdzić użyteczność w świecie rzeczywistym przed uruchomieniem.

Czy mogę edytować moją witrynę w widoku mobilnym z mojego komputera stacjonarnego?

Tak, WordPress pozwala edytować treści podczas podglądu trybu mobilnego w narzędziu Dostosuj lub za pomocą kreatorów stron, takich jak Elementor, SeedProd i Beaver Builder.

Po przełączeniu na podgląd mobilny możesz:

• Dostosuj dopełnienie, marginesy i rozmiary czcionek dla mniejszych ekranów.
• Ukryj lub pokaż określone elementy tylko na urządzeniach mobilnych (np. duże obrazy lub banery tylko na komputery).
• Testuj menu i widżety zaprojektowane do interakcji dotykowych.

Większość kreatorów stron oferuje ustawienia specyficzne dla urządzeń, dzięki czemu możesz dostosowywać układy bez wpływu na wersje na komputery stacjonarne lub tablety.

Jak mogę sprawdzić widok mobilny mojej witryny WordPress bez logowania?

Jeśli chcesz zobaczyć, jak wygląda Twoja strona na żywo dla odwiedzających, wypróbuj te metody:

• Otwórz swoją witrynę w oknie przeglądarki incognito i użyj trybu urządzenia narzędzi deweloperskich.
• Użyj internetowych narzędzi do sprawdzania responsywności, takich jak Responsive Design Checker.

Te narzędzia pozwalają przeglądać witrynę w różnych rozdzielczościach bez konieczności podawania danych logowania.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak podglądać układ mobilny Twojej witryny. Możesz również zapoznać się z naszymi najlepszymi wyborami najlepszych wtyczek do konwersji witryny WordPress na aplikację mobilną i dowiedzieć się sposobów tworzenia przyjaznej dla urządzeń mobilnych witryny.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.