Halaman Utama/Pengetahuan./WordPress/Detail konten.

Cara Mudah Memulai Pengembangan Tema WordPress: Membangun Situs Web Khusus dari Nol

3 menit baca
2026-03-19
2026-06-04
2,616
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 struktur sebuah tema WordPress. Sebuah tema pada dasarnya adalah sebuah folder yang berisi serangkaian file dengan format tertentu, dan file-file tersebut bersama-sama menentukan tampilan serta fungsi dari situs web. Tema yang paling sederhana hanya memerlukan dua file saja:style.css和index.php。

File lembar gaya inti

style.cssFile tersebut bukan hanya berfungsi sebagai tempat penyimpanan kode gaya CSS (CSS styles), tetapi juga merupakan “kartu identitas” dari sebuah tema (theme). Bagian atas file tersebut harus memuat blok komentar khusus, yaitu “header dari file gaya” (style sheet header), yang berfungsi untuk menyatakan informasi meta tentang tema tersebut kepada sistem WordPress, seperti nama tema, penulisnya, deskripsi, versi, dan lainnya. Tanpa header ini, WordPress tidak akan mengenali bahwa folder tersebut merupakan sebuah tema yang valid.

Yang paling mendasar…style.cssBerikut adalah contoh bagian awal (header) sebuah file:

推荐阅读 Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda Dari Nol。

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

File template inti (Core template file)

index.phpIni adalah file template default untuk suatu tema, dan juga file yang paling penting. Ketika WordPress tidak dapat menemukan file template yang lebih spesifik untuk halaman yang diminta saat ini, maka sistem akan kembali menggunakan file template default tersebut.index.phpFungsi utamanya adalah mengambil konten dari basis data, lalu menghasilkannya dalam format HTML dan menampilkannya di browser. Contoh paling sederhana dari sistem ini adalah…index.phpFile tersebut kemungkinan hanya berisi kerangka dasar HTML (skeleton) dan kode PHP yang memanggil fungsi-fungsi inti dari WordPress.

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 kedua file inti tersebut, sebuah tema yang berfungsi dengan lengkap biasanya juga mencakup:
* header.phpBagian header dari situs web.
* footer.phpBagian kaki (footer) dari situs web.
* functions.phpDigunakan untuk memperkuat fitur tema, menu pendaftaran, sidebar, dan lainnya.
* page.phpDigunakan untuk menampilkan halaman tunggal.
* single.phpDigunakan untuk menampilkan satu artikel blog.

Membangun lingkungan pengembangan lokal dan membuat tema pertama

Mengembangkan tema langsung di server asli merupakan tindakan yang berisiko dan tidak efisien. Praktik terbaik adalah membuat lingkungan pengembangan di komputer lokal yang mirip dengan lingkungan online. Anda dapat menggunakan alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau DevKinsta, yang memungkinkan Anda menginstal PHP, MySQL, dan server web dengan satu klik saja.

Membuat folder dan file untuk topik tertentu

Pertama-tama, di dalam direktori instalasi WordPress lokal Anda, temukan…wp-content/themes/Path: Di sini, buatlah sebuah folder baru dengan nama yang merupakan identifikasi dari tema Anda. Disarankan untuk menggunakan huruf kecil dan tanda hubung (-), misalnya:my-first-theme。

Kemudian, dalam folder tersebut, buatlah dua file inti yang telah disebutkan sebelumnya:style.css和index.phpKopi kode bagian kepala tabel gaya di atas ke…style.cssGanti dengan informasi Anda sendiri.

推荐阅读 Pemula dalam Pengembangan Tema WordPress: Bangun Skin Situs Web Pertamamu dari Nol。

Menulis file template dasar

Selanjutnya,index.phpMasukkan kode dasar berikut ke dalam file tersebut; kode ini mencakup tag-tag template yang diperlukan oleh WordPress.

<!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 :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

Setelah menyelesaikan langkah-langkah di atas, masuklah ke halaman “Penampilan” (Appearance) → “Tema” (Themes) di panel administrasi WordPress lokal Anda. Tema dengan nama “My First Theme” seharusnya sudah muncul di sana. Aktifkan tema tersebut, lalu kunjungi halaman utama situs web Anda. Anda akan melihat judul dan isi artikel ditampilkan dengan benar.

Menggunakan struktur hierarki template dan fungsi-fungsi inti (core functions).

WordPress menggunakan sistem “tingkatan template” yang cerdas untuk menentukan file template mana yang akan digunakan untuk berbagai permintaan halaman (seperti halaman utama, halaman artikel, halaman kategori). Memahami sistem ini sangat penting dalam pengembangan tema (theme development).

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

Memahami urutan pemuatan template.

Misalnya, ketika seseorang mengakses sebuah artikel blog, WordPress akan mencari berkas template (file template) dalam urutan berikut:single-post.php -> single.php -> singular.php -> index.phpAplikasi tersebut akan menggunakan file pertama yang ditemukan. Desain ini memungkinkan Anda untuk membuat tata letak (layout) yang sangat disesuaikan dengan kebutuhan untuk berbagai jenis halaman.index.phpSebagai opsi cadangan terakhir.

\nMenggunakan loop dan tag template.

在index.phpKode PHP yang Anda lihat tersebut merupakan “The Loop” dari WordPress yang terkenal. Kode ini merupakan inti dari semua file template, dan berfungsi untuk mengulasi serta menampilkan artikel atau konten yang seharusnya ditampilkan di halaman saat ini.

within the loopthe_title()、the_content()、the_excerpt()Fungsi-fungsi seperti itu disebut “tag template”. Tujuannya adalah untuk menghasilkan tampilan data artikel yang sesuai secara aman. Fungsi penting lainnya adalah…the_post()Itu dipanggil pada setiap iterasi siklus, dan digunakan untuk mengakses variabel global.$postObjek tersebut diatur sesuai dengan data artikel saat ini, lalu proses berlanjut ke artikel berikutnya.

推荐阅读 Menguasai keterampilan kunci: Membuat tema WordPress pertama Anda dari nol。

Meng modularisasi struktur halaman merupakan cara yang baik untuk meningkatkan kemudahan pemeliharaan kode. Inilah…header.php和footer.phpTempat di mana kemampuan tersebut dapat dimanfaatkan.

Memisahkan bagian header (tajuk) dari bagian footer (kaki halaman)

将index.php\nDi dalamnya<head>Bagian dan<header>Potong bagian tertentu dari area tersebut, lalu tempelkannya ke dalam file baru yang telah dibuat.header.phpDi dalam file tersebut. Demikian pula, lakukan hal yang sama.<footer>Sebagian dari teks tersebut telah dipotong.footer.phpTengah.

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

Kemudian, pada bagian asli…index.phpDi dalamnya, digunakan…get_header()和get_footer()Dua tag template ini digunakan untuk memasukkan konten yang diinginkan.

<?php get_header(); ?>

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Dengan cara ini, semua template halaman dapat berbagi satu set header dan footer yang sama, dan saat ada perubahan, hanya perlu mengedit satu file saja.

Meningkatkan fitur tema melalui Functions.php

functions.phpFile tersebut merupakan “pusat kendali” (control center) untuk tema Anda. Bukan file template, melainkan sebuah pustaka fungsi (function library) yang secara otomatis diunduh saat tema diinisialisasi. Di sini Anda dapat menambahkan fitur baru atau mengubah perilaku default dari tema tersebut, tanpa perlu mengedit file inti WordPress.

Fungsi-fungsi yang didukung oleh fitur pendaftaran topik:

在functions.phpDi dalamnya, Anda dapat menggunakan…add_theme_support()Gunakan fungsi untuk menyatakan fitur-fitur WordPress mana yang didukung oleh tema Anda. Misalnya, mengaktifkan thumbnail artikel (gambar profil) dan menu kustom merupakan operasi yang umum dilakukan.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Menambahkan gaya (style) dan skrip (script)

Cara yang benar untuk menambahkan CSS dan JavaScript adalah dengan…wp_enqueue_style()和wp_enqueue_script()Fungsi, dan memasangnya kewp_enqueue_scriptsDi kait ini… Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar, dan file tidak akan diunduh ulang (tidak terjadi loading yang berulang).

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Setelah menyelesaikan semua ini, Anda akan dapat…header.phpGunakan dalam bahasa Cinawp_nav_menu()Fungsi ini digunakan untuk menampilkan menu yang telah Anda daftarkan, dan akan dijalankan dalam siklus penulisan artikel (article loop).the_post_thumbnail()Sekarang saatnya menampilkan gambar-gambar unik tersebut.

Menyimpulkan.

Pengembangan tema WordPress merupakan proses yang berlangsung secara bertahap, mulai dari aspek struktur hingga detail-detail terkecil. Pertama-tama, Anda perlu memahami komponen-komponen yang membentuk sebuah tema WordPress.style.css和index.phpMembentuk inti dari sistem tersebut dan mengatur lingkungan pengembangan lokal dengan baik. Selanjutnya, pahami konsep sistem tata letak berlapis (template hierarchy) dan mekanisme “perulangan” (looping), sehingga Anda dapat membuat tata letak yang akurat untuk berbagai halaman. Dengan menggabungkan kedua konsep ini…header.php和footer.phpDengan pendekatan modularisasi, kode Anda akan menjadi lebih jelas dan mudah diperawat.functions.phpFile tersebut membuka pintu bagi Anda untuk memperluas fungsi-fungsi yang tersedia dalam sistem. Dari menu pendaftaran hingga mekanisme pengunduhan sumber daya secara aman, file tersebut memungkinkan tema-tema tersebut berubah dari template statis menjadi skin situs web yang dinamis dan canggih. Ikuti jalur ini, teruslah berlatih dan mengeksplorasi berbagai file template yang lebih spesifik.single.php、page.php、archive.phpDengan cara ini, Anda dapat secara bertahap membangun situs web WordPress kustom yang memiliki fungsi yang lengkap dan desain yang unik.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk mengembangkan tema WordPress?

Anda perlu menguasai dasar-dasar HTML dan CSS untuk membangun struktur dan tata letak halaman web. Selain itu, Anda juga perlu memiliki pemahaman dasar tentang PHP, karena file template WordPress sebagian besar terdiri dari kode PHP yang digunakan untuk menghasilkan konten secara dinamis. Pemahaman tentang JavaScript akan memungkinkan Anda menambahkan fitur interaktif ke dalam tema Anda. Meskipun ini tidak wajib di tahap awal, hal tersebut sangat penting di kemudian hari.

Mengapa tema saya tidak ditampilkan di bagian belakang (backend)?

Alasan yang paling umum adalah…style.cssFormat bagian header informasi topik di dalam file tidak benar atau hilang. Pastikan ada blok komentar yang lengkap dan sesuai dengan persyaratan format di bagian atas file tersebut. Selain itu, periksa apakah folder topik (topic folder) telah diletakkan di tempat yang benar.wp-content/themes/Berada di dalam direktori, dan nama folder tidak menggunakan karakter khusus.

Bagaimana cara menambahkan area widget (sisi bar) ke tema saya?

Anda perlu melakukannya terlebih dahulu…functions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi tersebut mendaftarkan satu atau lebih area untuk penempatan alat bantu (tooltips). Setelah itu, pada file template yang sesuai (misalnya…sidebar.phpDalam hal ini, gunakandynamic_sidebar()Gunakan fungsi untuk memanggil dan menampilkan hasilnya. Akhirnya, tampilkan hasil tersebut dalam template halaman.get_sidebar()Impor file ini.

Apa yang harus dilakukan jika modifikasi pada file functions.php menyebabkan situs web menampilkan layar kosong (white screen)?

Ini biasanya disebabkan oleh…functions.phpAda kesalahan sintaks PHP dalam file tersebut. Karena file ini dieksekusi di awal proses pengambilan tema (theme loading), kesalahan ini dapat menyebabkan seluruh situs web tidak berfungsi dengan baik. Solusinya adalah dengan menggunakan FTP atau alat manajemen file yang tersedia di panel kontrol hosting untuk mengganti file yang bermasalah dengan file yang benar.functions.phpMengganti nama (misalnya menjadi…)functions.php.bakDengan cara ini, WordPress akan mengabaikannya dan situs web akan dapat diakses kembali. Setelah itu, Anda dapat mengunggah versi yang telah diperbaiki.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Anda perlu melakukan dua hal. Pertama, gunakan fungsi penerjemahan WordPress di semua bagian teks dalam tema tersebut.__()、_e()Dan tentukan posisi (lokasi) mereka.style.css“Text Domain” yang didefinisikan di bagian header. Selanjutnya, gunakan alat seperti Poedit untuk memindai file tema dan menghasilkan (data yang diperlukan)..potFile template, dan berdasarkan file tersebut, buatlah versi dalam bahasa yang sesuai (misalnya:zh_CN.po和.moMembuat file terjemahan untuk setiap bahasa (termasuk bahasa Inggris), dan menempatkannya di bawah topik yang relevan./languages/Di bawah menu.

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: