Halaman Utama/Pengetahuan./WordPress/Detail konten.

Mulai dari Nol: Panduan Langsung untuk Mengembangkan Tema WordPress yang Dikustomisasi

3 menit baca
2026-03-15
2026-06-03
2,465
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Mengembangkan tema WordPress kustom merupakan cara terbaik untuk memahami lebih dalam kerangka kerja WordPress dan meningkatkan keterampilan pengembangan frontend. Berbeda dengan menggunakan tema siap pakai, membangunnya dari nol memberikan Anda kendali penuh, sehingga Anda dapat menciptakan situs web yang unik dan sepenuhnya sesuai dengan kebutuhan proyek Anda. Artikel ini akan memandu Anda melalui seluruh proses pembuatan tema WordPress yang sederhana namun memiliki fungsi yang lengkap.

Konfigurasi Lingkungan Pengembangan dan Struktur Tema

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal. Lingkungan ini biasanya mencakup paket server lokal (seperti XAMPP, MAMP, atau Local by Flywheel), sebuah editor kode (seperti VS Code), serta versi terbaru dari WordPress.

Pertama-tama, di WordPress… <code>wp-content/themes</code> Di dalam direktori tersebut, buatlah sebuah folder untuk tema baru Anda, misalnya: <code>my-custom-theme</code>Sebuah tema WordPress yang paling dasar setidaknya memerlukan dua file inti.

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

Membuat file lembar gaya (style sheet)

File pertama yang diperlukan adalah… style.cssFile ini tidak hanya mendefinisikan gaya tampilan tema, tetapi juga mencakup metadata yang digunakan untuk mendeskripsikan tema tersebut kepada WordPress. Silakan tambahkan komentar berikut di bagian awal file:

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%).
LOGO UltaHost. halaman akses 
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

“Text Domain” digunakan untuk keperluan internasionalisasi (penyesuaian tampilan situs web berdasarkan bahasa pengguna), dan pastikan nama domain tersebut sesuai dengan nama folder tema (tema desain situs web) yang Anda gunakan. Setelah itu, Anda dapat menulis semua aturan CSS (Cascading Style Sheets) di dalam file tersebut.

Create a core function file.

File kedua yang diperlukan adalah… functions.phpIni adalah “otak” dari tema tersebut, yang berfungsi untuk memasukkan file gaya (style sheet), file JavaScript, mendaftarkan menu, sidebar, dan fitur-fitur lainnya, serta menambahkan berbagai dukungan fungsional.

Sebuah dasar functions.php Pembukaannya biasanya seperti berikut, digunakan untuk menambahkan file gaya (stylesheet) ke dalam antrian (queue):

<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );

Pada saat ini, meskipun belum ada file template sama sekali, tema Anda sudah dapat muncul di daftar “Tema” (Themes) di panel administrasi WordPress (Backend) dan dapat diaktifkan. Setelah diaktifkan, halaman depan situs web akan menampilkan halaman kosong, karena belum ada file template yang digunakan untuk mendefinisikan struktur halaman tersebut.

推荐阅读 Panduan Praktis Pengembangan Tema WordPress: Membangun Arsitektur dan Template Tema Kustom Dari Nol。

构建核心模板文件

File template mengontrol cara penampilan berbagai bagian dari situs web. WordPress menentukan template mana yang akan digunakan untuk permintaan saat ini melalui struktur hierarki template.

Membuat bagian header (tengah halaman) dan footer (bagian bawah halaman) untuk seluruh situs web

Praktik terbaik adalah memisahkan kode header (bagian atas halaman) dan kode footer (bagian bawah halaman) yang bersifat umum (dapat digunakan di berbagai halaman). header.php File tersebut biasanya berisi deklarasi jenis dokumen (document type declaration). Area, serta proses pembukaannya (opening). Label dan navigasi utama.

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
        <nav>
            'primary' ) ); ?&gt;
        </nav>
    </header>
    <main>

Sebagai tindak lanjutnya, buatlah (create). footer.php Untuk menutupnya, silakan klik tombol “Close” atau ikuti instruksi yang tersedia. header.php Container utama dan tag yang dibuka di 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.
LOGO hosting.com halaman akses 
    </main>
    <footer>
        <p>©</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>

wp_head() 和 wp_footer() Ini merupakan “hook” yang krusial, yang memungkinkan inti WordPress, plugin, dan tema itu sendiri untuk menambahkan kode yang diperlukan (seperti gaya tampilan, skrip) di posisi-posisi tersebut.

Membuat indeks dan template artikel

index.php Ini adalah file penyesuaian (override file) untuk struktur hierarki template, sekaligus titik awal dari tema yang kita gunakan. File ini digunakan untuk… get_header() 和 get_footer() Untuk memasukkan modul-modul yang terpisah.

<article>
            <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div><?php the_excerpt(); ?></div>
        </article>
    <br />
    <p>Tidak ada artikel saat ini.</p>

Untuk menampilkan sebuah artikel secara terpisah, buatlah halaman khusus untuk artikel tersebut. single.phpStrukturnya mirip dengan… index.php Serupa, tetapi menggunakan… the_content() Untuk menampilkan seluruh teks.

推荐阅读 Pemulaan dalam Pengembangan Tema WordPress: Bangun Tema Kustom Pertama Anda dari Nol。

<article>
            <h1><?php the_title(); ?></h1>
            <div><?php the_content(); ?></div>
        </article>

Meningkatkan fitur tema

Setelah memiliki struktur dasar, kita melanjutkan dengan… functions.php Tambahkan lebih banyak fitur praktis agar tema tersebut terlihat lebih profesional dan mudah digunakan.

Mendaftarkan menu navigasi dan sidebar

在 functions.php Tambahkan kode berikut ke dalam file, untuk mendaftarkan area menu navigasi utama dan area samping (area alat tambahan):

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.
Logo InterServer. halaman akses 
// 注册导航菜单
function my_custom_theme_register_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );

// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );

Setelah mendaftar, Anda perlu memanggilnya dalam template. Misalnya, pada… header.php Kita sudah menggunakannya di sini. wp_nav_menu Menu “primary” telah dipanggil. Untuk menampilkan widget di sidebar, Anda dapat… sidebar.php Buat template sidebar di sini, dan… index.php 或 single.php Gunakan dalam bahasa Cina get_sidebar() Memperkenalkan.

Menambahkan dukungan untuk fitur tema.

WordPress menyediakan banyak fitur bawaan, dan beberapa di antaranya hanya dapat digunakan dalam tema jika dukungannya diumumkan secara eksplisit. Contohnya, fitur untuk menambahkan thumbnail (gambar profil) pada artikel, dukungan untuk logo yang dapat disesuaikan, serta dukungan untuk tag HTML5.

// 添加主题功能支持
function my_custom_theme_setup() {
    // 支持文章缩略图
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 对搜索表单、评论表单等使用HTML5标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 在管理后台提供<title>标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Setelah fitur “post-thumbnails” ditambahkan, Anda dapat menggunakannya dalam siklus penampilan artikel (article loop). the_post_thumbnail() Fungsi tersebut telah dikembangkan untuk menghasilkan gambar-gambar khusus (gambar dengan fitur atau karakteristik tertentu).

Desain gaya dan tata letak responsif

Sebuah tema yang indah dan dapat beradaptasi dengan berbagai perangkat sangat penting. Anda dapat… style.css Semua gaya (style) ditulis dalam kode tersebut. Disarankan untuk menerapkan strategi yang mengutamakan penggunaan perangkat seluler (mobile-first strategy).

Gaya Dasar dan Tata Letak (Basic Styles and Layout)

Pertama-tama, atur beberapa gaya tampilan dan format dasar agar kinerjanya konsisten di berbagai browser.

/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
header {
    background: #f8f9fa;
    padding: 2rem 0;
    border-bottom: 1px solid #dee2e6;
}

/* 导航菜单样式 */
.main-navigation ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.main-navigation a {
    text-decoration: none;
    color: #007bff;
}

Mengimplementasikan desain responsif

Gunakan media queries untuk menyesuaikan tata letak (layout) berdasarkan ukuran layar yang berbeda. Misalnya, ketika layar menjadi lebih kecil, ubah menu navigasi menjadi tampilan vertikal.

/* 移动端样式 */
@media (max-width: 768px) {
    .main-navigation ul {
        flex-direction: column;
        gap: 0.5rem;
    }

.container {
        padding: 0 15px;
    }

article {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid #eee;
    }
}

Pastikan gambar juga bersifat responsif (dapat menyesuaikan tampilannya tergantung ukuran layar).

img {
    max-width: 100%;
    height: auto;
}

Menyimpulkan.

Dengan langkah-langkah di atas, Anda telah berhasil membuat tema WordPress kustom yang memiliki fungsi yang lengkap. Kita mulai dari mengonfigurasi lingkungan pengembangan dan membuat elemen-elemen dasar dari tema tersebut. style.css 与 functions.php Di awal file tersebut, proses pembuatan file template inti dimulai secara bertahap.header.php, footer.php, index.php, single.php), dan juga meningkatkan fungsi-fungsi praktis dari tema tersebut, seperti menu pendaftaran, sidebar, serta dukungan untuk gambar-gambar khusus. Terakhir, kami menambahkan gaya dasar dan tata letak responsif ke tema tersebut, sehingga dapat ditampilkan dengan baik di berbagai perangkat. Ini hanyalah awal saja; Anda dapat terus mengembangkannya lebih lanjut dan membuat template halaman (page templates).page.phpTemplate untuk pengarsipan (Archive Template)archive.phpTemplate pencarian (Search Template)search.php), bahkan menggunakan sub-topik untuk melakukan penyesuaian, sehingga dapat menciptakan situs web yang lebih kuat dan profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja teknik yang harus dikuasai untuk mengembangkan tema WordPress?

Untuk mengembangkan sebuah tema WordPress yang dasar, Anda perlu menguasai HTML, CSS, dan PHP. HTML digunakan untuk membangun struktur halaman, CSS untuk desain tampilan dan penataan elemen-elemen halaman, sedangkan PHP merupakan bahasa pemrograman yang digunakan untuk menghasilkan konten dinamis di WordPress. Pengetahuan dasar tentang JavaScript juga akan membantu Anda menambahkan fitur interaktif ke dalam tema tersebut. Memahami konsep-konsep dasar WordPress, seperti struktur template, mekanisme pengulangan (The Loop), hook (Hook), dan fungsi (Functions), sangat penting untuk mengembangkan tema dengan sukses.

Apa fungsi dari file functions.php dalam sebuah tema?

functions.php File merupakan pusat fungsionalitas dari sebuah tema WordPress. Peran utamanya meliputi: menambahkan file CSS dan JavaScript ke dalam antrian (queue), mendaftarkan menu navigasi dan area widget di sisi samping, mendeklarasikan fitur-fitur yang didukung oleh tema (seperti thumbnail artikel, logo kustom), mendefinisikan fungsi kustom, serta memodifikasi perilaku default WordPress melalui hook aksi (action hooks) dan hook filter. Dengan file ini, Anda dapat memperluas dan menyesuaikan fungsionalitas tema dengan sangat besar tanpa perlu mengubah file inti WordPress.

Bagaimana cara membuat tema saya mendukung berbagai bahasa?

Membuat suatu tema mendukung berbagai bahasa (internasionalisasi) terutama melibatkan dua langkah. Pertama, style.css Untuk bagian yang berjudul “Text Domain” dan semua tempat di mana fungsi penerjemahan digunakan, gunakan domain teks (Text Domain) yang konsisten, yang biasanya sama dengan nama folder tema. Selanjutnya, saat menyiapkan string yang akan diterjemahkan, gunakan fungsi penerjemahan dari WordPress. __()、_e() 或 _x()Kemudian, Anda dapat menggunakan alat seperti Poedit untuk membuatnya. .pot File template, dan generate yang sesuai dengannya. .po 和 .mo Silakan lampirkan file terjemahan yang perlu diterjemahkan, lalu letakkan file tersebut di dalam folder yang sesuai dengan tema yang ditentukan. /languages Di dalam direktori tersebut, WordPress akan secara otomatis memuat file-file tersebut berdasarkan pengaturan bahasa situs web.

Apa keuntungan dari membuat sub-topik dibandingkan langsung memodifikasi topik utama?

Menciptakan sub-topik merupakan praktik terbaik untuk memodifikasi atau memperluas fungsi dari topik induk yang sudah ada. Keunggulan utamanya terletak pada aspek keamanan: ketika topik induk diperbarui, Anda dapat mengupdate topik induk tersebut dengan aman, tanpa kehilangan modifikasi khusus yang Anda lakukan pada sub-topik (seperti gaya tampilan, fitur, atau template). Sub-topik hanya memerlukan satu… style.css Dan satu opsi yang dapat dipilih (optional). functions.php File tersebut sudah dapat digunakan untuk berfungsi. Dalam sub-topik ini… style.css Di dalamnya, melalui… @import Atau gunakan metode antrian yang lebih baik untuk mengintegrasikan gaya tema induk, lalu tambahkan aturan CSS Anda sendiri untuk menimpanya. Untuk tema anak (sub-theme): functions.php File tersebut akan diunduh dan dijalankan bersamaan dengan file dengan nama yang sama di dalam tema induk, bukan menggantikannya. Hal ini memungkinkan Anda untuk menambahkan fitur baru dengan aman.

Selanjutnya, apa yang harus kita lakukan selanjutnya?

Jika Anda sedang membangun atau mengoptimalkan situs web WordPress, langkah selanjutnya adalah terus membaca tentang optimasi kinerja, konfigurasi plugin, dan kustomisasi tema.

Bacaan lanjutan dan pengetahuan praktis.

Konten-konten berikut terkait dengan topik artikel ini dan cocok untuk dibaca lebih lanjut. Lebih baik mulai dengan artikel yang paling dekat dengan pertanyaan Anda saat ini, lalu secara bertahap memperluas ke topik terkait, yang biasanya akan memberikan hasil yang lebih baik.

Tag: