Jak stworzyć mobilną wersję strony WordPress – Hosting- Namecheap.com
Jak stworzyć mobilną wersję witryny WordPress
przyznaj: posiadanie pięknej i w pełni funkcjonalnej mobilnej wersji witryny WordPress jest koniecznością, biorąc pod uwagę, że znaczna ilość surfowania po Internecie pochodzi z urządzeń mobilnych. Łatwo jest stworzyć mobilną stronę internetową z WordPress w Namecheap, niezależnie od tego, czy subskrybujesz Hosting współdzielony, czy Easywp WordPress Hosting.
być może już zauważyłeś, że czasami wersje internetowe i mobilne tej samej strony mają nieco inną treść. Odbywa się to w celu wykluczenia określonych funkcji z mobilnej wersji WordPress, ponieważ mogą one pojawić się lub działać nieprawidłowo, lub po prostu być przytłaczające na mniejszym wyświetlaczu. Dodatkowo algorytm wyszukiwarki Google plasuje witryny przyjazne dla urządzeń mobilnych wyżej.
w tym artykule omówimy kilka sposobów, aby Twoja witryna WordPress była przyjazna dla urządzeń mobilnych:
tworzenie witryn z responsywnym projektem: Ta sama zawartość i adres URL są ładowane na każdym urządzeniu, ale CSS jest używany do zmiany renderowania strony zgodnie z rozdzielczością ekranu mobilnego.
dynamiczne witryny obsługujące: ładowany jest jeden adres URL, ale używane są różne treści i CSS, w zależności od używanego urządzenia.
tworzenie oddzielnych adresów URL dla Komputerów Stacjonarnych i urządzeń mobilnych: ładowane są różne adresy URL, a zatem strony internetowe, np. nctest.info oraz m.nctest.info
pamiętaj, że każdy sposób ma swoje plusy i minusy, dlatego zalecamy przeprowadzenie badania SEO przed kontynuowaniem.
Responsive Web Design
Responsive Web design wykorzystuje zapytania mediów CSS3. Media Queries to moduł CSS3 umożliwiający renderowanie treści w celu dostosowania do takich warunków, jak rozdzielczość ekranu, szerokość i wysokość, orientacja.
Zwykle plik, który musisz edytować, to styl.css. Znajduje się w katalogu/wp-content/themes/ theme_name/.
zapytanie CSS3 media zazwyczaj wygląda tak:
@media only screen and (max-width: 480px) {
}
jest to kod warunkowy, który mówi przeglądarce, aby dostosowała wszystkie parametry stylizacji, jeśli rozmiar ekranu jest mniejszy lub równy 480px.
aby uzyskać bardziej szczegółowe informacje, możesz dodać interwały min-width i max-width, aby kierować reklamy na różne urządzenia:
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
wszystkie dalsze korekty stylizacji powinny zostać dodane pomiędzy {…} nawiasy.
jako przykład weźmiemy domyślny motyw Twenty Ten, który domyślnie nie odpowiada.
pierwszy kod ustawia rozmiar ramki głównej motywu na 550px:
#access .menu-nagłówek, div.menu, #colophon, #branding, #main, #wrapper, # site-title {
width:550px;
}
Porównaj jak w tym przypadku strona będzie wyglądać na urządzeniu mobilnym:
jednak jak widać, nie wszystkie elementy są dopasowane do ekranu urządzenia. Musisz osobno dostosować zasadniczo wszystkie elementy, które masz na swojej stronie internetowej-obraz nagłówka, opis bloga, Szerokość paska nawigacji, położenie warstwy treści itp.
możliwe jest ukrycie niektórych z nich, na przykład suwaków lub obrazów nagłówka. W ten sposób wygląd twojej strony w wersji mobilnej będzie zoptymalizowany i przyjazny dla użytkownika.
należy użyć następującego kodu (np. dla nagłówka):
# branding img {
display:none;
}
jeśli chcesz zmienić rozmiar elementu (obraz nagłówka w przykładzie), użyj
#branding img {
width:100%
}
Uwaga: Edycja stylu.plik css wymaga również wiedzy na temat tworzenia stron internetowych. Nie zapomnij wykonać kopii zapasowej pliku przed jego zmianą.
gdy wszystkie części twojej strony zostaną odpowiednio dostosowane, powinna mieć ładny wygląd na urządzeniach mobilnych:
Większość motywów WordPress jest tworzona tak, aby były responsywne – podczas instalowania nowego motywu możesz dodatkowo sprawdzić jego dołączony wygląd na urządzeniach mobilnych.
jeśli ich nie ma i nie jesteś pewien, czy motyw, który Ci się podobał, jest responsywny, czy nie, możesz go zdefiniować w filtrach funkcji podczas wyszukiwania motywu.
1. Zaloguj się do panelu administracyjnego WordPress (yourdomain.com/wp-admin), przejdź do menu Wygląd, kliknij motywy.
2. Kliknij Dodaj Nowy:
3. Kliknij filtr funkcji i sprawdź układ responsywny. W razie potrzeby sprawdź inne opcje, aby znaleźć żądany motyw.
4. Kliknij Zastosuj filtry:
za kilka chwil zobaczysz listę tematów, które odpowiadają ustawionym funkcjom wyszukiwania.
dynamiczne witryny internetowe
Alternatywnie, możesz skonfigurować różne CSS i zawartość, które mają być pobierane w zależności od typu urządzenia. Można to osiągnąć za pomocą wtyczek WordPress. Większość z nich ma kilka podstawowych ustawień dostępnych za darmo.
jako przykład użyjemy jednej z najpopularniejszych wtyczek do projektowania blogów przyjaznych dla urządzeń mobilnych-WPtouch Mobile Plugin.
najpierw musisz go zainstalować i aktywować na pulpicie administratora.
po zakończeniu należy wybrać motyw dla wersji mobilnej strony internetowej – przejdź do menu WPtouch, kliknij motywy & Rozszerzenia (1). Wybierz żądany motyw i kliknij Setup (2):
po zakończeniu konfiguracji będziesz mógł wprowadzić niezbędne zmiany i poprawki. Opcje wtyczki pozwalają na wykonywanie dość wielu działań, a większość z nich jest oczywista.
oto jak wygląda menu Wtyczki mobilnej WPtouch:
po zakończeniu wszystkich dostosowań Zapisz zmiany i sprawdź, jak witryna jest wyświetlana na komputerze i urządzeniu mobilnym:
tworzenie oddzielnych adresów URL dla Komputerów Stacjonarnych i urządzeń mobilnych
ostatni sposób jest najbardziej czasochłonny, ponieważ trzeba będzie:
1. Utwórz odpowiednią subdomenę dla swojej wersji mobilnej, na przykład m.nctest.info.
2. rozwijaj lub Kopiuj zawartość witryny do utworzonej ścieżki katalogu subdomen.
3. Zainstaluj i skonfiguruj wtyczkę przekierowania mobilnego.
notka: Jeśli korzystasz z tej opcji, pamiętaj, że dwie wersje Twojej witryny nie zostaną automatycznie zsynchronizowane, ponieważ technicznie są to różne instalacje. Wszelkie wprowadzone zmiany będą musiały zostać zreplikowane dla innej wersji.
po utworzeniu subdomeny i dostosowaniu strony internetowej Zainstaluj wtyczkę w głównym panelu administracyjnym witryny.
jako przykład użyjemy wtyczki przekierowania strony mobilnej.
1. Przejdź do menu ustawień i kliknij przekierowanie witryny mobilnej.
2. Wstaw mobilny adres URL, który chcesz mieć. W razie potrzeby sprawdź dodatkowe opcje.
3. Kliknij Aktualizuj Ustawienia: 
uwaga: nie zapewniamy usług debugowania kodu i tworzenia stron internetowych. Ten artykuł jest dostarczany jako kwestia uprzejmości tylko dla Twojej wygody.Jeśli napotkasz jakiekolwiek problemy z mobilną wersją witryny, zalecamy skorzystanie z forów pomocy technicznej lub skontaktowanie się z twórcą witryny.
to jest to!