Halaman Utama/Pengetahuan./WordPress/Detail konten.

Bagaimana cara mengembangkan tema WordPress kustom dari nol?

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

Memahami struktur dasar dan file inti dari tema WordPress

Sebuah tema WordPress kustom pada dasarnya adalah sebuah folder yang berisi berbagai file tertentu, dan folder tersebut berada di dalam direktori tertentu dalam struktur file WordPress./wp-content/themes/File-file tersebut terletak di dalam direktori. File-file ini mengikuti sistem hierarki template WordPress, dan bersama-sama menentukan cara situs web menampilkan konten dari basis data (seperti artikel dan halaman) kepada pengunjung. Memahami peran masing-masing file serta cara kerja kolaborasi di antara mereka merupakan langkah pertama dalam proses pengembangan.

File-file wajib dan struktur direktori untuk topik tersebut

Setiap tema WordPress harus mencakup dua file inti:style.css 和 index.phpDi antaranya,style.css Peran file CSS ini sangat penting; file tersebut tidak hanya berfungsi untuk mendefinisikan tata letak (style) tema, tetapi juga blok komentar di bagian awal file tersebut merupakan “kartu identitas” yang digunakan oleh WordPress untuk mengenali tema tersebut. Blok komentar ini harus mengikuti format tertentu dengan ketat.

/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/

index.php Ini adalah file template utama dari tema tersebut, sekaligus merupakan “garis pertahanan terakhir” dalam hierarki template. Ketika WordPress tidak dapat menemukan file template yang lebih spesifik untuk permintaan yang sedang berlangsung…single.php或page.phpKetika hal tersebut terjadi, maka sistem akan kembali menggunakan metode atau pendekatan yang sebelumnya digunakan.index.phpOleh karena itu, sebuah tema yang kuat (robust) harus memiliki berkas ini.

推荐阅读 Membangun Situs Web Profesional: Panduan Lengkap untuk Membuat Tema WordPress Kustom dari Nol.。

Lapisan template (template hierarchy) dan fungsi dari file template (template files)

Struktur hierarki template di WordPress merupakan seperangkat aturan pemilihan template yang cerdas. Sistem ini secara otomatis memilih file template yang paling cocok berdasarkan jenis halaman yang diakses oleh pengguna (seperti halaman utama, halaman artikel, halaman kategori). Misalnya, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari file template sesuai dengan urutan berikut:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> Dan yang terakhir adalah… index.php。

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

Selain dua file wajib yang telah disebutkan di atas, sebuah tema yang berfungsi dengan lengkap biasanya juga mencakup:
* header.phpMendefinisikan bagian kepala dokumen, yang berisi:<head>Wilayah, logo situs web, dan navigasi utama.
* footer.phpDefinisikan bagian kaki dokumen (footer), yang berisi informasi hak cipta, tautan tambahan, dan lainnya.
* functions.phpIni adalah “otak” dari tema tersebut, yang berfungsi untuk memuat skrip dan gaya tampilan, mendaftarkan menu dan alat tambahan (tools), serta mendefinisikan fitur-fitur pendukung tema.
* single.phpDigunakan untuk menampilkan satu artikel saja.
* page.phpDigunakan untuk menampilkan halaman tunggal.

Membangun fitur dan template inti dari sebuah tema (theme)

Setelah struktur file dasar telah dibangun, langkah selanjutnya adalah mengisi isi dari file-file template tersebut, serta menggunakan fungsi-fungsi inti WordPress dan “loop utama” (main loop) untuk menampilkan data secara dinamis.

Menginisialisasi fitur tema di functions.php

functions.php File merupakan inti dari fitur tema (theme). Di sini, Anda dapat menambahkan berbagai fitur tanpa perlu mengubah file inti WordPress. Proses inisialisasi yang standar mencakup pengaturan dukungan tema, pendaftaran menu navigasi dan area widget, serta pengunduhan skrip dan tabel gaya (style sheet) dengan aman.

&lt;?php
// 主题初始化设置
function mytheme_setup() {
    // 让WordPress管理<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像（缩略图）支持
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主菜单位置
    register_nav_menus( array(
        'menu-1' =&gt; esc_html__( '主菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

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

// 加载主题的样式表和脚本
function mytheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载导航脚本（如果有的话）
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?&gt;

Menggunakan siklus utama (The Loop) untuk menampilkan konten.

“Main Loop” (Rutin Utama) merupakan konsep yang paling mendasar dalam template WordPress. Ini merupakan bagian kode PHP yang digunakan untuk memeriksa dan mengiterasi artikel (atau halaman) yang perlu ditampilkan di halaman saat ini. Hampir semua template yang digunakan untuk menampilkan konten bergantung pada mekanisme ini. Berikut adalah contoh implementasi Main Loop dalam sebuah template WordPress:index.phpBerikut adalah contoh sederhana penggunaan siklus utama (main loop):

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

<?php if ( have_posts() ) : ?>
    <div class="posts-container">
        <?php while ( have_posts() ) : the_post(); ?>
            <article no numeric noise key 1009>
                <h2 class="entry-title">
                    <a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="entry-meta">
                    发布于：
                </div>
                <div class="entry-summary">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Dalam kode ini,have_posts()和the_post()Fungsi digunakan untuk mengontrol siklus (loop).the_title()、the_permalink()、the_excerpt()Tag-tag template digunakan untuk menghasilkan konten yang spesifik.

Mengimplementasikan desain responsif dan fitur tema tingkat lanjut

Sebuah tema yang modern tidak hanya harus memiliki fitur yang lengkap, tetapi juga harus menyediakan pengalaman pengguna yang berkualitas. Hal ini mencakup kemampuan untuk ditampilkan dengan baik di berbagai perangkat, serta kemampuan untuk memenuhi kebutuhan personalisasi secara fleksibel.

Mengintegrasikan tata letak responsif dengan optimisasi untuk perangkat seluler

Pastikan tema Anda bersifat responsif, dan hal ini perlu dilakukan dari dua aspek utama: HTML dan CSS. Pertama-tama, pada bagian HTML…header.phpDokumen tersebut<head>Di dalam wilayah tersebut, pastikan untuk menyertakan meta tag viewport:

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 
<meta name="viewport" content="width=device-width, initial-scale=1">

Kedua, dalam hal Anda…style.cssDi dalam hal tersebut, media queries digunakan untuk menyesuaikan tata letak dan gaya tampilan berdasarkan lebar layar. Sebagai contoh, untuk menyembunyikan sidebar pada perangkat seluler:

@media screen and (max-width: 768px) {
    #secondary-sidebar {
        display: none;
    }
    .site-main {
        width: 100%;
    }
}

Membuat template halaman kustom dan sub-topik

Untuk memenuhi kebutuhan tata letak yang unik pada halaman tunggal, WordPress memungkinkan Anda membuat template halaman khusus (custom page templates). Misalnya, Anda dapat membuat template halaman penuh lebar (full-width page template) yang tidak memiliki sidebar, dengan nama…template-fullwidth.phpDan tambahkan komentar berikut di awal file:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的页面模板。
 */

Kemudian, saat mengedit halaman di backend WordPress, Anda dapat memilih template halaman berukuran penuh (“Full Width Page Template”) di bagian “Halaman Properti” (“Page Properties”).

推荐阅读 Panduan Lengkap untuk Pengembangan Tema WordPress: Membangun Situs Web Kustom dari Nol hingga Satu.。

Untuk melindungi modifikasi khusus Anda agar tidak terhapus saat tema induk diperbarui, sangat disarankan untuk menggunakan subtema dalam proses pengembangan. Subtema hanya perlu berisi satu…style.cssDan satu opsi yang dapat dipilih (optional).functions.phpSubtopikstyle.cssBagian header harus menyatakan tema induk (parent theme).

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

Internasionalisasi, optimisasi, dan persiapan penerbitan topik (topic)

Ketika pengembangan hampir selesai, Anda perlu memastikan bahwa tema tersebut mudah digunakan oleh pengguna di seluruh dunia dan memiliki kinerja yang baik. Selanjutnya, siapkan segala sesuatu untuk proses peluncuran.

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

Mengimplementasikan internasionalisasi tema (i18n)

Internasionalisasi adalah proses memungkinkan tema Anda diterjemahkan ke dalam bahasa lain. Di WordPress, hal ini terutama dilakukan melalui dua fungsi:__()Digunakan untuk mengembalikan string hasil terjemahan._e()Untuk digunakan untuk menghasilkan teks terjemahan secara langsung. Anda perlu menggunakannya di semua bagian teks yang perlu diterjemahkan, dan menentukan di mana teks tersebut harus ditampilkan.style.cssBidang teks yang didefinisikan di bagian atas (Text Domain).

<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>

Setelah itu, Anda dapat menggunakan alat seperti Poedit untuk membuatnya..potTranslate the template file and the specific language packs (such as…).zh_CN.po和.mo(Dokumen).

Melakukan optimisasi kinerja dan pemeriksaan kode (code review).

Sebelum dipublikasikan, performa tema perlu dioptimalkan. Hal ini mencakup: kompresi file CSS dan JavaScript, memastikan ukuran gambar sesuai dan telah dioptimalkan, mengurangi jumlah permintaan (query) ke basis data, serta menggunakan sistem antrian skrip/stil WordPress dengan benar, untuk menghindari penggunaan sumber daya secara langsung dalam template. Selain itu, lakukan pemeriksaan kode secara menyeluruh untuk memastikan bahwa standar pengkodean WordPress diikuti, tidak ada kode debug yang tersisa, dan semua fitur berfungsi sebagaimana diharapkan.

Menyimpulkan.

Mengembangkan tema WordPress kustom dari nol merupakan proses pembelajaran yang sistematis, yang mencakup berbagai aspek mulai dari memahami struktur file inti, penggunaan hierarki template dan loop utama, hingga…functions.phpCIMC berhasil mengimplementasikan berbagai fitur dan desain yang responsif, hingga akhirnya mewujudkan versi situs web yang telah diinternasionalisasi dan dioptimalkan. Dengan mengikuti prinsip “mulai dari yang sederhana, lalu melakukan iterasi secara bertahap”, mereka pertama-tama membuat sebuah tema dasar yang sudah dapat digunakan, kemudian terus menambahkan file template dan fitur baru. Setelah memahami dengan baik keterampilan-keterampilan tersebut, Anda akan mampu membuat situs web yang benar-benar sesuai dengan kebutuhan Anda sendiri atau klien, tanpa lagi terbatas oleh tema yang sudah ada. Ingatlah bahwa dokumen resmi dan komunitas pengembang merupakan rekan terbaik dalam perjalanan belajar Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah pengembangan tema WordPress memerlukan pengetahuan PHP yang mendalam?

Diperlukan pengetahuan dasar PHP yang kuat, tetapi tidak perlu sampai pada tingkat ahli. Anda perlu memahami sintaks PHP, variabel, array, fungsi, dan struktur perulangan, karena template WordPress sebagian besar terdiri dari kode PHP. Yang paling penting adalah belajar menggunakan berbagai fungsi bawaan (tag template) dan hook (action dan filter) yang disediakan oleh WordPress, karena fungsi-fungsi ini merupakan jembatan yang menghubungkan tema Anda dengan fitur inti WordPress.

Mengapa tema kustomisasi saya tidak ditampilkan di latar belakang?

Alasan yang paling umum adalah…style.cssFormat komentar di bagian awal file tidak benar, atau informasinya hilang. Harap pastikan bahwa field-field seperti “Theme Name” dan “Author” telah diisi dengan benar, dan formatnya sesuai dengan yang diharapkan. Alasan lainnya adalah folder tema diletakkan di direktori yang salah; folder tersebut harus berada di direktori yang tepat.wp-content/themes/Di bawahnya.

Bagaimana cara membuat tema saya mendukung editor Gutenberg?

Untuk membuat tema Anda lebih cocok dengan editor Gutenberg, Anda perlu…functions.phpTambahkan pernyataan dukungan tema yang sesuai ke dalam dokumen tersebut. Ini mencakup dukungan untuk penataan teks yang lebih lebar (wide alignment), serta penggunaan tabel gaya editor (editor style sheets). Sebagai contoh:

add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表

Selain itu, tulislah kode gaya (style) untuk bagian-bagian inti seperti paragraf, judul, dan tombol, agar tampilan mereka seragam baik di halaman web maupun di dalam editor.

Bagaimana saya sebaiknya menguji tema saya?

Uji coba sebaiknya dilakukan dari berbagai dimensi. Pertama, periksa tampilan dan fungsionalitas tema di berbagai browser (seperti Chrome, Firefox, Safari, Edge) serta perangkat dengan ukuran yang berbeda (ponsel, tablet, komputer desktop). Kedua, uji kompatibilitas tema dengan plugin-plugin yang umum digunakan. Selanjutnya, impor berbagai jenis konten menggunakan data “unit uji coba tema” yang disediakan oleh WordPress (berupa file XML) untuk memeriksa kinerja tema dalam berbagai kondisi ekstrem. Akhirnya, lakukan pengujian tersebut secara menyeluruh.WP_DEBUGPeriksa polanya untuk melihat apakah ada peringatan atau kesalahan PHP.

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: