Halaman Utama/Pengetahuan./WordPress/Detail konten.

Memulai Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol.

Baca dalam 5 menit.
2026-03-20
2026-06-03
2,119
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup lingkungan server lokal (seperti XAMPP, MAMP, atau Local by Flywheel) serta editor kode (seperti VS Code, PhpStorm, atau Sublime Text). Pastikan bahwa lingkungan lokal Anda mendukung PHP (versi 7.4 atau lebih baru) dan MySQL/MariaDB.

Selanjutnya, Anda perlu melakukan hal berikut di direktori instalasi WordPress:wp-content/themesBuatlah folder baru di dalam folder tersebut; folder ini akan menjadi direktori utama untuk tema Anda. Misalnya, Anda dapat membuat folder dengan nama…my-first-themeFolder ini berisi semua file teman Anda; ini merupakan “rumah” bagi semua file teman Anda.

File-file paling dasar dari sebuah tema WordPress hanya terdiri dari dua buah:style.css和index.phpDi antaranya,style.cssBukan hanya sekadar file berisi aturan tata letak (style sheet), tetapi juga merupakan “kartu identitas” dari sebuah tema. File ini menyatakan nama tema, penulisnya, deskripsi, serta metadata lainnya kepada WordPress melalui informasi komentar yang terdapat di bagian awal file (header).

推荐阅读 Menganalisis secara mendalam pengembangan tema WordPress: panduan teknis inti dari tingkat pemula hingga tingkat ahli.。

Create a theme information file.

Dalam folder tema Anda, buatlah…style.cssFile, dan masukkan informasi dasar berikut:

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
*/

Komentar ini diperlukan. WordPress memang bekerja dengan cara membaca (mengambil data) dari sumber tertentu.Theme NameBaris ini digunakan untuk mengidentifikasi dan menampilkan tema Anda dalam daftar tema di backend. Informasi lainnya, seperti…Text DomainIni adalah persiapan untuk proses internasionalisasi (penerjemahan).

\nMembuat file template inti

Selanjutnya, buatlah yang paling dasar.index.phpFile. Meskipun file tersebut saat ini kosong, selama…style.cssInformasinya sudah lengkap, sehingga tema Anda akan muncul di daftar “Tema” (Themes) pada panel administrasi WordPress, dan dapat diaktifkan. Sekarang, mari kita lanjutkan…index.phpTulislah struktur HTML yang paling sederhana untuk menampilkan judul blog dan isi artikel.

<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
    <header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                ?>
                <article>
                    <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div><?php the_content(); ?></div>
                </article>
                &lt;?php
            endwhile;
        else :
            echo &#039;<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_foot(); ?>
</body>
</html>

Kode ini menggunakan beberapa fungsi inti (core functions) dari WordPress.模板标签Contohnya,bloginfo()、the_title()、the_content()fungsiwp_head()和wp_foot()Ini merupakan “hook” yang krusial, yang memungkinkan inti WordPress, plugin, dan skrip lainnya untuk menambahkan kode yang diperlukan di bagian atas (header) dan bawah (footer) halaman.

Memahami struktur hierarki template dan membuat template inti (core templates)

WordPress menggunakan seperangkat alat yang disebut…模板层级Aturan ini digunakan untuk menentukan template file mana yang harus digunakan untuk merender sebuah permintaan halaman tertentu. Ini merupakan salah satu konsep paling mendasar dalam pengembangan tema (theme development). Singkatnya, WordPress akan mencari template file yang paling spesifik terlebih dahulu; jika tidak ditemukan, maka akan beralih ke file yang lebih umum, dan jika masih tidak ditemukan, akan kembali ke template default.index.php。

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

Membuat template untuk halaman detail artikel

Ketika pengguna mengakses sebuah artikel tertentu, WordPress akan mencari informasi tersebut terlebih dahulu.single-post.phpJika tidak ada, maka gunakanlah yang tersedia.single.phpDan yang terakhir adalahindex.phpMari kita buat satu…single.phpDigunakan khusus untuk mengontrol penampilan sebuah artikel tertentu.

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
            <footer class="entry-footer">
                分类：
            </footer>
        </article>
        <?php
        // 上一篇/下一篇导航
        the_post_navigation();
        // 评论模板
        if ( comments_open() || get_comments_number() ) :
            comments_template();
        endif;
    endwhile;
    ?>
</main>

\n

Template ini memasukkan tiga komponen penting:get_header()、get_sidebar()和get_footer()Mereka masing-masing digunakan untuk memasukkan (mengintroduksikan) konten tertentu.header.php、sidebar.php和footer.phpFile (berkas) merupakan kunci untuk mewujudkan penggunaan kode yang berulang (code reuse) dan desain yang termodulasi (modular design).

Membuat template halaman (page template)

Untuk halaman statis (seperti “Tentang Kami”), WordPress akan mencari…page.phpCreatepage.phpStrukturnya mirip dengan…single.phpMirip, tetapi biasanya tidak menampilkan metainformasi seperti kategori, tag, dan waktu publikasi.

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 
<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
            <header class="entry-header">
                &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
        <?php
    endwhile;
    ?>
</main>

\n

Mengimplementasikan fitur dan gaya tema

Sebuah tema yang lengkap tidak hanya memerlukan file template, tetapi juga perlu diimplementasikan melalui proses tertentu (misalnya, dengan mengatur kode atau konfigurasi yang sesuai).functions.phpFile digunakan untuk menambahkan fitur, mendaftarkan menu, area alat bantu (tooltips), dan melalui (proses tertentu yang tidak disebutkan secara spesifik dalam teks asli).style.cssTambahkan gaya (style).

File fungsi fitur tema

Buatlah direktori di dalam direktori akar (root directory) dari tema Anda.functions.phpFile ini diunduh secara otomatis saat tema diinisialisasi, dan berfungsi untuk menyimpan semua fungsi PHP kustom serta mekanisme penghubung (hook) yang digunakan.

<?php
/**
 * 我的第一个主题的功能函数
 */

// 添加主题支持功能
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像（缩略图）功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单
    register_nav_menus(
        array(
            'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
        )
    );
    // 添加HTML5标记支持
    add_theme_support(
        'html5',
        array(
            'search-form',
            'comment-form',
            'comment-list',
            'gallery',
            'caption',
            'style',
            'script',
        )
    );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册小工具侧边栏
function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          =&gt; esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            =&gt; 'sidebar-1',
            'description'   =&gt; esc_html__( '在此添加小工具。', 'my-first-theme' ),
            'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
            'after_widget'  =&gt; '</section>',
            'before_title'  =&gt; '<h2 class="widget-title">',
            'after_title'   =&gt; '</h2>',
        )
    );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 加载主题样式表和脚本
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
    // 加载通用CSS
    wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
    // 加载通用JavaScript
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menambahkan gaya dasar (basic styles)

Sekarang, mari kita lanjutkan…style.cssSetelah bagian keterangan (comment header), tambahkan beberapa kode CSS dasar untuk mempercantik tampilan tema Anda.

推荐阅读 Panduan Utama Pengembangan Tema WordPress: Membuat Tema Situs Web WordPress Kustom dari Nol.。

/* 基础重置与排版 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
}

header {
    border-bottom: 2px solid #0073aa;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.entry-title {
    color: #222;
}

.site-main {
    float: left;
    width: 70%;
}

/* 侧边栏样式 */
.widget-area {
    float: right;
    width: 25%;
    padding-left: 5%;
}

/* 页脚样式 */
footer {
    clear: both;
    border-top: 1px solid #ddd;
    margin-top: 60px;
    padding-top: 20px;
    text-align: center;
    color: #666;
}

Modulasi dan Komponen Templat

Untuk meningkatkan keterawatan dan kemudahan penggunaan kembali kode, WordPress mendorong pemisahan bagian-bagian halaman yang berulang (seperti header, footer, dan sidebar) menjadi file template yang terpisah.

Membuat komponen header (tajuk halaman) dan footer (kaki halaman)

Membuatheader.phpTermasuk dari...<!DOCTYPE html>Mulai hingga dibuka<main>Semua konten yang berada sebelum tag tersebut.

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 
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#primary">Lompat ke isi utama</a>
    <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;
            $my_first_theme_description = get_bloginfo( 'description', 'display' );
            if ( $my_first_theme_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
            <?php endif; ?>
        </div>
        <nav id="site-navigation" class="main-navigation">
            'primary',
                    'menu_id'        =&gt; 'primary-menu',
                )
            );
            ?&gt;
        </nav>
    </header>
    <div id="content" class="site-content">

Sebagai tindak lanjutnya, buatlah (create).footer.phpTermasuk</div><!-- #content -->Semua konten setelah ini.

    </div><!-- #content -->
    <footer id="colophon" class="site-footer">
        <div class="site-info">
            <p>&lt;?php printf( esc_html__( &#039;主题：%1$s&#039;, &#039;my-first-theme&#039; ), &#039;<a href="https://example.com/">我的第一个主题</a>' ); ?&gt;</p>
        </div>
    </footer>
</div><!-- #page -->
<?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>

Membuatsidebar.phpUntuk menampilkan area alat tambahan (gadget).

<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
    ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
    <?php
endif;
?>

Setelah menyelesaikan komponen-komponen ini, Anda dapat menggunakannya.get_header()、get_footer()和get_sidebar()Fungsi-fungsi tersebut dipanggil dengan cara yang sederhana dan ringkas di semua berkas template.

Menyimpulkan.

Dengan panduan ini, Anda telah menyelesaikan seluruh proses pembuatan tema WordPress dasar dari nol. Anda telah mempelajari cara mengatur lingkungan pengembangan dan membuat file-file tema yang diperlukan.style.css和index.php), dan memahami dengan mendalam sistem hierarki template WordPress, sehingga dapat membuat template khusus untuk berbagai jenis halaman (seperti artikel dan halaman biasa).single.php， page.phpAnda telah mempelajari cara untuk…functions.phpFile tersebut menambahkan fitur-fitur inti sesuai dengan tema yang ditentukan, seperti menu pendaftaran, alat bantu (tooltips), dan gambar-gambar khusus yang mendukung konten. Selain itu, Anda menerapkan konsep pengembangan berbasis modul (modular development), dengan membagi bagian header, footer, dan sidebar menjadi komponen template yang dapat digunakan kembali (reusable template components).header.php， footer.php， sidebar.phpHal ini sangat meningkatkan kemudahan pemeliharaan kode. Ini hanyalah awal; berdasarkan dasar ini, Anda dapat terus mengeksplorasi jenis artikel kustom, opsi tema tingkat lanjut, desain responsif, serta interaksi menggunakan JavaScript, untuk secara bertahap membangun tema WordPress yang memiliki fungsi yang kuat dan tampilan yang profesional.

FAQ - Pertanyaan yang Sering Diajukan.

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

Pastikan folder tema Anda diletakkan di tempat yang benar.wp-content/themes/Berada di dalam direktori, dan di dalamnya terdapat…style.cssBagian awal file (header) mengandung blok komentar dengan format yang benar, terutama…Theme Name:Baris ini harus ada dan benar. Kode pengkodean file harus UTF-8 tanpa BOM (Byte Order Mark).

Bagaimana cara menambahkan dukungan untuk Logo khusus (custom Logo) ke tema saya?

Di milikmufunctions.phpDokumen tersebutmy_first_theme_setupDalam fungsi tersebut, tambahkan satu baris kode:add_theme_support( 'custom-logo' );Setelah ditambahkan, pengguna dapat mengunggah dan mengatur Logo di bagian “Tampilan” -> “Kustom” -> “Identitas Situs” di panel administrasi WordPress. Anda perlu…header.phpGunakan dalam bahasa Cinathe_custom_logo()Fungsi ini digunakan untuk menghasilkan tampilan Logo.

Apa yang harus dilakukan jika situs web menampilkan layar kosong setelah Anda mengubah file functions.php?

Ini biasanya berarti…functions.phpAda kesalahan sintaks PHP dalam file tersebut. WordPress akan berhenti berjalan akibat kesalahan fatal ini. Anda perlu mengakses server melalui FTP atau pengelola file, lalu menghapus file yang mengandung kesalahan tersebut.functions.phpMengganti nama (misalnya menjadi…)functions.php.bakPastikan bahwa file yang Anda ganti adalah file yang benar, sehingga situs web dapat diakses kembali. Setelah itu, periksa dan perbaiki kode Anda, lalu unggah kembali file yang telah diperbaiki. Melakukan pengujian di lingkungan pengembangan lokal merupakan kebiasaan yang baik untuk menghindari masalah semacam ini.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Anda sudah melakukannya.style.css“Diatur di dalam…”Text Domain(Teks bidang), danfunctions.phpString tersebut menggunakan…esc_html__( ‘文本’， ‘my-first-theme’ )Fungsi terjemahan seperti itu. Selanjutnya, Anda perlu menggunakan alat seperti Poedit untuk memindai string-string yang dapat diterjemahkan dalam berkas tema, dan menghasilkan file terjemahan yang sesuai..potFile template, lalu buat file yang sesuai untuk masing-masing bahasa..po和.moFile-file tersebut kemudian diletakkan di dalam folder yang sesuai dengan topiknya./languagesBerada di dalam folder tersebut. WordPress akan secara otomatis memuat terjemahan yang sesuai berdasarkan pengaturan bahasa situs web.

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: