Page design element

Cara Mudah Menjadikan Themes Blog WordPress Responsive

Sudah dalam beberapa bulan terakhir saya tidak bisa 100% fokus untuk melakukan satu hal saat berhadapan dengan komputer. Di samping ganguan datang dari Facebook dan sebagainya, saya juga sering mencuri – curi kesempatan untuk membuat sebuah design blog yang baru. Design yang baru, buat blog saya yang terbaru.

Saya adalah orang yang selalu mengkritisi design blog saya, dan saya juga banga dengan design karya sendiri. Jadi ya rasanya belum bisa tidur nyenyak dan fokus menulis kalau belum tercipta sebuah design yang bagus. Dan beberapa pekan yang lalu saya membaca sebuah artikel tentang 7 WordPress Theme Framework gratis bagi developer di wpmudev dan mendownload beberapa framework yang ada di sana.

Berikut adalah sedikit pandangan tentang framework yang sudah saya coba sebelum kita berlanjut ke materi utama mengedit themes agar jadi responsive.

Buat kamu yang belum tahu apa itu responsive design, terlalu! Responsive design, menurut saya adalah tampilan design blog yang kontennya menyesuaikan gadget yang digunakan untuk melihat sebuah design blog. Biasanya penyesuaiannya adalah dengan menjadikan lebar design otomatis menyesuaikan lebar layar ganget, baik dengan memperkecil atau memindah sebuah layout (sidebar misalnya) ke tempat lain.

WordPress Themes Framework Trial

OK langsung saja, inilah WordPress Themes Framework yang sebenarnya sudah pernah dengar sebelumnya, namun baru kemarin mencoba lihat lagi.

1. Gantry WordPress Theme Framework

Salah satu WordPress themes framework yang menarik adalah Gantry. Karena didesign oleh developer yang sudah tidak diragukan lagi, selain bekerja untuk WordPress, Gantry juga bisa dipakai pada CMS Joomla. Tampilannya designnya responsive, semua tampilan diluar bisa dikontrol dari panel yang ada di dalam.

Yang tidak saya sukai dari Themes Framework besar seperti ini adalah panel setting yang jumlahnya terlalu banyak maka saya bingung untuk mengunakannya. Mengunakan panelnya saja bingung, apalagi hacking codenya 😛 Disamping source code yang dihasilkan juga terlihat terlalu crowded menurut saya.

2. Whiteboard WordPress Theme Framework

Whiteboard menawarkan sebuah themes dengan berbagai function tambahan  yang sangat membantu blogger, salah satunya adalah menambahkan link komentar pada user yang melihat tulisan kita di RSS feed yang meningkatkan interaksi dalam komunitas blog kita. Ada juga pengamanan dengan menghapus versi wordpress di <head> tag blog dan menghilangkan detil kesalahan saat gagal login.

Saya sempat mulai hangat dalam mengedit themes ini, melakukan beberapa editing dengan perubahan pangilan style dan js dari function.php juga. Namun ketika saya merubah lessframework yang digunakan ke versi 4, semua design elemen kacau, dan dokumentasi yang minim saya balik kanan.

3. Underscores Theme

Underscores adalah themes karya tim Automattic, pihak yang menggembangkan WordPress, dalam upaya membuat design baru tadi, saya sudah menggunakan themes ini. Namun selama ini juga tidak kunjung jadi sebuah design yang benar – benar saya inginkan.

Progress saya kemarin adalah membuat themes ini responsive terlebih dahulu. Caranya adalah dengan mengambil media query dari lessframework whiteboard.  Detilnya nanti saya sampaikan.

4. Komentar tentang Themes Framework Lainnya

Themes framework lainnya tidak saya coba kemarin karena beberapa alasan. Bones, harus belajar LESS dulu agar benar – benar efektif dalam prosesnya. HTML5Reset, terlalu lama sudah tidak diupdate, sekitar 2 tahun. Hybrid, Saya suka, dan SEO themes ini memang bagus, tapi pengalaman saya menggunakannya di sevenroots.com membuat saya tidak menyentuhnya dulu. Ashford, Saya tidak suka saja.

Cara Menjadikan Themes Blog Responsive

Sekarang kita ke pokok pembahasan, caranya nanti adalah dengan mengunakan media query (penerapan styling berbeda pada layar user yang berbeda) dengan lessframework pada Underscores Theme. Adapun langkahnya adalah sebagai berikut.

1. Kenali Source Code

Semua yang mau membuat custom themes wajib tahu source codenya, caranya bisa dengan mengunakan inspect element bawaan Google Chrome, klik kanan -> inspect element atau tekan F12. Kalau dengan Firefox saya sarankan menggunakan Firebug. Contoh tampilannya nanti seperti ini:

Themes Source Code

Perhatikan pada bagian yang saya beri kotak, ada beberapa div disana, dengan class hfeed, site-header, site-main, content-area, widget-area dan site-footer. Markup diatas secara default memiliki styling degan hasil seperti ini;

WordPress Themes Blog Responsive - Page design element2. Ambil Less Framework

Setelah punya gambaran source code mana yuang menghasilkan elemen apa, maka sekarang kita ambil Less Framework. Berikut adalah media query yang perlu kita perhatikan.

@media only screen and (min-width: 768px) and (max-width: 991px) {

}
@media only screen and (max-width: 767px) {

}
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

3. Rubah Blog jadi Responsive

Setiap @media diatas mengatur tampilan elemen pada range lebar device masing masing. @media pertama untuk tablet, @media kedua untuk mobile, dan @media ketiga untuk mobile dengan layar yang lebih lebar. Kita nantinya akan memasukkan class yang sudah disebut diatas dalam setap  @media sehingga mungkin akan jadi seperti ini:

a. Tampilan tablet

@media only screen and (min-width: 768px) and (max-width: 991px) {
.hfeed{width:95%;}
.site-header{width:100%;display:block;} 
.site-main{width:100%;display:block;}
.content-area{width:62%;float:left;display:inline;}
.widget-area{width:30%;float:right;display:inline;}
.site-footer{width:100%;display:block;}
}

Penjelasan:

  • class .hfeed, lebar(width) 95% dari seluruh tampilan layar
  • class .siteheader, .site-main dan .site-footer lebar 100% dari .hfeed (lihat diagram, mereka di dalam hfeed), display:block berarti elemen setelahnya berada di bawahnya.
  • class content-area, lebar 62%, float:left berarti berada di kiri halaman, display:inline bearti elemen selanjutnya sejajar dengannya.
  • class widget-area, lebar 30%, float:right berarti berada di bagian kanan halaman, display:inline. Lebar content + widget area tidak boleh >100% kalau ingin tetap sejajar.

Untuk 2 ukuran layar lainnya mungkin adalah seperti berikut media querynya. Penjelasannya bisa anda perkirakan sendiri, karena tidak jauh berbeda. Untuk elemen dengan width:100% tanpa display block sebenarnya juga tidak apa – apa.

b. Tampilan Mobile

@media only screen and (max-width: 767px) {
.hfeed{width:95%;}
.site-header{width:100%;} 
.site-main{width:100%;}
.content-area{width:100%;}
.widget-area{width:100%;}
.site-footer{width:100%;}
}

c. Tampilan Mobile Wide

@media only screen and (min-width: 480px) and (max-width: 767px) {
.hfeed{width:95%;}
.site-header{width:100%;} 
.site-main{width:100%;}
.content-area{width:62%;float:left;display:inline;}
.widget-area{width:30%;float:right;display:inline;}
.site-footer{width:100%;}
}

Update: sebelumnya tambahkan pula script berikut di header agar web browser pada mobile device langsung menampilkan halaman blog anda sesuai dengan ukuran layarnya, tidak berusaha menampilkan blog anda seperti web untuk desktop, yang biasanya menjadikan tulisan nampak lebih kecil.

<meta name="viewport" content="width=device-width, initial-scale=1" />

WordPress Themes Blog Responsive itu Mudah

Seperti yang anda lihat, untuk membuat sebuah wordpress themes blog responsive itu sebenarnya mudah, hanya butuh 3 langkah di atas. Walau memang itu cuma sebuah awal dengan merubah layout, tapi sudah cukup untuk menjadikan blog responsive kok, selanjutnya kalau masih bingung bisa deh ditanya di komentar 😀

Cara di atas sebenarnya bukan untuk blog saja, semua halaman html bisa jadi responsive juga dengan cara ini. Eh ya, blog ini sekarang juga sudah responsive juga, bisa di cek deh dengan mengecilkan window browser kamu 🙂

31 thoughts on “Cara Mudah Menjadikan Themes Blog WordPress Responsive

  1. kemarin ane jg sempet dibikin pusing sma blogger mobile template, ceritanya lg bikin template mobile buatan sendiri buat platform blogger biar lebih responsive diakses pngguna seluler

    krn belum bgitu paham dg css media screen, trpaksa pake class ‘mobile’ untuk setiap div ID dan div class template blog ane, sampe skarang blom fix saking banyaknya div yg nempel di template blog

    • Yang jelas pertama kali yang harus kita pahami adalah ID atau class dari bagian blog yang ingin kita rubah tampilannya pada view tertentu Kang. Setelah itu masukkan saja ID atau class tadi ke media query, saya awalnya juga tidak menyangka kalau merubah themes saya jadi responsive ternyata semudah ini.

      Biasanya layout blog seperti skema diatas, kalau beda paling juga sedikit. Beberapa persamaan class dalam posting ini dan markup blog Kang Topjer di antaranya; hfeed=outter-wrapper, site-header=header-wrapper, site-main=contentwrapper, content-area=content, widget-area=sidebar-right, site-footer=footer.

      Saya juga melihat beberapa ID Kang Topjer yang bisa dimasukkan dalam ID lainnya, #nduwur bisa dijadikan border-bottom dari #menuku, #ngisor yang bisa dijadikan background-image dari #contentwrapper.

      Semoga bermanfaat Kang, thanks udah komentar 🙂

  2. Aku termasuk yang “terlalu” mas, gak ngerti ttg responsive design, skrg ngerti krn baca postingan ini hehehe… pernah ngutak ngatik themes hasilnya malah kacau gak karuan, dasarnya emang gak ngerti, jadi ya sangat salut sm org2 yg canggih spt dirimu hehehe…

    • Biasa saja mas, masih sangat banyak diluar sana orang yang jauh lebih canggih. Udah keren itu punya mas Anton designnya minimalis dengan whitespace yang lapang. Kalau mau belajar dulu mending bikin local server saja mas, kalau sudah up dan mantab baru diupload ke server designnya 🙂

  3. mantap nih, blog saya juga responsive.. 😀
    pake starter themes underscores.. 😀

  4. Saya juga kemarin pengen ngedit tampilan blog saya jadi responsiv mas kalau dibuka lewat beberapa media tapi sayang sekali aku tak punya kemampuan yang cukup untuk melakukan hal itu.. 🙁
    Coba kalau udah ada blog wordpress saya yg self hosted kayak mas ini pasti langsung saya praktekkan… 😀
    Makasih atas informasinya mas, smoga makin bermanfaat ilmunya ya..

    • Sebenarnya prinsipnya kalau mau merubah design blog jadi responsive itu ya seperti apa yang saya sampaikan disini mas. Cuma kalau blogspot itu output HTMLnya kemarin saya lihat sangat banyak, dan mengedit CSSnya juga langsung jadi satu file itu yang bikin males mas. Harus online lagi 🙂

  5. Wah.. mantap nich artikel, tapi kalo soal beginian ga ngerti nich Sob.. Numpang nyimak dulu, kapan-kapan harus dipraktekin nich 😀

    • Baraja Blog khan udah responsive itu Mas, mau buat yang blogspotnya ya? Bisa juga tuh, praktek aja secepatnya mas, kalau ditunda biasanya jadi males, ujung – ujungnya ga jadi 🙂

    • Untuk breakpoint yang saya pakai disini memang tidak sepenuhnya saya dasarkan pada ukuran layar berbagai device, namun mengingat banyaknya ukuran layar yang kita tidak bisa menghitung satu demi satu rasanya juga tidak mungkin menghadirkan media query untuk semuanya 🙂

  6. salam kenal mas, saya author dan pemilik dari blog pusber.com ,
    maaf, mas saya mau menanyakan untuk query yang dibuat itu ditujukan atau dibuat untuk mereplace div-div yang di kotak itu atau bagaimana ya mas,

    sorry sebelum implementasi saya mau tanya dl itu mas, soalnya takut amburadul kembali hehe

    dulu sudah pernah ngotak-atik sendiri, tp dengan redirect ke sub domain, tp aku rasa kurang maksimal hasilnya dari tutorial sebelah.

    saya berfikir mencoba tanpa redirect. seperti yang telah mas Tiyo jabarkan diatas, mohon bimbingannya mas, maturnuwun

    • Iya mas saya tahu mas yang punya blog itu, khan udah ditulis 😀

      Kita tidak melakukan editing ID dan CLASS apapun dari template HTML kita, yang kita masukkan adalah ketiga block kode dari point 3.a sampai 3.c tersebut dalam file style.css dalam folder themes kita. Editing template hanya pada header.php dengan menambah meta viewport itu. Namun untuk template blog pusber saya lihat ID dan CLASS yang dipakai berbeda dengan yang saya sampaikan di sini, jadi ya harus menyesuaikan sendiri.

      • bisa dibantu untuk menempatakan kode tersebut dari point 3.a sampai 3.c di blog saya mas ?

        • Maaf mas, kalau untuk memasukkan style tersebut ke punya mas saya nggak bisa. Tutorial ini adalah untuk belajar bersama, tinggal copy-paste dan menyesuaikan saja kok.

          Eh mas, itu themes WordPress jenengan dibuat oleh web developer yang malah menggunakan Drupal ya, aneh banget?

  7. Mas, kalau keahlian developnya tinggi gini, kenapa gak coba monetize keahlian mas, mas kan bisa css dan html. kalau slicing file photoshop kedalam bentuk css html bisa gak mas ?
    kalau bisa, mohon tulis posting sederhana ( yang umum aja )

    o iya, terimakasih sekali nih artikelnya, kebetulan semua wp themes yang saya desain mau dibuat responsive 🙂

    • Artikel ini masih belum apa – apa dibanding dengan developer top yang ada diluar sana. Saya merasa kurang PD untuk berhubungan dengan client, malas juga ribetnya 😀 Untuk reques selanjutnya maaf ya mas, saya ga biasa juga buat design dari PS baru coding, walau kata para master cara yang terbaik begitu sih 😛

  8. Sampai saat ini saya masih mencari wordpress tema mobile yang cocok, jika ada saya minta rekomendasi untuk lebih sesuai. terima kasih

  9. Pingback: Fikri El Frana, Blogger dengan Semangat Belajar dari IdBlogger
  10. wah aku belum nyampe yang kayak ginian, tapi pengin bangen punya blog yang responsive, bisa minta tolo9ng editin blogku ngga? tolong yaa balas via email

    • Kalau mau melihat struktur HTML blog kita mudah kok, saya lihat mas Yuyut menggunakan WordPress juga, hampir sama langkahnya, ambil saja CSSnya, ganti class dengan punya sampean. Maaf saya nggak sempat.

Comments are closed.