Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Akhir untuk Pemula: Membuat Tema WordPress yang Dikustomisasi dari Nol

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

Preparasi dan pengaturan lingkungan.

Sebelum memulai menulis kode, sangat penting untuk membangun lingkungan pengembangan lokal yang efisien dan profesional. Hal ini tidak hanya memungkinkan Anda melakukan pengujian tanpa mempengaruhi situs web yang berjalan di internet, tetapi juga dapat meningkatkan efisiensi pengembangan secara signifikan.

Konfigurasi lingkungan pengembangan lokal

Kami merekomendasikan penggunaan paket perangkat lunak server lokal, seperti Local by Flywheel, MAMP, atau XAMPP. Alat-alat ini memungkinkan Anda untuk menginstal Apache/Nginx, PHP, dan MySQL dengan satu klik di komputer Anda, sehingga menciptakan lingkungan yang mirip dengan server online. Setelah proses instalasi selesai, buatlah situs WordPress yang baru, dan pastikan bahwa versi PHP yang Anda gunakan memenuhi persyaratan terbaru dari WordPress.

Membuat direktori dasar dan file untuk sebuah tema

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di /wp-content/themes/ Folder di dalam direktori. Pertama-tama, buatlah sebuah folder dengan nama yang unik untuk topik Anda, misalnya… my-custom-themeDi dalam folder tersebut, Anda harus membuat dua file inti:style.css 和 index.php。

推荐阅读 Pengembangan Tema WordPress: Panduan Lengkap dan Tutorial Praktis Dari Nol Sampai Mahir。

style.css Bukan hanya sekadar sebuah file gaya (style sheet), tetapi juga merupakan “kartu identitas” dari sebuah tema. Bagian komentar di bagian atas file tersebut digunakan untuk memberitahu WordPress tentang informasi terkait tema tersebut. Berikut adalah contoh struktur dasar dari bagian kepala (header) sebuah file gaya:

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: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的个性化 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.php Ini adalah file template default untuk tema tersebut, dan file ini harus selalu ada, bahkan jika file template lainnya tidak tersedia. Pada saat ini, Anda dapat menulis struktur HTML sederhana di dalamnya untuk melakukan pengujian.

Membangun file template inti untuk tema

WordPress menggunakan sistem hierarki template untuk menentukan cara menampilkan berbagai jenis konten. Memahami dan membuat file-file template inti ini merupakan dasar dalam pengembangan tema (theme).

Membuat template untuk bagian atas (header) dan bagian bawah (footer) dari sebuah situs web

Untuk mengimplementasikan penggunaan kode yang berulang (code reuse), kita perlu memisahkan bagian header dan footer dari halaman web menjadi file-file yang terpisah. header.php File tersebut harus berisi konten yang berasal dari… Mulai hingga dibuka Semua kode yang berada sebelum tag tersebut, yang penting adalah harus disertakan. wp_head() Panggilan fungsi.

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

Sama halnya, untuk membuatnya… footer.php File tersebut harus memuat konten bagian kaki (footer), dan diakhiri dengan sebuah pemanggilan (call). wp_footer() Fungsi dan tag penutup diakhiri. Kemudian, index.php Di dalamnya, digunakan… get_header() 和 get_footer() Gunakan fungsi untuk mengimpor (mengunduh) mereka.

推荐阅读 Analisis komprehensif pengembangan tema WordPress: panduan praktis dari tingkat pemula hingga mahir.。

Mengdesain siklus artikel dan konten halaman

Mekanisme pengulangan artikel (article loop) merupakan fitur utama WordPress yang digunakan untuk mengambil dan menampilkan artikel dari basis data. index.php Pada bagian utama dari teks tersebut, Anda perlu menggunakan struktur perulangan yang standar.

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Selanjutnya, buatlah template untuk halaman artikel individu. single.phpUntuk membuat halaman statis (static pages), Anda perlu mengikuti langkah-langkah berikut: page.phpAnda juga dapat membuat (create)… front-page.php Sebagai halaman utama yang disesuaikan (custom homepage), atau… archive.php Untuk menampilkan daftar arsip yang mencakup kategori, tag, dan lainnya.

Menambahkan fitur dan gaya (adding features and styles)

Sebuah tema yang lengkap tidak hanya memerlukan struktur, tetapi juga fitur interaktif dan desain visual. Hal ini dicapai melalui file fungsi (function files) dan lembar gaya (style sheets).

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

Pengenalan fitur pendukung tema (theme support).

Membuat functions.php File ini digunakan untuk memperluas fitur tema. File ini tidak wajib ada, tetapi sangat penting. Di dalamnya, Anda dapat mendaftarkan menu, mengaktifkan gambar khusus, menambahkan dukungan untuk tema, dan lain-lain.

<?php
function my_theme_setup() {
    // 让 WordPress 管理标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

// 引入样式表和脚本
function my_theme_scripts() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
?>

Menulis lembar gaya responsif

在 style.css Di bawah informasi deklarasi tersebut, mulailah menulis kode CSS Anda. Tema yang digunakan harus bersifat responsif (mampu menyesuaikan tampilan sesuai ukuran layar). Disarankan untuk menerapkan prinsip “mobile-first” (mengutamakan tampilan layar seluler terlebih dahulu), serta menggunakan kueri media CSS untuk menyesuaikan tampilan aplikasi dengan layar yang lebih besar.

/* 基础样式 - 移动设备 */
body { font-family: sans-serif; margin: 0; }
.container { width: 100%; padding: 1rem; }
/* 平板设备及以上 */
@media (min-width: 768px) {
    .container { max-width: 720px; margin: 0 auto; }
}
/* 桌面设备 */
@media (min-width: 992px) {
    .container { max-width: 960px; }
}

Anda dapat membuat file CSS tambahan dan menggunakannya melalui… functions.php \nDi dalamnya wp_enqueue_style() Diperkenalkan, untuk menjaga organisasi kode tetap teratur.

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

(Techniques for Advanced Theme Development)

Setelah memahami dasar-dasarnya, trik-trik berikut dapat membuat topik Anda terlihat lebih profesional dan lebih efektif.

Membuat jenis artikel kustom dan sidebar

Untuk karya koleksi, produk, atau konten non-standar lainnya, Anda dapat menggunakan… functions.php \nDi dalamnya register_post_type() Fungsi tersebut digunakan untuk membuat jenis artikel khusus (custom article type). register_sidebar() Fungsi tersebut digunakan untuk membuat area alat tambahan (sampingan), dan kemudian digunakan dalam template. dynamic_sidebar() Fungsi tersebut memanggilnya.

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

Mengimplementasikan internasionalisasi untuk sub-topik dan topik

Untuk memastikan bahwa modifikasi Anda tidak hilang saat tema diperbarui, sangat disarankan untuk membuat sebuah “subtema” khusus untuk tema personal Anda. Subtema tersebut hanya memerlukan satu… style.css Dan satu orang lagi. functions.phpHal tersebut berarti tema tersebut mewarisi semua fitur dari tema induknya, dan memungkinkan Anda untuk dengan aman mengubah tampilan (style) serta fungsionalitasnya sesuai kebutuhan.

Selain itu, agar tema dapat digunakan oleh pengguna di seluruh dunia, diperlukan persiapan untuk mendukung internasionalisasi. Hal ini berarti bahwa di semua bagian kode di mana teks perlu diterjemahkan, harus digunakan metode yang sesuai untuk melakukan proses penerjemahan tersebut. __() 或 _e() Gunakan fungsi penerjemahan tersebut untuk membungkus proses penerjemahan, dan atur semua parameter yang diperlukan dengan benar. Text DomainKemudian, Anda dapat menggunakan alat seperti Poedit untuk menghasilkannya. .pot Menerjemahkan file template.

Menyimpulkan.

Membangun sebuah tema WordPress dari nol merupakan proses pembelajaran yang sistematis, yang mencakup seluruh aspek mulai dari pengaturan lingkungan, sintaks template PHP, struktur file inti, hingga ekspansi fungsionalitas dan desain tampilan. Kuncinya adalah dengan praktik langsung: mulai dari membuat template yang paling sederhana… style.css 和 index.php Mulai saja, tambahkan bagian kepala (header), bagian bawah (footer), dan elemen yang berulang (looping) secara bertahap, lalu lanjutkan dengan proses pengaturan yang diperlukan. functions.php Fitur yang ditingkatkan. Memahami struktur hierarki template dan fungsi-fungsi khusus (hook functions) merupakan kunci untuk maju dalam pengembangan aplikasi. Pada akhirnya, dengan membuat sub-topik (sub-topics) dan melakukan persiapan untuk penggunaan fitur internasionalisasi (internationalization), karya Anda akan memiliki tingkat keandalan (maintainability) dan kemampuan untuk diperluas (scalability) yang setara dengan standar profesional. Ingatlah, cara terbaik untuk belajar adalah dengan terus-menerus mengkode, menguji, dan melakukan iterasi (iteration).

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress dengan kode “###”, seseorang harus mahir dalam PHP?
Ya, memiliki dasar yang kuat dalam PHP sangat penting, karena inti WordPress dan sistem templatnya didukung oleh PHP. Anda perlu memahami sintaks PHP, fungsi-fungsi, perulangan (loop), serta cara berinteraksi dengan API WordPress (seperti hook dan fungsi). Selain itu, penguasaan HTML, CSS, dan JavaScript dasar juga sangat penting.

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

Ini biasanya disebabkan oleh… style.css Masalah ini disebabkan oleh format blok komentar informasi tema di bagian atas file yang tidak benar atau tidak ada sama sekali. Silakan isi informasi seperti “Theme Name” dan “Author” dengan benar sesuai dengan format yang ditentukan, dan pastikan file tersebut berada di direktori akar folder tema Anda. Selain itu, periksa juga apakah folder tema tersebut diletakkan di tempat yang benar. /wp-content/themes/ Berada di dalam jalur (path).

get_template_part() 函数有什么用处？

get_template_part() Fungsi merupakan salah satu praktik terbaik dalam mengorganisir kode program. Fungsi digunakan untuk mengambil data atau melakukan proses tertentu dari file lain (seperti…). content.php, sidebar.phpKode tersebut diunggah ke dalam file tertentu, sehingga menghindari pengulangan struktur HTML yang sama di berbagai file template. Hal ini sangat meningkatkan tingkat kegunaan kembali (reusability) dan kemudahan pemeliharaan (maintainability) kode.

Bagaimana cara membuat tema saya mendukung editor Gutenberg?

Untuk membuat tema ini lebih kompatibel dengan editor Gutenberg, Anda perlu… functions.php Tambahkan dukungan untuk topik-topik terkait di dalamnya. Misalnya, gunakan… add_theme_support(‘editor-styles’) Untuk memuat gaya editor, gunakan… add_theme_support(‘wp-block-styles’) Untuk mendukung gaya tampilan blok di bagian frontend (bagian antarmuka pengguna), Anda juga dapat menggunakan… add_theme_support(‘responsive-embeds’) Pastikan konten yang terintegrasi bersifat responsif (mampu menyesuaikan tampilannya berdasarkan ukuran layar). Menulis kode gaya (style) untuk blok-blok yang sering digunakan, seperti blok grup (group blocks) dan blok sampul (cover blocks), juga sangat penting.

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: