16. Kustomisasi Background & Header

Dengan templat dan CSS yang sudah dibuat, saatnya menyentuh secara lebih personal supaya tampilan theme lebih enak dilihat dan dipandang. Tutorial kali ini akan menyentuh kustom Backgrounds dan Headers.

Pastikan file CSS sudah lengkap sebelum mengorek bagian ini.

Catatan :  Contoh tutorial didasarkan pada desain  Shape Sample Stylesheet dari  CSS lesson. Jika penampilannya ingin berbeda dengan contoh silahkan modifikasi  style.css .

Kustomisasi Background

Fitur WordPress Custom Background memungkinkan pengguna untuk mengubah warna dan gambar latar belakang. Untuk itu perlu ditambahkan fungsi  add_theme_support(). Buka file  functions.php, dan tambahkan kode berikut di bagian bawah.

Kita definisikan fungsi kustom wptutorial_register_custom_background(), untuk :

  1. Membuat variabel array  $args, yang menyimpan data default background color untuk theme. Kode warnanya  #e9e0d1 di contoh stylesheet silahkan diubah jika memang diinginkan .
  2. tambahkan array $args ke filter
  3. jika fungsi wp_get_theme() ada (WordPress versi 3.4 atau terbaru), kita gunakan add_theme_support() untuk memungkinkan kustomisasi  Backgrounds, gunakan $args sebagai parameter dengan semua pilihan kita untuk menentukan pilihan Custom Background options
  4. jika fungsi wp_get_theme() tidak ada (kita memakai wordpress sebelum v 3.4), aktifkan  Custom Backgrounds dengan metode yang ada di WordPress 3.3 dan versi sebelumnya.
  5. tutup fungsi dan kaitkan ke fungsi aksi  after_setup_theme() .

Demikian, untuk menguji silahkan buka Appearance → Background .

wptutprial-admin-bg

wptutprial-admin-bg-2

wptutprial-admin-bg-3

wptutprial-admin-bg-4

wptutprial-admin-bg-5

Kustomisasi Header

Fitur Custom Headers telah ada sejak versi 2.1 . Dengan fitur ini, user sebagai administrator dapat mengubah tampilan header dengan mengunggah gambar di situs mereka. Sebagai tambahan, pengguna juga dapat mengubah warna teks header atau menyembunyikannya.

Sejak versi WordPress 3.4, kustomisasi header dilakukan dengan fungsi  add_theme_support() . Ada beberapa opsi pilihan untuk mengubah-ubah header.

Di tutorial ini implementasi kustim header antara lain:

  1. Didasarkan pada desain visual contoh style.
  2. Memungkinkan pengguna mengunggah gambar untuk bagian header. Lebar gambar dibatasi dengan lebar main container div, tetapi tinggi tidak dibatasi .
  3. Membolehkan pengguna mengubah warna teks header .
  4. Membolehkan pengguna menyembunyikan teks header.

custom-header.php

Biasanya kustom header berada di dalam fungsi  functions.php. Tapi supaya functions.php tetap bersih, kita akan buatkan kustom header di sebuah file yang disebut custom-header.php dan akan dipanggil dari functions.php.

Buat file  custom-header.php dan simpan di subfolder inc.

Berikut ini kode untuk file custom-header.php. Salin kode ini di file custom-header.php yang baru Anda buat.

Untuk mengambil file diatas, salin kode berikut dibagian bawah functions.php,

Simpan file functions.php dan refresh laman admin. Kemudian, lihat di menu admin Appearance , submenu Header akan muncul.

wptutprial-admin-header

wptutprial-admin-header-2

wptutprial-admin-header-3

wptutprial-admin-header-4

wptutprial-admin-header-5

wptutprial-admin-header-6

Mari kita kaji kode di file  inc/custom-header.php, fungsi demi fungsi .

Karena kita berbicara tentang gambar yang akan ditampilkan di header, maka fungsi untuk memanggil gambar header ditempatkan di file header.php , karena itu salin fungsi header tersebut sebelum tag pembuka  <nav> .

 

Simpan header.php, dan kembali ke  custom-header.php. Kita tinjau lebih jauh kode di kustom header .

Disini kita kembali gunakan fungsi add_theme_support() untuk menambahkan fitur  Custom Header. Jadi seperti kustom background, kita juga memeriksa kompatibilitas versi WordPress sebelum v  3.4.

Mari kita lihat lagi variabel array $args, parameter kustom header antara lain :

  • default-image' => '', – Jika theme mempunyai gambar default , lokasi gambar didefinisikan disini . Contoh penulisan : 'default-image' => get_template_directory_uri() . '/images/header.jpg',. Jika tidak ada gambar default biarkan kosong .
  • 'default-text-color' => 'e9e0e1', – Ini contoh default warna teks untuk judul situs. Dalam contoh nilai default warna ditulis dengan kode hexa  #e9e0e1.
  • 'width' => 1366, and 'height' => 250, – Lebar dan tinggi gambar header dalam satuan piksel. Kalau ukuran gambar header yang ingin kita unggah tepat, maka tak ada pilihan untuk memotong gambar. Tapi jika gambar lebih besar akan dilakukan pemotongan gambar. Penentuan lebar 1366px disesuaikan dengan lebar maksimum container yang ditentukan di file stylesheet.
  • 'flex-height' => true, – Ini memungkinkan tinggi gambar fleksibel. Meskipun sudah ditentukan tinggi maksimum 250 px, maka ketinggian ini merupakan ketingian rekomendasi saja. Untuk menerapkan tinggi fleksibel nilai lebar juga dapat dibuat fleksibel dengan menuliskan : 'flex-width' => true,
  • 'wp-head-callback' => 'wptutorial_header_style',, 'admin-head-callback' => 'wptutorial_admin_header_style',, dan 'admin-preview-callback' => 'wptutorial_admin_header_image', – Fungsi-fungsi ini disebut sebagai fungsi callback . Fungsi ini akan dipanggil untuk : 1) Mengatur penampilan kustom header ketika dilihat dalam tampilan utuh theme ; 2) mengatur pratampilan kustom header yang dilihat di  Dashboard → Header; and 3) mengatur markup gambar kustom header di laman pratampil kustom header di menu  Dashboard → Header.

Ada banyak parameter yang dapat ditambahkan di array  $args , selengkapnya dapat dilihat di WordPress Codex.

Untuk mengatasi kompatibilitas versi background, digunakan fungsi get_custom_header() .

Selanjutnya kita lihat kode :

Kode diatas menguraikan fungsi callback yang mengatur bagaimana kustom header tampil di theme. Kode diatas menjelaskan jika user telah mengunggah gambar header atau menentukan kustom teks header, fungsi akan menambahkan blok CSS di dalam tag  <head> .  Blok ini mengandung kaidah bagaimana menampilkan gambar header dan teksnya.

Kita telah menambahkan markup gambar header di file  header.php. Di kode diatas kita dapat mengatur style gambar jika perlu. Jadi yakinkan kalau tag  .site-header img sebagai nama selektor untuk theme benar-benar ada.

Teks header dapat juga disembunyikan jika memang dipilih untuk disembunyikan oleh user.

Terakhir kita akan tampilkan judul dan deskripsi untuk menampilkan warna kustom header teks .

Selanjutnya, kita punya kode berikut :

Fungsi callback ini mengatur kustom header di pratinjau yang dapat dilihat di menu Dashboard → Appearance → Header. Tujuannya adalah mencocokkan laman depan theme setepat mungkin. Ini berarti kita harus membuat elemen style yang sama dengan font, warna, dan background yang digunakan di stylesheet theme.

Terakhir, kita punya fungsi yang mengatur markup untuk gambar kustom header di laman pratinjau header.  Silahkan memodifikasinya sesuai dengan theme Anda.

Akhirnya, bagian ini selesai sampai disini dan secara teknis tutorial dasar theme pun selesai. Untuk memperbaiki tampilan, silahkan coba mengubah beberapa parameter dan lihat kembali tampilan theme Anda.

Bagian selanjutnya adalah aspek distribusi theme, optimisasi Theme dengan SEO, dan mungkin yang lebih teknis adalah Theme Options yang Insya Allah akan dibahas di bagian tersendiri.

wptutprial-admin-header-2

Tinggalkan Balasan

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