Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Theme Development
Code

Panduan Wordpress Theme: Persiapan

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called A Guide to the WordPress Theme Customizer.
A Guide to the WordPress Theme Customizer: What It Is, Why It Benefits Us
A Guide to the WordPress Theme Customizer: Sections, Settings, and Controls

Indonesian (Bahasa Indonesia) translation by Rakhmad Apriansyah (you can also view the original English article)

Di seri kali ini, kita bakal melihat keseluruhan dari WordPress Theme Customizer .

Secara khusus, kita bakal memahami 'apa sih' sebagaimana 'kenapa sih' customizer bermanfaat buat kita, bagaimana cara memasang ke dalam theme kita, bagaimana cara kerja dalam konteks ke theme lainnya, dan bagaimana memperkenalkan bagian, pengaturan, dan pilihan kita sendiri ke Customizer.

Seperti disebutkan dalam artikel yang terakhir, kita telah melihat-lihat Theme Customizer dalam artikel sebelumnya, tapi kita perlu melihat ulang karena yang itu udah lama banget. Selain itu, kita mau cara lain buat menghilangkan batasan antara apa yang pengguna harapkan terjadi dibanding apa yang sebenarnya terjadi. Selain itu, ini adalah tugas kita untuk mencoba membuat pengalaman pengguna jadi senyaman mungkin.

Jadi dalam artikel ini, kita akan melanjutkan diskusi kita tentang Theme Customizer dengan belajar bagaimana untuk memasangkan ke theme yang belum punya.


Eh bentar, kita memasang Theme Customizer? Ngapain?

Gue tau, gue tau - kebanyakan theme yang ada di pasaran hari gini - setidaknya yang telah diperbarui untuk WordPress 3.4 dan lebih baru - sudah memasangkan theme customizer, dan mudah banget kalo mau ngambil yang udah ada.

Bahkan, gua berani bilang bahwa sebagian dari kamu yang membaca artikel ini sudah terbiasa menggunakan Theme Customizer di kerjaan kamu dengan sedikit copy paste untuk membuat dan memodifikasi apa aja buat menerapkannya ke theme kamu.

Gue bilang begitu bukan karena suka, bukan juga karena gak suka, tetapi mengakui bahwa beginilah cara yang banyak dipakai developer: Mereka menemukan solusi yang sudah dibuat orang, menerapkan dalam kerjaan mereka, kemudian ya .. begitu aja terus.

Tidak ada yang salah dengan ini - pada kenyataannya, itu bagian yang bikin open source jadi keren - tetapi kita tidak di sini untuk membahas "bagaimana cara copy paste Theme Customizer." Kita sedang belajar bagaimana untuk mengintegrasikannya.

Jadi dalam langkah-langkah berikut, kita akan pakai theme yang dasarnya tidak punya Theme Customizer, dan kemudian memperhatikan - baris demi baris - pada hal yang diperlukan untuk memasangnya sehingga kita dapat mulai menggunakannya di theme kita.

Tujuan akhir artikel ini adalah kamu tidak hanya tahu bagaimana untuk mengintegrasikan Theme Customizer, tapi kamu tahu apa maksud dari setiap kode.

Pertama, Ayo bikin Theme

Untuk keperluan artikel ini, kita akan memakai WordPress Theme yang sangat sederhana. Keseluruhan sumber akan disediakan pada akhir artikel, tapi sampai saat itu, mari kita mulai pada membuat theme selangkah demi selangkah.

Perhatikan bahwa segala sesuatu yang kita bakal lakuin adalah bagian dari praktek pembangunan theme seperti diuraikan dalam masing-masing artikel WordPress Codex.

Pertama, dalam instalasi lokal Wordpress kamu, buat sebuah folder dalam wp-content/themes bernama theme-customizer-example. Dari sini, kita akan mulai menambahkan kode sumber kita.

Stylesheet

Pertama, kita perlu bikin stylesheet sehingga WordPress mengenali theme dalam menu dashboard 'Tampilan' / 'Appearance'. Untuk itu, kita perlu memberikan style.css dengan blok komentar di bagian atas file.

Buat contoh, gue pake yang beginian:

Selanjutnya, mari kita tambahkan beberapa file template lain untuk menyempurnakan theme.

Template Header

Selanjutnya, kita ingin mendefinisikan Template header. Yang menggunakan file header.php dengan menambahkan kode berikut:

Gak rumit-rumit banget, ya kan? Sederhananya, kita sudah definisikan elemen head kita, tag pembukaan body, lalu sebuah elemen div sederhana yang digunakan mewakili header.

Kita lalu menyertakan h1 untuk menampilkan judul blog serta h2 untuk menampilkan deskripsi blog.

Template Index

Untuk maksud dan tujuan dalam seri ini, kita akan bekerja dengan satu template untuk menampilkan konten. Secara khusus, segala sesuatu yang kita tampilkan akan dilakukan menggunakan index.php.

Ini akan jadi template sederhana yang menampilkan header, footer, dan satu baris teks:

Tak diragukan lagi, inilah template yang paling sederhana diantara semuanya, kan?

Template Footer

Kita hampir selesai - hal berikutnya yang perlu kita lakukan adalah memperkenalkan dasar template footer yang akan berfungsi sebagai tempat untuk, bisa dibilang, menampilkan tanggal hak cipta dari blog.

Untuk itu, kita akan menerapkan kode berikut:

Perhatikan bahwa output template ini dibaca "Copyright 2013 [Nama Blog] All Rights Reserved." Tentu saja, jika Anda membaca artikel dalam tahun berikutnya kemudian kode akan berbeda juga.

Gak lupa Screenshot juga!

Catat bahwa jika kamu mau theme kamu memiliki gambar yang bagus - atau bahkan lucu - di dashboard, maka bisa menyiapkan file screenshot.png di root direktori theme.

Theme Customizer Example

Dimensinya harus 300 x 225 (atau gandakan untuk yang tampilan HiDPI). Seperti yang kamu lihat dalam contoh di atas, gue putuskan untuk pake salah satu gambar dari komik favorit gue.

Tentu saja, kamu bisa pilih pake apa pun yang kamu mau - atau gak pake apapun juga boleh.


Tampilan awal Theme

Pada titik ini, kita sudah siap untuk melihat theme. Jadi aktifkan tema di dashboard kamu dan kamu bakal lihat sesuatu yang mirip dengan gambar di bawah:

Theme Customizer Example Homescreen

Seperti yg gue bilang - ini gak rumit-rumit banget, tapi bakal membantu kedepannya.

Dan ada satu hal: Theme Customizer sudah ditambahkan ke semua theme default kedepannya. Nggak, kamu gak bisa benar-benar menyesuaikan semua aspek dari theme, tapi mari kita coba aja.


Menjalankan Theme Customizer

Dari menu 'Tampilan' / 'Appearance' di dashboard, klik pada item menu 'Tema', kemudian klik pada link 'Customize' / 'Sesuaikan' yang muncul di bawah deskripsi tema kamu.

Itu bakal menjalankan Theme Customizer dan kamu bakalan melihat sesuatu kayak begini:

Theme Customizer Example

Dari sini, buka bagian Judul Situs & Slogan dan kemudian modifikasi isi dari masing-masing bidang itu. Pastikan segala sesuatu terisi dengan benar, maka kamu bakal melihat perubahan segera terjadi dalam panel pratinjau.

Masih murni banget, ya gak?


Tapi tentu gak segitu doang!

Jelas, kita baru saja mau mulai karena kita bahkan belum mulai dari apa yang dapat lakukan Theme Customizer atau bagaimana kita dapat menambahkan opsi tambahan ke customizer.

Tetapi untuk sekarang, kamu harus memiliki dasar yang memberikan pola yang mana kita akan kerja dan fungsikan dasar dari theme customizer.

Kita akan menyelam lebih dalam secara signifikan dalam artikel berikutnya. Untuk saat ini, kamu bisa ambil salinan theme ini menggunakan link ini dari repositori GitHub.


Episode selanjutnya ...

Seperti yang telah disebutkan sebelumnya dalam artikel, tujuan dari posting ini adalah untuk menjelaskan bagaimana dan kenapa dari Theme Customizer. Singkatnya, kamu bakal mampu menjelaskan ke orang lain bagaimana cara memasangkan Theme Customizer karya mereka, dan ada apa aja di setiap baris kodenya.

Tapi itu baru sebagian.

Dalam artikel berikutnya, kita akan menyelam lebih dalam ke pengertian bagian, pengaturan, dan kontrol dan bagaimana itu-itu semua berhubungan dengan theme customizer. Ini akan memberi dasar yang kuat dari bagian mana kita dapat mulai membangun fitur kita sendiri ke theme customizer dan tentunya theme kita sendiri.

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.