Pemula: Membuat Theme WordPress Sendiri
WordPress
Terdapat beberapa kode yang wajib ada di dalam template WordPress agar template tersebut berfungsi dengan baik. Berikut adalah beberapa kode yang umumnya ditemukan dalam template WordPress:
1. Kode Tema WordPress:
Kode ini ditempatkan di awal file style.css dan mendefinisikan informasi dasar tentang tema, seperti judul, deskripsi, versi, penulis, dan URL temanya.
Contoh:
/* Theme Name: Nama Tema Theme URI: URL Tema Author: Nama Penulis Author URI: URL Penulis Version: 1.0 Description: Deskripsi Tema */
2. Header Template
Kode ini ditempatkan di dalam file header.php dan digunakan untuk menampilkan header situs, termasuk tag <head>, meta tag, dan kode CSS dan JavaScript yang diperlukan.
Contoh:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Baca Juga : Mudah! Menjadi Blogger Menggunakan HP (2023-2024)
3. Loop WordPress
Kode ini ditempatkan di dalam file index.php atau file khusus seperti single.php, page.php, category.php, dll. Kode ini digunakan untuk menampilkan konten posting atau halaman.
Contoh:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Tampilkan konten posting/halaman -->
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>
4. Footer Template
Kode ini ditempatkan di dalam file footer.php dan digunakan untuk menampilkan bagian footer situs.
Contoh:
<footer>
<!-- Konten footer -->
<p>Hak Cipta © <?php echo date('Y'); ?> Nama Situs</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Selain kode-kode di atas, terdapat juga kode tambahan yang dapat ditambahkan sesuai dengan kebutuhan tema Anda, seperti kode untuk menampilkan navigasi, widget, menu, fitur kustom, dan lain-lain. Pemahaman tentang hierarki template WordPress dan penggunaan fungsi-fungsi WordPress juga sangat penting dalam mengembangkan template yang berfungsi dengan baik.
Contoh
Berikut ini adalah contoh kode untuk menampilkan navigasi, widget, menu, dan fitur kustom dalam template WordPress:
1. Menampilkan Navigasi (Navigation):
<nav>
<?php
wp_nav_menu(array(
'theme_location' => 'primary-menu', // Lokasi menu yang telah ditentukan di menu admin WordPress
'container' => false, // Menghilangkan elemen container yang mengelilingi menu
'menu_class' => 'navigation-menu', // Class CSS untuk menu
));
?>
</nav>
2. Menampilkan Widget:
<aside>
<?php if (is_active_sidebar('sidebar-widget')) : ?>
<ul>
<?php dynamic_sidebar('sidebar-widget'); // Menampilkan widget yang telah ditentukan di admin WordPress ?>
</ul>
<?php endif; ?>
</aside>
3. Menampilkan Menu Kustom (Custom Menu):
<?php
$menu_items = wp_get_nav_menu_items('nama-menu-kustom'); // Mendapatkan item-item menu kustom berdasarkan nama menu
if ($menu_items) {
echo '<ul>';
foreach ($menu_items as $item) {
echo '<li><a href="' . $item->url . '">' . $item->title . '</a></li>';
}
echo '</ul>';
}
?>
4. Menampilkan Fitur Kustom (Custom Feature):
<?php if (get_theme_mod('fitur_kustom_aktif', false)) : // Mengambil nilai fitur kustom yang telah disimpan di Customizer WordPress ?>
<div class="custom-feature">
<h3><?php echo get_theme_mod('fitur_kustom_judul', 'Judul Default'); ?></h3>
<p><?php echo get_theme_mod('fitur_kustom_konten', 'Konten Default'); ?></p>
</div>
<?php endif; ?>
Pastikan untuk menyesuaikan kode-kode di atas dengan struktur template dan kebutuhan tema Anda. Anda dapat menambahkan CSS untuk mengatur tampilan dan gaya dari elemen-elemen tersebut sesuai keinginan Anda.
Custom CSS
Berikut adalah contoh kode CSS untuk mengatur tampilan dan gaya dari elemen-elemen yang disebutkan sebelumnya:
1. CSS untuk Navigasi (Navigation):
.navigation-menu {
list-style: none;
padding: 0;
margin: 0;
}
.navigation-menu li {
display: inline-block;
margin-right: 10px;
}
.navigation-menu li a {
text-decoration: none;
color: #333;
}
.navigation-menu li a:hover {
color: #ff0000;
}
2. CSS untuk Widget:
aside ul {
list-style: none;
padding: 0;
margin: 0;
}
aside li {
margin-bottom: 10px;
}
3. CSS untuk Menu Kustom (Custom Menu):
.custom-menu {
list-style: none;
padding: 0;
margin: 0;
}
.custom-menu li {
margin-bottom: 10px;
}
.custom-menu li a {
text-decoration: none;
color: #333;
}
.custom-menu li a:hover {
color: #ff0000;
}
4. CSS untuk Fitur Kustom (Custom Feature):
.custom-feature {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
}
.custom-feature h3 {
color: #333;
margin-bottom: 10px;
}
.custom-feature p {
color: #666;
}
Anda dapat menyesuaikan kode CSS ini sesuai dengan kebutuhan dan gaya desain yang Anda inginkan. Pastikan untuk menghubungkan file CSS dengan template Anda menggunakan tag <link> di bagian header atau dengan cara lain yang sesuai.
Tag <link>
Berikut adalah contoh penggunaan tag <link> untuk menghubungkan file CSS dengan template WordPress:
1. Menghubungkan CSS Eksternal:
Anda dapat menggunakan tag <link> untuk menghubungkan file CSS eksternal dengan template WordPress. Misalnya, jika Anda memiliki file style.css di folder tema Anda, Anda dapat menambahkan kode berikut di dalam file header.php:
<head>
<!-- Kode lainnya -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<!-- Kode lainnya -->
</head>
Pastikan bahwa file style.css berada di direktori tema yang tepat, dan kode di atas akan menghubungkannya dengan template.
2. Menghubungkan CSS Tambahan:
Jika Anda ingin menggunakan CSS tambahan yang tidak terkait dengan file style.css, Anda dapat menambahkan kode berikut di dalam file header.php:
<head>
<!-- Kode lainnya -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/custom.css">
<!-- Kode lainnya -->
</head>
Pastikan bahwa file custom.css berada di direktori tema yang tepat, dan kode di atas akan menghubungkannya dengan template.
Perhatikan bahwa kedua contoh tersebut menempatkan tag <link> di dalam tag <head> di dalam file header.php di tema WordPress Anda. Ini akan memastikan bahwa file CSS terhubung dengan benar dan diterapkan pada halaman yang relevan.
Pastikan untuk mengganti style.css atau custom.css dengan nama file CSS Anda sendiri dan menyesuaikan jalur file sesuai dengan struktur tema Anda.
Hal Penting
Membuat template WordPress premium sendiri membutuhkan pemahaman yang mendalam tentang HTML, CSS, JavaScript, dan PHP. Jika Anda memiliki pengetahuan dan pengalaman dalam pengembangan web, berikut adalah langkah-langkah umum yang dapat Anda ikuti untuk membuat template WordPress premium sendiri:
- Perencanaan: Tentukan konsep dan desain template yang ingin Anda buat. Buatlah sketsa atau wireframe untuk menggambarkan tata letak halaman, elemen desain, dan struktur navigasi.
- Persiapan File Dasar: Buat folder untuk template Anda dengan nama yang sesuai. Dalam folder tersebut, buat file-style.css dan index.php sebagai file dasar template WordPress Anda.
- Struktur HTML: Dalam file index.php, mulailah dengan menentukan struktur HTML dasar untuk setiap bagian halaman seperti header, konten, sidebar, dan footer. Gunakan tag WordPress khusus seperti wp_head() dan wp_footer() untuk menghubungkan template dengan fungsi WordPress.
- Styling dengan CSS: Buatlah file CSS terpisah untuk menambahkan gaya dan tampilan visual pada template Anda. Terapkan gaya pada elemen-elemen HTML yang telah Anda tentukan sebelumnya. Pastikan untuk memberikan kelas atau ID yang sesuai untuk menghubungkan gaya dengan elemen yang relevan.
- Fungsi PHP: Gunakan kode PHP untuk menambahkan fungsi-fungsi khusus pada template Anda. Misalnya, jika Anda ingin menampilkan posting terkait atau menambahkan fitur komentar, Anda perlu menulis kode PHP yang sesuai dan memasukkannya ke dalam template.
- Loop WordPress: Gunakan loop WordPress untuk menampilkan konten dari posting atau halaman. Loop ini akan memungkinkan template Anda untuk secara otomatis menampilkan konten yang relevan sesuai dengan jenis halaman atau posting yang sedang ditampilkan.
- Widget dan Menu: Jika template Anda mendukung widget dan menu kustom, tambahkan kode yang diperlukan untuk mengaktifkan fitur ini. Anda juga dapat menentukan area widget dan menghubungkannya dengan tampilan template yang sesuai.
- Responsif dan Pengoptimalan: Pastikan template Anda responsif, artinya dapat menyesuaikan tampilan dengan baik di berbagai perangkat dan ukuran layar. Selain itu, pastikan kode template Anda dioptimalkan untuk kecepatan dan kinerja yang baik.
- Uji Coba: Lakukan uji coba terhadap template Anda untuk memastikan bahwa semua elemen, fungsi, dan tampilan berjalan dengan baik. Periksa halaman-halaman template seperti halaman arsip, halaman tunggal, dan halaman kategori untuk memastikan semuanya berfungsi dengan benar.
- Pengemasan: Setelah template Anda selesai, bungkus template tersebut menjadi file zip untuk diunggah dan diinstal di situs WordPress Anda atau untuk dijual sebagai template premium.
- Perlu diingat bahwa membuat template WordPress premium sendiri membutuhkan keterampilan teknis yang cukup tinggi. Jika Anda merasa tidak yakin atau ingin hasil yang lebih profesional, pertimbangkan untuk bekerja sama dengan seorang pengembang web atau membeli template premium yang sudah ada dan dapat disesuaikan sesuai dengan kebutuhan Anda.
Taufiqurrohman Daud
Mahasiswa Universitas Primagraha
