15. Membangun Tampilan Layout Theme & CSS

Sejauh ini theme wptutorial dapat tampil namun layout-nya belum didesain dengan baik. Untuk itu di tutorial ke-15 ini kita akan mempelajari tampilan layout Theme dan CSS.

Di tutorial ke-15 ini, diasumsikan Anda sudah punya cukupo keahlian dengan CSS.

CSS
Membuat CSS seringkali sangat tricky. Namun bisa jadi malah mengasyikkan karena disinilah pusat dimana kemampuan intuitif non teknis kita diuji.

Beberapa hal yang akan dilakukan untuk me-layout theme WordPress dengan CSS antara lain :

  •  stylesheet yang me-reset default CSS di semua sistem perambah (browser) dan membuat semua tampilan baku dimana-mana
  • Sekumpulan 5 stylesheets cair yang membuat semua layout blog yang kita inginkan dapat tampil wajar dan dapat beradaptasi juga dengan semua layar perangkat yang ada seperti smartphone, tablet, bahkan dengan lebar layar yang tetap.
  • Font dengan satuan sehingga mudah beradaptasi.
  • Beberapa gaya markup global dan common dapat ditentukan sebelumnya.
  • Navigasi dan menu responsif untuk layar ukuran kecil.
  • Tampilan tombol default.
  • stylesheet kosong dengan semua selektor utama yang diberi penjalesan untuk dikustom lebih jauh oleh masing-masing pengembang.
  • Contoh stylesheet untuk desain hanya dengan CSS sehingga bisa melihat bagaimana selektor beraksi.
  • Pengantar untuk belajar RTL stylesheets, lengkap dengan contoh RTL stylesheet di contoh desain hanya dengan CSS.

Kira-kira itulah yang kita bahas di tutorial ke-15 ini.

Reset CSS

Reset CSS yang kita gunakan dikutip dari i Reset CSS Eric Meyer dengan perubahan minor. Kita memang tak harus membuat dari nol untuk beberapa bagian kode yang dibutuhkan. Seperti dipaparkan sejak awal, membuat theme itu seperti membuat pesawat atau mobil dimana bagian-bagiannya tidak harus dibuat sendiri tapi digunakan dan diadaptasikan dari pabrik/pembuat lain. Dalam kasus theme pun sama, banyak kode yang digunakan diciptakan oleh pengembang lain dibawah naungan semangat sumber terbuka kemudian digunakan oleh para pengembang lainnya dengan berbagai modifikasinya. Reset CSS secara mendasar menentukan semua tipografi default yang berlaku bagi semua perambah atau browser. Ini penting supaya tampilan kita lebih ramah tanpa harus pusing dengan fitur individual masing-masing perambah. Di zaman dulu, masing-masing pembuat perambah seperti Netscape, Microsoft, Mosaic dll. berlomba-lomba menetapkan standar sendiri. Namun akhirnya, penggunalah yang harus dipatuhi sehingga muncul perambah yang tidak lagi ngotot menetapkan standarnya. Pengembang pun lebih fleksibel dan menggunakan trik-trik khusus seperti reset CSS agar pengaruh perbedaan browser atau perambah tidak banyak pengaruhnya terhadap layout laman web.

Cara menggunakan Rset CSS sederhana saja, salin kode berikut di file  style.css, di bagian paling atas setelah informasi dan komentar dokumentasi. Keterangan saya beri warna hijau supaya mudah dipelajari.

Ruwet kan kelihatannya, tapi gak perlu diingat-ingat atau di hafal . Jadi salin saja langsung di bagian atas file stylesheet tiap kali memulai proyek theme baru. Untuk mengujinya coba reload laman theme Anda dan periksa di berbagai browser perambah (jika sempat dan ada banyak browser di komputermu) .

Buat Lagi CSS-nya

CSS berikut dibangun ulang berdasarkan versi awal stylesheet dan tipografi CSS Blueprint yang digunakan pertama kali di theme  Thematic dan sekarang dipakai di proyek  Underscores .

Di CSS yang dibuat lagi ini digunakan beberapa teknik tipografi terutama ukuran font dengan menggunakan satuan rem sebagai tambahan . Satuan ini biasa digunakan sebagai satuan piksel untuk tinggi font, line-height relatif untuk deklarasi elemen body, dan Ems untuk semua margin vertikal (misalnya untuk paragraf dan lists).

Lalu apa artinya? Artinya kelak akan sangat mudah untuk mengatur tinggi font belakangan – tanpa perlu jumblah-jambleh rumit – dan semua elemen tipografi akan mengikuti dengan serentak dengan ukuran tinggi/vertikal yang lebih rapi jali (misalnya spasi vertikal diantara elemen di paragraf dan lists).

Kita tambahkan kode rebuild style setelah kode reset .

Perhatikan tag style H1 sampai H6 di CSS diatas (baris 17), besar font yang digunakan masih default sehingga nanti tidak akan terlihat perbedaannya. Untuk itu nanti masih diperlukan perubahan H1 sampai H6 dengan ukuran maupun atribut font yang berbeda.

Style Baku (Standard Styles)

Di WordPress ada beberapa elemen yang sering dimodifikasi style-nya. Ini termasuk style untuk “floating” mengatur posisi gambar/foto, handling menu, captions, galeri gambar, widget, post content, komentar, demikian juga bullet list.  Untuk memungkinkan modifikasi itu salin dan tambahkan kode berikut dibagian paling bawah.

Nah sekarang kita sudah miliki style yang lumayan lengkap dan dapat ditambah kurangi nanti.

Semua Layout Yang Mungkin Diinginkan

Theme yang dibuat oleh underscores dapat dilihat (jika sudah buat theme via _s ) atau diunduh disini . File theme dari underscores berisi style layout untuk : content-sidebar, sidebar-content, sidebar-content-sidebar, sidebar-sidebar-content, dan content-sidebar-sidebar. File-file CSS ini diperlukan untuk menentukan apakah layout theme kita satu kolom, dua kolom, tiga kolom, dan seterusnya yang nantinya akan menjadi tampilan theme.

wp-sidebar-content-configurasion-1

Gambar ilustrasi layout

Jika mau silahkan kopi dan simpan di sfile  style.css. Tempatkan di judul  style.css dengan nama  “Structure”. Bagian struktur dapat ditempatkan sebagai bagian  “Global” . Atau tempatkan di folder khusus bernama layouts/.

Contoh, kalau kita ingin gunakan content-sidebar layout ini berarti kita akan menampilkan isi (conten) di kiri layar dan sebelah kanan adalah blok sidebar, ambil file  content-sidebar.css:

JIka ingin layout sidebar-content-sidebar layout, silahkan salin dari file  sidebar-content-sidebar.css.

Untuk layout  sidebar-sidebar-content  (sidebar-sidebar-content.css),

Untuk layout content-sidebar-sidebar (content-sidebar-sidebar.css),

Terakhir untuk layout sidebar-content (sidebar-content.css),

Untuk theme wptutorial, kita akan gunakan layout sidebar – content – sidebar dengan lebar 100%. Kalau diinginkan lebar terbatas digunakan style lebar pembatas tetap (fixed-width). Cara sederhana untuk menyalakan setiap layout ini dengan fixed-width layout adalah dengan menambahkan dan menengahkan margin ke   .site div. Contoh (salin di bagian akhir style.css) :

Menambahkan RTL stylesheet

Jika punya rencana untuk mendistribusikan theme yang Anda buat, perlu juga dipertimbangkan menambahkan RTL (Right To Left)  stylesheet. RTL stylesheets adalah style yang diperlukan untuk mengubah arah baca horisontal dari kanan ke kiri seperti kita membaca bahasa Arab. Untuk itu,   RTL stylesheet harus dapat melakukan :

  • perubahan semua tag css “float: left” menjadi  “float: right”, dan demikian juga seterusnya.
  • Mengubah  “left” margin dan padding to “right” margin dan padding, dan demikian juga sebaliknya
  • Jiak Anda menambahkan sebuah gambar yang tergantung pada arahnya (seperti navigasi dengan tanda panah), Anda perlu menciptakan versi RTL yang dapat dipanggil kedalam RTL stylesheet.

Untuk mulai menggunakan RTL stylesheetd, buka rtl.css (atau buat dan tempatkan di folder theme bersama dengan style.css ). Salin kode berikut dan tempatkan dibagian atas file rtl.css.

Sekarang mulai tambahkan style RTL yang diinginkan. Caranya bisa saja manual dengan mengubah kaidah horisontal kiri ke kanan menjadi kanan ke kiri. Untuk membantu proses ini silahkan pelajari di WordPress Codex .

Bisa juga diggunakana alat bantu otomatis untuk mengubah LTR menjadi RTL . Misalnya  CSS Janus. Kopi paste css Anda dan lakukan pembuatan css RTL otomatis , hasilnya kopi paste kan ke file  RTL stylesheet!

Meskipun demikian, perlu diuji juga apakah RTL yang sudah dibuat berjalan dengan wajar. Gunakan plugin untuk menguji style RTL untuk pemeriksaan lebih jauh.

Membuat Theme Screenshot

File screenshot diperlukan untuk menampilkan Theme yang sudah jadi dan siap digunakan untuk berbagai keperluan. Ukuran screenshot biasanya format png 600 piksel lebar dan tinggi 450 piksel. Screenshot disimpan dalam format PNG dan dinamakan “screenshot.png”. Namun sebelum membuat screenshot ada baiknya layout theme wptutorial kita tainjauh kembali dan diperbaiki supaya tampilannya lebih enak dilihat.

Untuk panduan paling baru mengenai screenshit silahkan kunjungi  WordPress Codex .

Belajar Stylesheet

Untuk belajar stylesheet silahkan kunjungi beberapa situs ini :

Satu pemikiran pada “15. Membangun Tampilan Layout Theme & CSS

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *