Halaman Utama/Pengetahuan./WordPress/Detail konten.

Pemula dalam Pengembangan Tema WordPress: Bangun Tema Kustom Pertamamu dari Nol

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

Untuk membuat sebuah tema WordPress yang fungsional secara lengkap, Anda perlu menyiapkan serangkaian file inti. File-file ini merupakan kerangka dasar dari tema tersebut, dan masing-masing file memiliki fungsi tertentu.

File-file dasar meliputi:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。

Mari kita mulai dengan membuat file `style.css`. Di bagian atas file tersebut, Anda perlu menambahkan sebuah komentar header yang berisi informasi tentang tema yang digunakan.

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

Selanjutnya, buatlah file `index.php`. Dalam versi yang paling dasar, file ini perlu mengimpor elemen-elemen header dan footer, serta memutar ulang (mengeluarkan isi) artikel-artikel yang tersedia.

<?php get_header(); ?>

<main id="main-content">
    <p>   
      
</p>
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        
        <p>Tidak ada artikel saat ini.</p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

File `header.php` dan `footer.php` masing-masing berisi struktur HTML untuk bagian atas (header) dan bawah (footer) situs web yang umum digunakan di seluruh situs. File `functions.php` digunakan untuk memperluas atau meningkatkan fungsi-fungsi dari tema yang digunakan.

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

Memahami struktur hierarki template dan mekanisme pengulangan (looping) dalam pemrograman

WordPress menggunakan sistem hierarki template yang cerdas untuk menentukan bagaimana konten halaman yang berbeda ditampilkan. Misalnya, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari file `single.php` terlebih dahulu; ketika mengakses halaman kategori, WordPress akan mencari file `category.php`. Jika file-file tersebut tidak ditemukan, WordPress akan beralih ke file `archive.php`, dan jika juga tidak ditemukan, maka akan kembali ke file `index.php`.

Apa itu siklus utama (main loop)?

`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Ahli。

Create other template files.

Untuk membuat tema tersebut lebih profesional, Anda sebaiknya membuat beberapa file template yang sering digunakan. Misalnya, buatlah file `single.php` untuk menampilkan artikel secara terpisah.

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <div class="post-meta">
                发布于： | 作者：
            </div>
            <div class="post-content">
                <?php the_content(); ?>
            </div>
        </article>
        
</main>

<?php get_footer(); ?>

Demikian pula, Anda dapat membuat file `page.php` untuk mendefinisikan template halaman, dan file `archive.php` untuk mendefinisikan template halaman arsip yang berisi kategori, tag, dan lainnya.

Mengintegrasikan menu dan sidebar

Sebuah tema modern biasanya mencakup menu navigasi yang dapat disesuaikan dan area alat tambahan (sidebar widgets) yang dapat dikonfigurasi. Fitur-fitur ini perlu didaftarkan dan diaktifkan melalui berkas `functions.php`.

Menu navigasi terdaftar.

Tambahkan kode berikut ke dalam `functions.php` untuk mendaftarkan posisi menu untuk suatu tema, misalnya “Menu Utama”.

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Setelah mendaftar, pengguna dapat mengatur menu tersebut ke posisi yang diinginkan di bagian “Tampilan” (Appearance) -> “Menu” (Menus) di panel administrasi WordPress. Selanjutnya, tambahkan kode berikut ke dalam file `header.php` di tempat di mana menu tersebut perlu ditampilkan, untuk memanggil menu tersebut:

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 id="site-navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
    ) );
    ?>
</nav>

Menambahkan sidebar untuk alat tambahan (tools)

Widget merupakan fitur yang sangat fleksibel di WordPress. Untuk menambahkan sebuah sidebar, Anda juga perlu mendaftarkan sebuah “area widget” di file `functions.php`.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Sidebar Utama', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Tambahkan widget di sini.', 'my-first-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>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebar 1',  
            'id' =&gt; 'sidebars-1',  
            'description' =&gt; 'Sidebar pertama',  
        )  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Kemudian, dalam file template tempat Anda ingin menampilkan sidebar (misalnya `sidebar.php`), gunakan fungsi `dynamic_sidebar()` untuk menghasilkan tampilan sidebar tersebut.

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

Terakhir, jangan lupa untuk memasukkan file sidebar ini ke dalam `index.php` atau `single.php` dengan menggunakan fungsi `get_sidebar()`.

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

Menambahkan gaya (style) dan skrip (script)

为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。

Mengimpor lembar gaya (style sheet)

Meskipun `style.css` sangat penting, WordPress tidak akan memuatnya secara otomatis. Anda perlu menambahkannya secara eksplisit ke dalam proses pengambilan file gaya (style loading process). Umumnya, kita juga memisahkan file gaya utama (main style sheet) dari file gaya yang berfungsi untuk mengatur ulang tampilan halaman (reset style sheet).

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_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
    wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );

// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menggunakan praktik pengembangan CSS modern

Dalam pengembangan front-end pada tahun 2026, fokus pada desain responsif dan aksesibilitas sangat penting. Di dalam file `style.css` atau file `main.css` yang terpisah, Anda sebaiknya menggunakan media query untuk memastikan situs web dapat ditampilkan dengan baik di berbagai perangkat.

/* 基础样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}

/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
    #primary-menu {
        display: none;
    }
    /* 移动端菜单样式 */
}

Pengujian dan Debugging

Setelah pengembangan tema selesai, pengujian merupakan tahap yang sangat penting. Anda perlu melakukan pengujian yang menyeluruh di berbagai lingkungan, browser, dan perangkat yang berbeda.

Aktifkan mode debug.

Selama proses pengembangan, pastikan untuk mengaktifkan mode debug di WordPress. Hal ini akan membantu Anda menemukan kesalahan (errors), peringatan (warnings), dan notifikasi (notifications) dalam kode PHP dengan cepat. Buka file `wp-config.php`, lalu temukan atau tambahkan kode berikut:

推荐阅读 Panduan Lanjutan Pengembangan Tema WordPress untuk Tahun 2026: Membangun Situs Web Perusahaan yang Responsif dari Nol。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全

Unit Testing for the Topic

Disarankan untuk menggunakan data pengujian unit tema WordPress resmi untuk menguji tema Anda secara menyeluruh. Data tersebut mencakup berbagai jenis artikel, halaman, media, komentar, dan lainnya, sehingga dapat memastikan bahwa tema Anda dapat menampilkan konten dengan benar dalam berbagai situasi, tanpa adanya masalah tata letak atau gaya yang terlewat.

Menyimpulkan.

Dari membuat file dasar `style.css` dan `index.php`, hingga memahami struktur tata letak (template hierarchy) dan mekanisme pengulangan (looping), lalu mendaftarkan menu, sidebar, serta menambahkan skrip gaya (style scripts) dengan aman, Anda telah melalui seluruh proses pembuatan sebuah tema WordPress yang sederhana namun lengkap. Ingatlah bahwa pengembangan tema merupakan proses yang bersifat iteratif; memulai dari versi yang paling sederhana dan secara bertahap menambahkan fitur serta menyempurnakan detail merupakan praktik terbaik. Teruslah belajar tentang tag-tag template, action hooks, dan filters, sehingga Anda dapat membuat tema yang lebih kuat dan lebih fleksibel.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan tema WordPress?

Anda perlu memahami dasar-dasar HTML, CSS, dan PHP. Pengetahuan dasar tentang JavaScript juga akan sangat membantu, terutama untuk menambahkan fitur interaktif. Selain itu, penting untuk mengenal konsep-konsep dasar WordPress, seperti artikel, halaman, kategori, tag, plugin, dan menu.

Mengapa perubahan pada tema saya tidak berlaku di backend?

Ini biasanya disebabkan oleh cache browser atau cache WordPress. Silakan coba memperbarui browser secara paksa (Ctrl + F5 atau Cmd + Shift + R). Jika masalah masih terjadi, periksa apakah Anda telah menambahkan gaya (styles) dan skrip (scripts) dengan benar ke dalam queue, serta pastikan bahwa file `functions.php` tidak mengandung kesalahan sintaks. Dalam kasus yang sangat jarang, Anda mungkin perlu membersihkan cache server atau plugin.

Bagaimana cara membuat tema saya mendukung berbagai bahasa?

你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。

Apa perbedaan antara tema kustom (custom theme) dan subtema (subtheme)?

Tema kustom adalah tema baru yang dikembangkan secara independen dari awal. Sedangkan subtema didasarkan pada sebuah “tema induk” yang sudah ada; subtema mewarisi semua fitur, gaya, dan berkas template dari tema induk tersebut. Dengan menggunakan subtema, Anda hanya perlu mengubah atau menambahkan bagian-bagian yang diperlukan (umumnya gaya dan beberapa berkas template), tanpa perlu mengubah isi tema induk. Hal ini sangat berguna saat Anda ingin menyesuaikan atau memperbarui tema yang populer, karena modifikasi yang Anda lakukan tidak akan tertimpa oleh versi terbaru dari tema induk. Metode ini dianggap lebih aman dan lebih efisien.

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: