Mobilny internet coraz szybciej wkracza do naszego życia, a wraz z nim pojawia się (smartfony) lub pojawi (tablety) coraz więcej urządzeń umożliwiających nam korzystanie z niego. Czas więc pomyśleć nad tym jak ułatwić czytelnikom bloga przeglądanie go na tego typu mobilnym sprzęcie.

W tym wpisie pokażę Wam, jak to zrobiłem na przykładzie swojego bloga.

Odpowiedni szablon

Na początek musimy zadbać o przygotowanie odpowiedniego szablonu bloga, takiego, aby zapewnić komfort czytania tekstów na małych ekranach smartfonów czy tabletów. Wiem, że istnieją metody, aby za pomocą CSS3 przerobić szablon, którego akurat używamy tak, żeby dopasował się do tych urządzeń, ale my tym razem pójdziemy na łatwiznę i zastosujemy jeden z wielu gotowych, darmowych szablonów dla WordPressa w wersji mobilnej. Ja skorzystałem z szablonu o “oryginalnej” nazwie WordPress Mobile Theme ;)

Dlaczego akurat ten? Przede wszystkim dlatego, że ma minimalistyczny wygląd. Internet mobilny wciąż nie jest tak szybki jak stacjonarny, dlatego trzeba zadbać o to, aby szablon bloga dla urządzeń przenośnych był pozbawiony zbędnych fajerwerków, tak, aby ładował się jak najszybciej, zużywając jak najmniej transferu. Szablon WordPress Mobile Theme właśnie taki jest. Poza tym ma jeszcze drugą zaletę – można go łatwo skonfigurować.

Opcje szablonu WordPress Mobile Theme
Opcje szablonu WordPress Mobile Theme

Po wgraniu na serwer katalogu z plikami szablonu ustawiamy go na chwilę jako domyślny, po czym przechodzimy do jego ustawień, gdzie możemy skonfigurować dowolny kolor nagłówka i linków oraz szerokość bloga w pikselach lub procentach. Jeśli np. wpiszemy 100% to blog zawsze na każdym urządzeniu będzie się wyświetlał na całej szerokości wyświetlacza. Po dokonaniu tych ustawień możemy znów aktywować właściwy szablon bloga, który wyświetla się jego czytelnikom korzystającym z internetu na komputerze.

Szablon już mamy, ale powstaje pytanie, skąd nasz blog będzie “wiedział” na jakim urządzeniu chce go obejrzeć użytkownik. Innymi słowy, jak spowodować, aby blog korzystał z innego szablonu dla komputerów i laptopów, a z innego na smartfonach i tabletach? Tak jak w przypadku przygotowania szablonu bloga, tak i tutaj metody są co najmniej dwie (przynajmniej ja tyle znam). Po pierwsze możemy uzbroić główny szablon bloga w odpowiedni kod, a po drugie, skorzystać z prostszego rozwiązania, jakim są wtyczki do WordPressa. Ja wybrałem dla siebie wtyczkę o nazwie WPtap Mobile Detector.

Wtyczka WPtap Mobile Detector

Po zainstalowaniu i włączeniu wtyczki WPtap Mobile Detector przechodzimy do jej ustawień. Wtyczka jest na tyle sprytna, że pozwala ustalić różne szablony bloga dla różnych urządzeń mobilnych. Nic nie stoi zatem na przeszkodzie, aby wykonać kilka kopii szablonu WordPress Mobile Theme nadając mu różne nazwy, a następnie ustalić w nich np. różną szerokość wyświetlania bloga (inną dla smartfonów, a inną dla tabletów, które mają większe wyświetlacze).

Opcje wtyczki WPtap Mobile Detector
Opcje wtyczki WPtap Mobile Detector

I to wszystko. Teraz nasz blog będzie wyglądał inaczej na komputerze, a inaczej na smartfonie i tablecie. Jeśli znacie inne metody przystosowania WordPressowych stron na urządzenia mobilne, podzielcie się nimi w komentarzach :)

2 komentarz(e)y na temat “Blog w wersji mobilnej dzięki WPtap Mobile Detector

  1. Bardzo ciekawy wpis. Zrobiłam u siebie to, co opisałeś wyżej, ale niestety, nie zadziałało. Próbowałam zmieniać w ustawieniach, ale nie pomogło. Wyszukałam więc inny szablon, zainstalowałam, ustawiłam widgety i zaczęłam sprawdzać: na androidzie i nokii działa jak należy. Dziękuję za pożyteczny wpis.

  2. Uff dzięki Tobie po kilku dniach spędzonych na wyszukiwaniu sposobu jak zamienić stronę na mobilną udało się :) Polecam ten sposób ponieważ nie zmienia on wyglądu strony na komputerze – Aniu dzięki też Tobie bo zrobiłam podobnie- ściągnęłam pasujący mi szablon i ustawiłam tylko na mobilne urządzenia. Pozdrawiam

Komentarze zostały wyłączone.