Pada postingan sebelumnya, saya telah membuat posting tentang Perlukah Membuat Theme WordPress Yang Responsive?? dan kelihatannya banyak yang tertarik dengan responsive desain ini. ya, memang responsive desain sangatlah memukau karna fast reload dan nyaman bagi pembaca. Ketika anda membuat theme responsive, berarti theme anda memeriksa handset apa yang mengakses blog anda dan memaksakan suatu elemen untuk tampil atau tidak tampil.
Posatingan kali ini, saya akan membuat tutorial bagaimana membuat Theme Responsive dan ini hanya berlaku untuk pengguna wordpress self hosted.
Oke… untuk mempermudah anda. buatlah child theme terlebih dahulu.
/* Theme Name: Bukittinggi Theme URI: http://farizalfa.com Description: Child theme untuk responsive desain Author: Farisi al ayubi Author URI: http://farizalfa.com Template: pusako Version:0.1.0 */
untuk template, isi dengan nama folder theme yang ingin anda buat jadi responsive. misal anda menggunakan theme twentyeleven maka ganti Pusako dengan twentyeleven
lalu import style yang ada pada Theme anda, caranya tambahkan kode dibawah ini.
@import url(“../pusako/style.css”);
maka jadinya akan seperti ini:
/* Theme Name: Bukittinggi Theme URI: http://farizalfa.com Description: Child theme untuk responsive desain Author: Farisi al ayubi Author URI: http://farizalfa.com Template: pusako Version:0.1.0 */ /* style ------------------------------------------------------------ */ @import url(“../pusako/style.css”);
Lalu, untuk membuat theme anda responsive, tambahkanlah kode dibawah ini ke style.css atau child theme yang telah anda buat.
@media screen and (min-device-width: 480px) and (orientation: landscape) {
body {
font-size: 100%;
}
}
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
font-size: 90%;
}
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Sekarang, aktifkan lah child theme anda, lalu coba akses pada smartphone atau ponsel biasa. apakah terasa perubahannya???
kalau ada pertanyaan, silahkan tinggalkan di kotak komentar.
Hehe kalo saya pakai yang udah jadi aja.
Wah. . .
Responsif kah mas?
Kalau setting awalnya sudah menggunakan % atau em sepertinya bisa mas, cuma kalau setting css awalnya menggunakan px masih belum sempurna, karena kebetulan theme saya buat sendiri.
Kalau merancang dari nol, saya belum pernah mas.
Tapi, kalau merancang child theme baru saya keseringan.
Waduw…soal ginian aya nyerah deh mas
Masih bingung kalo utak-atik template wordpress
Tapi kayaknya sih template saya udah responsive.
*eh..gak tau ding, wkwkwkkw…
Belum mas, masih sangat berat jika dibuka di mobile(kalau gak make plugin)
apa cuma gitu saja pada media query-nya mas bro?
gak ada hal lain yg lebih kompleks? saya sudah sering nemu yg beginian :silau:
Gak ada masbro, memang kayak gitu aja.
Tapi, itu udah saya tambah spesific-nya agar semua gadget bisa nyaman meload blog kita.
wah tapi kalau di tambah media query sebanyak itu belum beserta layout yg harus disesuaikan di setiap resolusi apa gak takut membengkak isi file CSS-nya kan itu juga jadi pertimbangan yg bisa memperlambat laju dari sebuah blog
Enggak kok masbro,
contohnya aja blog ini.
Masih nyaman dibuka kan masbro?
Iya kok gak ada layout yang disesuaikan? Kayaknya kemaren2 pas baca-baca tutorial responsive theme ada layout yang harus disesuaikan pada media querynya.
saya masih ngak ngerti masalah ginian
hahahahha… makanya dibaca masbro, biar ngerti nantinya. :kacapembesar:
wahhh syang,,,
wordprees only,,
heheee…
tpi bgus,,bwt nambah2 ilmu…
MAMPIR ke blog qu yah… ^_^
slmet mnikmati
Pra spam nih. . .
:tameng:
kapan2 dicoba ah., apa kelebihannya kalau dipasang kode tersebut mas.,?
Blog bakalan lebih mudah di buka dengan gadget apa saja mas.
Wah udah muncul juga toh artikelnya…
Hmm…itu harus dibuat di child themes kah?
Kalo gak salah itu namanya media query ya? Udah pernah denger sih sebelumnya, cuma belum sempet nyoba
Nanti deh bakalan dicoba. Trims sob.
Enggak juga harus di child theme mas, di theme aslinya juga bisa.
Tapi, kalau dengan child theme. Pas theme utama update, kita tidak perlu mengubah coding lagi.
Saya sih gak pernah ngutak-atik theme saya. Selain emang gak boleh juga lantaran enggak bisa.
WordPress.com memang tidak disarankan mas. :senyum:
ikutan angkat tangan klo beginiaaan…
Bukan artikel teroris ni mas. Hehehe
Theme yang responsif itu yang gimana sih? *gaptek akut*
Theme nya kayak punya saya mbak, jika dibuka di gadget yg berlainan. Theme akan menyesuaikan dengan resolusi gadget
Wah boleh dicoba ini….
seru sepertinya. 
Silahkan mas dicoba dulu tutorialnya :megaphone:
ooh responsif disini maksudnya ke mobile gadget ya mas?
iya mas… Lebih ke gadget version
wah mantab akhirnya ada tutorialnya juga..tapi saya belum paham dgn cara membuat theme child itu mas..gimana ya hehe
Mudah kok mas… untuk referensi lihat postingan yang ini http://codex.wordpress.org/Child_Themes
hemmm… bukan untuk wordpress.com ternyata… he he he
Iya mbak… memang khusus WordPress self hosted
Dipraktekin langsung..
Kebetulan saya lagi seneng otak atik theme wordpress..
Seepppp mas… Langsung menuju TKP :ninja:
Saya coba praktekkan pelan2 mas..
Silahkan dipraktekan pelan-pelan mas..
RESPONSIVE THEME itu apa yaaa…?? Masih newbie saya, _/|\_
Untuk referensi baca postingan yang ini mas http://farizalfa.com/perlukah-membuat-theme-wordpress-yang-responsive/
mas mo tanya dong caranya bikin gambar seperti ini http://0.s3.envato.com/files/25549039/previews/01_preview.__large_preview.png tapi dgn wordpress theme kita gmn ya.. maksudnya untuk menunjukkan bahwa theme kita responsive gitu :malu:
Saya sampai sekarang masih ragu cara membuat yang begituan.
kayanya yg ahli photoshop bisa membantu. pergi aja ke >> majuter.us
Bro ada tutorial buat theme child nya? bisa di share lewat email?
nih new be
trima kasih
kalau child theme bisa saya bantu mas, maaf baru balas sekarang.
hmm, menarik juga tutor membuat theme responsivenya, tapi juga rada-rada bingung menerapkanya di themeku. btw theme ku udah responsive blum ya :komunis:
belum mas, karna masih ada elemen yg tidak diperlukan tampil pada mobile. . .
:silau: thanks mastah atas tutorialnya, ane juga baru memasuki dunia design theme wp, yah bisa dibilang tutorial begini sangat berguna bagi ane :semangat!:
Note : :muah:
*maho detected
semoga membantu mas,
semoga membantu mas, 
terlindung dari Maho :tameng:
Udah tak coba tapi kok error ya… muncul pesan gini
Fatal error: Cannot redeclare twentyeleven_excerpt_length() (previously declared in /home/u422016870/public_html/wp-content/themes/aminsupriyadi/functions.php:318) in /home/u422016870/public_html/wp-content/themes/twentyeleven/functions.php on line 320
kamsudnya apaan nih? salahnya dimana?
gag pernah terpikirkan membuat responsive pake child themes, selama ini ngedit themes asli, jadi ketika upgrade hilang deh editan nya. makasih banget mas
Kalau saya emang terbiasa ngedit theme pake child theme mas, soalnya lebih secure bila ada Update dari empunya si theme..
Cari-cari cara membuat theme responsive di Google, blog masbro muncul di nomor 1
WOW.
Saya pakai salah satu query di atas buat theme yang baru saya buat. Makasih infonya ya.
Alhamdulillah masbro, sampai sekarang masih di page number one dan posisi pertama..
ilmu baru nih,
injin bokmark gan, oiya apa berarti setiap media scren kita definisikan cssnya masing2?,
terus misalnya pengen di masukkan di blogspot apa bisa?, terimakasih mas,
Iya mas.. emang harus di definisikan satu-satu…
tidak mas, karna Blogspot udah responsive kok dengan sedikit pengaturan pada bagian “Mobile Theme”
Mas bro, ane kurang paham nih buat .css baru apa gimana itu?
Makasih mas. tapi saya mau tanya nih kok disaya kodenya g berfungsi ya?
Thanks gan, artikel ente sangat membantu. Sekarang ane udah bisa bikin template responsive. Tapi kalo pada awalnya template tidak responsive, hasilnya agak acak2 kan ya?
kudu belajar lagi ane cara ngerapihinnya. Good article its WORK!