Table of contents:
- Belajar bikin template wordpress
- Pemahaman dasar template wordpress
- Persiapan bikin template wordpress
- Bikin template wordpress sederhana
Belajar bikin template wordpress sendiri
Sebagai pengantar, tutorial ini bukanlah cara bikin template wordpress dengan Artisteer ataupun bikin template wordpress dengan aplikasi instant lainnya semacam wordpress converter dan builder, bukan pula dengan bim salabim langsung jadi, tetapi belajar bagaimana cara bikin template wordpress dari dasar sesuai standar coding wordpress.
Agar lebih mudah dalam belajar bikin template wordpress, ada beberapa hal yang perlu dipahami terlebih dahulu bahwa semua halaman web, baik itu website berbasis wordpress atau yang lain, saat dilihat oleh pengunjung web, adalah menggunakan HTML. Karna code inilah yang bisa dipahami oleh browser (chrome, firefox, edge, dll) kemudian ditampilkan kepada pengunjung web. Di dalam file HTML terdapat code html untuk menampilkan konten halaman, code CSS (atau dibuat di file terpisah) untuk mengatur desain, layout, gaya, warna, dan lain sebagainya, dan code javasrcipt jika diperlukan untuk mengatur fungsi tertentu seperti slider, dan lain sebagainya.
Sedangkan bahasa pemrograman PHP hanya bekerja di sisi server, bukan di browser. Server memproses file PHP yang berisi code PHP (dengan fungsi pemrogramanya/logicnya) dan juga code HTML (untuk tampilan halamannya), lalu mengirim outputnya ke browser pengunjung web sebagai file HTML. Di tahap ini, code PHP sudah berupa output atau hasil dari eksekusi scripting PHP yang diproses oleh server. Misalnya code PHP untuk mengambil data posting wordpress, lalu outputnya berupa artikel postingan tersebut. Nah, agar artikel bisa tampil dengan gaya dan desain tertentu, maka dibungkus dengan code HTML untuk struktur artikelnya yang dikontrol oleh CSS untuk gaya dan desainnya.
Pemahaman dasar template wordpress
Jadi basic daripada template wordpress adalah file PHP yang berisi code HTML halaman web yang mana pada bagian2 tertentu dari code HTML tersebut disisipi code PHP untuk mengambil data (dari database) wordpress yang diperlukan, seperti judul website, judul posting, isi posting, tanggal posting, gambar, halaman, widget, dan lain sebagainya.
Dengan kata lain, file PHP yang berisi kode HTML atau file HTML yang diubah menjadi file PHP lalu pada bagian tertentu disisipi/diganti code PHP yang diperlukan. Itulah yang disebut template wordpress.
Selanjutnya yang harus dipahami dalam belajar bikin template wordpress adalah tentang anatomi dan hierarki template wordpress. Gambaranya seperti di bawah ini.
- Ketika alamat web (home) diakses, misalnya tomdonyet.com maka file yang dipakai adalah file home.php, kalau tidak ada maka file index.php
- Ketika halaman statis yang diakses, misal tomdonyet.com/tentang-kami, maka file yang dipakai adalah file page.php, kalau tidak ada maka file index.php
- Ketika halaman posting yang diakses, misalnya halaman yang sedang anda baca ini, maka file yang dipakai adalah single.php, kalau tidak ada maka file index.php
Itu gambaran sekilas saja, jadi paling sederhana sebuah template wordpress terdiri dari file index.php dan file style.css untuk nama template dan kontrol desainnya. Tanpa kedua file ini, template akan terdeteksi sebagai template yang rusak dan tidak bisa dipakai.
Sebenarnya hierarki template wordpress itu lebih kompleks lagi, lebih detail. Misalnya, untuk menampilkan halaman statis, kita juga bisa membuat file khusus untuk menampilkan halaman dengan ID tertentu. Contoh halaman Tentang Kami ber-ID “2”, maka file yang dipakai yaitu page-2.php, jika ID nya 5, file yang dipakai page-5.php, dan seterusnya. Begitu juga dengan category, post type, taxonomy dll bisa dibuat file halaman khususnya. Kita juga bisa membuat file php khusus yang bisa dipakai untuk halaman tertentu yang bisa kita pilih melalui dasbor admin.
Namun, untuk pemula yang sedang belajar bikin template wordpress agar tidak langsung stress, sebaiknya dari yang sederhana dulu, template wordpress yang simple. Mari kita lanjutkan dengan contoh membuat template wordpress yang paling sederhana, paling minimalis.
Persiapan bikin template wordpress
Untuk mempermudah proses bikin template wordpress karna harus test dan lihat hasilnya, maka perlu mempersiapkan ubo rampenya.
Persiapan pertama, anda perlu mengubah komputer atau laptop anda menjadi server lokal, seperti hosting online yang bisa dipakai untuk upload website atau install wordpress dan berbagai jenis web lainnya. Jadi tidak perlu koneksi internet, tidak perlu ribet edit file langsung di hosting maupun dengan cara download, edit lalu upload lagi.
Jika anda belum membuat server lokal, silahkan baca tutorial membuat server lokal di komputer dengan mudah dan cepat
Selanjutnya, komputer anda harus terinstall software atau aplikasi untuk edit code PHP. Jika anda belum memilikinya silahkan baca tutorial 7 software coding gratis untuk pemula.
Bikin template wordpress sederhana
Baiklah, kita akan bikin template wordpress paling dasar dengan minimal file yang diperlukan yaitu index.php dan style.css, untuk membuat landing page atau minisite yang berisi satu halaman saja, halaman promosi untuk produk/jasa, atau promosi bisnis affiliasi dari situs lain.
Saya asumsikan anda sudah menginstall wordpress di server lokal, jika belum silahkan cek kembali tutorial membuat server lokal di komputer. Di tutorial itu ada bagian test server lokal untuk install wordpress.
Pastikan kembali anda sudah menjalankan server lokal dan menginstall wordpress, dan juga software code editor, saya sarankan pakai Visual Studio Code agar sesuai dengan tutorial ini. Pakai editor lainpun tidak masalah, cuma proses membuat file nya berbeda, tetapi intinya sama yaitu membuat file baru di folder template wordpress yang baru.
Membuat folder template wordpress baru
Buka folder wp-theme pada instalasi wordpress di server lokal anda, lalu buat folder baru untuk nama template tersebut dengan cara klik kanan pada area kosong , klik New , klik Folder
Ubah/Rename nama foldernya menjadi nama template yang anda inginkan misalnya tema-baru
Langkah selanjutnya adalah membuat file index.php dan style.css di dalam folder tersebut. Ada dua pilihan, buat file langsung di windows explorer, dan atau di aplikasi editornya.
Membuat file baru di windows explorer
Jika di windows exploler, buka dulu pengaturan Folder Option, klik untuk menonaktifkan (tidak dicentang) Hide extensions for known file types
Selanjutnya buka folder template barunya, klik kanan pada area kosong => klik New => klik Text Document
Ubah nama file baru New Text Document.txt (klik kanan => klik Rename) menjadi index.php (diketik lengkap dengan extensinya .php)
Lalu tekan tombol Enter, jika ada pop up muncul klik saja Yes
Ulangi langkah di atas untuk membuat file style.css (diketik lengkap dengan extensinya .css)
Membuat file baru di aplikasi editor
Dalam tutorial ini menggunakan aplikasi Visual Studio Code. Klik kanan folder template baru yang telah anda buat, lalu klik Open with Code
Klik icon New File pada baris folder template wordpressnya
Ketik nama file index.php lalu tekan tombol Enter
Ulangi langkah membuat file baru tersebut untuk membuat file style.css, sehingga akan seperti gambar di bawah ini
Langkah selanjutnya adalah mengisi atau mengedit kedua file tersebut dengan code yang dibutuhkan. Pertama kita akan isi style.css untuk register nama template barunya.
Buka dan edit file style.css, isikan code seperti di bawah ini
Copy paste code di bawah ini, lalu sesuaikan dengan nama tema anda sendiri, tidak semua baris harus diisikan, minimal Theme Name, lalu simpan
/*
Theme Name: Test tema
Theme URI: https://tomdonyet.com
Author: Tom
Description: Untuk belajar membuat theme wordpress
*/
Selanjutnya untuk testing dulu, edit file index.php, isikan tulisan apa saja terserah hanya untuk ngetes misalnya belajar membuat template wordpress
Sekarang buka admin wordpress pada instalasi wordpress di server lokal anda
Masuk ke menu Theme, tema baru akan tampil di situ, lalu klik Activate untuk mengaktifkannya
Buka alamat situs tersebut untuk melihat hasilnya
Oke, anda sudah berhasil membuat template wordpress baru, tetapi masih kosong 🙂
Pelajaran selanjutnya tinggal mengisikan code HTML dan code PHP untuk ambil data wordpress yang diperlukan.
Buka/edit file index.php yang terdapat dalam folder template wordpress yang baru, letakan code-code seperti yang saya jelaskan berikut ini.
Struktur dasar source code dari sebuah halaman web itu seperti ini
<!DOCTYPE html>
<html>
<head>
ini elemen head, tidak ditampilkan di frontend halaman web
</head>
<body>
ini elemen body, tampil sebagai halaman web yang bisa dilihat oleh pengunjung web
</body>
</html>
Jadi, semua source code halaman website itu strukturnya seperti itu, termasuk website berbasis wordpress.
Bagian head berfungsi untuk menempatkan beberapa code yang tidak ditampilkan di browser/pengunjung web, tetapi diperlukan, misalnya untuk menempatkan link lampiran/tautan file CSS dan javascript (berfungsi mengontrol desain dan pengalaman pengguna sehingga bisa tampil indah di layar laptop pengunjung web), meta tag untuk memberikan informasi tentang halaman website seperti judul dan deskripsi agar google (mesin pencari) paham, dan meta data lain yang digunakan untuk memberikan informasi tambahan dari sebuah halaman website.
Bagaimana dengan wordpress, apakah ada code standar yang harus diletakan di bagian head?
Tidak ada, jadi ini terserah yang mau bikin template, tergantung templatenya mau bagaimana dan seperti apa.
Yang wajib ada yaitu code ini:
<?php wp_head(); ?>
Tanpa code itu, beberapa plugin tidak akan berjalan normal, misalnya plugin SEO akan menambahkan beberapa code yang diperlukan seperti judul, deskripsi dan meta data lainnya. Contoh lain plugin slider, gallery, dan sejenisnya akan manambahkan link lampiran file CSS dan javascript. Jadi jangan sampai lupa menambahkan code php wp_head seperti di atas di bagian head.
Kemudian jika template wordpress yang anda buat desainnya responsive, dalam arti lebar website akan menyesuaikan lebar layar gadget yang dipakai pengunjung web (jadi tidak dizoom saat pakai HP sebab terlalu kecil), maka code yang harus ditambahkan adalah
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Tanpa code itu, desain responsive tidak akan berjalan normal di smartphone.
Selanjutnya, jika template wordpress anda menggunakan CSS pada file yang terpisah, misal code CSS nya di simpan di file style.css seperti contoh yang saya buat, atau di situs lain/cdn, maka harus menambahkan link tautan untuk melampirkan file css tersebut di mana file itu berada. Contoh file style.css berada di root folder template, maka kodenya seperti di bawah ini
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet">
Baiklah kalau begitu, sebaiknya saya buatkan semua code yang seharusnya ada di bagian head dari file template wordpress anda
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet">
<?php wp_head(); ?>
Penjelasan tambahan :
- Meta charset : browser perlu mengetahui set karakter apa yang digunakan untuk dapat merender halaman HTML dengan benar. Sebagian besar browser menggunakan UTF-8 secara default, jika tidak ada pengkodean karakter tertentu yang ditentukan. Untuk wordpress sudah ada tag php nya seperti code di atas.
- Title : untuk menampilkan judul website di bagian tab browser dan juga untuk di tampilkan di hasil pencarian google, bing, dll. Bukan yang di header website yang muncul di halaman web.
- Meta description : untuk memberitahu mesin pencari web tersebut tentang apa, sama seperti title, ditampilkan di hasil pencarian google, dkk. Jika pakai plugin SEO, ini tidak diperlukan.
Selanjutnya, karna pengisian dan desain landing page dilakukan langsung di editor posting wordpress, maka kita perlu css default atau basic dan normalize. File css ini sudah diupload di hosting CDN, anda hanya perlu mengcopy dan meletakannya di bagian HEAD
<link rel="stylesheet" href="https://muhutomo.github.io/wp/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/base-min.css">Sekarang tinggal bagian body, bagian ini adalah apa yang akan dilihat oleh pengunjung web. Sebagaimana yang sudah saya jelaskan di atas, dalam tutorial ini, kita akan membuat template wordpress sangat sederhana untuk membuat satu halaman landing page/minisite/salespage untuk mempromosikan produk/jasa maupun produk afiliasi dari situs lain.
Semua isi dari halaman sales page dilakukan di halaman admin di menu post, atau page. Jadi untuk menampilkan posting tersebut di halaman depan (halaman utama website), ada 2 sekenario :
- Buat di menu post (satu post saja) biar ini yang tampil sebagai halaman depan saat seseorang membuka alamat website anda.
- Buat di menu page (sebagai halaman statis) , lalu ubah tampilan homepage/beranda di Pengaturan – Membaca
Baik cara satu maupun dua, sama-sama akan tampil sebagai halaman depan, jadi terserah anda mau pakai post atau page.
Kita buat contoh membuat postingan atau halaman statis yang berisi sales page penjualan produk. Sekedar informasi, wordpress memiliki editor posting baru yang disebut Gutenberg, yaitu cara membuat posting dengan sistem block, yang memungkinkan untuk membuat desain layout langsung di halaman posting. Jika anda masih bingung dengan editor baru ini, anda bisa memakai plugin classic editor untuk mengembalikan tampilan editor posting ke versi lama, atau menggunakan block classic.
Dalam tahap ini, sebaiknya anda sudah membuat postingan terlebih dahulu, seperti contoh di bawah ini
Kembali ke file index.php, letakan code di bawah ini di bagian BODY
<style>
.box {
display:block;
width:80%;
max-width:780px;
margin: 7% auto;
padding: 20px;
background:#f9f9f9;
border:1px solid #dedede;
min-height:350px;
}
.box p {line-height:24px;}
.box li {line-height:24px;}
</style>
<div class="box">
<center><h1><?php the_title();?></h1></center>
<?php the_content();?>
</div>
Sedikit penjelasan :
- Kode <style>…</style> adalah code css yang ditulis langsung di file index.php, ini bisa anda pindah ke file style.css tanpa tag <style> </style>.
- Kode <div class=”box”>…</div> untuk membuat layout, desainnya diatur dengan css class .box , anda bisa mengedit property dari class tersebut.
- Kode <center>…</center> untuk rata tengah.
- Kode <h1>…</h1> heading satu.
- Kode <?php the_title();?> ini untuk mengambil data judul posting wordpress.
- Kode <?php the_content();?> untuk mengambil data isi posting wordpress.
Contoh kode di atas adalah layout desain responsive sangat sederhana dengan tampilan seperti gambar di bawah ini
Judul posting dipakai sebagai headline utama halaman web tersebut. Anda bisa saja tidak menampilkan judul posting, tapi ini penting untuk SEO.
Langkah terakhir adalah menyisipkan kode di bawah ini tepat sebelum tag penutup body </body>
<?php wp_footer(); ?>
Kode tersebut berfungsi untuk menyisipkan code yang diperlukan bagi wordpress, dan juga bagi plugin yang dipakai, misalnya url javascript dan css
Tutorial ini hanyalah panduan dasar sederhana, selanjutnya mungkin anda juga ingin membuat template wordpress dengan template HTML silahkan baca di link ini
Sebenarnya template wordpress bisa dibuat untuk website apa saja, dan untuk tujuan tertentu, bisa untuk website iklan mobil, properti, booking hotel, dan sebagainya termasuk untuk membuat website polling atau survei online.
Jika membutuhkan jasa pembuatan theme wordpress silahkan hubungi kami.
