Panduan Memulai Pengembangan Tema WordPress: Membangun Tema Situs Web Pertama Anda dari Nol.

Dasar-dasar Pengembangan Tema WordPress dan Pengaturan Lingkungan

Sebelum Anda mulai menulis kode, Anda perlu memahami komponen dasar dari sebuah tema WordPress. Sebuah tema pada dasarnya adalah sebuah folder yang berisi serangkaian file berformat PHP, CSS, JavaScript, gambar, dan lainnya, yang bersama-sama mendefinisikan tampilan serta sebagian fungsi dari situs web tersebut. Folder ini harus berada di dalam direktori instalasi WordPress.wp-content/themesBerada di dalam direktori. Setiap topik memerlukan sebuah file gaya (style file) yang menjadi dasar untuk penampilan halaman tersebut.style.cssDan sebuah file template dasar.index.phpIni adalah persyaratan minimum untuk memulai proyek pengembangan tema apa pun.

Untuk melakukan pengembangan dengan efisien, sangat disarankan untuk membangun lingkungan pengembangan lokal. Hal ini memungkinkan Anda melakukan pengujian dengan bebas tanpa mempengaruhi situs web yang berjalan di internet. Anda dapat menggunakan paket alat terintegrasi seperti XAMPP, MAMP, Local by Flywheel, atau DevKinsta, yang dapat menginstal Apache/Nginx, PHP, dan MySQL dengan satu klik saja. Di lingkungan lokal, Anda juga memerlukan editor kode seperti VS Code,PhpStorm, atau Sublime Text; fitur penyorotan sintaks dan petunjuk untuk PHP, HTML, dan CSS akan sangat meningkatkan efisiensi pengkodean Anda.

Setelah pekerjaan persiapan selesai, Anda perlu…wp-content/themesBuatlah folder baru di dalam direktori tersebut, misalnya…my-first-themeSelanjutnya, kita akan membuat file pertama yang diperlukan.

推荐阅读 Memahami Pengembangan Tema WordPress dari Nol: Praktik Terbaik dan Panduan untuk Membangun Situs Web Kustom.。

Create a core style file.

Dalam folder tema, buatlah folder baru dengan nama…style.cssFile ini tidak hanya bertanggung jawab atas tampilan (style) situs web, tetapi juga bagian header (komentar di awal file) merupakan satu-satunya cara bagi WordPress untuk mengenali tema tersebut. Header berisi metadata seperti nama tema, penulis, deskripsi, dan informasi 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%).

halaman akses

Berikut ini adalah…style.cssContoh standar untuk bagian header file:

/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/

Setelah bagian header file, Anda dapat mulai menambahkan aturan gaya (style rules) untuk elemen-elemen situs web Anda, sama seperti saat menulis kode CSS biasa. Untuk bidang teks (text field), Anda dapat menggunakan properti dan gaya yang sesuai.my-first-themeIni adalah identifier yang disediakan untuk internasionalisasi tema (penerjemahan), dan harus selalu sesuai dengan nama folder tema tersebut.

Membangun file template inti untuk tema (theme core template file)

File template merupakan kerangka dasar dari tema WordPress, dan file-file ini menentukan bagaimana berbagai jenis konten diatur dan ditampilkan. File-file tersebut terutama terdiri dari kode PHP, yang dicampur dengan tag HTML. File template yang paling dasar adalah…index.phpIni merupakan template cadangan untuk semua halaman, yang digunakan ketika tidak ada template yang lebih spesifik (misalnya…).single.php或page.phpKetika hal tersebut terjadi, WordPress akan menggunakannya.

Membuat file indeks dasar

Buat dalam folder tema.index.phpSalah satu contoh yang paling sederhana namun memiliki fungsi yang lengkap adalah…index.phpDapat memuat struktur perulangan (loop) dari WordPress, yang merupakan mekanisme utama untuk mengambil dan menampilkan konten artikel dari basis data.

推荐阅读 Pengembangan Tema WordPress: Dari Pemula Hingga Ahli: Panduan Langsung untuk Membangun Situs Web Kustom。

“Minimized”index.phpBerikut adalah contohnya:

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

<main>
        
                <article>
                    <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
            
            <p>Tidak ada artikel saat ini.</p>
        <?php endif; ?>
    </main>

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

File ini mengandung beberapa bagian penting:wp_head()和wp_footer()“Hook” (pautan/kaitan) memungkinkan inti WordPress, plugin, dan skrip lainnya untuk menyisipkan kode yang diperlukan sebelum dan setelah bagian tertentu dari halaman ditampilkan (seperti kode CSS atau JS).the_post()Fungsi tersebut digunakan dalam siklus untuk mengatur data artikel yang sedang aktif, kemudian…the_title()和the_content()Cukup gunakan tag template yang sesuai, dan konten yang diinginkan akan langsung ditampilkan.

Mengintegrasikan gaya (styles) dan skrip (scripts)

Hanya saja…style.cssFile tersebut masih belum cukup; Anda perlu memberitahu WordPress kapan file tersebut harus diunduh/diload melalui sebuah fungsi. Untuk itu, Anda perlu membuat file lain yang sangat penting di dalam folder tema (theme folder):functions.phpIni bukanlah sebuah file template, melainkan “pustaka fitur” (feature library) untuk tema, yang digunakan untuk memperkuat fungsi-fungsi tema, menambahkan menu pendaftaran, sidebar, serta memasukkan file gaya (style sheet) dan skrip dengan aman.

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

Mengembangkan fitur topik (topic) dan proses pengunduhan gaya (style loading)

functions.phpFile ini merupakan “ruang mesin” (engine room) untuk tema tersebut; semua kode PHP yang tidak berkaitan langsung dengan output halaman harus diletakkan di sini. Di dalam file ini, Anda sebaiknya menggunakan…add_action()Fungsi tersebut akan “menggantungkan” kode Anda pada titik kait (action hook) tertentu di WordPress, sehingga kode tersebut dijalankan pada waktu yang tepat.

Mengunduh file skema gaya (stylesheet) dengan aman

Cara yang benar bukanlah dengan langsung memasukkan tag-tag tersebut ke dalam file template.style.cssBukan dengan cara tersebut, melainkan melalui…wp_enqueue_style()Fungsi ini digunakan untuk mengatur urutan pengunduhan (loading) komponen. Pendekatan ini mengikuti mekanisme manajemen ketergantungan (dependency management) WordPress dan dapat mencegah pengunduhan yang berulang-ulang.

在functions.phpTambahkan kode berikut ke dalam:

推荐阅读 Panduan Memulai Populer 2026: Cara Membuat Tema WordPress Pertama Anda dari Nol.。

<?php
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 可以在此加载其他样式或脚本，例如：
    // wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Di sini,get_stylesheet_uri()Fungsi tersebut akan secara otomatis mendapatkan informasi mengenai topik (tema) yang relevan.style.cssPath ke file.add_action( 'wp_enqueue_scripts', ... )Pastikan fungsi pengunduhan (loading function) kita dipanggil saat WordPress mempersiapkan skrip dan gaya (styles) untuk bagian frontend.

Aktifkan fitur tema dasar.

在functions.phpDi dalamnya, kita juga dapat mengaktifkan beberapa fitur yang sangat penting untuk situs web modern. Misalnya, mendukung penambahan gambar khusus (gambar thumbnail) untuk artikel dan halaman, serta menambahkan posisi menu kustom untuk situs web.

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

// 启用文章特色图像
add_theme_support( 'post-thumbnails' );

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

// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );

add_theme_support()Fungsi tersebut digunakan untuk mendeklarasikan berbagai fitur yang didukung oleh suatu tema.register_nav_menus()Maka, posisi menu yang dapat ditempatkan di WordPress backend (Menu -> Appearance) telah ditentukan.

Membuat template khusus dan menguji tema (theme testing).

Seiring dengan penyempurnaan fitur dasar dari tema tersebut, fitur yang bersifat tunggal (satu per satu)…index.phpFile tersebut tidak lagi dapat memenuhi kebutuhan penampilan untuk semua jenis halaman. Struktur hierarki template di WordPress memungkinkan Anda membuat file template khusus untuk halaman utama, artikel individu, halaman biasa, halaman arsip, dan lainnya, sehingga Anda dapat mengontrol tampilan halaman tersebut dengan lebih detail.

Membuat template halaman artikel tunggal

Ketika pengguna mengklik untuk membaca seluruh isi sebuah artikel, mereka akan masuk ke halaman artikel tersebut. Buatlah sebuah nama untuk halaman tersebut, misalnya “Halaman Artikel Lengkap”.single.phpFile tersebut digunakan khusus untuk mengontrol tampilan konten tersebut. File tersebut biasanya berisi informasi artikel yang lebih lengkap, seperti kategori, tag, penulis, dan komentar.

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <h1><?php the_title(); ?></h1>
            <div class="meta">
                发布于： | 作者：
            </div>
            <?php if ( has_post_thumbnail() ) : ?>
                <div class="featured-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div class="content">
                <?php the_content(); ?>
            </div>
            <div class="taxonomies">
                分类：
                <br>
                标签：
            </div>
        </article>
        
</main>

\n

Template ini memperkenalkan fungsi template baru:get_header(), get_sidebar()和get_footer()Mereka akan memuat file-file yang bernama… secara terpisah.header.php、sidebar.php和footer.phpFile komponen template. Pendekatan ini memodulasi struktur halaman, sehingga menghindari pengulangan kode. Anda perlu membuat file-file yang sesuai dan memasukkan kode ke dalamnya.index.phpKode untuk bagian header, footer, dan sidebar yang sesuai di bagian tengah.

Menguji dan memverifikasi tema Anda

Setelah menyelesaikan pembuatan template inti, masuk ke panel administrasi WordPress Anda, lalu klik “Tampilan” (Appearance) -> “Tema” (Themes). Anda seharusnya dapat melihat “My First Theme” (Tema Pertama Saya) dalam daftar tema. Aktifkan tema tersebut, kemudian kunjungi halaman utama situs web dan halaman artikel individu untuk memeriksa apakah semua elemen (judul, isi, menu, bagian kaki halaman) ditampilkan sesuai harapan.

Gunakan alat pengembang browser untuk memeriksa apakah struktur HTML benar dan apakah kode CSS berfungsi dengan baik. Cobalah membuat beberapa artikel uji coba yang berisi gambar khusus, kategori, dan tag, dan pastikan semuanya dapat dipanggil serta ditampilkan dengan benar dalam template. Ini merupakan cara terbaik untuk menemukan dan memperbaiki masalah yang mungkin ada.

Menyimpulkan.

Selamat telah menyelesaikan pembuatan dasar tema WordPress pertama Anda. Dengan panduan ini, Anda telah memahami cara membuat folder tema dari nol, serta menulis kode yang diperlukan untuk mengembangkan tema tersebut.style.css和index.phpFile, untuk dimanfaatkan.functions.phpProses lengkap yang mencakup peningkatan fungsionalitas, pengunduhan sumber daya (resource), pembuatan file template khusus, hingga pengembangan berbasis modul. Ini hanyalah awal dari dunia pengembangan tema (theme development). Selanjutnya, Anda dapat mengeksplorasi lebih lanjut berbagai jenis file template, seperti…page.php、archive.phpFitur-fitur lanjutan seperti area alat tambahan (widgets), jenis artikel kustom, dan tema-tema tingkat lanjut lainnya, serta teruslah mengoptimalkan struktur kode dan desain Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Mengapa tema saya tidak ditampilkan di backend?
Ini biasanya disebabkan oleh…style.cssMasalah ini disebabkan oleh format header komentar tema dalam file yang tidak benar atau tidak ada sama sekali. Pastikan file tersebut berada di direktori akar folder tema, dan informasi header komentar tersebut lengkap serta memiliki format yang tepat. Alasan lain yang mungkin adalah masalah hak akses file; pastikan WordPress memiliki izin untuk membaca isi folder tema Anda.

Apakah file functions.php itu wajib ada?

Dari segi teknis, sesuatu yang hanya memiliki…style.css和index.phpTopik tersebut juga bisa digunakan. Namun…functions.phpUntuk mengimplementasikan fitur-fitur yang melampaui sekadar output HTML dasar (seperti menu pendaftaran, penambahan sidebar, atau penggunaan skrip dan gaya yang diunduh dengan aman), hal tersebut sangat penting. Ini merupakan cara standar untuk memperluas dan menyesuaikan fitur dari sebuah tema, sehingga menjadi kebutuhan mutlak bagi setiap tema yang praktis dan berguna.

Bagaimana cara menambahkan sidebar ke tema saya?

Pertama, difunctions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi ini digunakan untuk mendaftarkan satu atau lebih area alat tambahan (sidebar). Setelah itu, fungsi tersebut akan digunakan dalam file template tempat Anda ingin menampilkan sidebar tersebut.index.php或single.phpDalam hal ini, gunakandynamic_sidebar()Fungsi tersebut digunakan untuk memanggilnya. Setelah itu, pengguna dapat menyeret dan meletakkan widget ke dalam area tersebut di halaman “Appearance” -> “Widgets” di panel administrasi WordPress.

Apa saja pertimbangan keamanan yang perlu diperhatikan saat mengembangkan sebuah tema?

Jangan pernah langsung mempercayai data yang dimasukkan oleh pengguna atau data yang berasal dari basis data. Saat menampilkan konten dinamis di halaman, pastikan untuk menggunakan fungsi escape yang disediakan oleh WordPress.esc_html()、esc_url()和wp_kses_post()Ketika memasukkan fitur khusus atau formulir ke dalam tema, Anda harus mengikuti mekanisme verifikasi nonce (nonce) dan pemeriksaan hak akses (permission checks) yang ditetapkan oleh WordPress.wp_enqueue_style()和wp_enqueue_script()Gunakan metode untuk memuat sumber daya (resource), bukan dengan cara mengkodekannya secara langsung (hardcoding) atau menggunakan tag.