Dari nol hingga ahli: Panduan lengkap dan tutorial praktis untuk pengembangan tema WordPress.

Konsep inti dan dasar dalam pengembangan tema WordPress

Sebelum memulai menulis kode apa pun, sangat penting untuk memahami konsep-konsep dasar dari sebuah tema WordPress. Sebuah tema WordPress pada dasarnya merupakan kumpulan berkas-berkas yang mendefinisikan tampilan frontend sebuah situs web, mulai dari tata letak halaman, warna, hingga gaya font. Tema tersebut mengikuti struktur direktori yang tertentu dan berinteraksi dengan sistem inti WordPress untuk menampilkan konten secara dinamis.

Inti dari topik ini adalah file template. File-file yang dibuat menggunakan PHP ini menentukan cara penampilan berbagai jenis konten. Misalnya,index.phpIni adalah file template utama, yang digunakan sebagai solusi cadangan ketika WordPress tidak menemukan template yang lebih spesifik. Halaman utama (homepage) biasanya dibuat menggunakan file template utama ini.home.php或front-page.phpKontrol: Satu artikel terdiri dari…single.phpKontrol, sedangkan halaman tersebut dibuat oleh…page.phpKontrol.

File kunci lainnya adalah…style.cssBukan hanya berisi semua file gaya (style sheet) dari tema tersebut, tetapi juga berfungsi sebagai “kartu identitas” dari tema itu sendiri. Bagian komentar di awal file ini berisi metadata penting seperti nama tema, penulis, deskripsi, dan nomor versi. Tanpa informasi yang benar…style.cssWordPress tidak akan dapat mengenali tema Anda. Struktur dasarnya adalah sebagai berikut:

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Pemahaman Mendalam dan Praktik Nyata。

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

Membangun struktur file tema pertama Anda

Membuat sebuah tema yang fungsional dan memiliki struktur yang jelas memerlukan pengikutan terhadap metode pengorganisasian direktori dan file yang standar. Sebuah tema dasar namun lengkap dapat dibangun dari beberapa file inti.

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%).

halaman akses

Selain yang telah disebutkan di atas…index.php和style.cssSelain itu, sebuah tema yang kuat (robust theme) biasanya mencakup berikut ini sebagai file-file kunci:
1. functions.phpIni merupakan “otak” dari sebuah tema, yang digunakan untuk menambahkan fitur-fitur tertentu pada tema tersebut, menu pendaftaran, bilah samping (area Widget), memuat skrip, dan gaya tampilan (style). File ini bukanlah file template, tetapi setiap tema seharusnya memilikinya.
2. header.phpStruktur HTML yang mencakup bagian kepala dokumen situs web, menu navigasi, dan awal halaman.
3. footer.phpMemuat informasi hak cipta, skrip, serta tag penutup di bagian bawah halaman.
4. sidebar.phpDefinisikan struktur HTML untuk sidebar.
5. page.php 和 single.phpMasing-masing digunakan untuk merender halaman statis dan artikel individu.

Sebuah alur kerja pengembangan yang efisien adalah dengan membuat file template utama.index.phpUntuk memanggil file-file tersebut, gunakan fungsi template bawaan WordPress:

<?php get_header(); ?>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 显示内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到内容。</p>';
    endif;
    ?&gt;
</main>

\n

在functions.phpDi dalamnya, Anda dapat melalui…add_actionFungsi pendaftaran menggunakan “hook” (mekanisme penghubung dalam kode program), misalnya untuk menambahkan dukungan terhadap gambar singkat ( thumbnail) dari artikel:

<?php
// 为主题添加基本支持
function mytheme_setup() {
    // 启用文章和页面上的“特色图像”功能
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Menggunakan sistem hierarki template dan mekanisme perulangan (looping)

Struktur hierarki template di WordPress merupakan sistem aturan yang menentukan file template mana yang akan digunakan untuk memenuhi permintaan halaman tertentu. Memahami hubungan hierarki ini sangat penting dalam pengembangan tema tingkat lanjut, karena memungkinkan Anda membuat tata letak (layout) yang sangat disesuaikan untuk berbagai bagian dari situs web.

推荐阅读 Belajar mengembangkan tema WordPress dari nol: Membuat situs web yang dipersonalisasi.。

Ketika pengguna mengakses situs web Anda, WordPress akan mencari file template yang sesuai berdasarkan jenis konten yang sedang ditampilkan (seperti artikel blog, halaman, arsip kategori, dll.). Urutan pencarian tersebut mengikuti prinsip dari yang paling spesifik ke yang paling umum. Misalnya, untuk halaman dengan ID 5, WordPress akan mencari file template secara berurutan sebagai berikut:
1. page-5.php (Dibuat khusus untuk ID halaman ini.)
2. page-sample-page.php (Menggunakan alias halaman)
3. page.php (Template for General Pages)
4. singular.php (Template for single content, universal use)
5. index.php (Kembali ke versi sebelumnya)

Inti dari semua penampilan konten adalah “WordPress Loop” (The Loop). Ini merupakan blok kode PHP yang digunakan untuk mengulangi penelusuran terhadap hasil kueri saat ini dan menampilkan setiap artikel atau halaman. Struktur dasar dari loop ini hampir sama di setiap file template.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 当前文章/页面的内容在这里输出
        the_title( &#039;<h2 class="entry-title"><a href="/id/' . esc_url( get_permalink() ) . '/">', '</a></h2>' );
        the_excerpt(); // 或使用 the_content()
    endwhile;
    the_posts_navigation(); // 文章导航链接
else :
    // 如果没有找到任何内容
    _e( '抱歉，没有找到符合您要求的内容。', 'textdomain' );
endif;
?&gt;

Untuk meningkatkan modularitas dan kemudahan pemeliharaan template, WordPress mendorong penggunaan…get_template_part()Fungsi ini memungkinkan Anda untuk memisahkan kode tampilan yang umum digunakan (seperti ringkasan artikel, metadata artikel) ke dalam file-file terpisah, sehingga kode tersebut dapat digunakan kembali berulang kali.

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.

halaman akses

// 在 archive.php 或 index.php 中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Kode ini akan mencoba untuk memuat (load) sesuatu.template-parts/content-{post-format}.php(Misalnyacontent-video.phpJika tidak ada, maka lakukan proses pengunduhan (loading).template-parts/content.php。

Fitur Lanjutan: Customizer Tema dan Bidang Kustom

Pengembangan tema WordPress modern tidak hanya berfokus pada tampilan, tetapi juga pada penyediaan opsi penyesuaian yang intuitif bagi pengguna. Alat penyesuaian tema WordPress (WordPress Customizer) menawarkan antarmuka pratinjau yang real-time, memungkinkan pengguna untuk mengatur pengaturan tema tanpa perlu menyentuh kode.

在functions.phpDi dalamnya, Anda dapat menggunakan…$wp_customizeAnda dapat menambahkan pengaturan, kontrol, dan blok menggunakan objek tersebut. Sebagai contoh, tambahkan opsi untuk menampilkan teks hak cipta di bagian kaki halaman (footer).

推荐阅读 Dari Nol hingga Satu: Panduan Praktis dan Keterampilan Inti untuk Mengembangkan Tema WordPress Modern.。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个新的设置
    $wp_customize->add_setting( 'mytheme_footer_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 实现实时预览
    ) );

// 添加一个控件来编辑这个设置
    $wp_customize->add_control( 'mytheme_footer_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Kemudian,footer.phpDi dalamnya, Anda dapat melalui…get_theme_mod()Fungsi menghasilkan nilai ini:

echo esc_html( get_theme_mod( 'mytheme_footer_text', '默认版权文本' ) );

Untuk struktur konten yang lebih kompleks, metadata artikel (field kustom) dan ekspansi klasifikasi merupakan alat yang sangat berguna. Anda dapat mengimplementasikannya menggunakan plugin Advanced Custom Fields (ACF) atau fungsi bawaan WordPress. Sebagai contoh, Anda dapat menambahkan field “waktu baca” (reading time) ke dalam sebuah artikel.

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.

halaman akses

// 在 single.php 中显示自定义字段
$reading_time = get_post_meta( get_the_ID(), 'reading_time_minutes', true );
if ( $reading_time ) {
    echo '<span class="reading-time">Waktu bacaan: ''. intval($reading_time). ‘’ menit</span>';
}

Untuk membuat halaman yang lebih dinamis, membuat template halaman khusus merupakan teknik yang sering digunakan. Cukup tambahkan blok komentar tertentu di bagian awal file PHP, dan template tersebut akan muncul dalam daftar pilihan “Template” pada halaman.

<?php
/*
Template Name: 全宽页面模板
*/
get_header();
?>
<!-- 你的全宽内容布局代码 -->
<?php get_footer(); ?>

Menyimpulkan.

Pengembangan tema WordPress merupakan keterampilan komprehensif yang menggabungkan desain, teknologi front-end, dan logika back-end. Mulai dari memahami konsep-konsep dasar…style.css和index.phpPada awal pembuatan file, penting untuk secara bertahap memahami aturan hierarki template dan sistem perulangan (looping), karena hal ini merupakan dasar untuk membangun tema yang fungsional. Dengan memodulasi struktur tema dan memanfaatkannya dengan baik…functions.php和get_template_part()Fungsi dapat sangat meningkatkan keterawatan (maintainability) dan kemampuan untuk digunakan kembali (reusability) dari kode.

Pada tahap lanjutan, tema kustom yang terintegrasi secara mendalam dapat memberikan pengalaman pengaturan yang ramah dan real-time bagi pengguna. Dengan memanfaatkan field kustom dan template halaman dengan fleksibel, kita dapat menciptakan tata letak konten yang memenuhi kebutuhan yang kompleks. Mengikuti standar pemrograman resmi WordPress serta praktik terbaik akan memastikan bahwa tema yang Anda buat aman, efisien, dan kompatibel dengan seluruh ekosistem WordPress. Ini merupakan kunci untuk meningkatkan keterampilan pengembangan Anda dari “cukup bisa digunakan” menjadi “ahli”.

FAQ - Pertanyaan yang Sering Diajukan.

Apa perbedaan antara tema (theme) dan plugin untuk WordPress?

Tema utamanya adalah mengontrol tampilan dan presentasi frontend dari sebuah situs web, serta menentukan tata letak, warna, dan elemen tata letak lainnya yang bersifat visual. Tema tersebut berinteraksi langsung dengan struktur template WordPress melalui berkas-berkas template.

Plugin digunakan untuk memperluas fungsi sebuah situs web. Dengan plugin, fitur baru dapat ditambahkan ke situs web tanpa mengubah tampilannya, seperti formulir kontak, alat optimisasi mesin pencari, fitur perdagangan elektronik, dan lainnya. Sebuah situs web hanya dapat mengaktifkan satu tema pada satu waktu, tetapi dapat menginstal dan mengaktifkan beberapa plugin sekaligus.

Apa metode yang benar untuk mendaftarkan gaya (styles) dan skrip (scripts) di dalam file functions.php?

Cara yang benar adalah dengan menggunakan…wp_enqueue_scripts“Hook.” Fungsi ini memastikan bahwa hubungan ketergantungan (dependencies) dapat ditangani dengan benar, serta mencegah proses pengunduhan (loading) yang berulang. Berikut adalah contoh standarnya:

function mytheme_enqueue_assets() {
    // 注册并排队主样式表
    wp_enqueue_style( 'mytheme-main-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 注册并排队一个自定义JavaScript文件
    wp_enqueue_script( 'mytheme-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Jangan pernah menggunakan kode langsung di dalam file template.link或scriptMengintegrasikan sumber daya (resource) dengan cara mengkodekannya secara langsung (hardcoding) dalam tag tidak sesuai dengan praktik terbaik WordPress, dan dapat menyebabkan konflik atau masalah kinerja.

Apa itu subtopik (subtopic), mengapa dan bagaimana cara menggunakannya?

Subtopik adalah sebuah topik yang bergantung pada topik lainnya (disebut sebagai topik induk). Subtopik memungkinkan Anda untuk memodifikasi atau memperluas fungsi dan tampilan dari topik induk, tanpa perlu langsung mengubah file topik induk itu sendiri. Keuntungan dari pendekatan ini adalah ketika topik induk diperbarui, modifikasi khusus yang Anda buat di subtopik tidak akan terhapus, sehingga membuat proses pemeliharaan menjadi lebih aman dan mudah.

Membuat subtopik sangat sederhana. Pertama-tama,/wp-content/themes/Buatlah sebuah folder baru di dalam direktori tersebut (misalnya:mytheme-childLalu, buatlah satu lagi di dalamnya.style.cssFile tersebut harus memiliki komentar di bagian awal (header) yang memuat informasi penting.Template:Gunakan baris ini untuk menentukan nama direktori tema induk.

/*
Theme Name: 我的主题子主题
Template: my-first-theme
*/

Setelah itu, Anda dapat melanjutkan ke sub-topik yang relevan.style.cssTambahkan aturan gaya (style rules) ke dalam file tersebut, atau buat file template dengan nama yang sama untuk menggantikan file template yang sesuai di tema induk (parent theme).

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Membuat tema Anda mendukung internasionalisasi (i18n) dan lokalisasi merupakan langkah penting menuju pengembangan yang profesional. Anda perlu menggunakan fungsi lokalisasi yang disediakan oleh WordPress untuk membungkus semua string teks yang ditampilkan di frontend kepada pengguna.

Pertama-tama, gunakan metode terjemahan pada semua string yang dapat diterjemahkan.__()(Digunakan untuk nilai kembalian) atau_e()(Digunakan untuk menampilkan hasil eksekusi fungsi secara langsung), dan juga untuk mengatur sebuah bidang teks (Text Domain).functions.phpDi dalamnya, digunakan…load_theme_textdomain()Fungsi tersebut bertugas untuk memuat file terjemahan.

// 在 functions.php 中
function mytheme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'mytheme_load_textdomain' );

// 在模板文件中使用
_e( '阅读更多', 'my-first-theme' );
$heading = __( '最新文章', 'my-first-theme' );

Kemudian, Anda dapat menggunakan alat seperti Poedit untuk memindai string-string dalam berkas tema dan menghasilkan (data yang diperlukan)..potFile tersebut, dan dibuat versi yang berbeda untuk berbagai bahasa..po和.moFile tersebut diletakkan di dalam bagian yang berkaitan dengan topik (theme)./languages/Di bawah menu.