Home » Optimasi Wordpress » Membuat WordPress Versi Mobile Dengan W3 Total Cache

Membuat WordPress Versi Mobile Dengan W3 Total Cache

3 Mar. 201254 comments
Membuat WordPress Versi Mobile Dengan W3 Total Cache

Wordpress versi mobileCara 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 , 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.

Membuat wordpress mobile dengan W3 Total Cache
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.

User Agents Group

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.

Mudah-mudahan artikel tentang Membuat WordPress Versi Mobile Dengan W3 Total Cache ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Saatnya Pindah Hosting
  2. Cara Membatasi Jumlah Karakter Komentar
  3. Cara Mempercepat Loading Blog WordPress (Minimize SQL Queries)
  4. Mempercepat Loading WordPress dengan Zlib Compression
  5. Cara Mencegah atau Menghalau Spambot
  6. Cara Menggabungkan File CSS WordPress
  7. Cara Mencegah Copy Paste Dengan CSS
  8. Cara Mendisable Akses Directory WordPress
  9. Cara Setting Permalink WordPress Untuk SEO, Performa dan Usability
  10. Cara Menyembunyikan Versi WordPress
  1. Budi
    3-3-2012 at 15:25 | #1

    Mas ajarin setting w3 total cachenya supaya blognya bisa fast loading kayak blog ini. Speednya keren sampe gak kelihatan mata


    Ntar deh saya buatin, tapi sebenarnya gak jauh beda cara settingnya dg yg sudah banyak beredar di Google, dan speed blog ini tidak hanya karena faktor w3 total cache, tapi ada komponent2 lain yg perlu dioptimasi biar loadingnya ngebut

    Reply

  2. 3-3-2012 at 16:57 | #2

    mau nyoba tapi masih bingung neh mas., klo dicoba dilocalhost jalan ga ya mas.,?


    Bisa dicoba di lokal host, terus ngetest-nya pakai Opera Mobile Emulator yg harus didownload di komputer atau bisa pakai Firefox kemudian install adds-on User Agent Switcher

    Reply

    djawa Reply:

    ok tar cobain dulu., tapi localhostnya gi sakit neh mas., ko jadi kudu konect internet localhostnya., knp ya.,?

    Reply

  3. 3-3-2012 at 17:22 | #3

    Saya kurang begitu paham, padahal pingin membuat versi mobilenya.

    Btw. bagusan mana mas plugin buat versi mobile ini?

    Reply

  4. 3-3-2012 at 17:30 | #4

    Kalo saya lebih prefer ke mobilepress…

    Reply

  5. 4-3-2012 at 03:10 | #5

    Gan… kalo nampilin meta description untuk mobile gimana yah..??

    Reply

  6. 5-3-2012 at 17:41 | #6

    Ajib nih mas, trepik ane masih ngadat nih.. pengen juga rajin2 update ngejar trepik, suwun mas,,,

    Reply

  7. 5-3-2012 at 21:10 | #7

    Selalu ada pelajaran baru di Blog Bang Alwi… hix hix hix… boleh dicoba nich…

    Reply

  8. 5-3-2012 at 22:52 | #8

    Tak melu nyoba mas Alwi. Mas Alwi kat mbiyen tambah pinter neh. Aku ngiri :D

    Reply

  9. 6-3-2012 at 00:01 | #9

    hemmm tapi saya sudah terlanjur menerapkan responsive pada template saya, hehehe.. tapi mantab banget bang Alwi

    Reply

  10. 6-3-2012 at 22:56 | #10

    owh, jadi sudah support untuk semua jenis ponsel ya mas? :D

    Reply

Comment pages
1 2 3 5 2618
5+6=? (Wajib diisi)