Di luar sana, ada banyak sekali bertebaran tema atau template Wordpress gratis. Namun, kita perlu hati-hati dalam menggunakan template gratis tersebut.
Beberapa hari yang lalu, saya sudah mengecek website wordpress teman saya. Katanya ia memesan web sekaligus temanya dari seorang developer.
Begitu saya cek…
Eh, ternyata di sana ada script backdoor yang memungkinkan si developer masuk kapan saja ke web dia.
Script ini ditanam pada kode tema atau template.
Si developer bisa saja melakukan deface. Lalu, meminta bayaran tambahan untuk mengembalikannya. Ini cara yang licik dan terkutuk.
Itu sebabnya kita harus membuat tema sendiri…
…atau menyuruh orang yang terpercaya membuatkan template.
Lebih baik sih buat sendiri.
Buat kamu yang belum paham cara membuat blog atau website dengan Wordpress, saya sarankan membaca Cara Membuat Blog di Wordpressterlebih dahulu.
Setelah itu, lanjutkan membaca artikel ini.
Persiapan Awal untuk Membuat Template Wordpress
Adapun yang harus dipersiapkan untuk membuat template wordpress:
- Sudah Memahami HTML, CSS, Javascript, dan PHP
- Teks Editor
- Wordpress yang sudah terinstal di localhost atau server
Pemahaman terhadap kode HTML, CSS, Javascript, dan PHP akan sangat membantu sekali dalam pembuatan template.
Jika kamu belum memahami, silahkan pelajari dulu dasar-dasarnya. Silahkan cek tutorialnya di sini:
- Tutorial HTML untuk Pemula
- Tutorial CSS untuk Pemula
- Tutorial Javascript untuk Pemula
- Tutorial PHP untuk Pemula
Konstruksi Awal Template
Semua template wordpress akan disimpan pada direktori wp-content/themes/. Di sanalah kita akan membuat tema baru.
Silahkan buat direktori baru di sana dengan nama temanya. Contoh: nama tema yang akan saya buat adalah petanikode.
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- dan
style.css
File index.php adalah file utama yang akan diaksess saat website dibuka [homepage]. Sementara itu, file style.css berisi kode CSS untuk menghias dan mengatur tampilan tema.
Isi file index.php
Tema Wp pertama
Hello world, ini adalah tema Wordpress perama saya
dibuat dari nol dengan penuh semangat
dan isi file
/*
Theme Name: Petani Kode
Author: Ardianta Pargo
Author URI: //ardianta.github.io
Version: 0.1
Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak.
*//*
Theme Name: Petani Kode
Author: Ardianta Pargo
Author URI: //ardianta.github.io
Version: 0.1
Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak.
*/Perhatikan!
Di dalam kode style.css berisi komentar yang akan menjadi meta data atu keterangan dari template.
2 adalah nama tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
3 adalah nama pembuat tema atau developer/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
4 adalah alamat website pembuat tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
5 adalah versi tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
6 adalah keterangan singkat tentang tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
Contoh kode css untuk meta data yang lebih lengkap:
/*
Theme Name: Twenty Thirteen
Theme URI: //wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: //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: //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:
7 adalah alamat website tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
8 adalah lisensi tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
9 adalah alamat lisensi tema/* Theme Name: Petani Kode Author: Ardianta Pargo Author URI: //ardianta.github.io Version: 0.1 Description: Tema ini untuk belajar membuat tema dari nol. Saat ini isinya masih sedikit karena masih dasar. Insa’allah nanti akan menjadi makin banyak. */
0 tag untuk tema/* Theme Name: Twenty Thirteen Theme URI: //wordpress.org/themes/twentythirteen Author: the WordPress team Author URI: //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: //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. */
Ujicoba Template Wordpress
Sekarang saatnya kita mengujicoba 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.
Hore! selamat. 🎉
Apa Selanjutnya?
Tema pertama kita sudah bisa digunakan. Ini adalah tampilan awalnya. Tentu, ini bukan hasil akhir yang kita inginkan.