Halaman Utama/Pengetahuan./WordPress/Detail konten.

Menguasai keterampilan kunci: Membuat tema WordPress pertama Anda dari nol

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

Pengembangan Lingkungan dan Persiapan File Dasar

Sebelum memulai menulis kode, sangat penting untuk membangun lingkungan pengembangan lokal yang stabil. Hal ini memungkinkan Anda melakukan pengujian tanpa mempengaruhi situs web yang berjalan di internet. Kami merekomendasikan penggunaan alat-alat seperti Local by Flywheel, XAMPP, atau MAMP untuk dengan cepat membangun lingkungan server lokal yang mencakup PHP dan MySQL.

Selanjutnya, Anda perlu melakukan beberapa langkah di dalam direktori instalasi WordPress. wp-content/themes Di dalam folder tersebut, buatlah sebuah folder baru untuk topik Anda, misalnya dengan nama “MyProject”. my-first-themeFolder ini merupakan direktori akar (root directory) untuk tema Anda. Selanjutnya, Anda perlu membuat dua file dasar dan penting:style.css 和 index.php。

style.css File tersebut bukan hanya berisi file gaya tema (theme style sheet) Anda, yang lebih penting lagi, file tersebut juga mengandung bagian kepala informasi tema (Theme Header) yang ditulis menggunakan komentar CSS. Bagian kepala ini merupakan satu-satunya identifikasi yang digunakan oleh WordPress untuk mengenali tema Anda.

推荐阅读 Dari Nol ke Satu: Panduan Lengkap dan Trik Praktis dalam Pengembangan Tema WordPress。

/*
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
Text Domain: my-first-theme
*/

index.php Ini adalah file template utama untuk tema Anda, dan juga file cadangan terakhir yang akan digunakan oleh WordPress saat mencari template. File ini setidaknya harus berisi pemanggilan-pemanggilan fungsi inti dari WordPress, agar dapat menghasilkan bagian kepala halaman (header), bagian isi (content loop), dan bagian kaki halaman (footer).

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 
<!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>
    
</body>
</html>

Memahami tingkatan struktur (level) template dari suatu topik.

Sebelum membuat file template lainnya, memahami hierarki template (Template Hierarchy) di WordPress sangat penting. Hierarki ini menentukan template mana yang akan digunakan oleh WordPress untuk merender berbagai jenis halaman, seperti halaman utama, halaman artikel, halaman kategori, dan lainnya. Misalnya, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari file template sesuai urutan berikut:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.phpDengan memahami aturan ini, Anda akan dapat membuat file-file tertentu (seperti…) single.php 或 page.php) untuk mengontrol secara akurat tampilan setiap halaman.

Membangun template inti untuk sebuah tema

Sebuah topik yang lengkap seharusnya tidak hanya terdiri dari satu bagian saja. index.phpUntuk mencapai organisasi kode yang lebih baik dan meningkatkan tingkat penggunaan kembali (reusability) kode, kita perlu membagi halaman menjadi beberapa bagian, lalu memasukkannya melalui fungsi-fungsi yang sesuai.

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

Membuat header.php File ini digunakan untuk menyimpan bagian kepala dari dokumen HTML (seperti DOCTYPE)., <head> Bagian tertentu, serta bagian awal dari isi halaman (seperti judul situs web dan navigasi utama). Sesuai dengan itu, buatlah elemen-elemen tersebut. footer.php File ini digunakan untuk menyimpan konten yang terletak di bagian bawah halaman (seperti informasi hak cipta) serta tag penutup.

Setelah itu, index.php Di dalamnya, Anda bisa menggunakannya. get_header() 和 get_footer() Gunakan fungsi untuk memasukkan elemen-elemen tersebut, sehingga strukturnya menjadi lebih jelas.

推荐阅读 Panduan Lengkap untuk Pemula dalam Pengembangan Tema WordPress: Membangun Tema Pertama Anda Dari Nol。

Membuat template sidebar

Jika topik tersebut memerlukan sidebar (sisi samping), Anda dapat membuatnya. sidebar.php File tersebut digunakan di dalam… dynamic_sidebar() Fungsi ini digunakan untuk memanggil sidebar yang telah terdaftar di area widget. Gunakan fungsi tersebut dalam template utama. get_sidebar() Gunakan fungsi untuk memasukkannya (mengimpornya).

Mengimplementasikan siklus artikel dan template konten

Circulation of articles is the core of a WordPress theme; it is responsible for retrieving and displaying articles from the database. index.php 或 single.php Di sini, kita menggunakan struktur perulangan standar. Untuk mengontrol tampilan artikel secara lebih termodulasi di halaman daftar (seperti halaman utama, halaman arsip), serta di halaman artikel individu, kita dapat membuat… content.php Atau buat masing-masing secara terpisah. content-single.php 和 content-excerpt.php。

Di dalam loop, gunakan… get_template_part() Fungsi tersebut digunakan untuk memanggil berbagai file template konten, misalnya:get_template_part( 'content', get_post_format() );。

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

Integrasi Fitur Tema dengan Gaya Tampilan (Theme Features and Style Integration)

Sebuah tema yang berkualitas tidak hanya harus memiliki tampilan yang menarik, tetapi juga harus diperkuat fungsionalitasnya melalui berbagai file fungsi (function files).

Mengintegrasikan file fungsi tema

Membuat functions.php File ini bukanlah file template, tetapi merupakan “otak” dari sebuah tema (theme), yang berfungsi untuk menambahkan berbagai fitur tema, menu pendaftaran (registration menu), sidebar, serta memasukkan skrip dan gaya tampilan (scripts and styles). File ini akan secara otomatis diunduh oleh WordPress saat tema tersebut diinisialisasi.

Dalam berkas ini, Anda dapat menggunakan… add_theme_support() Fungsi tersebut digunakan untuk mengaktifkan fitur-fitur tertentu dari tema, seperti gambar singkat artikel (Featured Image), logo kustom (Custom Logo), dan dukungan untuk tag HTML5.

推荐阅读 Pengembangan Tema WordPress dari Dasar hingga Mahir: Panduan Inti untuk Membangun Situs Web yang Dikustomisasi。

function my_first_theme_setup() {
    // 添加文章和评论的 RSS feed 链接到 head
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

\nArea alat pendaftan.

在 functions.php Di dalamnya, digunakan… register_sidebar() Sebuah fungsi dapat mendefinisikan satu atau lebih area widget (Widget Areas), yang memungkinkan pengguna untuk menyeret dan meletakkan komponen di antar muka “widget” di latar belakang.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Sidebar Utama', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Tambahkan widget di sini.', '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>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebar 1',  
            'id' =&gt; 'sidebars-1',  
            'description' =&gt; 'Sidebar pertama',  
        )  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Mengunduh gaya (styles) dan skrip (scripts) dengan benar

Jangan pernah langsung menggunakan kode dalam file template. <link> 或 <script> Tag hardcoding untuk mengintegrasikan file CSS dan JavaScript bukanlah metode yang disarankan. Cara yang benar adalah dengan menggunakan skrip atau mekanisme pengelolaan file yang terstruktur, sehingga file-file tersebut dapat diatur dan diperbarui dengan mudah tanpa perlu mengubah kode sumber secara langsung. functions.php Gunakan dalam bahasa Cina wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut, lalu di-mount (dipasang) ke… wp_enqueue_scripts Di atas kait tersebut. Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar dan mencegah pengunduhan yang berulang-ulang.

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 
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载导航脚本，依赖 jQuery
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Internasionalisasi Tema dan Persiapan Penerbitan

Mengimplementasikan fitur penerjemahan tema (theme translation).

Agar topik Anda dapat digunakan oleh pengguna di seluruh dunia, internasionalisasi (i18n) merupakan langkah yang penting. Hal ini berarti Anda perlu membungkus semua teks yang ditujukan untuk pengguna menggunakan fungsi penerjemahan. Fungsi yang paling umum digunakan adalah… __()(Digunakan untuk menampilkan hasil terjemahan dalam PHP) dan _e()(Digunakan untuk menghasilkan terjemahan dalam PHP.) Pada saat yang sama, style.css Bagian kepala dan… functions.php Dalam fungsi pengunduhan (download function), perlu mengatur domain teks (Text Domain) dengan benar, seperti yang telah kita atur sebelumnya. my-first-theme。

Melakukan pengujian akhir dan kompresi.

Sebelum dipublikasikan, harus dilakukan pengujian yang menyeluruh di berbagai lingkungan (berbagai versi PHP, berbagai versi WordPress), serta di berbagai perangkat (desktop, tablet, ponsel). Periksa apakah semua file template berfungsi dengan benar, apakah fitur-fiturnya terwujud sesuai harapan, dan apakah tema tersebut memenuhi standar peninjauan tema resmi WordPress.

Akhirnya, hapus semua kode debug dan komentar (kecuali jika hal tersebut membantu pengguna), lalu gunakan alat seperti CodeKit atau kompresor online untuk memampatkan file CSS dan JavaScript Anda guna mengurangi ukurannya. Kemas seluruh folder tema tersebut menjadi file ZIP, dan Anda siap untuk mengirimkannya ke direktori tema di WordPress.org atau mendistribusikannya kepada pengguna.

Menyimpulkan.

Membuat tema WordPress dari nol merupakan proses pembelajaran yang sistematis, yang mencakup berbagai aspek mulai dari membangun lingkungan pengembangan, memahami struktur template, membuat file template inti, hingga mengatur tampilan situs web secara keseluruhan. functions.php Proses integrasi fitur-fitur lanjutan yang komprehensif ini sangat penting untuk dijalankan dengan mengikuti standar pemrograman dan praktik terbaik WordPress, seperti penggunaan fungsi bawaan, pengenalan sumber daya dengan benar, serta implementasi fitur internasionalisasi (multilingual support). Dengan menerapkan langkah-langkah yang dijelaskan dalam artikel ini secara langsung, Anda tidak hanya akan mendapatkan sebuah tema yang dapat digunakan, tetapi juga akan memahami lebih dalam mekanisme kerja tema WordPress secara keseluruhan, yang akan menjadi dasar yang kuat untuk mengembangkan tema yang lebih kompleks dan profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk membuat tema (theme) seseorang harus menguasai PHP?

Ya, memahami PHP secara mendalam merupakan syarat penting untuk mengembangkan tema WordPress khusus (custom themes). Karena WordPress sendiri ditulis menggunakan PHP, semua file template (seperti…) index.php, single.php）dan file fungsi (functions.phpSemua hal tersebut dilakukan langsung menggunakan kode PHP untuk menghasilkan konten secara dinamis, memanggil basis data, dan menangani logika. Tanpa pengetahuan tentang PHP, Anda tidak akan mampu memahami dan mengoperasikan bagian inti dari tema tersebut.

Apakah pengembangan tema harus memulai dari nol dengan menulis semua kode?

Tidak selalu demikian. Bagi pemula, memulai dari nol merupakan cara belajar yang sangat baik. Namun dalam pekerjaan nyata, para pengembang sering kali menggunakan “tema starter” (Starter Theme) atau “tema induk” (Parent Theme) sebagai dasar. Misalnya, tema resmi _Underscores (_s) merupakan pilihan yang sangat baik karena sederhana dan sesuai dengan standar penulisan kode yang berkualitas; tema ini sudah menyediakan struktur file dasar serta fungsi-fungsi yang sering digunakan. Dengan demikian, Anda dapat melakukan pengembangan lebih lanjut berdasarkan tema tersebut, yang akan sangat meningkatkan efisiensi dan memastikan kualitas kode yang dihasilkan.

Apa konsekuensi jika terjadi kesalahan pada file functions.php?

functions.php Kesalahan sintaksis atau kesalahan fatal dalam file dapat menyebabkan situs WordPress mengalami “White Screen of Death”, yaitu kondisi di mana baik antarmuka pengelolaan frontend maupun backend tidak dapat diakses. Hal ini terjadi karena file tersebut dieksekusi pada tahap awal proses pengunduhan dan pemrosesan tema. Jika Anda mengalami masalah ini, Anda perlu menggunakan FTP atau alat pengelolaan file hosting untuk mengganti nama folder tema yang bermasalah, atau menggantinya dengan tema yang berfungsi dengan baik (misalnya Twenty Twenty-Six), agar situs dapat diakses kembali. Setelah itu, Anda dapat memperbaiki kode yang bermasalah.

Bagaimana cara membuat tema saya mendukung editor Gutenberg?

Untuk membuat tema ini lebih mendukung editor blok Gutenberg, langkah pertama yang perlu dilakukan adalah… functions.php Gunakan dalam bahasa Cina add_theme_support( ‘editor-styles’ ) Untuk mengaktifkan dukungan gaya editor. Kemudian, gunakan add_editor_style() Fungsi tersebut mengintegrasikan file gaya tema Anda atau file CSS yang dikhususkan untuk editor ke dalam editor backend, sehingga gaya yang terlihat oleh pengguna saat mengedit sesuai dengan tampilan di frontend sebisa mungkin. Selain itu, Anda juga dapat menambahkan dukungan untuk fitur-fitur seperti penyesuaian alur teks (alignment), pengaturan warna, dan lainnya.

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: