Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Pemula untuk Pengembangan Tema WordPress: Membuat Tema Pertama Anda dari Nol.

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

Memahami struktur dasar tema WordPress

Sebelum memulai menulis kode, sangat penting untuk memahami komposisi sebuah tema WordPress. Sebuah tema dasar setidaknya memerlukan dua file: satu adalah file skema (stylesheet) yang digunakan untuk mendefinisikan informasi tema, dan yang lainnya adalah file template PHP yang digunakan untuk menampilkan konten situs web. Kedua file ini bersama-sama membentuk kerangka dasar dari tema tersebut, dan mengikuti struktur direktori serta aturan penamaan yang telah ditentukan.

File inti (core file) adalah…style.cssFile tersebut tidak hanya berisi kode gaya CSS (CSS styles), tetapi juga blok komentar di bagian awal file yang berfungsi sebagai “kartu identitas” dari tema tersebut. Blok komentar ini menyatakan informasi meta tentang tema, seperti nama tema, penulisnya, deskripsi, versi, dan lainnya, kepada sistem WordPress. Jika blok komentar ini tidak diformat dengan benar, maka informasi penting tersebut tidak akan terbaca dengan jelas oleh sistem WordPress.style.cssWordPress tidak akan dapat mengenali dan mengaktifkan tema Anda.

File lain yang sangat penting adalah…index.phpIni adalah file template utama untuk tema tersebut. Ketika WordPress tidak dapat menemukan file template yang lebih spesifik (misalnya…single.php或page.phpKetika hal tersebut terjadi, maka secara default akan menggunakan metode tersebut untuk merender halaman. Metode ini merupakan pilihan cadangan untuk semua berkas template.

推荐阅读 Mengungkap Pengembangan Tema WordPress: Teknik Kunci untuk Membangun Situs Web Kustom dari Nol.。

\nDokumen pernyataan informasi topik.

Style sheet untuk tema tersebutstyle.cssBagian header harus memuat komentar tertentu. Berikut adalah contoh paling 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: 我的第一个主题
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
*/

Di antaranya,Text DomainDigunakan untuk internasionalisasi; merupakan identifikasi yang akan digunakan selama proses penerjemahan berikutnya. File ini biasanya juga berisi semua kode gaya CSS (CSS style codes) Anda.

File template inti (Core template file)

index.phpFile merupakan pintu masuk ke sebuah topik (tema). Contoh yang paling sederhana…index.phpBisa hanya menggunakan siklus dasar yang memanggil fungsi inti WordPress untuk mendapatkan dan menampilkan daftar artikel.

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

Dalam kode ini,wp_head()和wp_footer()Ini adalah dua “hook” kunci yang memungkinkan inti WordPress, plugin, dan skrip lainnya untuk menambahkan kode yang diperlukan di awal dan akhir halaman, seperti gaya (styles), skrip (scripts), dan meta tag (meta tags).

Membangun lingkungan pengembangan lokal

Sebelum mendeploy tema ke server online, membuat lingkungan pengembangan lokal merupakan cara yang paling efisien dan aman. Lingkungan lokal memungkinkan Anda untuk menguji kode dan memperbaiki kesalahan dengan bebas, tanpa mempengaruhi situs web yang berjalan di server online.

推荐阅读 Menguasai sepenuhnya pengembangan tema WordPress: panduan lengkap dari awal hingga ahli.。

Memilih perangkat lunak server lokal

Bagi pemula, perangkat lunak server lokal yang terintegrasi merupakan pilihan terbaik. Perangkat lunak tersebut menggabungkan Apache/Nginx, PHP, dan basis data MySQL, sehingga dapat diinstal dengan satu klik saja dan langsung dapat digunakan. Contohnya XAMPP, Local by Flywheel, atau DevKinsta, semuanya merupakan pilihan yang populer. Alat-alat ini mensimulasikan lingkungan server jaringan yang sebenarnya, sehingga Anda dapat menjalankan WordPress di komputer Anda sendiri.

Menginstal WordPress dan membuat direktori tema

Setelah menginstalnya di server lokal, Anda perlu menginstal WordPress yang baru. Unduh paket WordPress terbaru, lalu ekstraknya ke direktori akar situs web di server lokal (misalnya, folder hhtdocs dalam XAMPP). Setelah itu, akses alamat lokal melalui browser (misalnya, http://localhost) untuk menyelesaikan proses instalasi yang dikenal dengan nama “Proses Instalasi Lima Menit”.

Setelah proses instalasi selesai, masuklah ke WordPress.wp-content/themesDaftar Isi. Di sini, buatlah folder baru untuk topik yang akan Anda kembangkan, misalnya dengan nama “my-first-theme”. Folder tersebut merupakan hasil pembuatan Anda sebelumnya.style.css和index.phpFile tersebut seharusnya diletakkan di dalam folder ini. Setelah Anda masuk ke panel administrasi WordPress, pada menu “Penampilan” (Appearance) -> “Tema” (Themes), Anda seharusnya dapat melihat tema yang Anda buat. Meskipun fungsionalitas tema tersebut masih sangat sederhana saat ini.

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

Membangun sistem berkas template dasar

Hanyaindex.phpTopik tersebut masih jauh dari cukup. Sebuah tema yang lengkap secara fungsional memerlukan serangkaian berkas template untuk mengakomodasi berbagai skenario tampilan, seperti artikel tunggal, halaman independen, arsip artikel, dan sebagainya. Sistem hierarki template di WordPress akan secara otomatis memilih berkas template yang paling cocok untuk merender halaman yang diminta.

Artikel dan template halaman.

single.phpTemplate ini digunakan untuk menampilkan sebuah artikel blog secara lengkap. Ketika pengguna mengklik tautan untuk membaca seluruh isi artikel tersebut, WordPress akan menggunakan template ini. Template ini biasanya mencakup informasi artikel yang lebih rinci, seperti kategori, tag, penulis, dan area komentar.

page.phpTemplate digunakan untuk menampilkan halaman statis yang independen (seperti halaman “Tentang Kami” atau “Hubungi Kami”). Perbedaannya dengan template artikel adalah bahwa template tersebut biasanya tidak menampilkan elemen-elemen yang khas dari artikel blog, seperti waktu publikasi atau kategori.

推荐阅读 Penjelasan rinci tentang pengembangan tema WordPress: panduan lengkap dari tingkat pemula hingga mahir.。

Template untuk bagian atas (header) dan bagian bawah (footer)

Untuk mengikuti prinsip DRY (Don’t Repeat Yourself), tema WordPress biasanya memisahkan bagian header dan footer dari halaman menjadi file-file yang terpisah.

header.phpFile ini berisi semua kode dari awal hingga bagian utama konten halaman, termasuk area-area tertentu, identitas situs, menu navigasi utama, dan lainnya.index.php、single.phpDi template-template lainnya, gunakan juga.get_header()Gunakan fungsi untuk memasukkannya (mengimpornya).

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

Demikian pula,footer.phpFile tersebut berisi semua konten bagian kaki halaman, seperti informasi hak cipta, navigasi tambahan, dan lainnya, serta disajikan melalui…get_footer()Pengenalan fungsi. Selain itu,sidebar.php(Sidebar) Juga sering dipisahkan dan digunakan secara terpisah.get_sidebar()Memanggil.

Yang telah direkonstruksiindex.phpAkan menjadi sangat ringkas:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Mengintegrasikan gaya (style) dan skrip (script)

Tema-tema modern memerlukan pengunduhan file gaya CSS (Cascading Style Sheets) dan skrip JavaScript yang benar dan efisien. WordPress menyediakan fungsi-fungsi khusus untuk mengelola sumber daya tersebut, memastikan bahwa file-file tersebut diunduh dalam urutan yang tepat berdasarkan ketergantungannya, serta mencegah pengunduhan yang berulang atau terjadinya konflik antar file.

Menggunakan antrian fungsi untuk menambahkan gaya (style)

Cara yang benar adalah dengan…wp_enqueue_style()Fungsi tersebut menambahkan file gaya (stylesheet) ke dalam antrian (queue). Anda perlu membuat sebuah file dalam tema (theme) dengan nama…functions.phpFile ini merupakan inti dari fitur tema, digunakan untuk menambahkan berbagai fitur dan kemampuan baru, serta mengubah perilaku default (kebiasaan kerja) dari sistem.

在functions.phpDi dalamnya, Anda dapat memasang (meng-mount) sebuah fungsi.wp_enqueue_scriptsPada tautan aksi ini:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()Fungsi tersebut akan secara otomatis mengambil tema yang digunakan.style.cssPath ke file. Dengan cara ini, WordPress dapat mengelola sumber daya (resource) dengan lebih baik.

Menggunakan antrian fungsi untuk menambahkan skrip

Memuat skrip JavaScript juga memerlukan penggunaan antrian (queue); fungsi yang sesuai untuk hal ini adalah…wp_enqueue_script()Anda dapat menambahkannya dalam satu fungsi yang sama.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Di sini,array( 'jquery' )Dinyatakan bahwa skrip ini bergantung pada pustaka inti jQuery, sehingga WordPress akan memastikan bahwa jQuery terload terlebih dahulu. Parameter terakhir…trueIni menunjukkan bahwa skrip ditempatkan di bagian bawah halaman (sebelum konten utama), yang membantu meningkatkan kecepatan pengunduhan halaman.

Menyimpulkan.

Mengembangkan sebuah tema WordPress dari nol merupakan proses pembelajaran yang sistematis, yang mencakup berbagai langkah penting, mulai dari memahami struktur file dasar, membangun lingkungan lokal, membuat sistem template, hingga mengintegrasikan sumber daya dengan benar. Dengan melakukan semuanya secara langsung (dengan tangan sendiri),style.css、index.php、header.php、footer.phpjugafunctions.phpDengan file-file inti tersebut, Anda tidak hanya berhasil membuat sebuah tema yang dapat dijalankan, tetapi juga memahami lebih dalam tentang struktur hierarki template WordPress dan cara kerja sistem hook-nya. Ingatlah bahwa inti dari pengembangan tema adalah mengikuti ketentuan dan standar yang ditetapkan oleh WordPress, sehingga tema yang Anda buat akan kompatibel, efisien, dan mudah diperawat. Dari sini, Anda dapat melanjutkan untuk mengeksplorasi fitur-fitur yang lebih canggih, seperti jenis artikel yang dapat disesuaikan, alat pengaturan tema (theme customizer), area widget, dan lainnya, untuk secara bertahap menciptakan tema yang benar-benar personal dan berfungsi dengan baik.

FAQ - Pertanyaan yang Sering Diajukan.

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

Ya, menguasai PHP merupakan syarat penting untuk pengembangan tema WordPress. Karena WordPress itu sendiri ditulis menggunakan PHP, semua file template (seperti…)index.php、single.phpSemua file tersebut merupakan file PHP, dan mereka menggunakan kode PHP untuk memanggil fungsi inti WordPress guna menghasilkan konten halaman secara dinamis. Pada saat yang sama, file-file tersebut juga digunakan untuk menambahkan fitur-fitur tertentu.functions.phpFile tersebut sepenuhnya terdiri dari kode PHP. HTML dan CSS digunakan untuk mendefinisikan struktur dan tata letak (layout), sedangkan PHP merupakan inti dari program tersebut yang bertanggung jawab untuk mengimplementasikan fitur dinamis serta interaksi dengan data.

Apa fungsi dari file functions.php dalam sebuah tema?

functions.phpFile tersebut merupakan “pusat fungsionalitas” dari tema Anda. Bukan file template, sehingga tidak akan langsung menghasilkan bagian tertentu dari halaman web. Sebaliknya, file ini digunakan untuk menyimpan semua kode PHP yang digunakan untuk memodifikasi dan memperluas fitur-fitur tema. Contoh penggunaan yang umum meliputi: mengatur posisi menu navigasi, mendefinisikan area widget, dan lain-lain.wp_enqueue_scriptsFile “hook” berfungsi untuk menambahkan file CSS dan JavaScript, memberikan dukungan fitur tertentu kepada tema (seperti thumbnail artikel, latar belakang yang dapat disesuaikan), serta mendefinisikan berbagai fungsi khusus. File ini akan secara otomatis diunduh dan dijalankan saat tema tersebut diaktifkan.

Bagaimana cara membuat tema saya mendukung berbagai bahasa?

Membuat tema mendukung berbagai bahasa (internasionalisasi dan lokalisasi) terutama terdiri dari dua langkah. Langkah pertama adalah menggunakan fungsi penerjemahan WordPress yang khusus di semua bagian teks dalam tema yang perlu diterjemahkan.__('文本', 'text-domain')或_e('文本', 'text-domain')Di antaranya,text-domainHarus denganstyle.cssYang dinyatakan dalam dokumen tersebut…Text DomainSesuai. Langkah kedua adalah menggunakan alat seperti Poedit untuk memindai kode tema dan menghasilkan (generate)….potFile template; penerjemah menggunakan file ini untuk membuat versi berbahasa yang sesuai (misalnya, bahasa Mandarin)..poDan yang telah dikompilasi.moFile tersebut kemudian diletakkan di dalam bagian yang berkaitan dengan topik tersebut./languages/Berada di dalam direktori tersebut. WordPress akan secara otomatis memuat terjemahan yang sesuai berdasarkan pengaturan bahasa situs web.

Apa perbedaan antara tema (theme) dan plugin?

Di WordPress, tema dan plugin memiliki peran yang sangat berbeda. Tema (Theme) terutama berfungsi untuk mengontrol tampilan visual situs web, termasuk penampilan, tata letak, gaya, dan struktur template yang dilihat oleh pengguna. Tema menentukan “bagaimana” situs web tersebut terlihat. Sementara itu, plugin digunakan untuk menambahkan fitur-fungsi tertentu ke situs web; fitur-fitur ini dapat berfungsi dengan baik, terlepas dari tema yang digunakan, misalnya untuk membuat formulir kontak, mengoptimalkan SEO, atau menambahkan keranjang belanja. Plugin menentukan “apa” yang dapat dilakukan oleh situs web. Sebuah prinsip praktis yang baik adalah: kode yang berkaitan dengan tampilan visual dan tata letak sebaiknya diletakkan dalam tema, sedangkan kode yang berkaitan dengan fungsi inti sebaiknya dibuat dalam bentuk plugin. Dengan cara ini, fitur-fitur penting situs web tidak akan hilang ketika tema diganti.

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: