Halaman Utama/Pengetahuan./WordPress/Detail konten.

Memulai Pengembangan Tema WordPress: Membuat Tema Kustom Pertama Anda Secara Bertahap

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

Mempersiapkan dan mengonfigurasi lingkungan.

Sebelum memulai menulis baris kode pertama, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup lingkungan server lokal dan editor kode. Kami merekomendasikan penggunaan XAMPP, MAMP, atau Laragon untuk membangun server lokal, karena alat-alat tersebut dapat menginstal dan menjalankan Apache, MySQL, dan PHP dengan satu klik saja. Pilih editor kode yang Anda sukai, seperti Visual Studio Code, Sublime Text, atau PHPStorm; dukungan terhadap penyorotan kode (highlighting) dan autocompletion (pembuatan kode secara otomatis) dari editor-editor tersebut akan sangat meningkatkan efisiensi pengembangan Anda.

Selanjutnya, Anda perlu membuat sebuah direktori di instalasi WordPress lokal Anda untuk tema baru Anda. Semua tema WordPress disimpan di sana. /wp-content/themes/ Di dalam direktori tersebut, buatlah folder baru untuk topik yang akan Anda buat nanti. Sebagai contoh, beri nama folder tersebut “NewTopic”. my-first-themeNama folder ini merupakan identifikasi tema Anda, dan nama tersebut akan muncul dalam daftar tema di bagian belakang (backend).

Pada saat yang sama, Anda perlu memahami dua fondasi utama dalam pengembangan tema WordPress, yaitu file template (templat) dan file style sheet (skema tata letak). Tema WordPress yang paling sederhana hanya memerlukan dua file tersebut.style.css 和 index.php。style.css Tidak hanya mengontrol tampilan visual situs web, blok komentar di bagian header file juga berfungsi sebagai “kartu identitas” dari tema tersebut, yang berisi informasi meta seperti nama tema, penulis, dan deskripsi.index.php Itu adalah file template utama yang digunakan secara default.

推荐阅读 Panduan lengkap untuk pengembangan tema WordPress: Membangun tema kustom dari nol.。

Membuat file tema inti (core theme file)

Mendefinisikan gaya tampilan (style) dan informasi untuk suatu topik (topic).

Semuanya dimulai dari… style.css Mulai. Buat file ini di direktori akar folder tema, dan tambahkan blok komentar yang telah diformat di bagian awal file. Blok komentar ini sangat penting agar WordPress dapat mengenali dan memuat tema tersebut. Kode di bawah ini menunjukkan contoh header tabel gaya dasar:

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 First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Di antaranya,Text Domain File ini digunakan untuk keperluan internasionalisasi (i18n), sebagai persiapan untuk penerjemahan ke berbagai bahasa di masa depan. Setelah file tersebut dibuat, masuk ke panel administrasi WordPress di menu “Tampilan” -> “Tema”, dan Anda seharusnya dapat melihat tema Anda di sana, meskipun untuk saat ini tema tersebut belum memiliki fitur apa pun.

Membangun struktur template dasar

Selanjutnya, buatlah file kerangka (skeleton file) untuk tema tersebut. index.phpIni adalah template paling dasar; ketika WordPress tidak dapat menemukan file template yang lebih spesifik (misalnya… single.php 或 page.phpKetika diperlukan, maka alat tersebut akan digunakan. Salah satu contoh paling sederhana… index.php Hanya fungsi-fungsi dasar yang memang diperlukan untuk memanggil bagian kepala (header), siklus (loop), dan bagian akhir (footer) dari WordPress yang boleh digunakan.

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

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

File ini menggunakan tag-tag template inti dari WordPress, seperti… bloginfo() Mendapatkan informasi tentang situs web.the_title() 和 the_content() Outputkan judul dan isi artikel dalam sebuah siklus.wp_head() 和 wp_footer() Ini merupakan “hook” yang sangat penting; hook tersebut memungkinkan inti WordPress, plugin, dan skrip lainnya untuk berinteraksi dengan halaman web. <head> 和 <footer> Injection of code into a specific area (or region).

Membagi template menjadi komponen-komponen yang lebih kecil dan memasukkan fungsi-fungsi tertentu ke dalam template tersebut.

File template yang termodulasi

将 index.php Menulis semua kode dalam satu file dapat menyebabkan kode menjadi sulit untuk dikelola. Praktik terbaik adalah dengan membaginya menjadi beberapa komponen template (Template Parts). Buat file-file berikut untuk mengatur struktur kode:
* header.phpmenyimpan <head> Konten header umum, seperti daftar wilayah dan navigasi di bagian atas situs web.
* footer.phpDigunakan untuk menyimpan informasi hak cipta dan konten lainnya yang bersifat umum, yang ditampilkan di bagian bawah situs web.
* sidebar.phpArea untuk menyimpan alat tambahan (tools) di sidebar (opsional).
* functions.phpFile fungsi fungsional untuk tema.

推荐阅读 Mulai dari Nol: Panduan Langsung untuk Mengembangkan Tema WordPress yang Dikustomisasi。

Kemudian, gunakan… get_header()、get_footer() 和 get_sidebar() Fungsi-fungsi seperti itu ada dalam… index.php Mengintegrasikannya ke dalam sistem yang ada. Setelah diubah atau direnovasi… index.php Bagian inti akan menjadi sangat sederhana:

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

\n

Perhatikan bahwa kami telah menggunakan… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Menghasilkan teks yang telah diterjemahkan merupakan praktik standar dalam bidang internasionalisasi.

Meningkatkan fitur tema

functions.php File tersebut merupakan “pusat kontrol” dari tema Anda. File ini digunakan untuk menambahkan fitur-fitur pendukung tema, mengatur menu dan sidebar, memuat file gaya (style sheets) serta skrip (scripts), dan sebagainya. File ini bukanlah file template, melainkan akan dimuat secara otomatis saat tema diinisialisasi.

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

Berikut adalah contoh teks yang bersifat “dasar” (basic): functions.php Contoh:

__( '主导航菜单', 'my-first-theme' ),
    ) );

// 添加对 HTML5 标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-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>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

Dalam berkas ini, kita telah mendefinisikan sebuah fungsi. my_first_theme_setupDan melalui… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Mount it to a specific action hook in the WordPress default theme. Similarly, we use… register_sidebar Fungsi tersebut telah mendaftarkan sebuah area untuk alat bantu (tool) kecil, dan melalui… wp_enqueue_style Fungsi tersebut telah berhasil mengimpor file gaya tema (theme style sheet) dengan benar.

Membuat template dan gaya khusus

Membuat template khusus untuk berbagai jenis halaman (page types).

Struktur hierarki template di WordPress memungkinkan Anda membuat file template khusus untuk berbagai jenis halaman. Misalnya:
* front-page.phpDigunakan sebagai halaman utama yang statis.
* home.phpHalaman daftar artikel blog.
* single.phpHalaman detail sebuah artikel.
* page.phpHalaman tunggal (Single Page).
* archive.phpHalaman arsip untuk kategori, tag, penulis, dan lainnya.
* search.phpHalaman hasil pencarian.
* 404.phpHalaman kesalahan 404.

推荐阅读 Panduan Praktis Pengembangan Tema WordPress: Membangun Arsitektur dan Template Tema Kustom Dari Nol。

Membuat page.php Anda dapat mengontrol tampilan semua halaman secara independen, tanpa mempengaruhi halaman artikel. Strukturnya adalah… index.php Mirip, tetapi biasanya tidak diperlukan untuk menampilkan metadata artikel (seperti tanggal, penulis).

Mengdesain tata letak dan interaksi yang responsif

Tema WordPress modern harus bersifat responsif, yang berarti kode CSS-nya perlu disesuaikan dengan berbagai ukuran layar, mulai dari ponsel hingga desktop. Disarankan untuk menggunakan strategi CSS “Mobile First”, yaitu dengan membuat gaya dasar terlebih dahulu untuk layar kecil, lalu menambahkan gaya tambahan untuk layar yang lebih besar menggunakan Media Queries.

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

Pada saat yang sama, tema Anda mungkin memerlukan beberapa kode JavaScript untuk menyediakan fitur interaktif, seperti menu drop-down, gambar berputar (carousel), dan lainnya. Cara yang benar untuk melakukannya adalah dengan… functions.php Gunakan dalam bahasa Cina wp_enqueue_script() Fungsi ini digunakan untuk mendaftarkan dan mengatur urutan eksekusi skrip, serta memastikan bahwa ketergantungan antar-skrip (seperti jQuery) dideklarasikan dengan benar. Dengan demikian, dapat dihindari konflik atau pengunduhan ulang skrip yang tidak perlu, serta dapat dipastikan kompatibilitas dengan fitur optimisasi skrip yang tersedia di WordPress.

Menyimpulkan.

Dengan langkah-langkah di atas, Anda telah menyelesaikan pembuatan tema WordPress custom yang paling dasar dan dapat dijalankan. Anda telah mempelajari cara membuat dan mendefinisikan informasi tema. style.cssMembangun dasar-dasar… index.php Template: Pecahlah template tersebut menjadi komponen-komponen yang termodulasi. functions.php Anda telah memperkuat fitur tema di WordPress. Anda juga memahami struktur hierarki template yang kuat di WordPress, yang memudahkan pembuatan halaman template khusus yang lebih kompleks.

Pengembangan tema merupakan proses yang terus-menerus berulang dan mendalam. Selanjutnya, Anda dapat mengeksplorasi pengembangan Child Theme (Tema Anak) untuk memodifikasi tema yang sudah ada dengan aman, belajar menggunakan API WordPress Customizer agar pengguna dapat menyesuaikan pengaturan tema secara real-time melalui panel administrasi, atau mempelajari lebih lanjut tentang REST API WordPress untuk membuat tema yang dapat berintegrasi dengan framework front-end. Menjaga keterkinian dengan dokumen pengembang resmi dan aktif berpartisipasi dalam komunitas merupakan kunci untuk terus meningkatkan kemampuan Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress diperlukan keahlian khusus dalam PHP?

Ya, memiliki dasar yang kuat dalam PHP merupakan syarat penting untuk pengembangan tema WordPress. Karena WordPress itu sendiri ditulis menggunakan PHP, semua file template (seperti…) index.php、single.php）dan file fungsi (functions.phpSemuanya memerlukan penggunaan kode PHP untuk menghasilkan konten secara dinamis, memanggil fungsi WordPress, dan memanipulasi data.

Pada saat yang sama, Anda juga perlu memahami HTML dan CSS untuk membangun struktur dan tata letak halaman, serta memiliki pengetahuan dasar tentang JavaScript (terutama jQuery, karena jQuery sudah terintegrasi dalam inti WordPress) agar dapat menambahkan fitur interaktif.

Mengapa perubahan tema saya tidak terlihat di panel administrasi WordPress?

Ini biasanya disebabkan oleh cache browser atau server. Pertama-tama, cobalah untuk menghapus cache di browser Anda. Ctrl + F5(Windows/Linux) atau Cmd + Shift + R(Pada Mac): Lakukan pembaruan paksa (force refresh) untuk membersihkan cache browser.

Jika masalah masih terjadi, kemungkinan besar server atau plugin cache WordPress (seperti W3 Total Cache, WP Super Cache) menyimpan file-file lama. Cobalah untuk membersihkan cache dari semua plugin tersebut. Pada tahap pengembangan, disarankan untuk sementara waktu menonaktifkan plugin-cache ini agar tidak mengganggu proses pengembangan.

Bagaimana cara membuat tema saya mendukung berbagai bahasa?

Untuk membuat sebuah tema mendukung berbagai bahasa (internasionalisasi dan lokalisasi, atau i18n/l10n), hal tersebut sangat bergantung pada fungsi penerjemahan yang tersedia di WordPress. Di dalam sebuah tema, semua teks yang ditujukan untuk pengguna tidak boleh ditulis langsung, melainkan harus dibungkus menggunakan fungsi penerjemahan yang sesuai.

Misalnya, dengan menggunakan… (‘文本’， ‘my-first-theme’) Silakan berikan teks yang ingin diterjemahkan, atau beritahu saya apa yang perlu dilakukan. echo esc_html(‘文本’， ‘my-first-theme’) “Perform output and escape.” style.css Bagian kepala dan… load_theme_textdomain() Pengaturan yang benar dalam pemanggilan fungsi Text Domain(Langkah pertama: Isi bidang teks tersebut), kemudian gunakan alat seperti Poedit untuk membuatnya. .pot Template for translation: .po/.mo File bahasa (language file).

Apa perbedaan antara fungsi-fungsi yang terdapat di file functions.php dari tema dan fungsi-fungsi yang terdapat dalam plugin?

functions.php Fungsi kode dalam file tersebut mirip dengan fungsi kode plugin; keduanya dapat digunakan untuk memperluas kemampuan WordPress. Perbedaan utamanya terletak pada cakupan (scope) dan tujuan penggunaannya.

functions.php Fungsi-fungsi tersebut terikat erat dengan tema yang sedang aktif. Ketika pengguna berganti tema, fungsi-fungsi ini biasanya tidak lagi tersedia. Fungsi ini cocok untuk ditambahkan yang berkaitan langsung dengan presentasi visual tema, tata letak, dan template (misalnya, lokasi formulir pendaftaran, opsi dukungan untuk tema).

Fungsi yang disediakan oleh plugin tersebut independen dari tema yang digunakan; artinya, fungsi tersebut tetap ada selama plugin tersebut diaktifkan, terlepas dari tema apa yang digunakan. Plugin ini cocok untuk menambahkan fitur-fitur umum yang tidak berkaitan dengan tampilan tema (seperti formulir kontak, optimisasi SEO, fitur e-commerce, dan sebagainya). Jika ada fitur yang perlu dipertahankan setelah mengganti tema, maka fitur tersebut sebaiknya diimplementasikan sebagai sebuah plugin.

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: