Jika kamu sampai di halaman ini, saya akan berasumsi bahwa kamu sudah menemukan bahwa WordPress adalah sebuah platform CMS yang versatile! (Setidaknya menurut saya dan kamu) Dan kamu mulai tertarik untuk mempelajarinya lebih lanjut. Maka langkah ‘benar’ selanjutnya adalah mengetahui cara membuat theme / template wordpress.
Banyak tutorial mengenai cara membuat template wordpress, apakah tutorial saya ini sama saja seperti tutorial lainnya? Well, silahkan teman-teman berkomentar setelah membacanya ya.
Ok, disini saya akan mencoba berbagi tutorial/cara membuat theme wordpress sederhana dari awal Dan garis besar pembahasan saya akan meliputi:
1. Struktur HTML theme wordpress
2. File-file dasar pada sebuah wordpress theme: header, footer, index, function
3. File-file dasar pada sebuah wordpress theme 2: single page template, sidebar template, 404 page template, category template, comment template, search page template
4. Struktur fallback
5. Membuat page template sendiri, mengenal template part
6. Pedoman dasar membuat CSS theme wordpress yang baik: reset CSS
Namun sebelumnya, kita perlu mengenal tool yang akan membantu proses pembuatan wordpress theme, anggap lah ini adalah alat dan bahan dalam membuat kue. Apa saja tool tersebut:
- WordPress (tentu saja), download versi terbaru dari wordpress.org
- Webserver lokal (bisa XAMPP untuk pengguna windows, MAMP untuk pengguna Mac, Apache, dll)
- Dummy content, nanti setelah instalasi wordpress selesai, bisa diisi konten sample. Saya suka menggunakan Lorem ipsum generator biar cepet. (google lorem ipsum generator)
- Text editor, untuk mengedit file-file php (text editor free: sublime text, notepad++)
- Browser (hellawww), saya biasa pakai chrome, tinggal klik kanan-> inspect element, kalau mau periksa error dan struktur html.
- Pengetahuan dasar HTML, CSS, dan PHP. Yes,the good thing about WordPress adalah ramah untuk pemula seperti kita-kita.
Ok, sudah siap semua alat dan bahannya? Mari kita download wordpress, install web server, text editor ready, dan segelas kopi. Baru lanjut ke point berikutnya:
1. Mengenal HTML theme wordpress
Folder template wordpress ada di root/wp-content/themes/namatemplate
Struktur html halaman wordpress pada umumnya :
< html>
< head>
< body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
</div><!-- #branding -->
<div id="access">
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
<div id="container">
<div id="content">
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
</div><!-- #main -->
<div id="footer">
<div id="colophon">
<div id="site-info">
</div><!-- #site-info -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
Html diatas, akan didistribusikan kedalam :
index.php
header.php
sidebar.php
footer.php
yang akan dijelaskan dipoint berikutnya
2. File-file dasar pada sebuah wordpress theme: header, footer, index, function
2.1 header.php
masukkan sebagian kode html di atas kedalam header.php seperti ini:
< html>
< head>
< body>
<div id="wrapper" class="hfeed">
<div id="header">
<div id="masthead">
<div id="branding">
</div><!-- #branding -->
<div id="access">
</div><!-- #access -->
</div><!-- #masthead -->
</div><!-- #header -->
<div id="main">
2.2 footer.php
dan bagian kode html ini kedalam footer.php:
</div><!-- #main -->
<div id="footer">
<div id="colophon">
<div id="site-info">
</div><!-- #site-info -->
</div><!-- #colophon -->
</div><!-- #footer -->
</div><!-- #wrapper -->
2.3 index.php
untuk index.php masukkan html berikut:
< ? php get_header(); ? >
<div id="container">
<div id="content">
</div><!-- #content -->
</div><!-- #container -->
<div id="primary" class="widget-area">
</div><!-- #primary .widget-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary -->
< ? php get_footer(); ? >
fungsi php get_header() dan get_footer() untuk apa? yep untuk menginclude file header.php dan footer.php
2.4 Style.css
File ini yang akan menjadi deskripsi template kamu di dashboard sewaktu memilih theme. Kode awal ini harus selalu ada disetiap style.css. Karena wordpress membaca identitas template dari sini.
/* Theme Name: Your Theme Theme URI: http://example.com/example/ Description: A search engine optimized website framework for WordPress. Author: You Author URI: http://example.com/ Version: 1.0 Tags: Comma-separated tags that describe your theme . Your theme can be your copyrighted work. Like WordPress, this work is released under GNU General Public License, version 2 (GPL). http://www.gnu.org/licenses/old-licenses/gpl-2.0.html . */
2.5 function.php
tempat kamu menyimpan semua fungsi php yang akan digunakan template, juga definisi script JS atau jQuery sebaiknya dilakukan disini. Untuk sekarang kosong dulu tidak apa-apa.
Kamu sekarang bisa buka browser, akses wordpress kamu, login, dan ganti theme wordpress dengan yang baru kamu buat. Yep, selamat yah atas template wordpress baru kamu!
Siap lanjut point berikutnya? saya napas dulu yaa
3. File-file dasar pada sebuah wordpress theme 2: single page template, sidebar template, 404 page template, category template, comment template, search page template
to be confirmed 🙂