Halaman Utama/Pengetahuan./WordPress/Detail konten.

Pemulaan dalam Pengembangan Tema WordPress: Membangun Tema Pertama Anda dari Nol

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

Pengaturan Awal: Memahami Struktur Topik dan Berkas Dasar

Sebelum memulai menulis kode, kita perlu memahami komponen dasar dari sebuah tema WordPress standar. Tema WordPress yang paling sederhana hanya memerlukan dua file saja:style.css 和 index.phpNamun, sebuah tema yang memiliki fitur yang lengkap dan struktur yang jelas memerlukan lebih banyak file template khusus untuk mendefinisikan berbagai bagian dari situs web.

File-file template inti meliputi:
* index.phpFile template utama untuk tema tersebut merupakan template cadangan (default fallback template) yang digunakan oleh semua halaman di situs web.
* style.cssIni adalah tabel gaya utama dari sebuah tema, yang tidak hanya berisi aturan CSS, tetapi juga komentar di bagian awal file yang mendefinisikan metainformasi dari tema tersebut, seperti nama tema, penulis, deskripsi, dan lainnya. Hal ini sangat penting bagi WordPress untuk mengenali sebuah tema.
* header.phpTemplate untuk bagian header (tajuk) sebuah situs web, biasanya mencakup:<head>Sebagian dari konten, logo situs web, dan menu navigasi utama.
* footer.phpTemplate untuk bagian kaki halaman situs web biasanya mencakup informasi hak cipta, area untuk menampilkan widget (fitur tambahan), dan lainnya.
* functions.phpFile fungsi tema, digunakan untuk menambahkan fitur-fitur tema, mendaftarkan menu, area Widget, serta berisi file-file PHP lainnya.

Selain itu, ada juga template yang digunakan untuk halaman-halaman tertentu, seperti… single.php(Satu artikel)page.php(Halaman independen)archive.php(Laman arsip artikel), dll. Memahami fungsi dari file-file tersebut merupakan dasar penting dalam membangun suatu topik (tema).

推荐阅读 Pemulaan dalam Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol。

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

Pembangunan lingkungan pengembangan juga sangat penting. Anda memerlukan lingkungan pengembangan PHP lokal (seperti XAMPP, Local by Flywheel, atau DevKinsta), sebuah editor kode (seperti VS Code atau PhpStorm), serta memastikan bahwa WordPress yang terinstal di lokal Anda adalah versi terbaru.

Membuat file tema dan struktur direktori

Pertama-tama, di dalam direktori instalasi WordPress Anda… wp-content/themes/ Di dalam folder tersebut, buatlah sebuah folder baru, dan beri nama folder tersebut dengan nama topik Anda, misalnya: my-first-themeSemua file tema akan diletakkan di dalam folder ini.

Selanjutnya, kita akan membuat file pertama, yang juga merupakan file yang wajib dibuat:style.cssDi bagian atas file ini, Anda perlu menambahkan sebuah komentar khusus untuk memberitahu WordPress bahwa ini adalah tema Anda.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习WordPress主题开发的入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Sekarang, buatlah file kedua yang diperlukan:index.phpPada tahap awal, kita bisa membuatnya sangat sederhana, hanya dengan menghasilkan sebuah struktur HTML dasar saja.

<!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>
    <header>
        <h1>Selamat datang di tema WordPress pertamaku!</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Hak Cipta Dilindungi Undang-Undang</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Pada saat ini, jika Anda masuk ke panel administrasi WordPress di menu “Tampilan” (Appearance) → “Tema” (Themes), Anda seharusnya dapat melihat tema yang Anda buat, yaitu “My First Theme”, dan dapat mengaktifkannya. Setelah mengaktifkannya, kunjungi halaman utama situs web, dan Anda akan melihat bahwa konten artikel ditampilkan dalam halaman HTML yang sangat sederhana.

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Ahli。

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 template inti dan fitur-fitur utama

Untuk membuat struktur topik lebih jelas, kita perlu…index.phpPecahkannya menjadi bagian-bagian yang lebih kecil dan dapat digunakan kembali. Pertama-tama, buatlah… header.php File, akan…<head>Sebagian konten dan elemen header telah dipindahkan ke dalam.

<!DOCTYPE html>
<html no numeric noise key 1012>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1009>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( is_front_page() && is_home() ) :
            ?>
            <h1 class="site-title"><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php
        else :
            ?>
            <p class="site-title"><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php
        endif;
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
                'menu_id'        =&gt; 'primary-menu',
            )
        );
        ?&gt;
    </nav>
</header>

Selanjutnya, buatlah footer.php Dokumen.

<footer id="colophon" class="site-footer">
    <div class="site-info">
        <p><?php echo esc_html__( '由WordPress驱动', 'my-first-theme' ); ?></p>
    </div>
</footer>
<?php wp_footer(); ?>
<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>
<p>Saya tidak punya cukup uang untuk membeli mobil baru.</p>

Sekarang, kita perlu membuat “otak” dari tema tersebut. functions.php File. Di sini, kita akan mengatur fitur-fitur yang didukung oleh tema, menentukan lokasi untuk menambahkan menu, serta menambahkan tabel gaya (style sheet) dan skrip (script).

<?php
// 添加主题功能支持
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus(
        array(
            'menu-1' => esc_html__( '主导航', 'my-first-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册前端样式表
function my_first_theme_scripts() {
    // 主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 主JavaScript文件（如果存在）
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Akhirnya, rekonstruksikanlah… index.phpGunakan tag template WordPress untuk memasukkan bagian header (tajuk halaman) dan footer (kaki halaman).

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Menambahkan gaya (style) dan fitur interaksi (interaction).

Sekarang kerangka tema tersebut sudah selesai dibuat, saatnya untuk menambahkan gaya (style) dan interaksi (interaction) ke dalamnya. Pertama-tama,style.cssSetelah komentar di bagian header file, tambahkan beberapa kode CSS dasar untuk mempercantik tampilan tema Anda.

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 
/* 基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    margin: 0;
    padding: 20px;
}
.site-header {
    background: #fff;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-navigation ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-navigation li {
    margin-left: 1.5rem;
}
.site-main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #666;
    border-top: 1px solid #eee;
}

Untuk menangani navigasi di perangkat seluler, kita dapat membuat sebuah file JavaScript yang sederhana. Buat file tersebut di direktori akar (root) tema (theme). /js/navigation.js。

推荐阅读 Panduan Lengkap Pengembangan Plugin WordPress: Tutorial Praktis Dari Nol Hingga Penerbitan dan Penyajian di Situs Web。

// 简单的移动端菜单切换示例
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.createElement('button');
    menuToggle.textContent = '菜单';
    menuToggle.classList.add('menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');
    if (primaryMenu) {
        primaryMenu.parentNode.insertBefore(menuToggle, primaryMenu);
        menuToggle.addEventListener('click', function() {
            primaryMenu.classList.toggle('show');
        });
    }
});

Dan tambahkan gaya yang sesuai di dalam CSS:

.menu-toggle {
    display: none;
    background: #007cba;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
}
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .main-navigation ul.show {
        display: flex;
    }
}

Menyimpulkan.

Dengan langkah-langkah di atas, kita telah menyelesaikan sebuah tema WordPress yang sederhana namun memiliki struktur yang lengkap. Kita memulai dengan memahami file-file inti dari tema tersebut, lalu secara bertahap membuat komponen-komponen yang diperlukan untuk membentuk tema tersebut.style.css和index.phpLalu, dengan cara memisahkannya…header.php、footer.phpdan yang kuatfunctions.phpFile tersebut membuat struktur tema menjadi lebih termodulasi dan mudah diperawat. Akhirnya, kami menambahkan gaya dasar serta interaksi sederhana menggunakan JavaScript untuk meningkatkan pengalaman pengguna.

Tema ini memiliki fitur dasar dari tema WordPress modern: mendukung tag judul, gambar utama, menu navigasi, serta sudah memiliki dasar desain yang responsif (mampu beradaptasi dengan berbagai ukuran layar). Dari sini, Anda dapat melanjutkan untuk mengeksplorasi dan mengembangkan lebih lanjut tema tersebut.single.php、page.phpMenunggu file template tambahan, mengintegrasikan kerangka kerja CSS yang lebih kompleks (seperti Bootstrap), atau menggunakan REST API dari WordPress untuk membuat antarmuka pengguna (frontend) yang lebih dinamis. Dunia pengembangan tema sangat luas dan menarik; kuncinya adalah dengan terus berlatih dan melakukan iterasi.

FAQ - Pertanyaan yang Sering Diajukan.

Mengapa tema saya tidak terlihat di daftar tema di bagian belakang (backend)?

Silakan periksa terlebih dahulu apakah folder tema Anda diletakkan di path yang benar:wp-content/themes/Kedua, pastikan…style.cssBlok keterangan informasi tema di bagian atas file memiliki format yang benar sepenuhnya; terutama baris “Theme Name:” sangat penting. Kesalahan ejaan atau masalah format dapat menyebabkan WordPress tidak dapat mengenali tema tersebut.

Bagaimana cara menambahkan area widget (Widget) ke tema saya?

Anda perlu…functions.phpDalam dokumen tersebut, digunakanregister_sidebar()Fungsi ini digunakan untuk mendaftarkan area widget (alat tambahan) di situs web. Setelah didaftarkan, Anda dapat menggunakan widget tersebut dalam file template yang sesuai (misalnya, file HTML atau template yang digunakan untuk membuat halaman web).sidebar.php或footer.phpDigunakan dalam (…)dynamic_sidebar()Fungsi tersebut digunakan untuk memanggilnya. Ini merupakan metode standar untuk memperluas fitur sidebar atau footer pada sebuah tema.

函数 get_template_part() 有什么用？

get_template_part()Ini adalah tag template yang sangat kuat, digunakan untuk memuat potongan kode yang dapat digunakan kembali dalam sebuah tema. Misalnya, untuk memanggilnya dalam sebuah siklus (loop).get_template_part( 'template-parts/content', get_post_type() );Pertama-tama, upaya akan dilakukan untuk memuatnya.template-parts/content-post.php(Assuming the article type is...)postJika gagal, maka proses pengunduhan/pemuatannya akan dilanjutkan.template-parts/content.phpHal ini sangat meningkatkan tingkat modularitas dan kemudahan pemeliharaan kode.

Bagaimana cara memastikan bahwa tema yang dikembangkan sesuai dengan standar pengkodean WordPress saat membuatnya?

WordPress telah menetapkan standar pengkodean yang terperinci untuk PHP, HTML, CSS, dan JavaScript. Disarankan untuk menginstal alat linting yang sesuai di editor kode Anda (misalnya PHP_CodeSniffer dengan aturan standar pengkodean WordPress, ESLint, dll.). Selain itu, periksa secara berkala dokumen standar pengkodean yang tersedia di manual resmi WordPress, dan terapkan standar-standar tersebut secara ketat dalam proses pengembangan tim untuk memastikan kualitas dan konsistensi kode.

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: