Panduan Lengkap untuk Pemula dalam Pengembangan Tema WordPress: Membangun Tema Pertama Anda Dari Nol

Pengaturan Lingkungan dan Konsep Dasar

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal yang sesuai. Disarankan untuk menggunakan paket perangkat lunak server lokal yang terintegrasi, seperti Local by Flywheel, XAMPP, atau MAMP. File inti WordPress seharusnya sudah terinstal di situs lokal Anda.

Setiap tema WordPress harus memuat dua file dasar:style.css 和 index.php。style.css Bukan hanya sekadar file gaya (style sheet), tetapi juga merupakan “kartu identitas” dari sebuah tema. File ini menyatakan informasi tentang tema tersebut kepada WordPress melalui bagian kepala file (header) yang khusus, yang disebut Theme Header.index.php Ini adalah file template default untuk suatu tema, dan berfungsi untuk menangani semua permintaan halaman yang tidak memiliki template khusus yang telah ditentukan.

Sebuah tema yang tipikal akan mengikuti struktur hierarki yang jelas dalam direktori. File template inti biasanya terletak langsung di dalam direktori utama tema, sedangkan sumber daya seperti CSS, JavaScript, dan gambar disimpan di direktori yang terpisah. /css、/js 和 /images Di dalam subdirektori seperti itu, untuk topik-topik yang lebih kompleks, Anda mungkin juga akan menemukan… /template-parts Daftar digunakan untuk menyimpan potongan-potongan template yang dapat digunakan kembali (dapat direutilisasi)./inc Direktori digunakan untuk menyimpan file-file yang berisi peningkatan fungsionalitas (funktionality enhancements).

推荐阅读 Panduan Akhir Pengembangan Tema WordPress: Membangun Template Kustom Dari Nol。

Memahami struktur hierarki template di WordPress

WordPress menggunakan sistem cerdas yang disebut “Template Hierarchy” (Hierarki Template) untuk menentukan file template mana yang akan digunakan pada halaman tertentu. Sistem ini merupakan inti dari proses pengembangan tema (theme development).

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

Misalnya, ketika pengguna mengakses halaman utama blog, WordPress akan mencari terlebih dahulu apakah ada file dengan nama tertentu. front-page.php File tersebut. Jika tidak ditemukan, program akan melanjutkan pencariannya. home.phpJika masih tidak ada, pada akhirnya akan kembali menggunakan pengaturan default. index.phpUntuk sebuah artikel tertentu, urutan pencarian di WordPress adalah:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

Dengan memahami dan memanfaatkan dengan baik struktur hierarki template, Anda dapat membuat tata letak dan tampilan yang sangat disesuaikan untuk berbagai jenis halaman (seperti artikel blog, halaman statis, arsip berdasarkan kategori, halaman hasil pencarian, dll.), tanpa perlu menulis logika pengecekan kondisi yang rumit.

Pernyataan Informasi Topik (Topic Information Statement)

style.css Di awal sebuah file, harus terdapat bagian informasi header dalam format komentar CSS, yang berfungsi untuk mendefinisikan metadata tema. Berikut adalah contoh minimalisasinya:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Di dalamnya, “Text Domain” digunakan untuk keperluan internasionalisasi, dan merupakan identifikasi yang wajib digunakan saat memanggil fungsi penerjemahan selanjutnya. Bagian awal (header) dari file ini merupakan satu-satunya dasar bagi WordPress untuk mengenali dan mengaktifkan tema Anda.

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

构建核心模板文件

Mari kita mulai membangun dari file template yang paling penting. Pertama-tama, index.php Struktur dasar perlu ditulis dalam kode tersebut. Sebuah file template standar seharusnya mencakup pemanggilan untuk bagian header, konten utama, sidebar, dan footer.

File template dasar umumnya mencakup pemanggilan fungsi inti WordPress berikut:get_header()、get_footer()、get_sidebar() juga get_template_part()Fungsi-fungsi tersebut akan memuat file template yang sesuai, sehingga struktur halaman dapat dimodulisasi.

创建头部模板

header.php File tersebut berisi konten yang akan muncul di bagian atas setiap halaman. File tersebut harus setidaknya memuat deklarasi tipe dokumen HTML5. <!DOCTYPE html>、<head> Mulai dari bagian wilayah (region) dan isi utama halaman (page content). <body> 及 <header> Tag.

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

在 <head> Di wilayah tersebut, yang sangat penting adalah penggunaan… wp_head() “Hook” (pautan/konektor). Hook ini memungkinkan inti WordPress, plugin, dan tema Anda sendiri untuk menyisipkan kode yang diperlukan ke bagian atas halaman (header), seperti tautan ke file gaya (stylesheet), meta tag, dan skrip. Berikut adalah contoh sederhana dari template header:

<!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 id="masthead" class="site-header">
    <h1 class="site-title"><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>

body_class() Fungsi tersebut akan menghasilkan serangkaian nama kelas CSS yang berbasis pada jenis halaman saat ini, yang sangat memudahkan pengendalian tata letak (style).

Membuat siklus utama dan menampilkan konten

WordPress menggunakan “The Loop” untuk menelusuri dan menampilkan daftar artikel yang sedang dicari. The Loop merupakan bagian inti dari file template, dan biasanya terdapat di… index.php、single.php 或 archive.php Tengah.

推荐阅读 Menguasai Pengembangan Tema WordPress: Panduan Lengkap Pembuatan dan Penerapan dari Nol。

Struktur siklus utama yang tipikal adalah sebagai berikut:

<p>   
      
</p>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <br />
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Di dalam loop, Anda dapat menggunakan serangkaian tag template yang diawali dengan “the_”, seperti… the_title()、the_content()、the_excerpt() 和 the_post_thumbnail()\n, untuk mengeluarkan berbagai bagian dari artikel 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.

halaman akses

Menambahkan gaya (style) dan fitur (feature)

Penampilan visual dari suatu tema dikontrol oleh CSS. Selain itu… style.css Selain menulis kode gaya (style) secara langsung, cara yang lebih profesional adalah dengan menggunakan alat atau framework khusus untuk pengelolaan gaya. functions.php File-fail tersebut digunakan untuk mengatur urutan pengunduhan (queuing) file gaya (style sheets) dan skrip (scripts), sehingga terjamin adanya ketergantungan yang benar serta urutan pengunduhan yang tepat.

functions.php File tersebut merupakan “peningkat fungsionalitas” (function enhancer) untuk tema Anda. Bukan file template, melainkan file PHP yang secara otomatis diunduh saat tema diinisialisasi, dan berfungsi untuk mendefinisikan fungsi (functions), kelas (classes), hook (hooks), serta filter (filters).

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

Anda sebaiknya menggunakan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi-fungsi tersebut digunakan untuk menambahkan sumber daya (resources). Fungsi-fungsi ini perlu diinstal (dimount) ke sistem yang bersangkutan agar dapat digunakan. wp_enqueue_scripts Aksi ini terhubung ke sebuah “hook” (pintu masuk khusus dalam kode WordPress). Keuntungan dari hal ini adalah WordPress dapat mengelola sumber daya secara terpadu, sehingga menghindari pengunduhan berulang dan konflik ketergantungan antar komponen.

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' );

Menu Pendaftaran danSidebar

Menu dan sidebar (area alat tambahan) di WordPress perlu dibuat terlebih dahulu. functions.php Anda perlu “mendaftar” terlebih dahulu, baru kemudian dapat “menampilkan” konten tersebut di file template yang sesuai.

Gunakan register_nav_menus() Fungsi untuk mendaftarkan lokasi menu:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Kemudian, header.php Di dalamnya, Anda dapat menggunakan… wp_nav_menu() Fungsi ini digunakan untuk menampilkan menu utama.

Gunakan register_sidebar() Fungsi untuk mendaftarkan area alat tambahan (widget):

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Sidebar', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( 'Add widgets here.', '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' );

Setelah itu, sidebar.php Di dalamnya, digunakan… dynamic_sidebar() Fungsi digunakan untuk memanggil area tersebut.

Uji coba tema dan pengelolaan proses penerbitannya

Setelah proses pengembangan selesai, harus dilakukan pengujian yang menyeluruh. Pengujian ini mencakup pemeriksaan tampilan tema di berbagai browser (Chrome, Firefox, Safari, Edge) serta pada berbagai ukuran perangkat (desktop, tablet, ponsel). Pastikan semua tautan berfungsi dengan baik, fitur formulir berjalan dengan benar, dan menu dapat merespons dengan tepat di layar kecil.

Aktifkan mode debug.

Selama proses pengembangan, sangat disarankan untuk mengaktifkan mode debug (mode debugging) di WordPress. Hal ini akan membantu Anda menemukan kesalahan PHP, peringatan (warnings), dan notifikasi (notifications) dengan cepat. wp-config.php Dalam berkas tersebut, temukan dan ubah baris-baris berikut:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误

\nBuka WP_DEBUG_LOG Informasi kesalahan dapat dicatat ke dalam berkas log, sehingga informasi sensitif tidak langsung terpapar kepada pengunjung situs web.

Memeriksa standar topik (checking topic standards)

Sebelum dipublikasikan atau digunakan, tema Anda sebaiknya mengikuti Standar Pengembangan Tema WordPress sebaik mungkin. Hal ini mencakup, tetapi tidak terbatas pada: memastikan semua data yang ditampilkan di halaman telah di-ekspos dengan benar (dengan menggunakan metode yang sesuai). esc_html()、esc_url() Fungsi-fungsi seperti (fungsi-fungsi lainnya), semua teks yang dapat diterjemahkan digunakan. __() 或 _e() Fungsi tersebut dikemas (dipaketkan), dan kode tema tidak mengandung URL yang dihardcodekan sama sekali.

Anda dapat menggunakan plugin resmi “Theme Check” untuk melakukan pemeriksaan kepatuhan secara otomatis pada tema Anda. Plugin ini akan memindai kode Anda dan menunjukkan masalah potensial, kerentanan keamanan, atau hal-hal yang tidak sesuai dengan standar yang berlaku.

Siap untuk diterbitkan.

Setelah proses pengembangan, pengujian, dan peninjauan tema selesai, Anda dapat memilih untuk mengunggahnya ke direktori tema resmi WordPress.org, atau mengemasnya untuk digunakan oleh individu atau klien. Paket yang diunggah sebaiknya hanya berisi folder dan file yang diperlukan oleh tema tersebut, serta menghapus semua file yang terkait dengan sistem kontrol versi (seperti file yang digunakan oleh alat pengelolaan versi seperti Git). .gitKonfigurasi alat pengembangan dan file cadangan juga perlu diperhatikan. Selain itu, pastikan bahwa… style.css Informasi utama dalam teks tersebut sudah lengkap dan akurat, dan sebuah gambar yang jelas juga sudah disiapkan. screenshot.png(1200x900 piksel) digunakan sebagai thumbnail untuk tema tersebut.

Menyimpulkan.

Dari saat pembuatan konten yang berisi… style.css 和 index.php Mulai dari folder dasar, lalu memahami struktur hierarki template, membuat file template inti, menggunakan siklus utama untuk menampilkan konten, hingga akhirnya… functions.php Menambahkan gaya (style), skrip (script), dan fitur, lalu melakukan pengujian yang ketat serta pemeriksaan standarisasi—inilah proses penuh dalam membuat sebuah tema WordPress dasar. Proses ini tidak hanya memberikan Anda sebuah tema yang siap digunakan, tetapi yang lebih penting, ia juga membantu Anda memahami dengan mendalam struktur dan kerjaan tema WordPress. Dengan titik awal ini, Anda dapat terus mengeksplorasi tema-tema yang lebih canggih, seperti jenis artikel yang dapat disesuaikan, API untuk penyesuaian tema (theme customizer), dukungan untuk editor blok (seperti Gutenberg), dan sebagainya. Secara bertahap, Anda dapat menjadi seorang pengembang tema WordPress yang profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Berapa banyak file yang dibutuhkan oleh sebuah tema WordPress minimal?

Sebuah tema yang dapat dikenali dan diaktifkan oleh WordPress memerlukan setidaknya dua file:style.css 和 index.phpDi antaranya,style.css Harus mencakup komentar header informasi topik yang benar.

Mengapa gaya kustom saya tidak berfungsi?

Ini biasanya disebabkan oleh prioritas selektor CSS yang tidak cukup tinggi, atau karena file gaya (style sheet) tidak terload dengan benar. Pertama-tama, periksa alat pengembang (developer tools) di browser untuk memastikan bahwa file gaya Anda berhasil terload, dan apakah aturan CSS Anda tidak ditimpa oleh aturan lain dengan prioritas yang lebih tinggi. Selanjutnya, pastikan bahwa Anda menggunakan metode yang tepat untuk mengaplikasikan gaya tersebut. functions.php \nDi dalamnya wp_enqueue_style() Gunakan fungsi untuk memuat gaya (style), bukan menuliskannya langsung di dalam kode HTML. <link> Tag.

Bagaimana cara menambahkan template halaman khusus (custom page template) untuk sebuah tema?

Buat file PHP baru, misalnya page-fullwidth.phpDi bagian paling atas file tersebut, tambahkan komentar PHP berikut untuk mendeklarasikan nama template:<?php /* Template Name: 全宽页面 */ ?>Kemudian, Anda dapat menulis kode dalam berkas ini yang berbeda dari template halaman default. page.php Tata letak dan kode dari template tersebut. Saat membuat atau mengedit halaman, Anda dapat memilih template baru ini di dalam modul “Properti Halaman” (Page Properties).

Apa perbedaan antara fungsi.php dan plugin?

functions.php Ini merupakan bagian dari tema tersebut, dan fungsinya sangat terkait erat dengan tema yang sedang aktif. Jika Anda mengganti tema,functions.php Kode yang ada di dalam tersebut tidak akan lagi berfungsi. Fungsi yang disediakan oleh plugin tersebut independen dari tema yang digunakan; selama plugin tersebut diaktifkan, fungsinya akan tetap tersedia. Umumnya, fungsi-fungsi yang erat kaitannya dengan tampilan visual situs web ditempatkan dalam tema, sedangkan fungsi-fungsi yang bersifat umum dan independen lebih cocok dijadikan plugin.

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Anda perlu melakukan dua hal: mempersiapkan dan memuat file terjemahan. Pertama-tama, di dalam kode, semua string yang ditujukan untuk pengguna (seperti… ('Read More', 'my-first-theme')Semuanya harus menggunakan metode atau alat yang serupa dengan… () 或 _e() Paketkan fungsi terjemahan tersebut, dan gunakan parameter kedua (daerah teks) bersama dengan… style.css “Text Domain” yang dinyatakan dalam dokumen tersebut harus konsisten. Setelah itu, gunakan alat seperti Poedit untuk membuatnya. .pot Mentranslasikan file template dan menghasilkan terjemahan yang sesuai. .po 和 .mo File. Terakhir, functions.php Gunakan dalam bahasa Cina load_theme_textdomain() Fungsi ini digunakan untuk memuat file terjemahan.