Beranda WordPress Cara Membuat Website/ Blog WordPress Versi Mobile Dengan WPTouch Pro

Cara Membuat Website/ Blog WordPress Versi Mobile Dengan WPTouch Pro

Cara Membuat-Website-Blog-WordPress-Versi Mobile

Kita tahu bahwa pengguna smartphone di Indonesia semakin meningkat, dan jumlah peningkatan ini terlihat sangat signifikan. Kemudahan dalam mengakses internet melalui ponsel pintar membuat kebanyakan orang tertarik untuk memiliki perangkat mobile tersebut. Tidak hanya untuk mengakses media sosial dan email, pengguna smartphone juga sering membuka konten dari halaman website/ blog untuk membaca informasi yang ada di sana. Nah, bagi pemilik website/ blog wordpress, Anda harus menyediakan versi mobile untuk situs Anda.

Website maxmanroe.com saat ini menggunakan Plugin WP Touch Pro 3 untuk membuat versi mobile nya. Plugin ini saya beli dari situs www.bravenewcode.com dengan harga $49 untuk single license. Sebenarnya plugin ini tersedia dalam versi gratis yaitu WP Touch yang bisa kita download dari Dashboar WP Admin masing-masing, dan saya pernah menggunakan versi gratisnya selama beberapa bulan. Namun, saya melihat banyak kelebihan versi berbayarnya, jadi saya putuskan untuk membeli versi tersebut. Bagi Anda yang ingin versi gratis nya, silahkan download di SINI. Jika Anda ingin menggunakan versi berbayar silahkan lihat informasinya di SINI.

Di artikel ini saya akan menjelaskan cara saya membuat website/ blog WordPress versi mobile dengan menggunakan WPTouch Pro.

Artikel lain: Mengapa blog saya menggunakan WordPress?

1. Proses Install Plugin WP Touch Pro

Setelah melakukan proses order dan membayar, plugin tersebut akan dikirimkan oleh developer nya ke email Anda dengan mengirimkan link download. File yang Anda terima akan berbentuk zip. Setelah berhasil di download, langkah selanjutnya adalah menginstal ke WordPress Anda melalui halaman dashboard WP Anda, lalu upload plugin WP Touch Pro.

2. Setting Plugin WP Touch Pro

Setelah plugin tersebut berhasil diinstal dan diaktivasi, langkah selanjutnya adalah membuat settingan website/ blog versi mobile Anda. Di sebelah kiri halaman dashboard WordPress kita akan melihat link untuk masuk ke halaman WP Touch, silahkan klik link itu.

A. Pengaturan Inti

Pada halaman ini kita bisa membuat beberapa pengaturan inti, diantaranya memasukkan judul situs, mengatur regionalisasi untuk bahasa, mengatur mode tampilan, dan beberapa pengaturan lainnya. Anda bisa mengatur sesuai dengan yang Anda inginkan.

B. Tema & Ekstensi

Di dalam halaman ini kita akan melihat beberapa pilihan themes untuk mobile site. Anda bisa memilih salah satu yang paling cocok dengan situs Anda. Maxmanroe.com menggunakan theme CMS dari WP Touch Pro untuk versi mobile nya. Pada halaman ekstensi kita bisa melihat beberapa fitur tambahan dari WP Touch Pro, seperti Infinity Cache untuk membantu mempercepat load website, Responsive images untuk meningkatkan kualitas gambar pada mobile site, dan Mobile content. Sayangnya saya tidak bisa menggunakan fitur ini karena harus meningkatkan lisensi WPTouch Pro milik saya. Klik tombol “Simpan Perubahan” untuk menyimpan hasil setingan Anda.

C. Pengaturan CMS (Theme CMS)

Di halaman ini kita bisa mengatur banyak hal seperti, mengatur jumlah konten yang tampil di homepage, mengatur jumlah link artikel terkait pada single post, mengatur slide, mengatur warna theme dan halaman situs, memasukkan logo website kita, menambahkan link media sosial, menambahkan script atau kode iklan, dan pengaturan lainnya. Proses pengaturannya sangat mudah, kita tidak harus mengerti kode html yang rumit. Klik tombol “Simpan Perubahan” untuk menyimpan hasil setingan Anda.

D. Pengaturan Menu

Pada halaman ini kita bisa mengatur tampilan menu dan pages sesuai yang kita harapkan. Pada theme yang saya gunakan (CMS), ada 2 pilihan menu, yaitu menu utama dan menu alternatif. Kita bisa mengatur halaman mana yang masuk dalam tiap menu, saya memilih pages untuk menu alternatif dan category untuk menu utama. Klik tombol “Simpan Perubahan” untuk menyimpan hasil setingan Anda.

Di bawah ini adalah tampilan maxmanroe.com di Smartphone Android saya.

1. Halaman Homepage

2. Halaman Artikel

Apa Kelebihan WP Touch Pro dengan Versi Gratis?

Pada dasarnya pengaturan WPTouch Pro hampir sama dengan yang versi gratis, tapi versi berbayar memiliki beberapa kelebihan seperti;

  • Pilihan themes lebih banyak dengan tampilan lebih menarik
  • Kita bisa membuat pengaturan yang lebih mendalam dan sesuai dengan keinginan kita
  • Bisa ditambahkan iklan Adsense atau iklan mobile lainnya
  • Dan beberapa kelebihan lainnya

Bagi Anda yang belum siap membeli versi berbayar bisa mencoba versi gratisnya terlebih dahulu untuk membantu para pengunjung yang mengakses website/ blog Anda dari smartphone. Situs yang tidak punya versi mobile akan lebih sulit diakses dari smartphone, selain itu tampilan full site akan terlihat kecil di smartphone. Jika Anda serius ingin membangun sebuah situs untuk bisnis, saya sangat menyarankan Anda untuk membuat versi mobile-nya karena kedepannya akan semakin banyak pengunjung situs Anda dari smartphone.

Baca juga: Plugins related posts terbaik untuk situs WordPress

Berikut adalah video tutorial dan review untuk WPTouch Pro.

78 KOMENTAR

  1. Bang saya mau tanya nih…

    Kalau pake plugin wptouchpro apa ada kaitan penurunan hasil adsense…., soalnya saya pake yg free dan setelah seminggu pake anjlok tuh earning

    Makasih sebelumnya

  2. Mas mau nanya klau buat toolbar kyk di dunia21.com itu gmna ya ?

  3. Suka baca2 di web maxmanroe, tp gmn caranya min memperbagus web seperti milik admin ya, tlg bantuannya min, ( msh awam/ pemula )

  4. Berita Hari Ini

    Halo min, saya mau nanya untuk versi free bagaimana caranya memasangan google analytics-nya? apa emank sudah terpasang otomatis atau gimana? bisa juuga gak ya memasang iklan pada versi free nya? terimakasih.

  5. saya kebetulan mencari referensi untuk permasalahan mobile website saya. terima kasih mas

    • Kenapa pak dengan websitenya. Saya lihat website versi mobile Goukm.id bagus kog, loadingnya pun cepat.

  6. Izin share membuat blog wordpress versi mobile dengan WPtouch free Mas :)

    Salam,
    Nur Kholis

  7. Saya pakai template premium sudah mobile frandly. Saya tes via smarphone, Hompage sudah oke. Tapi, ketika baca artikel postingan, artikel jadi menyempit dan narkahnya hanya di pinggir saja. Kalau sy instal plugin WP Touch Pro, berpengaruh apa nggak ya ? Terimakasih mas, betah saya tinggal di webste inii

    • Kalau pakai WP Touch Pro, nanti tampilannya bisa disesuaikan dengan template yang ada di WP Touch Pro. Selain itu, cache website juga perlu diperhatikan. Untuk website WordPresss yang theme nya tidak mobile friendly dan memakai WP Touch Pro, terkadang menampilkan theme lama. Ini biasanya karena cache di hosting.

  8. Sebelumnya saya dapat refrensi Untuk Membuat Website Versi Mobile dari beberapa blog, Namun setelah saya coba install dan aktifasi Plugin, seperti Wp Mobile Detector, WP Mobile Edition hasilnya masih kurang memuaskan.

    Berusaha cari informasi yang bisa membuat hati ini merasa sreg (kecocokan), akhirnya dapat di Maxmanroe..
    Awalnya saya baru baca judul yang sudah tertera nama Plugin nya.. Tanpa basa basi lagi langsung saya terapkan di WordPress :D, dan hasilnya cukup memuaskan daripada ke 2 Plugin yang saya sebutkan sebelumnya.
    Thanks Mas Marikxon.

    Salam,
    Nur Kholis

    • Lebih bagus lagi versi Premium nya pak. Selain pilihan themes nya lebih banyak, versi premium ada fitur tambahan seperti Infinity Cache, Multi Ads, dan lain-lain. Tapi kembali lagi ke Theme bawaan ya, kalau theme awalnya sudah mobile friendly, saya pikir tidak perlu lagi pakai plugin ini.

      • Kalau yang Pro dah pasti lebih bagus :D
        Nah saya mau tanya mas, di blog saya kan sudah terpasang plugin wp touch.. Caranya bisa munculin iklan di tampilan versi mobilenya bagaimana ya Mas?

        Salam,
        Nur kholis.

  9. Ini page icon saya jadinya ada 2 yang satu saya pake plugin
    Yang satu lagi saya ga paham gimana cara ngilangin nya

    zunz.byethost6.com

    Coba di liat mas

  10. Mas saya mau nanya untuk ganti icon itu gimana ya di wordpress,,newbie soale saya hehe

    • Tergantung masing-masing theme nya mas, ada yang bisa diedit langsung dari fitur theme nya, tapi ada juga yang menggunakan plugins. Pelajari dulu theme nya, nanti pasti ketemu cara ganti icon/ favicon

  11. betah om aku baca artickle nya ,., apalagi worpress ,, bikin artickle terus ya om,, ak tongkrongin teruss membantu banget dehh , salam

  12. Mas, mohon bantuannya, saya kesulitan untuk setting wptouch pro,
    Bagaimana cara nya setting supaya tombol sharing social media yang di atas arikel mengecil ya mas ?
    dan bagimana cara nya hilangin tulisan yang di fotter “didukung oleh” itu ya mas ?
    mohon pencerahannya mas, atau kalo mas maxmanroe berkenan ngecek di web saya dutaserviceac.com.
    Terima kasih sebelumnya mas.

  13. Mas Marikxon, saya ingin membeli plugin Wptoch yang Pro, tapi sayang saya tidak punya akun paypal nya mas. Apa mas Marikxon bersedia membantu saya membelikan, dan nanti saya beli ke Mas Marikxon ?
    mohon bantuan nya mas.
    terima kasih

  14. missal kalau themes udah responsive apa kah,, masih perlu kita menggunakan plugin WP-touch ? apakah berpengaruh di seo nya …

  15. Oktaviani Putri

    mas maxmanroe masih make plugin ini ga?

  16. Emang keren nih plugin dibandingkan dengan plugin2 sejenis….

  17. blog ya keren um,
    – cara bikin tombol “lihat gambar” itu bagaimana ya um ? keren sangat um,
    – https:// atau ssl dari cloudflare ya itu yg premium bukan um ? sangat cepat sekali akses website ini, terima kasih um.

  18. untuk wp gratis apa ada versi mobile friendlynya? kalau ada bagaimana caranya mas? mohon infonya mas buat opimasi blog usaha saya

  19. Mas mau tanya tentang hosting…kira-kira hosting yang bagus dan murah itu apa ya.oh ya mas pakai hosting apa dan yang versia apa.maaf ya mas

  20. mas, klo mengubah meta description versi mobile itu bagaimana ya?..

    • Saya tidak pernah mengubah meta description untuk mobile, buat apa diubah-ubah ya?

  21. Ane pakai wp touch yg free, untuk versi mobile nya berjalan tp ko ane coba dr smartpone saya untuk tes ting ke versi destrop ko jadi eror 404, apa ada yg harus saya setting lg mas ? Trimah kasih

  22. Mas kalo plugins Nya udah di install,untuk menampilkan ke halaman utama gimana?..yang saya tau kita tetap menggunakan themes dari wordpress.

    • Kalau plugin udah diinstal ya diaktivasi. Nanti akan terlihat perubahannya ketika kita buka via smartphone. Settingan nya bisa kita atur sendiri sesuai keinginan kita.

  23. Mas…sekarang harganya udah lumayan ya tempat jualnya langsung hehe…barangkali bisa di bagi ke ane dengan harga diskon dari mas hehe..

    • Saya lihat website mas sudah ada versi mobile nya, tidak perlu lagi dari saya :)

  24. saya juga membaca dari blog lain bahwa jetpack juga bisa membuat wordpress lebih mobile friendly… Btw kira-kira bagusan mana mas pake wptouch pro atau jetpack???

    • Saya belum pernah pakai plugin jetpack, jadi saya tidak bisa membandingkan antara WP Touch Pro dengan Jetpack.

  25. Pake wordpress enaknya bisa di dukung banyak plugin, kalo blogspot bagaimana ya mas ? koq cuma itu itu aja :/

  26. Mas mau nanya nie, saya kan pake wordpress udah responsive tp kalu buka di hp agak lamat, yang perlu saya benerin di mananya yah agar loading di hpn] lebih kenceng?
    Terimakasih sebelumnyamas.

  27. masbro… Klo theme (Free) utk WordPress yg recommended dr om Max apa ya? Saya barusan install plugin WPtouch juga.

  28. Mas, kalau versi gratisnya bagus juga gaK?
    web saya sebenarnya sudah responsif, tapi tampilan mobilenya lemot banget,,

    jika pake plugin ini, nanti membuka webnya seperti ini ya
    m.namaweb.com ?

    thanks

    • Versi gratisnya (WP Touch Pro) lumayan bagus tapi tidak sebagus versi premiumnya mas. Dengan menggunakan plugin ini, URL website kita tidak akan berubah saat dibuka dari smartphone, itu alasannya kenapa saya merekomendasikan plugin ini.

      • owh.. maksudnya nanti tampilan di mobilenya seperti jika dibuka di PC ya?
        berarti sama dengan jika themenya udah responsive ya mas?
        untuk speed loadingnya apa sama nggak jika pake plugin ini dengan loading sebelumnya di tampilan responsive themenya? atau lebih cepat?

        seperti yang saya bilang diatas, web saya jika di buka di mobile lemot banget mas, padahal saya beli theme premium ke orang indo.. hiks.

        • Bukan URL nya yang sama, tapi theme-nya dan tampilannya berbeda dengan versi desktop. Kalau versi desktop dibuka di smartphone pasti lambat, nah plugin ini akan membuat versi mobile nya tanpa mengubah URL website kita.

          Kalau theme kita sudah ada versi mobile-nya, maka tidak perlu menginstal plugin ini. Theme mahal tidak selalu mobile friendly, sebelum beli harus baca deskripsinya dulu.

  29. kalo di wordpress tema point ada di pengaturan tema nya langsung gak pake perlu script ini

  30. Rental Mobil Bandung

    Mas kalo yang bawaan template, itu bakal auto ga yah jadi mobile ketika dibika di hp?

    • Kalau theme nya sudah ada versi mobile-nya, berarti tidak perlu lagi instal plugin ini. Nanti websitenya akan terbuka dalam versi mobile secara otomatis jika dibuka di smartphone.

  31. Terimakasih mas…lagi cari referensi soal mobile site yg handal…

  32. Dear mas max, setelah pasang yang pro kok visitor anjlok jauh yaaa kira-kira kenapa ya? apakah mas mengalami hal yang sama?

    • Belakangan ini baru ada update Google, mungkin karena itu mas. Sepanjang pengalaman saya menggunakan WPTouch pro belum pernah ada masalah, justru visitor dari mobile semakin meningkat.

      • Ngga update mas.. soalnya kemarin masih oke.. semalem ane pasang hari ini langsund drop 80%… hehehehe apa perlu waktu dulu yaaa didiemin dulu..

        • Harusnya tidak ada masalah kalau settingnya sudah benar. Sudah coba buka web via mobile? Bagaimana tampilannya, apakah berat atau lambat loadingnya.

          • Hmmmm apa gara2 script histats nempel di theme yg desktop ya mas max… Ngga ada di theme bawaan dr wp touch ya… Loading cepet via mobile.. :D

  33. Ma monroe kalau versi Mobile yang titik m. tuh gmana yah caranya aku belum bisa buat yang versi titik m

  34. solusi terbaik untuk agar nyaman bagi pengunjung mobile :) .. makasih om

  35. Kalau cara memasukan gambar iklan di footer seperti di web ini bagaimana caranya ya?

  36. masih mencari-cari bagiamana supaya mobile friendly…

  37. mas jika kita mengaktifkan versi mobile bukannya akan muncul duplicat title tag di webmaster tool, untuk mengatasinya gimana ya mas? soalnya saya pernah nyoba dan hasilnya duplicat title tag terlalu banyak. sehingga saya putuskan untuk menon aktifkan versi mobile di blog wordpress

    • Duplicat title tag bukan karena versi mobile nya mba Reni. Kemungkinan dari settingan yang mba buat di WordPress nya. Saya menggunakan WP touch pro sudah sekitar setahun dan tidak pernah ada alert duplicat title tag di webmaster tools. Mba Reni pakai plugins apa untuk SEO nya (WP SEO by Yoast atau All In One SEO Pack)? Kemungkinan settingan dari plugins ini, dan juga dari settingan General, coba dicek dulu mba. Thanks

  38. Saya baru memakai wptouch yg versi gretongan. Pengalaman saya, adsense tetep bisa muncul bila diletakkan di bagian atas atau bawah postingan.

  39. NumPang bookmark dulu om…

  40. Halo mas.. Sebenarnya pertanyaan saya hampir sama dengan pertanyaan (cintamela yang belum terjawab), versi gratis bisa tidak dipasangkan google adsense? dan request tutorial yg gratis dong mas. Belum cukup dana buat beli yg versi pronya. terima kasih.

    • Untuk versi gratisnya tidak ada fasilitas untuk memasukkan iklan mas. Kalau mau masukin iklan adsense di WP Touch versi gratis bisa dengan menggunakan plugins untuk inject ads… temen saya pernah pake plugin itu, maaf saya lupa nama plugin nya.

  41. septa prasetya hanafi

    Terima Kasih ,, plug in ini apakah bisa di custom agar seperti toko online versi mobile?

    • Kalau untuk toko online sepertinya ga bisa deh, karena theme toko online biasanya ada fitur khusus yang tidak didukung oleh plugin ini. WP Touch pro cocoknya untuk blog atau portal berita.

  42. Terimakasih om max !
    Sangat membantu sekali .

  43. tutorial untuk website selain wordpress bagaimana gan?

  44. kalau dalam bentuk PHP codingnya gaimana caranya yahhh,,, supaya web kita menjadi friendly di mobile browser…

    • Wah itu ilmu tingkat tinggi mas, saya ga bisa buat coding seperti itu, maaf ya :)

  45. Damar Pramudito Nurjati

    Sepertinya plugin ini hanya berlaku di smartphone saja seperti iPhone dan Android, namun tidak pada perangkat mobile lainnya. Saya mencoba mengakses blog agan melalui berbagai perangkat dan hanya bekerja maksimal pada perangkat smartphone

    • Untuk tablet memang masih menampilkan versi desktop, developernya membuat plugin ini memang khusus untuk smartphone.

  46. mas, untuk wp touch yang gratis apa bisa dipasang adsense? terima kasih

  47. sepatu nike running

    ijin prakktek bos,…
    ilmu yang sangat bermanfaat!!!

  48. Lirik Lagu terbaru

    wah bgus ne tutorialnya, ijin mau di praktekin dulu mas :)

  49. kelebihannya apa WP Touch Pro 3 yang berbayar?

  50. solusi terbaik untuk agar nyaman bagi pengunjung mobile :) .. cukup simple dan mudah .. kalau saya dulu pernah pake yang free, kalau gak salah namanya mobile smart

  51. Mantap mas informasinya..
    di bookmark dl..sy msh setia sm blogspot..:)

Tinggalkan Balasan