Halaman Utama/Pengetahuan./WordPress/Detail konten.

Dari nol: Panduan pengembangan lengkap untuk membuat tema WordPress kustom.

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

Mengembangkan tema WordPress khusus adalah cara terbaik untuk memahami fungsi-fungsi inti dari WordPress. Berbeda dengan menggunakan subtema atau alat pembangun halaman (page builder), membangun tema dari nol memberikan Anda kendali penuh, sehingga Anda dapat membuat situs web yang berkinerja tinggi, sesuai dengan kebutuhan tertentu, dan unik. Panduan ini akan membimbing Anda melalui seluruh proses, mulai dari mempersiapkan lingkungan pengembangan hingga merilis tema tersebut.

Dasar-Dasar Tema WordPress dan Struktur File

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di /wp-content/themes/ Folder-folder dalam direktori tersebut berisi serangkaian file yang bersifat wajib (essential) maupun opsional (optional). Memahami fungsi dari setiap file merupakan langkah pertama dalam proses pengembangan.

Peran file template inti

Setiap topik harus mencakup dua file inti:style.css 和 index.php。
style.css Bukan hanya berisi tabel gaya (style sheet), tetapi juga komentar di bagian awal file tersebut berisi metadata tentang tema yang diangkat dalam dokumen tersebut. index.php Ini adalah file template default; WordPress akan menggunakan file ini ketika tidak dapat menemukan template yang lebih spesifik.

推荐阅读 Konsep-konsep inti dalam pengembangan tema WordPress:。

Selain kedua file tersebut, Anda dapat mengontrol tampilan berbagai bagian situs web dengan lebih akurat dengan menambahkan lebih banyak file template. Misalnya,header.php Tanggung jawabnya adalah menghasilkan bagian atas halaman web (seperti doctype, tag head, judul situs web, dan navigasi).footer.php Berbertanggung jawab untuk menghasilkan konten bagian bawah, dan… single.php Maka, hal tersebut digunakan untuk merender halaman artikel tunggal.

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

Informasi tema dan inisialisasi file fungsi

在 style.css Di bagian atas tema, Anda perlu mendefinisikan informasi penting mengenai tema tersebut. Inilah yang digunakan oleh WordPress untuk mengenali tema Anda.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

File lain yang sangat penting adalah… functions.phpBukan file template, melainkan “engine fungsional” dari tema tersebut. File ini digunakan untuk menambahkan dukungan terhadap tema, menu pendaftaran, sidebar, serta untuk memasukkan skrip dan gaya (style). Sebagian besar kode PHP yang Anda buat secara kustom akan ditulis di sini. Praktik yang baik adalah mendefinisikan area teks di awal file, guna mempersiapkan proses penerjemahan di kemudian hari.

Pembangunan lingkungan pengembangan dan pembuatan template inti

Sebelum memulai proses pengkodean, sangat penting untuk membuat lingkungan pengembangan lokal (misalnya menggunakan Local, XAMPP, atau Docker). Hal ini memungkinkan Anda melakukan pengujian dan debugging dengan aman.

Membangun bagian kepala (header) dan bagian bawah (footer) dari sebuah tema

Meng modularisasi kode yang berulang merupakan kunci dalam pengembangan yang efisien. header.php File tersebut berisi bagian awal dari dokumen HTML, dan menggunakan fungsi-fungsi WordPress untuk menampilkan informasi secara dinamis.

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

<!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>
    <?php wp_body_open(); ?>
    <header 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>

yang sesuai footer.php File tersebut perlu ditutup, dan tag-tagnya juga perlu dihapus. Pastikan untuk memanggil (menggunakan fungsi atau prosedur yang sesuai) untuk melakukan hal tersebut. wp_footer() Fungsi ini diperlukan agar plugin dan skrip tema dapat diunduh dan dijalankan dengan benar.

在 index.php Di dalamnya, Anda dapat menggunakan… get_header() 和 get_footer() Gunakan fungsi untuk mengimpor (mengunduh) mereka.

Mengembangkan template indeks dan halaman artikel

index.php Ini adalah template utama Anda. Implementasi yang umum melibatkan penggunaan sebuah siklus (loop), yang merupakan mekanisme yang digunakan oleh WordPress untuk menampilkan artikel.

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 
<?php get_header(); ?>
<main class="site-main">
    <p>   
      
</p>
            <article no numeric noise key 1010>
                <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        
        <p><?php esc_html_e( '暂无文章。', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>
\n

Untuk sebuah artikel tunggal, Anda perlu membuat… single.phpStrukturnya mirip dengan indeks, tetapi umumnya digunakan… the_content() Outputkan seluruh teks, dan mungkin termasuk template komentar. comments_template()。

Peningkatan Fungsi Tema dan Integrasi Gaya (Theme Function Enhancements and Style Integration)

lulus (tagihan atau inspeksi, dll) functions.php Dengan file tersebut, Anda dapat mengaktifkan serangkaian fitur modern untuk tema Anda, serta mengelola sumber daya front-end dengan benar.

Menu Pendaftaran danSidebar

Pertama, gunakan add_theme_support() Fungsi deklarasi tema mendukung berbagai fitur, seperti thumbnail artikel (gambar khusus) dan tag HTML5. Selanjutnya, gunakan… register_nav_menus() Fungsi ini digunakan untuk mendaftarkan posisi menu navigasi.

推荐阅读 Pengantar Pengembangan Tema WordPress: Membangun Tema Responsif Pertama Anda dari Nol.。

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Untuk membuat area alat tambahan (sampingan), gunakan… register_sidebar() Fungsi tersebut kemudian digunakan dalam template, melalui… dynamic_sidebar() Tampilkan saja itu.

Mengunduh skrip dan gaya (styles) dengan benar

Jangan pernah membuat tautan langsung (hard link) ke file CSS atau JS di dalam template. Sebaiknya gunakan metode lain untuk memasukkan kode tersebut ke dalam template. wp_enqueue_style() 和 wp_enqueue_script() Fungsi, dan memasangnya ke wp_enqueue_scripts Di atas kait tersebut. Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar dan mencegah pengunduhan yang berulang-ulang.

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_theme_scripts() {
    // 加载主题主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Lapisan Template dan Fitur Lanjutan

Memahami struktur hierarki template di WordPress merupakan kunci untuk membuat tema yang fleksibel. WordPress akan secara otomatis memilih file template yang paling sesuai berdasarkan jenis halaman yang sedang diakses oleh pengguna.

Menggunakan struktur hierarki template untuk membuat halaman tertentu

Misalnya, ketika seseorang mengakses artikel dengan ID 5, WordPress akan mencarinya secara berurutan:single-post-5.php -> single-post.php -> single.php -> singular.php -> index.phpAnda dapat membuat template untuk kategori atau halaman tertentu, misalnya… category-news.php 或 page-about.php。

Mengimplementasikan formulir pencarian dan navigasi halaman

Mengintegrasikan fitur pencarian ke dalam sebuah tema sangatlah mudah. Cukup buat satu saja. searchform.php File tersebut berisi formulir pencarian yang sesuai dengan format yang ditentukan. Setelah itu, gunakan formulir tersebut di mana pun diperlukan. get_search_form() Fungsi tersebut memanggilnya.

Untuk hal penomoran halaman (pemagangan data), selain menggunakan… the_posts_navigation()Anda juga dapat menggunakan… the_posts_pagination() Untuk menghasilkan tautan dengan nomor halaman, hal tersebut umumnya lebih baik dari segi pengalaman pengguna (user experience) dan optimisasi mesin pencari (SEO).

Menambahkan dukungan untuk pengaturan tema (theme customizer)

Untuk memungkinkan pengguna menyesuaikan beberapa pengaturan (seperti Logo dan warna) di bagian “Tampilan -> Kustomisasi” di backend, Anda dapat menggunakan API Customizer WordPress. Proses ini melibatkan… functions.php Gunakan dalam bahasa Cina $wp_customize Objek digunakan untuk menambahkan pengaturan (settings), kontrol (controls), dan komponen lainnya.

function my_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );
    // 在板块中添加一个“页脚文本”设置
    $wp_customize->add_setting( 'footer_text', array(
        'default'           => __( '版权所有', 'my-custom-theme' ),
        'sanitize_callback' => 'sanitize_text_field',
    ) );
    $wp_customize->add_control( 'footer_text', array(
        'label'   => __( '页脚文本', 'my-custom-theme' ),
        'section' => 'theme_options',
        'type'    => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Lalu… footer.php Di dalamnya, digunakan… get_theme_mod( 'footer_text' ) Keluarkan nilai yang telah diatur oleh pengguna.

Menyimpulkan.

Membuat tema WordPress dari nol merupakan proses yang sistematis, yang mencakup berbagai aspek mulai dari perencanaan struktur proyek, pengembangan template PHP, penulisan fungsi-fungsi tertentu, hingga pengelolaan sumber daya front-end. Kuncinya adalah memahami hierarki template, menggunakan fungsi dan hook bawaan WordPress dengan fleksibel, serta mengikuti praktik terbaik (seperti mengatur urutan eksekusi skrip dengan benar dan mendukung fitur terjemahan). Dengan membuat tema sendiri, Anda tidak hanya akan mendapatkan tampilan situs web yang sepenuhnya sesuai dengan kebutuhan Anda, tetapi juga akan memahami lebih dalam mekanisme kerja WordPress, yang akan menjadi dasar yang kuat untuk mengembangkan plugin atau aplikasi yang lebih kompleks. Ingatlah bahwa terus melakukan pengujian, membaca manual resmi, dan mempelajari kode tema inti merupakan cara terbaik untuk meningkatkan keterampilan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja teknik yang perlu dikuasai untuk membuat tema WordPress?

Anda perlu menguasai pengetahuan dasar PHP untuk menulis logika template dan fungsi-fungsi fungsional. Selain itu, Anda perlu familiar dengan HTML dan CSS untuk membangun struktur dan gaya halaman web. Pemahaman dasar tentang JavaScript, terutama jQuery, akan membantu meningkatkan fitur interaktif pada situs web. Yang paling penting, Anda perlu belajar tentang tag-template khusus WordPress, hook (Actions & Filters), serta cara menggunakan mekanisme The Loop.

Bagaimana cara mempublikasikan hasil pengembangan tema tersebut agar dapat digunakan oleh orang lain?

Sebelum dipublikasikan, pastikan untuk melakukan pengujian yang menyeluruh, termasuk pengujian kompatibilitas di berbagai lingkungan dan ukuran layar yang berbeda, serta pastikan bahwa tema tersebut mematuhi standar pengembangan tema WordPress. Setelah itu, Anda dapat mengompres folder tema menjadi file berformat .zip dan mengunggahnya langsung melalui panel administrasi WordPress untuk proses instalasi. Jika Anda ingin mengirim tema tersebut ke direktori tema resmi WordPress, Anda perlu memenuhi standar peninjauan kode yang lebih ketat, termasuk aspek keamanan, gaya penulisan kode, dan dukungan terhadap berbagai bahasa (internasionalisasi).

Bagaimana cara memastikan tema yang dibuat sendiri tetap kompatibel dengan pembaruan di masa depan?

Untuk menjaga kompatibilitas, sebaiknya hindari memodifikasi file inti WordPress secara langsung. Gunakan fungsi dan hook yang disediakan oleh WordPress untuk menambahkan fitur baru. Dalam kode, selalu gunakan fungsi escape pada data yang akan ditampilkan di frontend. esc_html， esc_urlUntuk data yang diterima dari pengguna, gunakan fungsi pembersihan (seperti…) sanitize_text_fieldPerhatikan pembaruan versi utama WordPress, dan uji tema Anda secara tepat waktu.

Bagaimana cara memilih sub-topik (sub-topic) dan tema kustom (custom theme)?

Jika Anda hanya ingin mengubah beberapa aspek dari tema yang sudah ada (seperti warna atau penyesuaian tata letak), maka membuat subtema merupakan pilihan yang lebih cepat dan aman, karena subtema tersebut memungkinkan Anda untuk mempertahankan perubahan Anda saat tema induk diperbarui. Namun, jika Anda membutuhkan sebuah situs web dengan desain yang unik, fitur-fitur baru, atau jenis konten yang khusus, dan tema yang ada tidak dapat diubah dengan cara yang sederhana, maka membuat tema kustom dari awal adalah pilihan yang lebih tepat. Dengan cara ini, Anda akan memiliki fleksibilitas dan kontrol yang lebih besar.

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: