Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Praktis untuk Mengembangkan Tema WordPress dari Nol hingga Mahir: Membangun Tema Situs Web Kustom.

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

Membangun tema WordPress kustom berarti Anda dapat sepenuhnya mengontrol tampilan, fungsi, dan kinerja situs web Anda. Berbeda dengan menggunakan tema siap pakai, pengembangan kustom memungkinkan Anda membuat situs web yang unik, efisien, dan sepenuhnya sesuai dengan merek Anda. Panduan ini akan membimbing Anda dari membangun lingkungan dasar hingga merilis tema yang memiliki fitur yang lengkap.

Lingkungan pengembangan dan struktur file dasar.

Sebelum memulai penulisan kode, sangat penting untuk membuat lingkungan pengembangan lokal yang sesuai. Anda dapat menggunakan XAMPP, MAMP, atau alat-alat yang lebih profesional seperti Valet dan Local by Flywheel. Pastikan bahwa lingkungan Anda mendukung PHP versi 7.4 atau lebih baru, serta basis data MySQL atau MariaDB.

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di wp-content/themes/ Direktori yang ada di dalam folder tersebut harus setidaknya memuat dua file utama, yaitu file gaya (style sheet) dan file template indeks (index template).

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Membangun Tampilan Situs Web Anda Dari Nol。

Pertama, di wp-content/themes/ Buatlah sebuah folder baru, misalnya… my-custom-themeKemudian, buatlah file pertama yang diperlukan:style.cssFile ini tidak hanya mendefinisikan gaya tampilan suatu tema, tetapi juga mencakup metadata tema dalam komentar di bagian header file tersebut.

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://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Selanjutnya, buatlah file kedua yang diperlukan:index.phpIni adalah file template default untuk sebuah tema. Ketika WordPress tidak dapat menemukan template yang lebih spesifik, maka file ini akan digunakan. Ini merupakan contoh template yang paling sederhana. index.php Bisa hanya menggunakan satu siklus untuk menampilkan daftar artikel.

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) :
        while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
        <?php endwhile;
    endif; ?>
</main>

\n

Memahami hierarki template.

WordPress menggunakan struktur hierarki template untuk menentukan file template mana yang akan digunakan untuk halaman tertentu. Misalnya, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari file template yang sesuai dengan struktur hierarki tersebut terlebih dahulu. single.phpJika tidak ada, maka kembali ke… singular.phpDan yang terakhir adalah index.phpMemahami hubungan hierarki ini merupakan kunci untuk mengembangkan tema dengan efisien. Anda sebaiknya membuat file template yang sesuai dengan kebutuhan Anda, seperti… page.php(Page)archive.php(Archive Page) dan single.php(Satu artikel.)

File template inti dan fitur tema

Selain itu, index.php 和 style.cssSebuah tema yang memiliki fungsi yang lengkap masih memerlukan beberapa file template inti lainnya untuk membagi struktur halaman dan menerapkan penggunaan kode yang berulang (code reuse).

Membuat header.php File tersebut biasanya berisi deklarasi jenis dokumen (document type declaration).<head> Area tersebut, beserta navigasi dan logo di bagian atas situs web. Gunakan (Use it). wp_head() Fungsi sangat penting, karena memungkinkan inti WordPress, plugin, dan tema Anda untuk menyisipkan kode yang diperlukan (seperti tautan ke file gaya, meta tag, dll.) di sini.

推荐阅读 Menguasai Pengembangan Tema WordPress Dari Nol: Panduan Praktis untuk Membangun Situs Web Modern。

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<header>
    <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

Membuat footer.php File tersebut berisi konten bagian kaki halaman (footer) dan tag HTML penutup. Demikian pula, fungsi tertentu perlu dipanggil (dikirimkan) untuk menyelesaikan proses pengolahan file tersebut. wp_footer() Fungsi ini digunakan untuk memuat kode yang diperlukan oleh skrip dan plugin.

functions.php File tersebut merupakan “pusat kontrol” untuk tema Anda. Bukan file template, melainkan file PHP yang secara otomatis diunduh saat tema diinisialisasi. Di sini, Anda dapat mendaftarkan menu, sidebar, menambahkan fitur-fitur pendukung tema, serta menyisipkan kode ke dalam file gaya (style sheet) dan skrip (script).

<?php
// 添加主题支持
function my_theme_setup() {
    add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
    add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// 注册导航菜单
function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_menus' );

Menu yang dihasilkan secara dinamis

在 header.php Di dalamnya, Anda dapat menggunakan… wp_nav_menu() Fungsi ini digunakan untuk menampilkan menu yang telah Anda daftarkan. Fungsi tersebut akan menghasilkan daftar tak terurut yang berisi elemen-elemen dengan kelas dan struktur CSS yang sesuai, yang diatur melalui panel administrasi WordPress di bagian “Tampilan > Menu”.

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 
<nav>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
        'container'      => false,
    ) );
    ?>
</nav>

Gaya (Style), Skrip (Script), dan Desain Responsif (Responsive Design)

Tema WordPress modern harus mengikuti praktik terbaik dalam memuat file CSS dan JavaScript, serta memastikan bahwa situs web dapat ditampilkan dengan baik di semua perangkat.

在 functions.php Di dalamnya, digunakan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi ini digunakan untuk mengatur penempatan sumber daya (resources). Hal ini memastikan pengelolaan ketergantungan (dependencies) dan urutan pengunduhan (loading sequence) yang benar, serta memungkinkan plugin dan sub tema (sub-themes) untuk “menimpa” (override) pengaturan yang ada.

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 );

// 为脚本本地化数据（可选）
    wp_localize_script( 'my-theme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
    ) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Desain responsif seharusnya dijadikan standar default. Di situs Anda… style.css Dalam hal ini, media queries digunakan untuk menyesuaikan tata letak (layout) berdasarkan berbagai ukuran layar. Pola yang umum digunakan adalah “mobile-first”, yaitu dengan menulis gaya dasar (basic styles) terlebih dahulu untuk perangkat seluler, kemudian menggunakan media queries untuk menyesuaikan tata letak tersebut berdasarkan ukuran layar yang lebih besar. min-width Media query digunakan untuk menambahkan gaya tampilan yang lebih baik (enhanced styles) pada layar yang lebih besar.

推荐阅读 Ajaran Langsung Cara Membuat Tema WordPress Custom yang Sangat Fungsional。

/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }

/* 平板电脑及以上 */
@media (min-width: 768px) {
    .container { width: 750px; margin: 0 auto; }
    .menu { display: flex; }
}

/* 桌面电脑 */
@media (min-width: 992px) {
    .container { width: 970px; }
}

Menggunakan kelas dan fungsi bawaan WordPress

WordPress menyediakan banyak kelas CSS dan fungsi PHP yang berguna untuk membantu pengembangan tata letak (style) situs web.body_class() Fungsi tersebut akan menghasilkan serangkaian kelas CSS yang berbasis pada jenis halaman saat ini (misalnya…). home, single-post, page-id-2Anda dapat menggunakan kelas-kelas ini dalam CSS untuk menulis gaya (style) yang lebih spesifik dan terarah.post_class() Fungsi tersebut menghasilkan kelas yang serupa untuk elemen kontainer dari setiap artikel.

Integrasi Fitur Tingkat Lanjut dengan Komponen Kecil (Advanced Features with Small Components)

Untuk membuat tema Anda lebih profesional dan lebih mudah digunakan, Anda dapat mengintegrasikan beberapa fitur lanjutan, seperti jenis artikel yang dapat disesuaikan, area widget (sampingan), serta pengaturan customizer.

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

Area widget memungkinkan pengguna untuk mengatur tampilan konten dengan cara menyeret modul dari menu “Tampilan > Widget” di panel administrasi WordPress. functions.php Register an area for a sidebar widget in the system.

function my_theme_widgets_init() {
    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>'function my_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebars',  
            'id' =&gt; 'sidebars',  
            'description' =&gt; 'Sidebars untuk tema ini',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Setelah Anda mendaftar, Anda dapat menggunakan fitur tersebut dalam berbagai file template (seperti…). sidebar.phpGunakan dynamic_sidebar() Fungsi digunakan untuk memanggil area tersebut.

WordPress Customizer memungkinkan pengguna untuk melihat prediksi perubahan pada tema secara real-time. Anda dapat menambahkan beberapa pengaturan sederhana ke tema Anda, seperti logo situs web atau teks hak cipta di bagian kaki halaman. Proses ini melibatkan penggunaan fitur Customizer yang tersedia di WordPress. WP_Customize_Manager Kelas, dalam… functions.php Tambahkan kode terkait ke dalam bagian tersebut.

function my_theme_customize_register( $wp_customize ) {
    // 添加一个“版权信息”设置
    $wp_customize->add_setting( 'footer_copyright', array(
        'default'           => '© 2026 Your Site Name',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

$wp_customize->add_control( 'footer_copyright', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

然后，在您的 footer.php Di dalamnya, Anda dapat menggunakan… get_theme_mod() Fungsi digunakan untuk menghasilkan nilai dari pengaturan tersebut.<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。

Menyimpulkan.

Pengembangan tema WordPress merupakan proses yang menggabungkan pengetahuan tentang PHP, HTML, CSS, dan JavaScript dengan arsitektur inti WordPress. Prosesnya dimulai dengan membuat struktur file yang tepat, kemudian secara bertahap mengimplementasikan hierarki template, file-fungsi inti, manajemen sumber daya, serta desain responsif. Dengan mengintegrasikan fitur-fitur lanjutan seperti widget dan customizer, Anda dapat membuat tema yang kuat sekaligus user-friendly (mudah digunakan oleh pengguna). Kuncinya adalah memahami cara kerja WordPress serta mengikuti standar pemrograman dan praktik terbaiknya; hal ini akan memastikan tema Anda aman, efisien, dan mudah dikelola.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan tema WordPress?

Anda perlu memiliki dasar yang kuat dalam HTML dan CSS, yang merupakan fondasi utama dalam membuat tampilan halaman web. Selain itu, Anda harus menguasai sintaks dasar PHP, karena inti WordPress dan template tema-temanya ditulis menggunakan PHP. Pemahaman tentang JavaScript (terutama jQuery) sangat membantu dalam menambahkan fitur interaktif. Akhirnya, memahami konsep-konsep dasar WordPress, seperti perulangan (loop), hook, dan hierarki template, merupakan kunci untuk mengembangkan tema dengan sukses.

Berapa panjang file functions.php untuk sebuah tema? Apakah hal tersebut akan mempengaruhi kinerja (performance)?

functions.php Secara teoritis, sebuah file dapat memiliki ukuran yang sangat besar. Namun, demi memudahkan proses pemeliharaan (maintainability), sangat disarankan untuk memodulaskannya. Anda dapat membagi berbagai fitur—seperti jenis artikel khusus, kode singkat (short codes), atau alat bantu (tools)—ke dalam file-file yang terpisah, lalu mengelolanya secara terstruktur. functions.php Gunakan dalam bahasa Cina require_once 或 include Untuk memperkenalkan konsep tersebut, perlu dikatakan bahwa selama kode ditulis dengan efisien dan tidak mengandung pertanyaan (query) yang berlebihan, panjang kode tersebut hampir tidak berdampak pada kinerja sistem. Dalam proyek-proyek besar, membagi kode ke dalam berbagai file merupakan praktik yang umum dilakukan.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Membuat tema mendukung internasionalisasi (i18n) merupakan langkah penting untuk menjangkau pengguna di seluruh dunia. Dalam kode PHP Anda, semua string teks yang ditampilkan kepada pengguna harus dibungkus menggunakan fungsi penerjemahan yang disediakan oleh WordPress. __()(untuk menampilkan teks kembali) atau _e()(Digunakan untuk menghasilkan teks secara langsung.) Anda perlu… style.css Bagian kepala dan… load_theme_textdomain() Pengaturan yang benar dalam pemanggilan fungsi Text DomainSetelah itu, para pengembang dapat menggunakan alat seperti Poedit untuk menghasilkan (generate) konten yang diperlukan. .pot Template file, and create the corresponding one. .po 和 .mo File terjemahan.

Bagaimana cara mengirimkan tema yang saya kembangkan ke direktori tema resmi WordPress?

Untuk mengirimkan kode ke direktori resmi WordPress, Anda perlu memenuhi beberapa persyaratan yang ketat. Kode Anda harus mengikuti standar pengkodean WordPress; tidak boleh menggunakan kode singkat (shortcodes) atau widget untuk mengkodekan konten secara langsung. Pastikan semua fitur dalam kode Anda aman dan sesuai dengan lisensi GPL. Tema yang Anda kirimkan harus lulus pengujian menggunakan plugin Theme Check, memiliki desain yang responsif (mampu menyesuaikan tampilan di berbagai perangkat), aksesibilitas yang baik, serta dokumentasi yang lengkap. Proses pengiriman dilakukan melalui halaman pengiriman yang tersedia di situs web resmi WordPress, setelah itu kode tersebut akan ditinjau oleh tim peninjau.

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: