Blog w wersji mobilnej dla Wordpressa

Sposobów na lżejszą, mobilną wersję serwisu/bloga jest kilka. Można skorzystać z gotowych wtyczek lub załatwić to ręcznie, umieszczając w sekcji head znacznik meta z odpowiednim atrybutem. Mobilna wersja strony jest dość ważna, gdyż urządzenia mobilne posiadają mniejsze wyświetlacze o znacznie mniejszej rozdzielczości, a także pozwala na zaoszczędzenie transferu danych.

Drugi sposób doskonale opisał riklaunim na swojej stronie, dlatego skupię się jedynie na opisywaniu pierwszego sposobu, który jest znacznie prostszy, bo wymaga mniejszego obeznania w technologiach webowych, a w większości wypadków sprowadza się jedynie do zainstalowania odpowiedniej wtyczki do wordpressa.

1. WordPress Mobile Edition
Na pierwszy ogień poszła właśnie ta wtyczka. Instalacja sprowadza się do skopiowania pliku wp-mobile.php do katalogu plugins oraz katalogu carrington-mobile-[numer-wersji] (w moim przypadku carrington-mobile-1.0.2) do katalogu themes. Rozszerzenie bez problemu poradziło sobie z moim G1. Pofatygowałem się i spolszczyłem skórkę, którą możecie ściągnąć z tego miejsca, a wygląda to następująco:

2. WordPress Mobile Pack
Drugą wtyczką, którą miałem okazję wypróbować było WordPress Mobile Pack. Jest to już kombajn, który pozwala także na ustawienie sposobu, w który będzie się włączać mobilna wersja: wykrywanie przeglądarki, osobna (sub)domena lub obie metody jednocześnie. Uradowany tym faktem postanowiłem sprawdzić jak to działa w praktyce. Niestety “sposób na subdomenę” nie zadziałał, dlatego postanowiłem to osiągnąć w inny sposób, a mianowicie; dodałem u swojego hostingodawcy subdomenę ‘m’ (m.czepol.info). Później zainstalowałem i aktywowałem wtyczkę Theme Switcher. Następnie w głównym katalogu subdomeny umieściłem plik index.php o następującej zawartości:

< ?php 
header( 'Location: http://czepol.info/index.php?wptheme=WordPress+Mobile+(base)');
?>

Przy czym po /?index.php?wptheme= należy wstawić urlencode od nazwy naszej mobilnej skórki, w moim przypadku:

Nazwę skórki znajdziesz w katalogu skórki, w pliku style.css, który przykładowo wygląda to tak:

/*
Theme Name: WordPress Mobile (base)
Theme URI: http://wordpress.org/extend/plugins/wordpress-mobile-pack/
Description: The base theme of the WordPress Mobile Pack. It is designed to be used by mobile browsers - but also to be extended by other themes. Tested with WordPress 2.5, 2.6 and 2.7.
Version: 1.1.3
Author: Jerome Ribot, ribot
Author URI: http://ribot.co.uk
*/

Urlencode zamieni nazwę skórki na łańcuch znaków, zamieniając wszystkie spacje na znaki ‘+’. Po tych zabiegach, wpisując w przeglądarkę adres http://m.czepol.info zostaniemy przekierowani na stronę główną bloga, lecz w wersji mobilnej. Przydałaby się też możliwość powrotu na wersję zwykłą, najwygodniej będzie zrobić link w stopce wersji mobilnej:

Znajdujesz się w wersji mobilnej strony. <a href="http://czepol.info/index.php?wptheme=&lt;?php echo(urlencode(get_current_theme())); ?&gt;">Kliknij tutaj</a>, aby powrócić do normalnej wersji.

Ściągnij spolszczoną wersję wtyczek
Po tym zabiegu możemy się już cieszyć z możliwości przełączania się między mobilną a zwykłą wersją strony. Do wtyczki dołączone są 4 motywy, które wyglądają następująco:

Podsumowanie

Mimo, że początkowo chciałem sprawdzić i przedstawić tutaj dużą liczbę wtyczek do tworzenia mobilnych wersji, poprzestanę na tych dwóch. Dlaczego? Pierwsza opisana wtyczka jest najprostsza do wdrożenia, druga natomiast to istny kombajn, dzięki któremu będziemy mogli dokładnie skonfigurować mobilną stronę – reszta sprowadza się do edycji mobilnej skórki.

Przydatne linki

• Emulator mobilnej przeglądarki Opera Mini
• Kolejny emulator – tym razem przeglądarki z telefonu Sony Ericsson K750 i Nokia N70
• Serwis, dzięki któremu sprawdzimy optymalizację naszej strony pod kątem przeglądarek mobilnych