Hai Sobat Teknologi!
Jika Anda pengguna WordPress yang handal, pasti sudah tidak asing lagi dengan template atau tema. Tema WordPress adalah desain yang memengaruhi tampilan situs atau blog Anda. Ada banyak tema yang telah tersedia di internet, namun terkadang kebutuhan spesifik tidak tercukupi oleh tema yang tersedia.Jika Anda ingin membuat tema WordPress sendiri, Anda berada di tempat yang tepat. Pada artikel ini, kami akan membahas cara untuk membuat tema WordPress yang sederhana dan ringkas menggunakan HTML, CSS, dan PHP.
1. Langkah Pertama: Membuat Folder Tema
Hal pertama yang perlu Anda lakukan adalah membuat folder dalam direktori WordPress/wp-content/themes. Setelah itu, berikan nama folder yang sesuai dengan nama tema yang ingin Anda buat.
2. Membuat File Dasar Tema
Setelah membuat folder, buatlah file dasar tema yang diberi nama “index.php”. File ini berisi kerangka dasar tema. Masukkan kode berikut dalam file index.php :
<html>
<head>
<title>Nama tema Anda</title>
</head>
<body>
</body>
</html>
3. Membuat File Stylesheet
Stylesheet adalah file CSS yang berisi instruksi untuk memformat tampilan situs. Buatlah file baru dengan nama “style.css” dan tempatkan dalam folder tema yang telah dibuat sebelumnya. Masukkan kode berikut:
/*
Theme Name: Nama Tema Anda
Author: Nama Anda
Description: Ini adalah tema sederhana.
Version: 1.0
*/
/* Style Mulai */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Style Selesai */
4. Menambahkan Fungsi Tema
Fungsi tema diperlukan untuk memberi tahu WordPress tentang tema yang baru saja Anda buat. Untuk menambahkan fungsi tema, buatlah file baru dengan nama “functions.php” dan letakkan dalam folder tema yang telah Anda buat sebelumnya. Masukkan kode berikut:
<?php
function nama_fungsi() {
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'nama_fungsi');
?>
5. Menambahkan Header
Tambahkan header dengan cara menambahkan kode berikut pada file index.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href=""/>
<?php wp_head(); ?>
</head>
Catatan: bloginfo() adalah fungsi WordPress yang mengambil data tentang tema.
6. Menambahkan Menu Navigasi
Tambahkan bar navigasi di header dengan menambahkan kode berikut pada file index.php:
<div class="menu">
<nav>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
</div>
7. Menambahkan Konten
Tambahkan konten pada file index.php setelah bagian header, seperti pada contoh berikut:
<div class="wrapper">
<h1>Selamat Datang di Tema WordPress Saya</h1>
<p>Ini adalah halaman beranda tema saya. Silakan menambahkan konten Anda sendiri di sini.</p>
</div>
8. Menambahkan Sidebar
Tambahkan bagian sidebar pada file index.php dengan menambahkan kode berikut:
<aside>
<?php get_sidebar(); ?>
</aside>
9. Menambahkan Footer
Tambahkan footer pada file index.php dengan menambahkan kode berikut:
<footer>
<p>Hak Cipta © 2021. Nama Anda. Semua Hak Dilindungi.</p>
</footer>
<?php wp_footer(); ?>
10. Tambahkan Widget
Tambahkan widget pada sidebar dengan cara menambahkan kode berikut di file “functions.php”:
function nama_widget() {register_sidebar(array('name' => __('Nama Widget Anda', 'nama-tema'),'id' => 'nama-widget-anda','description' => __('Ini adalah widget sederhana.', 'nama-tema'),'before_widget' => '<div class="widget">','after_widget' => '</div>','before_title' => '<h2 class="widget-title">','after_title' => '</h2>',));}add_action('widgets_init', 'nama_widget');
11. Pilih Gambar Header
Pilih gambar header pada file “functions.php” dengan menambahkan kode berikut:
function nama_header() {$args = array('default-image' => get_template_directory_uri() . '/gambar/header.jpg','width' => 1600,'height' => 500,);add_theme_support('custom-header', $args);}add_action('after_setup_theme', 'nama_header');
12. Tambahkan Teks Kredit Tema
Tambahkan teks kredit tema pada file “functions.php” dengan menambahkan kode berikut:
function nama_kredit_tema() {$args = array('author' => 'Nama Anda','description' => __('Ini adalah tema sederhana.', 'nama-tema'),'version' => '1.0',);wp_footer($args);}add_action('wp_footer', 'nama_kredit_tema');
13. Menambahkan Tombol Baca Selengkapnya
Tambahkan tombol “baca selengkapnya” pada file index.php dengan menambahkan kode berikut:
<a href="<?php the_permalink(); ?>" class="continue-reading">Baca Selengkapnya →</a>
14. Jalankan Tema
Aktifkan tema baru Anda pada dashboard WordPress dengan cara masuk ke Appearance > Themes. Klik tombol Aktifkan untuk tema baru Anda.
15. Tes Tema
Tes tema baru Anda dengan menambahkan beberapa konten ke situs Anda dan memastikan bahwa semuanya berjalan lancar.
16. Menyesuaikan Tema
Anda bisa menyesuaikan tema WordPress dengan menambahkan fungsi dan gaya CSS yang disesuaikan dengan kebutuhan Anda.
17. Kesimpulan
Membuat tema WordPress membutuhkan banyak waktu dan upaya. Namun, dengan sedikit pengetahuan tentang HTML, CSS, dan PHP, Anda dapat membuat tema yang keren dan berguna. Dalam artikel ini, kami telah membahas cara membuat tema sederhana menggunakan HTML, CSS, dan PHP. Serta cara membuat folder tema, membuat file dasar, mengatur fungsi tema, menambahkan header, menambahkan navigasi menu, menambahkan konten, menambahkan sidebar, menambahkan footer, menambahkan widget, memilih gambar header, dan menambahkan tombol Baca Selengkapnya.
FAQs
1. Apa itu tema WordPress?
Tema WordPress adalah desain yang memengaruhi tampilan situs atau blog Anda.
2. Apakah tema WordPress hanya bisa dipilih saja?
Tidak, Anda bisa membuat tema WordPress sendiri.
3. Apa yang diperlukan untuk membuat tema WordPress?
Untuk membuat tema WordPress, Anda membutuhkan pengetahuan tentang HTML, CSS, dan PHP.
Table
| Poin | Keterangan |
|---|---|
| 1 | Membuat Folder Tema |
| 2 | Membuat File Dasar Tema |
| 3 | Membuat File Stylesheet |
| 4 | Menambahkan Fungsi Tema |
| 5 | Menambahkan Header |
| 6 | Menambahkan Menu Navigasi |
| 7 | Menambahkan Konten |
| 8 | Menambahkan Sidebar |
| 9 | Menambahkan Footer |
| 10 | Tambahkan Widget |
| 11 | Pilih Gambar Header |
| 12 | Tambahkan Teks Kredit Tema |
| 13 | Menambahkan Tombol Baca Selengkapnya |
| 14 | Jalankan Tema |
| 15 | Tes Tema |
| 16 | Menyesuaikan Tema |
Sampai jumpa di artikel menarik lainnya, Sobat Teknologi!