Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Theme Development
Code

Membangun Tema WordPress Responsif Mobile First

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Hasannudin Amin (you can also view the original English article)

Membangun tema adalah jantung dari WordPress. Ini adalah teknik yang Anda gunakan untuk membangun situs web yang dipesan terlebih dahulu untuk Anda sendiri atau klien Anda dan ini adalah keterampilan penting bagi siapa pun yang ingin merancang dan mengembangkan dengan WordPress.

Semakin banyak tema WordPress yang responsif - mereka menggunakan kueri media CSS untuk beradaptasi dengan lebar layar yang berbeda, menyesuaikan tata letak dan membuat perubahan desain dan antarmuka untuk membuat situs apa pun yang dibuat menggunakan tema yang lebih mudah dibaca dan berinteraksi dengan berbagai perangkat dan ukuran layar.

Dalam tutorial ini saya akan menunjukkan kepada Anda bagaimana cara membangun tema WordPress Mobile First, yang dimulai dengan styling untuk layar terkecil dan bekerja ke ukuran layar di atasnya.


Apa yang Anda Butuhkan untuk Tutorial Ini

Dalam tutorial ini saya akan mengambil tema WordPress dengan gaya yang minimal dan kemudian membuatnya menjadi responsif. Desain akhirnya akan sangat sederhana - idenya adalah untuk menutupi blok dari konten dan tata letak dan Anda dapat menambahkan desain Anda sendiri setelah itu jika Anda mau.

Untuk mengikuti langkah-langkah dalam tutorial ini, Anda memerlukan hal-hal berikut:

  • Editor teks atau kode. Jika Anda belum memilikinya, TextWrangler dan Kompozer gratis.
  • Jika Anda mengembangkan secara lokal, MAMP, WAMP atau XAMPP Anda perlukan supaya Anda dapat menjalankan PHP dan MySQL dan bekerja secara lokal menggunakan WordPress.
  • Jika Anda mengembangkan jarak jauh, klien FTP seperti FileZilla.
  • Instalasi WordPress lokal (atau remote yang bisa Anda gunakan untuk pengujian)

Saya berasumsi Anda sudah terbiasa menginstal dan bekerja dengan WordPress. Saya akan bekerja pada instalasi WordPress remote
dan menyediakan tautan saat saya ikuti.

Kecuali Anda memiliki tema sendiri yang sedang Anda kerjakan, Anda juga memerlukan kode awal untuk tutorial. Anda dapat melihat tema saya di http://rachelmccollin.co.uk/nettuts-wpresponsive-tutorial/ dan mengunduh kode untuk tema tersebut pada berbagai tahap pengembangannya dari xxx [akan ditambahkan berdasarkan sistem unduhan nettuts+].


Sebelum Kita Mulai: Apa itu Mobile First?

Mobile First adalah istilah yang pertama kali diciptakan oleh Luke Wroblewski. Ini mengacu pada
strategi mengubah cara kami mendesain situs web dan tema di bagian head. Alih-alih memulai dengan desain desktop dan kemudian menyesuaikannya untuk perangkat seluler, kita bekerja di arah lain - kita mulai dengan merancang dan mengkode perangkat seluler dan kemudian menambahkan apa yang dibutuhkan untuk layar yang lebih besar. Ini memiliki beberapa keuntungan:

  • Lebih cepat - konten atau styling yang tidak diperlukan pada layar kecil tidak dikirimkan kepada mereka. Ini bisa lebih cepat daripada hanya menyembunyikan atau menimpanya.
  • Ini mengubah cara kita merencanakan konten - dengan berfokus pada layar kecil, kita fokus pada apa yang benar-benar penting daripada pada apa yang kita sertakan karena kita memiliki ruang. Merancang dengan cara ini dapat memiliki dampak drastis pada desain desktop yang akhirnya.

1. Tema Awal Kita

Tema awal memiliki gaya minimal yang diterapkan padanya, dan belum ada tata-letak tata letak sama sekali - yang akan ditambahkan saat kita mengerjakan tutorial.

Unsur-unsur yang mencakup tema ditunjukkan di bawah ini:

01-theme-doctree.jpg

Saat ini, tema terlihat seperti ini pada ponsel cerdas (yaitu pada ukuran layar 320 x 480px):

02-startingtheme-320px-screen.png

Karena saya belum menerapkan lebar apa pun, situs harus mengubah ukuran ke layar yang lebih kecil - tetapi itu tidak karena smartphone menampilkannya seolah-olah selebar 960px. Hal pertama yang harus dilakukan adalah memberi tahu smartphone untuk menampilkan situs pada lebar layar sebenarnya.


2. Mengatur Lebar Layar

Untuk memberi tahu smartphone agar berperilaku baik terkait dengan lebar layar, saya menambahkan baris ke dalam bagian <head> di header.php, seperti berikut:

Ini menginstruksikan smartphone untuk menampilkan halaman pada lebar layar perangkat daripada membuat area pandang virtual seluas 960px yang merupakan perilaku default.

Sekarang tema terlihat seperti ini di layar kecil:

03-startingtheme-correct-screen-width.png

Jika Anda telah membuat stylesheet responsif sebelumnya tetapi tidak Mobile First, ini akan menjadi sedikit pengingat. Ingat semua gaya ekstra yang Anda tambahkan ke media query Anda untuk layar kecil? Anda akan membutuhkannya sedikit saja, karena laman dengan tata-letak yang minimal sudah terlihat lebih baik di perangkat seluler daripada di desktop, seperti yang Anda lihat dari tangkapan layar ini, diambil pada lebar 1024px:

04-starting-theme%20desktop.png

Tetapi saya masih perlu menambahkan beberapa pengaturan tata letak untuk layar kecil, yang merupakan langkah berikutnya.


3. Gaya Blok Tata Letak Utama untuk Layar Kecil

Saya akan mulai dengan menambahkan beberapa lebar dan float untuk elemen utama, untuk memastikan bahwa mereka membentang di layar. Saya menambahkan beberapa lebar dan deklarasi clear:both ke elemen yang relevan:

Selanjutnya, untuk menghindari desain yang tampak tertekan ke layar kecil, saya akan menambahkan padding ke beberapa elemen:

Perhatikan bahwa ini merupakan satu-satunya nilai horizontal yang akan saya definisikan dalam piksel, dan saya melakukan ini karena saya tidak ingin padding menjadi terlalu besar karena ukuran layar meningkat.

Sekarang situs tidak tampak ramai dan elemen utama ditampilkan di bawah satu sama lain:

05-mobile-padding-applied.png

Selanjutnya saya akan merapikan area widget dan meningkatkan navigasi.


4. Menambahkan Tambahan Gaya untuk Layar Kecil

Navigasi harus terbentang sesuai lebar layar dan saya ingin menengahkan setiap item menu, jadi saya akan menambahkan beberapa styling untuk menu:

Ini memberi saya menu yang tampak jauh lebih cerdas:

06-centred-menu.png

Area widget semuanya cukup berdekatan dan sulit untuk melihat di mana satu berakhir dan yang lain dimulai. Saya akan menambahkan beberapa batas dan padding untuk itu:

Berikutnya, widget footer. Saya akan melakukan sesuatu yang mirip dengan mereka juga:

Ini menambahkan beberapa pemisahan antara widget saya:

07-widgets-border.png

Saya sekarang memiliki tata letak sederhana untuk tema saya di layar kecil, dengan beberapa warna, garis batas, margin, dan padding untuk membantu. Saya tidak akan menambahkan gaya tambahan apa pun di sini karena dapat memperlambat tema pada perangkat seluler dan saya tidak yakin itu selalu diperlukan pada layar kecil. Jadi langkah selanjutnya adalah mulai membuat media query.


5. Menambahkan Beberapa Media Query

Untuk tema ini saya akan menargetkan tiga ukuran layar tambahan:

  • Lebar dan tinggi 600px, yang akan mencakup tablet di potret atau landscape sebagaimana di layar desktop
  • Lebar dan tinggi 800px, yang akan menyertakan tablet dalam mode landscape dan desktop
  • 1025px lebar dan tinggi, yang akan mencakup semua kecuali layar desktop terkecil. Saya sengaja membuat satu piksel di atas 1024 piksel sehingga tablet besar tidak terpengaruh oleh permintaan media ini.

Anda mungkin telah melihat bahwa media query saya tidak semuanya didasarkan pada lebar perangkat tertentu. Hal ini karena ketika rentang perangkat dan lebar layar meluas, penargetan perangkat tertentu menjadi kurang dapat diandalkan daripada pengaturan media query pada titik di mana manfaat tata letak dari mereka. Saya telah menguji tata letaknya dengan mengubah ukuran jendela browser saya dan pada lebar 600 piksel terlihat seperti ini:

08-mobile-first-theme-at-600px.png

Dalam pandangan saya, desain tampak salah pada lebar ini dan dapat memperoleh manfaat dari beberapa perubahan tata letak.

Jadi, saya mulai dengan menambahkan media query saya di akhir stylesheet:

Perhatikan bahwa saya telah menggunakan mid-width, bukan max-width seperti yang Anda lakukan jika Anda mengutak-atik desktop pertama dan menulis media query untuk layar yang lebih kecil.

Selanjutnya saya akan beralih ke styling untuk perangkat tablet.


6. Tambahkan Styling untuk Perangkat Tablet dalam Mode Potret

Saya ingin meningkatkan tata letak untuk memanfaatkan ruang layar dengan lebih baik pada layar yang lebih besar ini, dan saya juga akan menambahkan beberapa gradiasi CSS untuk membuat desain sedikit lebih halus.

Pertama, tata letaknya. Di dalam media query saya untuk layar 600 piksel dan lebih besar, saya menambahkan:

Ini menambahkan pelampung dan beberapa margin untuk memanfaatkan lebar layar dengan lebih baik:

09-tablet-widgets.png

Saya sekarang akan mengubah navigasi, karena tata letak saat ini menyisakan banyak ruang kosong di samping setiap item dan membutuhkan banyak ruang. Saya menambahkan gaya berikut untuk membuat bilah navigasi horizontal:

Saya juga akan menambahkan gradien ke menu untuk ukuran layar ini dan di atas:

Tergantung pada perangkat dan browser yang saya targetkan, saya dapat menghilangkan beberapa awalan browser tersebut tetapi saya telah membiarkannya untuk pengguna lain dari tema saya.

Jadi, saya sekarang memiliki tata letak yang ditingkatkan untuk tablet dalam orientasi potret, seperti yang ditunjukkan pada tangkapan layar:

10-tablet-navigation-gradient.png

7. Tambahkan Styling untuk Perangkat Tablet dalam Mode Landscape

Saya hanya akan membuat satu perubahan untuk layar lebar ini: Saya akan memindahkan sidebar ke sebelah kanan konten, karena konten terlihat sedikit meregang jika membentang di seluruh layar. Untuk melakukan ini, saya tambahkan berikut ini ke media query yang menargetkan min-width 800px:

Ini melakukan beberapa hal:

  • Menggerakkan sidebar ke sebelah kanan konten
  • Ini mengubah ukuran sidebar dan konten dan menambahkan float dan properti clear untuk tata letak
  • Ini menghilangkan float di widget jadi mereka sekarang berada di kolom
  • Ini menghilangkan border -top dari widget pertama, yang tidak lagi membutuhkannya

Tema sekarang terlihat seperti ini di tablet dalam mode landscape:

11-tablet-landscape.png

8. Menambahkan Desktop Styling

Jika saya telah membangun tema responsif saya dengan cara tradisional, desktop pertama, saya akan bekerja pada ukuran layar ini terlebih dahulu, tetapi di sini saya bekerja dengan yang terakhir. Anda mungkin telah memperhatikan sekarang bahwa ini membuat semuanya sangat efisien - dalam pengalaman saya, menghapus gaya desktop di kueri media yang ditujukan untuk seluler membutuhkan lebih banyak pekerjaan daripada mengubah tata letak seluler saya untuk desktop.

Saya akan menyesuaikan tata letak footer untuk memiliki keempat area widget footer di samping satu sama lain, dan menambahkan gambar latar belakang ke header. Gambar ini tidak penting untuk konten tetapi ada untuk hiasan, jadi saya merasa nyaman dengan fakta bahwa itu tidak ada dalam markup saya.

Pertama, tata letaknya. Selain mengatur tata letak footer, saya akan menambahkan nilai max-width ke tag body untuk menghindari peregangan tata letak di seluruh lebar layar yang sangat lebar:

Gaya di atas masuk dalam media query untuk layar dengan min-width 1025px, dan melakukan hal berikut:

  • Menambahkan max-width ke body
  • Sesuaikan lebar dan margin kanan pada elemen aside di footer
  • Mengatur margin untuk bidang widget genap hingga 2% sesuai dengan area widget lainnya
  • Menggunakan kelas yang ditugaskan ke area widget keempat dalam tema (.fourth), mengurangi marginnya menjadi 0. Saya sengaja menggunakan kelas di sini bukan nth-child karena saya perlu ini untuk bekerja di seluruh browser

Jadi, apa tema saya terlihat di desktop?

12-desktop-version.png

Tidak buruk. Akhirnya saya akan menambahkan gambar latar belakang ke header saya.

Ini menambahkan gambar saya sebagai latar belakang dengan beberapa padding untuk memungkinkan ruang untuk itu:

13-final-desktop-banner-image.png

Keuntungan menggunakan pendekatan ini adalah bahwa gambar ini hanya akan diunduh oleh mesin desktop. Karena bukan dalam gaya inti atau media query untuk perangkat yang lebih kecil, itu tidak akan memperlambatnya. Ada kelemahan untuk menggunakan gambar sebagai latar belakang, terutama yang berkaitan dengan aksesibilitas - jadi penting untuk hanya menggunakan teknik ini ketika gambar hanya untuk desain dan bukan bagian dari konten. Sebagai alternatif, saya dapat menambahkan versi gambar yang lebih kecil dalam markup saya dan menggunakan CSS untuk menyembunyikannya dan menampilkan versi lebih besar dari gambar yang sama sebagai latar belakang untuk layar yang lebih besar.


Ringkasan

Saya sekarang memiliki tema Mobile First yang responsif. Dengan memulai dengan layar kecil dan bekerja dengan cara saya, saya mengurangi jumlah kode yang diperlukan untuk membuat desain responsif saya dan mampu memastikan bahwa gambar besar tidak dikirim ke perangkat seluler.

Karena semakin banyak pengembang dan pemilik situs yang mengharuskan situs mereka menjadi responsif, kemampuan untuk membuat tema WordPress yang responsif akan menjadi keterampilan yang tak ternilai. Dalam tutorial ini saya telah menunjukkan bahwa itu tidak perlu menjadi proses yang memberatkan dan seharusnya tidak memakan waktu terlalu lama. Tentu saja, Anda dapat mengambil proses lebih jauh dan menambahkan konten khusus seluler atau gaya tambahan yang ditargetkan pada perangkat tertentu, tetapi itu adalah sesuatu untuk hari lain!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.