Cara Membuat Tema WordPress Kustom: Panduan Lengkap Dari Nol Sampai Satu

Memahami arsitektur dasar tema WordPress

Sebelum memulai proses pengkodean, sangat penting untuk memahami komponen dasar dari sebuah tema WordPress. Sebuah tema bukan hanya sekumpulan file gaya (style sheets), melainkan sebuah kesatuan yang terdiri dari serangkaian file template yang mengikuti standar tertentu. File-file ini bekerja sama untuk memberitahu WordPress bagaimana cara menampilkan konten situs web Anda. Direktori tema biasanya terletak di… /wp-content/themes/Setiap topik yang Anda buat seharusnya memiliki folder yang terpisah.

Tema WordPress yang paling sederhana hanya memerlukan dua file:style.css 和 index.phpDi antaranya,style.css Tidak hanya bertanggung jawab atas tata letak (style) sebuah tema, blok komentar di bagian awal file tema tersebut juga berfungsi sebagai “kartu identitas” tema tersebut. Blok komentar ini digunakan untuk memberitahu WordPress tentang nama tema, penulisnya, deskripsi, dan informasi lainnya. index.php Ini adalah file template utama yang digunakan secara default. Ketika tidak ada template yang lebih spesifik yang cocok, WordPress akan menggunakan file ini untuk merender halaman.

Namun, sebuah tema kustom yang lengkap akan mencakup lebih banyak berkas template, di mana masing-masing berkas berhubungan dengan halaman atau fitur tertentu. Misalnya,header.php Mendefinisikan area kepala (header) dari sebuah situs web.footer.php Mendefinisikan area bagian bawah.single.php Digunakan untuk menampilkan satu artikel saja.page.php Digunakan untuk menampilkan halaman yang independen.functions.php Fungsi ini digunakan untuk menambahkan fitur-fitur khusus yang dimiliki oleh suatu tema, serta untuk mendaftarkan berbagai komponen yang diperlukan.

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Bangun Tema Kustom Pertamamu Dari Nol。

WordPress menggunakan sistem hierarki template untuk menentukan template mana yang akan digunakan untuk setiap permintaan (request) dari pengguna. Dengan demikian, Anda tidak perlu menulis kode secara terpisah untuk setiap halaman di situs web. Dengan membuat file template pada berbagai tingkatan hierarki, Anda dapat mengontrol dengan tepat cara tampilan berbagai jenis konten, seperti artikel, halaman, kategori, halaman penulis, dan lainnya. Memahami hubungan hierarki ini sangat penting untuk membuat tema (theme) yang efisien.

UltaHost – Hosting untuk WordPress

Jaminan pengembalian uang dalam 30 hari, bandwidth dan basis data yang tidak terbatas, perlindungan DDoS gratis, diskon 50% untuk pembelian selama 3 tahun (dari harga normal: 50%).

halaman akses

Membangun lingkungan pengembangan untuk tema kustom

Sebelum mulai membuat file, membuat lingkungan pengembangan lokal merupakan langkah pertama dalam proses kerja yang profesional. Hal ini memungkinkan Anda untuk melakukan pengembangan dan pengujian tanpa mempengaruhi situs web yang berjalan di internet. Anda dapat menggunakan alat-alat seperti Local by Flywheel, XAMPP, MAMP, atau Docker untuk dengan cepat mengonfigurasi lingkungan WordPress di komputer lokal Anda, yang mencakup Apache/Nginx, PHP, dan MySQL.

Setelah lingkungan lokal siap, Anda perlu melakukan langkah-langkah berikut di direktori instalasi WordPress: wp-content/themes Buatlah folder baru di dalam folder tersebut. Nama folder ini akan menjadi identifikasi dari tema Anda. Disarankan untuk menggunakan huruf kecil, angka, dan tanda hubung (-), serta berusaha agar nama tersebut tidak sama dengan nama tema yang sudah ada. Contohnya: my-custom-theme。

Selanjutnya, buatlah file pertama yang diperlukan:style.cssHarap pastikan untuk menambahkan blok catatan informasi tema yang berformat dengan benar di bagian atasnya.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Kemudian, buatlah hal yang sama yang juga diperlukan. index.php File. Awalnya, file tersebut bisa sangat sederhana; bahkan hanya berisi satu baris kode HTML saja.

推荐阅读 Pemulaan Pengembangan Tema WordPress: Membangun Tema Kustom Dari Nol。

<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
    <h1>Halo, komunitas pengembang tema WordPress!</h1>
    <?php wp_footer(); ?>
</body>
</html>

Pada saat ini, masuklah ke panel administrasi WordPress lokal Anda, lalu kunjungi menu “Penampilan” (Appearance) → “Tema” (Themes). Tema yang Anda buat seharusnya sudah terlihat di sana. Aktifkan tema tersebut, kemudian kunjungi halaman depan situs web Anda. Anda akan melihat pesan sederhana yang dihasilkan oleh kode yang telah ditulis sebelumnya. Ini menandakan bahwa tema kustom Anda telah berhasil diaktifkan dan mulai berfungsi.

Membangun file template inti untuk tema

Setelah memiliki kerangka tema yang dapat dijalankan, langkah selanjutnya adalah memodulaskannya, serta memanfaatkan fitur inti WordPress untuk mengelola konten dinamis. Kunci dari proses modularisasi adalah dengan membagi bagian-bagian yang dapat digunakan kembali menjadi berkas template yang terpisah.

Membuat template untuk bagian header (atas) dan footer (bawah)

Pertama-tama, kita akan… index.php Pisahkan kode bagian atas (header) dan kode bagian bawah (footer) dari file tersebut. Buatlah sebuah file baru dengan nama… header.phpPindahkan bagian awal dari beberapa hasil penjumlahan ke dalamnya.

hosting.com hosting bersama

Kinerja tinggi, dilengkapi dengan CPU AMD EPYC, penyimpanan SSD NVMe, dan LiteSpeed, dukungan internal ahli 24 jam sehari, langkah-langkah keamanan canggih termasuk SSL, brute force, malware, dan perlindungan DDoS, menghemat hingga 731 TB/bulan.

halaman akses

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    <p class="site-description"><?php bloginfo( 'description' ); ?></p>
</header>

Selanjutnya, buatlah footer.php File tersebut berisi konten bagian kaki halaman (footer) serta tag penutup (end tag).

<footer id="colophon" class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>
<p>Saya tidak punya cukup uang untuk membeli mobil baru.</p>

Kemudian, lakukan perubahan (modifikasi). index.phpGunakan template WordPress untuk memasukkan fungsi-fungsi tersebut dan memanggilnya.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出将在这里
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

Membuat template artikel dan halaman

Untuk mencapai tata letak yang berbeda pada artikel dan halaman, kita dapat membuat… single.php Untuk menangani satu artikel saja, serta… page.php Mari kita bahas cara mengelola halaman-halaman yang bersifat independen (tidak tergantung pada halaman utama). Struktur dasarnya mirip, tetapi kita dapat memanfaatkan tag kondisional (conditional tags) yang tersedia di WordPress untuk memberikan fitur yang lebih spesifik pada masing-masing halaman. is_single() 和 is_page() Lakukan pembedaan ketika diperlukan.
Buatlah satu… functions.php File ini sangat penting, karena digunakan untuk memperkuat fitur-fitur tema. Dalam file ini, Anda dapat mendaftarkan menu, sidebar (area alat tambahan), menambahkan fitur-fitur pendukung tema (seperti thumbnail artikel, tag judul yang dapat disesuaikan), serta mengatur file gaya (style sheet) dan skrip (script).

推荐阅读 Panduan Utama Tema WordPress: Solusi Lengkap dari Pemilihan, Penyesuaian, hingga Pengembangan.。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

Menerapkan gaya tampilan (style) dan menambahkan fitur interaksi (interaction features) pada aplikasi

Bahkan tema yang berfokus pada fungsi sekalipun memerlukan gaya tampilan (style) dasar untuk memastikan ketergunaan (usability) dan kemudahan membaca (readability) pengguna. Anda dapat… style.css Membangun tata letak yang responsif dan antarmuka yang menarik berdasarkan skema gaya utama (main style sheet).

Mengimplementasikan desain responsif dasar

Mulailah dengan mengatur ulang beberapa konfigurasi CSS dan gaya dasar, lalu buatlah kueri media (media queries) untuk mendesain tampilan yang responsif (mampu beradaptasi dengan berbagai ukuran layar) khusus untuk perangkat seluler.

Hosting bersama InterServer.

Hosting bersama seharga $2,50 USD per bulan, diskon $0,1 USD untuk bulan pertama dengan kode promo tryinterserver, serta 461 skrip aplikasi cloud yang dapat diinstal dengan sekali klik.

halaman akses

/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

Membuat skrip menu navigasi

Untuk membuat menu di perangkat seluler menjadi interaktif, Anda dapat membuat sebuah file JavaScript yang sederhana. Pertama-tama, header.php Tambahkan struktur HTML untuk tombol menu, lalu… /js/navigation.js Tambahkan logika kontrol ke dalamnya.

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

Terakhir, Anda juga dapat memanfaatkan API Customizer dari WordPress atau membuat halaman opsi tema untuk menyediakan beberapa opsi penyesuaian sederhana bagi pengguna, seperti pengaturan warna situs atau pengunggahan logo. Hal ini biasanya dilakukan dengan… functions.php Gunakan dalam bahasa Cina add_theme_support Dan dilakukan dengan menggunakan fungsi-fungsi API yang terkait.

Menyimpulkan.

Membuat tema WordPress kustom dari nol merupakan proses pembelajaran yang sistematis, yang memerlukan pemahaman dasar tentang PHP, HTML, CSS, dan JavaScript, serta pengetahuan mengenai arsitektur inti WordPress dan API-nya. Prosesnya dimulai dengan membangun dasar-dasar yang diperlukan untuk pengembangan tema tersebut. style.css 和 index.php Mulailah dengan memisahkan file-file template untuk bagian header, footer, sidebar, dan lainnya menggunakan pendekatan modularisasi. Manfaatkan sistem hierarki template untuk mengontrol penampilan konten dengan akurat, dan… functions.php Integrasi fitur tema dan berbagai komponen ke dalam situs web sangat penting. Pada akhirnya, dengan menggunakan CSS responsif dan skrip JavaScript yang diperlukan, tema tersebut akan terlihat menarik dan mudah digunakan oleh pengguna. Dengan mengikuti pendekatan ini, Anda tidak hanya akan menciptakan tampilan situs web yang unik, tetapi juga akan memahami lebih dalam cara kerja WordPress, yang akan menjadi dasar yang kuat untuk pengembangan tema dan plugin yang lebih canggih di kemudian hari.

FAQ - Pertanyaan yang Sering Diajukan.

Apa bahasa pemrograman yang harus dikuasai untuk membuat tema WordPress?

Untuk membuat sebuah tema WordPress yang fungsional secara lengkap, Anda perlu menguasai beberapa teknologi utama. PHP merupakan teknologi yang paling penting, karena WordPress sendiri ditulis menggunakan PHP; semua file template dan proses pemrosesan logika dalam WordPress memerlukan PHP. HTML digunakan untuk membangun struktur halaman, sedangkan CSS digunakan untuk mengontrol tata letak dan gaya tampilan, sehingga tema terlihat menarik serta memiliki desain yang responsif (mampu beradaptasi dengan berbagai ukuran layar). JavaScript (umumnya jQuery) digunakan untuk menambahkan efek interaktif di sisi pengguna, seperti penggantian menu, rotasi gambar, dan lainnya.

Apa perbedaan utama antara membuat tema khusus (custom theme) dengan menggunakan tema yang sudah ada atau alat pembangun halaman (page builder)?

Tema kustom memberikan tingkat fleksibilitas dan keunikan yang maksimal. Anda dapat sepenuhnya mengontrol setiap baris kode, setiap fitur, dan kinerja situs web, sehingga dapat menciptakan situs yang benar-benar sesuai dengan kebutuhan merek dan bisnis tertentu. Selain itu, kode yang digunakan biasanya lebih ringkas dan efisien. Sebaliknya, menggunakan tema atau alat pembangun halaman yang sudah ada memang lebih mudah untuk dipelajari, tetapi bisa menyebabkan adanya kode yang berlebihan, pilihan penyesuaian yang terbatas, ketergantungan pada plugin, serta risiko homogenisasi yang lebih tinggi. Tema kustom lebih cocok untuk proyek yang membutuhkan citra merek yang unik, fitur khusus, atau kinerja yang tinggi.

Bagaimana cara membuat tema kustom saya sesuai dengan standar resmi WordPress?

Agar tema Anda memenuhi standar inti WordPress dan berpotensi dimasukkan ke dalam direktori resmi, Anda perlu mematuhi dengan ketat “WordPress Theme Development Manual”. Hal ini mencakup: penggunaan struktur hierarki template yang benar, penanganan data dinamis secara internasionalisasi (i18n) dan lokalisasi, pemrosesan input serta output pengguna dengan aman, pemastian kode tema sesuai dengan standar pengkodean WordPress, penyediaan dukungan aksesibilitas (A11y), serta memastikan tema dapat berfungsi dengan baik baik ketika fitur inti WordPress diaktifkan maupun dinonaktifkan (melalui pengujian unit tema).

Apa fungsi utama dari file functions.php saat mengembangkan tema?

functions.php File tersebut merupakan “kotak alat fungsional” (functional toolbox) untuk tema Anda. File ini tidak digunakan untuk menghasilkan tampilan langsung di halaman web, melainkan untuk mendefinisikan fitur dan perilaku dari tema tersebut. Fungsi utamanya antara lain: menambahkan atau mengubah fitur inti WordPress melalui mekanisme Hook, mendaftarkan posisi menu navigasi dan bilah samping (area widget), menambahkan fitur khusus untuk tema (seperti thumbnail artikel, logo kustom), serta menyisipkan file gaya (style sheet) dan skrip JavaScript secara aman ke dalam tema. File ini merupakan jembatan penting yang menghubungkan tampilan tema dengan fitur-fitur di backend WordPress.