Membuat WordPress Versi Mobile Dengan W3 Total Cache

Cara membuat wordpress versi mobile bisa dilakukan dengan menggunakan beberapa cara di antaranya bisa  menggunakan layanan seperti mofuse, menggunakan plugin khusus tampilan versi mobile seperti Mobilepress, Carrington Mobile, WPtouch dan lain-lain, atau bisa juga tanpa menggunakan plugin yakni dengan membuat tampilan blog wordpress menjadi responsive (responsive web design) di mana tampilan sebuah blog atau website akan menyesuaikan dengan ukuran layar/screen dari perangkat yang digunakan khususnya perangkat mobile. Teknik ini biasanya menggunakan media queries, dengan bantuan javascript atau tanpa javascript.

Untuk blog ini tampilan versi mobilenya menggunakan theme khusus versi mobile tapi masih menggunakan bantuan plugin W3 Total Cache yang kebetulan masih saya gunakan di blog ini. Di dalam plugin W3 Total Cache ada fitur yang namanya “User Agent Groups” yang bisa kita manfaatkan untuk meredirect tampilan blog ke versi mobile.

Kenapa saya memilih menggunakan cara ini? (menggunakan 2 buah theme khusus versi desktop dan versi mobile), karena di blog ini saya pasang Google Adsense untuk 2 versi, yaitu Google Adsense untuk konten (versi desktop) dan Google Adsense untuk konten seluler (Google Adsense versi mobile) supaya iklannya bisa tampil di semua jenis seluler dari yang paling canggih sampai yang paling jadul/kuno. Dan hasilnya cukup “ajib”, iklan Google Adsense untuk konten seluler bisa tampil 2 ribu kali tayang perharinya, kliknya juga cukup “ajib”. Baca lebih lanjut tentang Cara Mengoptimalkan Adsense Seluler (Adsense Mobile).

Cara Membuat WordPress Versi Mobile Dengan W3 Total Cache

1. Siapkan theme khusus versi mobile. Jika tidak mau ribet dan repot kita bisa mendownload plugin khusus untuk menampilkan wordpress versi mobile, kemudian kita ambil khusus bagian folder theme-nya. Jika ada yang berminat silahkan gunakan theme yang saya ambil dari plugin Mobilepress, theme ini sudah siap digunakan dan sudah sedikit saya modifikasi karena ada beberapa script yang menyebabkan error jika langsung diambil dari plugin tersebut. Download di sini.

2. Upload file hasil download tersebut ke folder wp-content/theme dan ekstrak, atau ekstrak di komputer lokal dan upload (lewat FTP) folder "mobile" beserta isinya ke folder wp-content/theme yang ada di server hosting.

3. Buka halaman W3 Total Cache yang ada di dahboard, buka/klik bagian “User Agent Groups”. Di sana secara default, settingan User Agent Group ini ada 2 yaitu ‘high’ dan ‘low’ tapi saya hanya menggunakan yang ‘high’ sedangkan yang ‘low’ tidak saya gunakan. Jika tidak ada settingan seperti itu kita bisa membuatnya dengan klik tombol Create a group, pada kotak yang tersedia kita isi dengan tulisan ‘high’ (tanpa tanda petik), kemudian klik ok. Jika group ‘high’ sudah ada maka langsung ke langkah berikutnya.

4. Beri ceklist pada bagian Enabled, pada bagian Theme : pilih “mobile” (nama theme). Di kotak daftar user agents bisa kita masukkan daftar user agent mana saja yang nantinya akan menampilkan blog kita dalam versi mobile jika diakses dari perangkat tersebut.

Contoh, berikut ini daftar user agent yang saya gunakan di blog ini :

2.0 mmp
240×320
2\.0\ mmp
\bppc\b
acer\ s100
alcatel
amoi
android
archos5
aspen
asus
au-mic
au\-mic
audiovox
avantgo
bada
benq
bird
blackberry
blackberry 9780
blackberry 9800
blackberry7100i
blackberry7130e
blackberry7230
blackberry7250
blackberry7730
blackberry8330
blackberry8703e
blackberry8820
blackberry9000
blackberry9500
blackberry9520
blackberry9530
blackberry9550
blackberry9630
blackberry9650
blackberry9700
blazer
cdm
cellphone
cricket-a200
cupcake
danger
ddipocket
docomo
docomo\ ht\-03a
dopod
dream
elaine/3.0
elaine/3\.0
ericsson
eudoraweb
fly
froyo
googlebot-mobile
haier
hiptop
hp.ipaq
hp\.ipaq
htc
htc-p4600
htc-st7377
htc\ hero
htc\ magic
htc_dream
htc_hd2_t8585
htc_magic
htc_p3650
htc_touch_pro2_t7373
htc_touch_pro_t7272
htcp3300
huawei
i-mobile
i\-mobile
iemobile
incognito
ipad
iphone
ipod
j-phone
j\-phone
kddi
kindle
konka
kwc
kyocera/wx310k
lenovo
lg
lg-ct810
lg/u990
lg\-gw620
lge-mx380
lge\ vx
liquid\ build
maemo
midp
midp-2.0
midp\-2\.0
mmef20
mmp
mobilephone
mot-a-1c
mot-cool0
mot-e398
mot-l6
mot-v
mot-v3
mot-v3i
mot-v3r
mot-v600
mot-v620
mot-v9mm
mot\-mb200
mot\-mb300
mot\-v
motorola
netfront
newgen
newt
nexus\ one
nintendo wii
nintendo\ ds
nintendo\ wii
nitro
nokia
nokia6650d
novarra
o2
openweb
opera mini
opera.mobi
opera\ mini
opera\ mobi
opera\.mobi
palm
panasonic
pantech
pdxgw
pg
philips
phone
playstation portable
playstation\ portable
polaris
portalmmm
ppc
proxinet
psp
pt
qtek
s8000
sagem
samsung
samsung-sgh-a737
samsung-sgh-a867
samsung-sphm800
samsung\-s8000
sanyo
sch
sec
sendo
series60.*webkit
series60/5\.0
sgh
sharp
sharp-tq-gx10
sharp\-tq\-gx10
small
smartphone
softbank
sonyericsson
sonyericssone10
sonyericssonk800i
sonyericssonu20
sonyericssonw595
sonyericssonx10
sph
symbian
symbian os
symbian\ os
t\-mobile\ mytouch\ 3g
t\-mobile\ opal
tattoo
toshiba
treo
ts21i-10
ts21i\-10
up.browser
up.link
up\.browser
up\.link
uts
vertu
vodafone
wap
webmate
webos
willcome
windows.ce
windows\ ce
winwap
xda
zte

5. Terakhir klik tombol “Save all settings”, jangan lupa bersihkan terlebih dahulu semua cache yang dihasilkan oleh plugin W3 Total Cache dengan cara klik Performance » Empty All Caches.

6. Jika kebetulan menggunakan theme yang diambil dari plugin Mobilepress, tambahkan kode berikut ini ke dalam file robots.txt (untuk mencegah munculnya duplikat konten di bagian komentar) :

User-agent: Googlebot
Disallow: /*.php$
Disallow: /*.js$
Disallow: /*.inc$
Disallow: /*.css$
Disallow: /*?
Disallow: /*?comments=true$
Disallow: /*?postcomment=true$

Atau cukup hanya menambahkan kode berikut ini jika User-agent: Googlebot sudah ada di dalam file robots.txt :

Disallow: /*?
Disallow: /*?comments=true$
Disallow: /*?postcomment=true$

Sekarang coba buka blog dari perangkat mobile misalkan menggunakan Opera Mini atau bisa menggunakan Opera Mini Simulator.

Dengan cara ini saya bisa mengurangi jumlah pemakaian plugin, khususnya untuk tampilan versi mobile. Berikutnya, jika sedikit menguasai PHP, CSS atau Javascript anda bisa mengoptimasi wordpress versi mobile ini supaya benar-benar lebih “powerfull” dan lebih ngacir larinya atau bisa merombak menu navigasi, tampilan dll agar lebih user friendly, atau jika mau dipakai untuk monetisasi blog bisa juga kita oprek dalemannya supaya lebih “ajib” SEO-nya agar pundi-pundi dollarnya juga akan lebih cepat mengalir.

Cara Membuat WordPress Versi Mobile Dengan W3 Total Cache | Berikut ini tutorial cara membuat blog wordpress versi mobile dengan bantuan plugin W3 Total Cache dengan cara meredirect tampilan blog ke versi mobile dengan theme khusus mobile | Reviewed by: Alwi on 03/03/2012 Rating : 5