Template WordPress merupakan bagian dari WordPress yang keberadaannya tidak kalah penting dari plugin maupun domain. Saat ini banyak template WordPress gratis, tetapi template yang berkualitas tidak gratis dan kita harus membelinya.
Sebelum membeli sebaiknya kita memilih template WordPress yang tepat untuk website yang kita kelola. File template WordPress biasanya terdiri dari HTML, PJP, CSS dan JavaScript.
Ada beberapa kebutuhan yang harus kita siapkan, yang pertama kita memerlukan text editor, kita bisa menggunakan text editor VSCode, Notepad++, Sublime dan sebagainya. Kemudian kita harus mempersiapkan web server di localhost, kita bisa menginstal aplikasi seperti XAMPP. Selanjutnya kita install WordPress di localhost, caranya bisa dibaca pada tutorial berikut ini.
Persiapan Awal untuk Membuat Template WordPress
Adapun yang harus dipersiapkan untuk membuat template WordPress :
- Sudah Memahami HTML, CSS, Javascript, dan PHP
- Teks Editor (VSCode, Notepad++, Sublime dan sebagainya)
- WordPress yang sudah terinstal di localhost atau server
Pemahaman terhadap kode HTML, CSS, Javascript, dan PHP akan sangat membantu sekali dalam pembuatan template. Jika belum memahami, silahkan pelajari dulu dasar-dasarnya. Silahkan cek tutorialnya di sini:
Dalam tutorial ini akan dibagi menjadi beberapa bagian diantaranya yaitu :
- Bagian 1 : Intro & Registering Template
- Bagian 2 : Frontpage, Header & Footer
- Bagian 3 : Single Page
- Bagian 4 : Menu Navigasi & Sidebar (Widget)
- Bagian 5 : Styling Template
Sebelum membuat template WordPress, maka perlu kita ketahui bagaimana file-file pada template WordPress bekerja dan apa fungsi-fungsinya.
Template Hierarchy
WordPress menggunakan template Hierarchy atau urutan template pada file-file template-nya, yang berarti tiap-tiap file yang membentuk template WordPress memiliki prioritas, dari prioritas yang terbesar ke yang terkecil, dari yang wajib sampai yang optional, dan sebagainya. Untuk lebih jelasnya kita bisa merujuk ke link berikut WordPress Template Hierarchy
Sedangkan untuk membuat template WordPress file-file yang diharuskan ada pada setiap template berdasarkan prioritas dari yang terbesar ke yang terkecil ialah sebagai berikut :
- style.css (wajib), digunakan untuk styling tampilan website dengan menggunakan kode CSS.
- index.php (wajib), merupakan halaman utama untuk menampilkan halaman individual seperti About Us, Contact Us, Vision, Mission, dan lain-lain.
- header.php (optional), digunakan untuk menampilkan Header website di semua halaman.
- footer.php (optional), digunakan untuk menampilkan Footer website di semua halaman.
- single.php (optional), digunakan untuk menampilkan halaman Artikel/Post.
Sebenarnya ada banyak file-file pendukung yang bisa kita gunakan seperti category.php, archive.php, attachment.php dan lain-lain, untuk membentuk sebuah template WordPress namun kebanyakan bersifat optional, kita bisa mengembangkannya sendiri dengan merujuk ke link berikut WordPress Template Development.
Dalam tutorial ini kita hanya menggunakan kelima file tersebut di atas karena file-file tersebut sudah cukup untuk membentuk sebuah template WordPress sisanya tinggal kita kembangkan sendiri nanti.
Registering Template
Untuk dapat menggunakan template WordPress terlebih dahulu kita harus mendaftarkan template yang kita buat agar terbaca oleh aplikasi WordPress pada halaman Themes yang terdapat pada menu Appearance > Themes.
Untuk memulainya silahkan kalian ikut langkah-langkah berikut :
- Sebelumnya silahkan install WordPress baru atau yang sudah terinstall pada komputer kita, pada tutorial ini menggunakan project WordPress dengan nama wpblog.
- Semua template wordpress akan disimpan pada direktori wp-content/themes/, di sanalah kita akan membuat tema baru.
- Di dalam direktori wp-content/themes/, silahkan buat direktori/folder baru dengan nama temanya, contoh nama tema yang akan kita buat adalah TemaKu.
Kita akan meletakan semua file tema di dalam direktori tersebut. Pada tahapan awal pembuatan tema ini, kita buat dulu dua file penting, yaitu:
- index.php
- style.css
File index.php adalah file utama yang akan diakses saat website dibuka (homepage). Sementara itu, file style.css berisi kode CSS untuk menghias dan mengatur tampilan tema.
Isi file index.php :
<!DOCTYPE html>
<html>
<head>
<title>Tema WP Pertama</title>
</head>
<body>
<h1>Hello world, ini adalah tema WordPress pertama ku</h1>
<p>dibuat mulai dari nol dengan penuh semangat
<p>
</body>
<html>
dan isi file style.css :
/* Theme Name: Tema Ku Theme URI: https://agussuratna.net Description: Tema ini untuk belajar membuat tema dari nol Version: 0.1 Author: Agus Suratna Author URI: https://agussuratna.net */
Perhatikan pada kode style.css, di dalamnya berisi komentar yang akan menjadi meta data atau keterangan dari template.
- Theme Name adalah nama tema
- Author adalah nama pembuat tema atau developer
- Author URI adalah alamat website pembuat tema
- Version adalah versi tema
- Description adalah keterangan singkat tentang tema
Contoh kode CSS untuk meta data yang lebih lengkap :
/* Theme Name: Tema Ku Theme URI: http://wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: http://wordpress.org/ Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready Text Domain: twentythirteen This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */
Keterangan:
- Theme URI adalah alamat website tema
- License adalah lisensi tema
- License URI adalah alamat lisensi tema
- Tag tag untuk tema
Ujicoba Template WordPress
Sekarang saatnya kita menguji coba template yang baru saja kita buat. Masuk ke wp-admin>appearance>themes, di sana kita akan menemukan sebuah tema tanpa gambar thumbnail. Itu adalah tema yang baru saja kita buat. Silahkan aktifkan tema tersebut.
Setelah itu, coba buka website wordpress-nya :
Tema pertama kita sudah bisa digunakan, ini adalah tampilan awalnya dan tentunya ini bukan hasil akhir yang kita inginkan. Selanjutnya kita akan menerapkan fungsi-fungsi wordpress pada file index.php.
Fungsi-fungsi Dasar WordPress di Homepage
Modifikasi File index.php
File index.php merupakan file utama template, file ini yang bertanggung jawab menampilkan halaman utama. Silahkan ganti semua isi file index.php menjadi seperti ini :
<!DOCTYPEÂ html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
<div class="container">
<header class="site-header">
<h1><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h1>
<h5><?php bloginfo('description'); ?></h5>
</header>
<?php
if(have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</article>
<?php endwhile;
else:
echo "<p>Tidak ada artikel</p>";
endif;
?>
<footer class="site-footer">
<div class="attrib">
Copyright ©
<?php echo date('Y'); ?>
<a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a>
|
Developed by <a href="https://agussuratna.net">Agus Suratna</a></div>
</footer>
</div>
<!-- /container -->
<?php wp_footer(); ?>
</body>
</html>
Setelah itu, coba lihat hasilnya :
Kita telah berhasil menampilkan judul website (header), artikel (post) dan footer.
Artikelnya cuma ada satu, karena kita belum menambahkannya. Bila ada artikel yang lain, maka akan ditampilkan juga di sana. Tampilannya saat ini masih polos (plain) karena kita belum menambahkan kode CSS.
Penjelasan Kode Template
Dalam kode index.php terdapat beberapa fungsi yang kita panggil.
- language_attributes();
- bloginfo();
- wp_head();
- body_class();
- home_url();
- have_posts();
- the_post();
- the_title();
- the_content();
- date() (fungsi dari PHP);
- dan wp_footer().
Fungsi-fungsi tersebut adalah fungsi dari wordpress dan PHP, WordPress sudah menyediakan fungsi yang dapat kita pakai.
Mari kita bahas maksud fungsi-fungsi tersebut :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title><?php bloginfo('name'); ?></title>
<?php wp_head(); ?>
</head>
Terdapat tiga fungsi PHP yang dipanggil di bagian*(head)*:
- language_attributs() berfungsi untuk mendapatkan atribut bahasa. Pada wordpress yang kita gunakan, fungsi ini akan mengembalikan nilai en-US karena bahasa default yang kita gunakan adalah bahasa inggris.
- bloginfo() berfungsi untuk menampilkan informasi tentang website/blog. Pada potongan kode di atas, fungsi ini dipanggil dua kali dengan parameter yang berbeda. Fungsi ini akan menghasilkan nilai sesuai parameter yang kita berikan. Sebagai contoh, bloginfo(‘name’) akan menghasilkan judul website yaitu Blog WordPress Ku.
- wp_head() berfungsi untuk memanggil komponen head yang lainnya, seperti tag meta, link css, kode css, javascript, dan sebagainya.
Selanjutnya perhatikan bagian body :
<body <?php body_class(); ?> >
<div class="container">
........ ........
</div>
<!-- /container -->
<?php wp_footer(); ?>
</body>
Pada potongan kode di atas, terdapat dua fungsi PHP yang dipanggil.
- Fungsi pertama body_class() untuk memanggil kelas-kelas yang dibutuhkan tag body.
- Kemudian fungsi wp_footer() fungsinya hampir mirip dengan wp_head(), namun wp_footer() disertai navbar (warna hitam di atas) dan dikhususkan untuk memanggil javascript. Karena pemanggilan Javascript dibagian akhir dokumen HTML dapat meningkatkan kecepatan web.
Berikutnya, coba perhatikan bagian <header> :
<header class="site-header">
<h1><a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a></h1>
<h5><?php bloginfo('description'); ?></h5>
</header>
Pada bagian <header>, kita menggunakan fungsi bloginfo() untuk mengambil judul website dan deskripsinya.
Berikutnya coba perhatikan bagian tengah :
<?php
if(have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</article>
<?php endwhile;
else:
echo "<p>Tidak ada artikel</p>";
endif;
?>
Pada bagian ini, kita akan menampilkan semua artikel yang ada di dalam WordPress. Kita menggunakan fungsi have_posts() untuk mengecek apakah sudah ada artikel atau tidak. Fungsi ini akan mengembalikan nilai true apabila ada artikel.
Berikutnya kita menggunakan perulangan while untuk membuat perulangan berdasarkan banyaknya artikel. Fungsi the_title() akan menghasilkan judul dari artikel yang ada dan the_content() akan menghasilkan kontennya.
Terakhir, coba perhatikan bagian <footer> :
<footer class="site-footer">
<div class="attrib">
Copyright ©
<?php echo date('Y'); ?>
<a href="<?php echo home_url() ?>"><?php bloginfo('name'); ?></a>
|
Developed by <a href="https://agussuratna.net">Agus Suratna</a></div>
</footer>
Pada bagian <footer>, kita mnggunakan fungsi date(‘Y’) untuk mengambil tahun saat ini dan fungsi bloginfo() untuk mengambil nama website.
Pada bagian ini, kita sudah mengenal beberapa fungsi dasar untuk membuat template di WordPress. Fungsi-fungsi ini tidak perlu dihapal, karena sudah ada di dokumentasi. Jika belum memahami arti dari fungsi-fungsi tersebut, kita tinggal buka dokumentasi tersebut.
