Halaman Utama/Pengetahuan./WordPress/Detail konten.

Pengembangan Tema WordPress: Panduan Lengkap untuk Membuat Tema Khusus dari Nol

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

Struktur dasar tema WordPress

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak diwp-content/themes/Folder-folder dalam direktori tersebut berisi serangkaian file yang digunakan untuk mengontrol tampilan dan fungsi situs web. Memahami peran file-file inti ini merupakan dasar dalam proses pengembangan.

File template yang wajib digunakan untuk topik tersebut.

Setiap topik harus mencakup dua file dasar:style.css和index.phpDi antaranya,style.cssTidak hanya digunakan untuk menyimpan gaya CSS (CSS styles), blok komentar di bagian awal file tersebut juga berisi metadata tentang tema tersebut. WordPress memanfaatkan informasi-informasi ini untuk mengenali tema yang digunakan.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpIni adalah file template default untuk suatu tema. Ketika WordPress tidak menemukan template yang lebih spesifik, file ini akan digunakan untuk merender halaman. File ini berfungsi sebagai “jaring pengaman” yang memastikan semua halaman dapat ditampilkan dengan benar.

推荐阅读 Membangun Situs Web Berkualitas: Panduan Praktis tentang Penyesuaian dan Optimisasi Tema WordPress。

File template lain yang sering digunakan:

Untuk mengontrol tampilan berbagai halaman dengan lebih detail, Anda perlu membuat lebih banyak file template. Misalnya,header.phpBiasanya berisi deklarasi jenis dokumen (document type declaration).<head>Bagian header (tajuk) dari wilayah (region) dan situs web (website).footer.phpMaka, hal tersebut mencakup konten bagian kaki halaman (footer) dan tag penutup (closing tag).sidebar.phpDigunakan untuk sidebar. Dengan menggunakan fungsi bawaan WordPress, seperti…get_header()、get_footer()和get_sidebar()Anda dapat dengan mudah memasukkan bagian-bagian tersebut ke dalam template lainnya.

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

Selain itu, Anda juga dapat membuat…single.phpDigunakan untuk satu artikel saja.page.phpDigunakan untuk halaman yang berdiri sendiri (halaman independen).archive.phpDigunakan untuk daftar arsip, sertafunctions.phpFile khusus ini berfungsi untuk menambahkan fitur dan karakteristik terkait tema (theme).

Membuat template halaman utama untuk sebuah tema.

Halaman utama merupakan “wajah” dari sebuah situs web, dan biasanya memerlukan desain yang paling unik. Kita akan memulainya dengan membangun…index.phpMari kita mulai, dan bahas bagaimana cara memasukkan struktur perulangan (loop) untuk menampilkan konten.

Mengintegrasikan header dan footer

Sebuah praktik yang baik adalah memodulasi bagian-bagian yang bersifat umum (public). Pertama-tama, buatlah modul-modul tersebut di dalam folder tema (theme folder) Anda.header.php和footer.php…di…header.phpDi dalamnya, Anda perlu memasukkan…<!DOCTYPE html>Pernyataan,<html>Awal tag…<head>Area (penggunaan)wp_head()Hook (fitur tersebut memungkinkan plugin dan tema untuk menambahkan kode di sini), serta konten pembuka seperti logo situs web dan navigasi utama.

Kemudian,index.phpDi awal, gunakan…<?php get_header(); ?>Mari kita masukkan bagian header ini. Di…index.phpDi akhirnya, gunakan…<?php get_footer(); ?>Untuk memperkenalkan…footer.phpDi dalamnya harus terdapat…wp_footer()Hook call and closure.<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p><p>Saya tidak punya cukup uang untuk membeli mobil baru.</p>Tag.

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

Menggunakan perulangan untuk menampilkan artikel

Inti dari WordPress adalah “The Loop”, yang merupakan sepotong kode PHP yang digunakan untuk memeriksa apakah ada artikel yang tersedia, dan jika ada, artikel-artikel tersebut akan ditampilkan satu per satu.index.php的get_header()Setelah itu, Anda dapat menyisipkan kode perulangan dasar berikut:

<p>   
      
</p>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <br />
    <p>Maaf, tidak ditemukan artikel apa pun.</p>
<?php endif; ?>

Dalam kode ini,have_posts()和the_post()Function-driven loop.the_title()、the_permalink()和the_excerpt()Tag template digunakan untuk menampilkan isi artikel secara spesifik. Dengan demikian, halaman daftar artikel dasar pun telah selesai dibuat.

Menambahkan gaya (style) dan skrip (script) ke sebuah tema

Sebuah tema yang tidak memiliki gaya (tidak memiliki desain atau tata letak yang teratur) kurang menarik. Anda perlu menambahkan file CSS dan JavaScript ke dalam queue dengan benar, sesuai dengan rekomendasi WordPress. Hal ini akan memastikan bahwa ketergantungan antar komponen terpenuhi dengan baik dan menghindari konflik.

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

Mengintegrasikan tabel gaya dengan benar

Meskipun demikian,style.cssMemang diperlukan, tetapi Anda tidak seharusnya langsung membuat tautan ke sana dalam kode HTML. Cara yang benar adalah dengan…functions.phpDalam dokumen tersebut, digunakanwp_enqueue_style()Fungsi. Pertama-tama, buatlah file tersebut di direktori utama tema (theme root directory).functions.phpBuka file tersebut, lalu tambahkan kode berikut:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Kode ini mendefinisikan sebuah fungsi yang memberitahu WordPress untuk menggunakan file skema utama (main stylesheet) dari tema tersebut.get_stylesheet_uri()Path yang diperoleh tersebut akan ditambahkan ke dalam antrian (queue) dengan “my-theme-style” sebagai kunci (handle).add_action()Hook tersebut akan memasang (menghubungkan) fungsi ini ke sistem yang bersangkutan.wp_enqueue_scriptsPastikan bahwa aksi ini dijalankan saat halaman dimuat (diload).

Mengintegrasikan JavaScript kustom

Cara untuk mengimpor file JavaScript mirip, tetapi menggunakan…wp_enqueue_script()Fungsi. Misalkan Anda memiliki sebuah fungsi yang terletak di…js/script.jsUntuk menambahkan file tersebut, Anda dapat melakukannya dengan cara berikut:

推荐阅读 Dari Pemula hingga Ahli: Panduan Lengkap dan Tutorial Praktis untuk Pengembangan Tema WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Di sini, parameter-parameter tersebut masing-masing merujuk pada: handle skrip, URL skrip, dan array dependensi (misalnya…).array('jquery')Versi nomor, serta apakah akan di-load di bagian kaki halaman (footer).trueMenunjukkan bahwa…<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>(Predloading).

Mengembangkan fitur topik (topic extension)

functions.phpIni adalah “Toolbox” untuk tema tersebut; Anda dapat menambahkan berbagai fitur di sini untuk memperkuat tema tersebut, tanpa perlu mengubah file template inti.

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

\nMenambahkan fitur dukungan tema.

WordPress menyediakan banyak fitur bawaan, namun fitur-fitur tersebut hanya dapat diaktifkan jika tema yang digunakan secara eksplisit menyatakan dukungannya terhadap fitur tersebut. Hal ini dilakukan melalui…add_theme_support()Implementasi fungsi. Misalnya, untuk mendukung gambar thumbnail artikel (gambar khas), logo kustom, dan tag HTML5, Anda dapat…functions.phpTambahkan ini ke dalam Chinese (sederhana):

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Pastikan pengaturan-pengaturan ini dijalankan secepat mungkin saat tema diinisialisasi.

Menu navigasi terdaftar.

Agar pengguna dapat mengatur navigasi di bagian “Tampilan – Menu” di backend, Anda perlu mendaftarkan terlebih dahulu posisi menu tersebut. Gunakan fitur yang tersedia untuk melakukan proses pendaftaran tersebut.register_nav_menus()Fungsi:

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

Setelah Anda mendaftar, Anda dapat menggunakan file-file template (seperti…)header.phpDigunakan dalam (…)wp_nav_menu( array( 'theme_location' => 'primary' ) )Sekarang menu tersebut sudah muncul.

Menyimpulkan.

Dari saat pembuatan konten yang berisi…style.css和index.phpDimulai dari folder dasar, Anda secara bertahap membangun sebuah tema WordPress yang lengkap. Dengan memahami struktur hierarki template, Anda belajar cara membuat file template khusus untuk mengontrol dengan tepat berbagai jenis halaman.wp_enqueue_style()和wp_enqueue_script()Mengelola sumber daya merupakan praktik terbaik untuk memastikan kompatibilitas dan kinerja suatu tema. Akhirnya, manfaatkanlah hal tersebut.functions.phpAnda dapat mengakses file tersebut melalui…add_theme_support()和register_nav_menus()Fungsi-fungsi seperti ini memungkinkan Anda menambahkan fitur-fitur yang kuat ke dalam tema WordPress Anda dengan aman. Dengan menguasai langkah-langkah inti ini, Anda akan memiliki dasar yang kokoh untuk mengembangkan tema WordPress yang disesuaikan dengan kebutuhan Anda sendiri.

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 untuk membangun struktur dan tata letak halaman web. Selain itu, Anda perlu memahami sintaks dasar PHP, karena template tema WordPress sebagian besar dijalankan oleh PHP. Pengetahuan dasar tentang JavaScript akan membantu Anda menambahkan fitur interaktif ke dalam halaman web. Kemampuan dalam memahami konsep-konsep dasar WordPress, seperti artikel, halaman, kategori, dan tag, akan membuat proses pengembangan menjadi lebih mudah.

Mengapa harus menggunakan wp_enqueue_style untuk memuat lembar gaya, bukan langsung menggunakan tag ?

Gunakan langsung.<link>Ada beberapa masalah dengan pengkodean langsung (hardcoding) path ke file skema gaya (style sheet) dalam tag tersebut. Pertama, hal ini tidak dapat menangani hubungan ketergantungan (dependencies) dengan baik; misalnya, gaya yang Anda gunakan mungkin bergantung pada gaya dari suatu framework tertentu. Kedua,wp_enqueue_styleMemungkinkan plugin atau sub-topik tema lainnya untuk dengan aman menimpa atau mengubah tata letak (style) Anda. Yang paling penting, fitur ini dapat bekerja lebih baik dengan plugin-plugin pengoptimasi cache dan kinerja, sehingga memastikan urutan serta efisiensi pengunduhan sumber daya (resource). Ini merupakan praktik standar dalam ekosistem WordPress.

Apa perbedaan antara fungsi.php dan plugin?

functions.phpKode yang didefinisikan dalam tema tersebut sangat terkait erat dengan tampilan dan fitur khusus dari tema tersebut. Ketika pengguna mengganti tema, fitur-fitur tersebut akan tidak lagi tersedia. Kode semacam ini cocok untuk disimpan dalam tema, terutama yang berkaitan langsung dengan tampilan visual dan tata letak situs, seperti menu pendaftaran, dukungan untuk gambar khusus, atau definisi sidebar. Sebaliknya, fitur yang disediakan oleh plugin umumnya bersifat independen dari tema, dan ditujukan untuk menambahkan fitur umum ke situs web (seperti formulir kontak, optimisasi SEO), sehingga fitur tersebut tetap akan ada meskipun pengguna mengganti tema. Jika suatu fitur tidak berkaitan dengan tampilan tema, maka mempertimbangkan untuk menjadikannya sebagai plugin merupakan pilihan yang lebih fleksibel.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Membuat tema mendukung internasionalisasi merupakan kunci untuk memasuki pasar global. Pertama-tama, di semua tempat di mana teks tema ditampilkan, gunakan fungsi penerjemahan WordPress, seperti…__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Di antaranya,my-custom-themeItu adalah…style.cssTekst yang didefinisikan di dalamnya. Kemudian, gunakan alat seperti Poedit untuk memindai file tema dan menghasilkan (generate) konten yang diperlukan..potFile template; penerjemah dapat menggunakan file ini untuk membuat terjemahan dalam berbagai bahasa..po和.moFile. Terakhir,functions.phpMelaluiload_theme_textdomain()Fungsi tersebut bertugas untuk memuat file terjemahan.

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: