Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Dasar Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda Dari Nol

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

Konsep Dasar Pengembangan Tema WordPress

Sebelum memulai menulis kode, sangat penting untuk memahami komponen dasar dari sebuah tema WordPress. Sebuah tema pada dasarnya adalah sebuah folder yang berisi serangkaian file yang mengikuti aturan tertentu; file-file tersebut bersama-sama menentukan tampilan dan beberapa fitur dari situs web. Konsep utamanya adalah “struktur hierarki template”, di mana WordPress akan secara otomatis memilih dan memuat file template yang sesuai berdasarkan jenis halaman yang sedang diakses (seperti halaman utama, halaman artikel, atau halaman lainnya).

Setiap topik harus mencakup dua file inti:style.css 和 index.php。style.css Tidak hanya menyediakan gaya tampilan (style), tetapi juga komentar di bagian awal file tersebut berisi metadata tentang tema, seperti nama tema, penulis, deskripsi, dan lainnya. Inilah satu-satunya cara bagi WordPress untuk mengenali sebuah tema.index.php Ini adalah file template default. Ketika template yang lebih spesifik tidak tersedia, WordPress akan kembali menggunakan file template ini.

Topik berinteraksi dengan inti WordPress melalui Tag Templat (Template Tags). Tag-tag ini merupakan fungsi PHP yang digunakan untuk mengambil dan menampilkan konten secara dinamis dari basis data. the_title() Output judul artikel,the_content() Memahami dan menggunakan fungsi-fungsi tersebut dengan benar merupakan kunci dalam penampilan konten dinamis.

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

Membangun lingkungan pengembangan dan membuat struktur tema

Sebuah lingkungan pengembangan yang efisien dan terisolasi merupakan langkah pertama dalam pengembangan tema. Kami merekomendasikan penggunaan perangkat lunak server lokal seperti XAMPP, MAMP, atau Laragon, yang dapat dengan cepat membangun lingkungan PHP dan MySQL di komputer. Instal file inti WordPress ke dalam direktori akar (root) server lokal. htdocs 或 wwwDalam dokumen 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

Selanjutnya, di dalam direktori instalasi WordPress… wp-content/themes/ Di dalam path tersebut, buatlah sebuah folder untuk tema baru Anda, misalnya dengan nama “new_theme”. my-first-themeDalam folder ini, buatlah file pertama yang diperlukan:style.cssKomentar di bagian atas harus disusun sesuai dengan format berikut:

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义 WordPress 主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Setelah menyimpan file, masuk ke halaman “Appearance” -> “Themes” di panel administrasi WordPress. Di sana, Anda seharusnya dapat melihat tema Anda dan mengaktifkannya.

Sekarang, buatlah file kedua yang diperlukan:index.phpIni adalah file template utama untuk tema tersebut. Pada tahap awal, Anda hanya perlu memasukkan struktur HTML5 dasar dan sebuah siklus sederhana untuk melakukan pengujian.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
    <header>
        <h1>My custom theme</h1>
    </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>
    <footer>
        <p>Informasi di bagian bawah situs web</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Penjelasan Rinci tentang File Template Inti dan Fungsi-Fungsi Terkait

Seiring dengan meningkatnya kompleksitas tema, Anda perlu memisahkan kode dari berbagai fungsi ke dalam file template yang bersifat khusus (spesialisasi). Sistem hierarki template WordPress akan secara otomatis mencari dan memuat template yang paling cocok dengan halaman yang sedang ditampilkan.

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

Membuat header.php File, akan… index.php 中 <head> Bagian dan <header> Sebagian kode telah dipotong dan dimasukkan ke dalamnya. Lalu… index.php Digunakan di bagian atas. get_header() Gunakan fungsi untuk mengimpornya. Demikian pula, buatlah (create)… footer.php Simpan informasi di bagian bawah, dan gunakannya. get_footer() Mengintroduksi. Membuat. sidebar.phpDan gunakan… get_sidebar() Pengenalan: Hal ini memungkinkan terwujudnya modularisasi dan penggunaan kembali kode (code reuse).

Untuk berbagai jenis halaman, Anda dapat membuat template yang khusus:
* single.phpDigunakan untuk menampilkan satu artikel saja.
* page.phpDigunakan untuk menampilkan halaman tunggal.
* front-page.phpJika hal tersebut ada, maka akan dijadikan halaman utama yang statis (tidak berubah).
* home.phpDigunakan untuk menampilkan indeks artikel blog (ketika halaman utama diatur menjadi “Artikel Terbaru”).
* archive.phpDigunakan untuk menampilkan halaman arsip yang berisi kategori, tag, penulis, dan lainnya.
* 404.phpDigunakan untuk menampilkan halaman kesalahan 404.

Dalam file template, struktur yang paling penting adalah “loop” (siklus). Ini merupakan blok kode PHP yang digunakan oleh WordPress untuk mengambil dan menampilkan artikel dari basis data. Struktur dasarnya adalah sebagai berikut:

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 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<?php endwhile; else : ?>
    <p>Maaf, tidak ditemukan konten apa pun.</p>
<?php endif; ?>

fungsi bloginfo() 或 get_bloginfo() Digunakan untuk memperoleh informasi dasar tentang sebuah situs web, seperti bloginfo( 'name' ) Judul situs web:bloginfo( 'stylesheet_url' ) Keluarkan URL untuk tabel gaya tema.

Pengembangan Fitur Gaya, Skrip, dan Tema

Agar gaya tampilan tema dapat diunduh dengan benar dan menghindari konflik, Anda perlu menggunakan fungsi yang disediakan oleh WordPress untuk menambahkan file gaya (stylesheet) dan skrip ke dalam antrian (queue), bukan dengan menuliskannya langsung di dalam kode HTML. <link> 或 <script> Label. Ini diperoleh melalui topik (theme). functions.php File implementation.

Membuat functions.php File ini digunakan untuk menambahkan fitur khusus tema, mengubah perilaku default, atau mendaftarkan gaya skrip. wp_enqueue_style() 和 wp_enqueue_script() Fungsi:

推荐阅读 Panduan lengkap untuk pengembangan tema WordPress: membangun tema kustomisasi berkinerja tinggi dari nol.。

<?php
function my_first_theme_scripts() {
    // 注册并排入主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 注册并排入一个自定义 CSS 文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );

// 注册并排入一个 JavaScript 文件，依赖于 jQuery
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

在 functions.php Di dalamnya, juga dapat digunakan… add_theme_support() Fungsi ini digunakan untuk mendeklarasikan fitur-fitur yang didukung oleh suatu tema, seperti gambar khas artikel, logo kustom, format artikel, dan lainnya.

// 支持文章特色图像
add_theme_support( 'post-thumbnails' );

// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );

Gaya akhir dari suatu tema biasanya ditentukan dalam dokumen atau kode yang digunakan untuk mengatur tampilan aplikasi atau situs web. style.css Atau dalam file CSS lain yang diunduh melalui fungsi tertentu. WordPress secara otomatis akan menambahkan banyak kelas CSS yang berguna ke elemen `body` dan konten artikel, seperti… home, single, page-id-{ID} Dengan nama-nama kelas tersebut, Anda dapat membuat gaya (style) yang sesuai dengan kebutuhan Anda.

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

Menyimpulkan.

Dengan mengikuti langkah-langkah dalam artikel ini, Anda telah memahami proses inti untuk membuat tema WordPress kustom dari nol. Mulai dari memahami konsep dasar tema dan struktur templatenya, hingga membangun lingkungan pengembangan, membuat file-file yang diperlukan, menganalisis kode template inti, memahami penggunaan loop dan tag-template, dan akhirnya belajar cara mengatur tampilan situs web menggunakan tema tersebut. functions.php Tambahkan gaya (style), skrip (script), dan fitur tema dengan benar. Proses ini mungkin terlihat sederhana, tetapi mencakup kerangka dasar dalam pengembangan tema. Selanjutnya, Anda dapat mengeksplorasi lebih lanjut aspek-aspek pengembangan tema yang lebih kompleks, seperti pengembangan sub-tema (sub-theme), penyesuaian tipe artikel (article types), opsi tema tingkat lanjut (advanced theme options), serta integrasi dengan platform WooCommerce, sehingga Anda dapat terus memperkaya dan menyempurnakan keterampilan pengembangan tema Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema (theme) diperlukan pengetahuan tentang PHP?

Ya, PHP merupakan bahasa pemrograman inti dari WordPress. File tema pada dasarnya merupakan file PHP yang menggabungkan kode HTML dengan fungsi-fungsi PHP khusus WordPress (tag template) untuk menghasilkan halaman secara dinamis. Bahkan dengan menggunakan alat pembangun halaman (page builder), pemahaman tentang PHP tetap diperlukan untuk melakukan penyesuaian pada fitur-fitur tingkat lanjut dan untuk menyelesaikan berbagai masalah yang mungkin muncul.

Bisakah nama file style.css untuk suatu tema diubah?

Tidak boleh.style.css Ini adalah file yang wajib ada agar WordPress dapat mengenali sebuah tema, dan namanya tetap sama untuk setiap tema. Semua metainformasi tentang tema (seperti nama dan penulis) didefinisikan dalam komentar di bagian awal file tersebut. Namun, Anda masih dapat mengubah isi file tersebut sesuai kebutuhan Anda. functions.php Fungsi tersebut melakukan pendaftaran (registration) dan memuat file CSS dengan nama lain untuk melengkapi gaya tampilan (styles).

Bagaimana cara membuat sebuah tema mendukung bahasa Mandarin atau fitur penerjemahan?

Pertama, di style.css Pengaturan yang benar dilakukan dalam komentar header (header comments). Text Domain(Misalnya my-first-theme), dan gunakan hal tersebut di semua string yang perlu diterjemahkan. __() 或 _e() Fungsi tersebut kemudian dibungkus (dipaketkan). Setelah itu, alat seperti Poedit digunakan untuk memindai tema yang telah dibuat. .pot File template, dan buat versi berbahasa yang sesuai (misalnya: zh_CN.poFile terjemahan tersebut, kemudian dikompilasi menjadi… .mo File tersebut diletakkan di dalam folder yang berisi tema (theme folder). languages Di dalam folder tersebut.

Bagaimana cara menambahkan fitur menu pada tema yang dibuat sendiri (custom theme)?

Pertama-tama, dalam topik ini… functions.php Dalam dokumen tersebut, digunakan register_nav_menus() Posisi untuk mendaftarkan fungsi. Kemudian, di dalam file template (seperti…) header.phpDi tempat-tempat di dalam dokumen tersebut di mana Anda ingin menampilkan menu, gunakan kode berikut: wp_nav_menu() Fungsi tersebut digunakan untuk mendaftarkan menu yang telah disiapkan. Pengguna dapat mengonfigurasi isi menu di posisi-posisi tersebut melalui menu “Tampilan” -> “Menu” di panel administrasi WordPress.

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: