Panduan Dasar Pengembangan Tema WordPress: Membuat Tema Kustom Dari Nol

Pengaturan Persiapan dan Pembangunan Lingkungan (Preparation and Development Environment Setup)

Sebelum memulai menulis kode, membangun lingkungan pengembangan lokal yang efisien dan profesional merupakan langkah pertama yang sangat penting. Hal ini tidak hanya memungkinkan Anda untuk melakukan pengujian secara bebas tanpa mempengaruhi situs web yang berjalan di internet, tetapi juga memungkinkan Anda memanfaatkan alat-alat modern untuk meningkatkan efisiensi pengembangan.

Pertama-tama, Anda perlu menginstal lingkungan server terintegrasi di komputer lokal Anda. Untuk pengguna Windows,XAMPP或WampServerIni merupakan pilihan yang umum; pengguna macOS dapat mempertimbangkannya juga.MAMP或Local by FlywheelPaket-paket alat ini mengintegrasikan server Apache, basis data MySQL, dan lingkungan PHP menjadi satu, sehingga dapat digunakan dengan mudah hanya dengan satu klik instalasi.

Selanjutnya, unduh file inti WordPress terbaru dan ekstraknya ke direktori akar situs web di server lokal Anda (misalnya: /www/your-domain.com/).htdocsLakukan proses instalasi standar yang memakan waktu lima menit, lalu buat sebuah situs WordPress lokal untuk keperluan pengembangan. Selain itu, sangat disarankan untuk menginstal sebuah editor kode, seperti…Visual Studio Code、PhpStorm或Sublime TextProgram tersebut menyediakan fitur penyorotan sintaks yang sangat baik, saran kode (code hints), serta dukungan untuk proses debugging untuk bahasa pemrograman PHP, HTML, CSS, dan JavaScript.

推荐阅读 Panduan Utama untuk Mengembangkan Tema WordPress: Dari Pemula hingga Praktik Kustomisasi.。

Terakhir, untuk mengamati secara langsung bagaimana perubahan kode mempengaruhi tampilan situs web, Anda perlu melakukan debugging menggunakan alat pengembang di browser (buka dengan menekan F12). Memahami panel “Element Inspector” dan “Console” dalam alat tersebut merupakan keterampilan yang sangat penting dalam pengembangan selanjutnya.

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

Memahami struktur dasar topik dan file-file inti

Sebuah tema WordPress yang paling dasar hanya memerlukan dua file untuk dapat dijalankan, namun sebuah tema yang memiliki fungsi lengkap dan memenuhi standar merupakan kumpulan file yang terstruktur. Memahami fungsi dari masing-masing file tersebut merupakan inti dari proses pengembangan.

File-file penting untuk topik tersebut

Setiap topik harus mencakup…style.css和index.phpDua berkas ini.style.cssBukan hanya sekadar file gaya (style sheet), tetapi juga merupakan “kartu identitas” dari tema tersebut. Bagian komentar di bagian atas file tersebut berisi metainformasi tentang tema, dan WordPress menggunakan informasi ini untuk mengenali serta menampilkan tema tersebut di backend.

/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.phpIni adalah file template default untuk tema tersebut, sekaligus juga berfungsi sebagai template cadangan untuk semua halaman. Jika WordPress tidak dapat menemukan file template yang lebih spesifik (misalnya…single.phpJika hal tersebut terjadi, maka sistem akan kembali menggunakan metode atau pengaturan sebelumnya.index.php。

Lapisan file template dan fungsi yang terkandung di dalamnya

WordPress menggunakan sistem hierarki template untuk menentukan file template mana yang akan digunakan untuk berbagai jenis permintaan (request). Misalnya, ketika seseorang mengakses sebuah artikel blog, WordPress akan mencari file template tersebut secara berurutan.single-post.php -> single.php -> index.phpMemahami struktur hierarki ini sangat penting untuk membuat tata letak halaman yang akurat dan efisien.

推荐阅读 Panduan Lengkap Pembuatan Situs Web: Proses Lengkap dan Teknologi Inti untuk Membangun Situs Web Profesional Dari Nol。

Untuk menjaga kode tetap rapi dan mudah diperawat, bagian-bagian halaman yang umum digunakan (seperti header, footer, dan sidebar) sebaiknya dipisahkan menjadi file-file yang terpisah, lalu diunduh menggunakan fungsi inklusi (include function) yang disediakan oleh WordPress. Tiga fungsi yang paling umum digunakan adalah:
* get_header():Mengintroduksiheader.phpDokumen.
* get_footer():Mengintroduksifooter.phpDokumen.
* get_sidebar():Mengintroduksisidebar.phpDokumen.

Di milikmuindex.phpDi dalamnya, struktur yang tipikal adalah sebagai berikut:

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 输出文章内容
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Membangun template tema dan struktur perulangan (loop structure)

Karakteristik “dinamis” dari sebuah tema terutama terlihat pada kemampuannya untuk mengekstrak dan menampilkan konten dari basis data, dan mekanisme inti dari semua ini adalah “WordPress Loop”.

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

Prinsip kerja dari siklus utama (main loop)

“Loop” adalah bagian dari kode PHP yang memeriksa apakah ada “artikel” (yang mengacu pada semua artikel, halaman, atau tipe artikel khusus) yang perlu ditampilkan di halaman saat ini. Jika ada, ia akan melakukan looping melalui setiap artikel dan membuat datanya tersedia untuk tag template. Struktur loop standar seperti yang ditunjukkan di bawah ini:

<p>   
      
</p>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>

<br />
    <p>Maaf, tidak ditemukan konten apa pun.</p>
<?php endif; ?>

Dalam siklus ini,the_title()、the_content()、the_permalink()Tag template seperti ini digunakan untuk menampilkan informasi spesifik dari artikel yang sedang ditampilkan.

\nMembuat file template yang sering digunakan.

Berdasarkan tingkatan template, Anda sebaiknya membuat file template khusus untuk setiap jenis konten, agar dapat melakukan kontrol yang lebih terperinci.
* header.phpMemuat deklarasi jenis dokumen (document type declaration).Wilayah (melalui)wp_head()Fungsi tersebut digunakan untuk mengintegrasikan kode CSS dan JS yang esensial, serta elemen-elemen umum yang terletak di bagian atas situs web (seperti Logo dan navigasi utama).
* footer.phpMemuat bagian publik yang terletak di bagian bawah situs web (seperti informasi hak cipta), serta…wp_footer()Panggilan fungsi (digunakan untuk memasukkan skrip yang diperlukan untuk bagian kaki halaman).
* single.phpDigunakan untuk menampilkan satu artikel blog.
* page.phpDigunakan untuk menampilkan halaman yang berdiri sendiri (tidak tergantung pada halaman lain).
* front-page.phpJika hal tersebut ada, maka akan dijadikan halaman utama (homepage) yang statis dari situs web tersebut.
* functions.phpIni bukanlah sebuah file template, melainkan “pustaka fitur” (feature library) untuk tema, yang digunakan untuk menambahkan dukungan terhadap fitur-fitur tertentu dalam tema, menu pendaftaran, sidebar, dan lainnya.

推荐阅读 Mulai dari nol: Panduan lengkap untuk pengembangan plugin WordPress dan berbagi praktik terbaik.。

Menambahkan fitur tema dan gaya (styles)

Setelah kerangka tema dasar selesai dibangun, langkah selanjutnya adalah memberikan fungsionalitas dan karakteristik khusus pada tema tersebut. Hal ini dilakukan terutama melalui…functions.php和style.cssUntuk melakukannya.

Mengembangkan fitur melalui file functions.php

functions.phpFile-fail tersebut diunduh secara otomatis saat tema diinisialisasi, dan merupakan tempat yang aman untuk menambahkan fitur atau mengubah perilaku default. Langkah pertama biasanya adalah mengaktifkan fitur inti WordPress, yang dilakukan dengan…add_theme_support()Fungsi telah selesai dijalankan.

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 为主题添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义logo功能
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Tugas kunci lainnya adalah mendaftarkan menu navigasi dan sidebar (area alat tambahan). Gunakan…register_nav_menus()Gunakan fungsi untuk mendefinisikan posisi menu, lalu gunakan hasil definisi tersebut dalam template.wp_nav_menu()Untuk memanggilnya.

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_menus' );

Menulis gaya (style) dan skrip (script)

在style.cssDi dalamnya, selain blok komentar di bagian atas, Anda dapat menambahkan gaya (style) ke struktur HTML Anda sebagaimana Anda menulis kode CSS biasa. Untuk mencapai desain yang responsif (responsive design), pastikan untuk menggunakan Media Queries.

Untuk memasukkan file JavaScript kustom atau file CSS tambahan dengan benar, praktik terbaik adalah melalui…wp_enqueue_scriptsHook ini digunakan untuk melakukan operasi tertentu. Dengan adanya hook ini, dijamin bahwa hubungan ketergantungan (dependency relationships) antar komponen berjalan dengan benar, dan pengunduhan (loading) yang berulang dapat dihindari.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menyimpulkan.

Pengembangan tema WordPress merupakan proses yang berlangsung secara bertahap, mulai dari aspek struktur hingga detail. Pertama-tama, Anda perlu membangun lingkungan pengembangan lokal yang stabil dan memahami dengan baik struktur file serta sistem hierarki template dari tema tersebut. Setelah itu, dengan menguasai mekanisme inti yang disebut “WordPress loops”, Anda akan dapat menampilkan konten situs web secara dinamis. Akhirnya, gunakan…functions.phpFile tersebut menambahkan berbagai fitur pendukung untuk topik Anda, serta memberikan penampilan visual dan pengalaman interaksi yang unik melalui pemrograman CSS dan JavaScript yang profesional. Dengan mengikuti langkah-langkah ini, Anda akan dapat mengubah sesuatu yang sederhana menjadi sesuatu yang lebih menarik dan efektif.index.php和style.cssMulailah dengan secara bertahap membangun sebuah tema WordPress kustom yang memiliki fungsi yang lengkap dan memenuhi standar yang ditetapkan.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress, seseorang harus mahir dalam PHP?

Ya, memahami dasar-dasar PHP sangat penting. Karena WordPress itu sendiri dibangun menggunakan PHP, dan file-file template tema sebagian besar terdiri dari kode PHP yang digunakan untuk mengontrol logika, mengambil, dan menampilkan data. Anda setidaknya perlu memahami konsep-konsep dasar seperti variabel, fungsi, pernyataan kondisional, dan perulangan. HTML dan CSS merupakan fondasi utama dalam membangun antarmuka pengguna (front-end).

Apa perbedaan antara file functions.php dari tema dan plugin?

functions.phpFungsi-fungsi yang terdapat dalam file tersebut terikat dengan tema yang sedang digunakan. Ketika Anda mengganti tema, fungsi-fungsi tersebut juga akan tidak berfungsi lagi. Fungsi-fungsi ini cocok untuk disimpan dalam file tema, terutama yang berkaitan erat dengan tampilan visual dan tata letak situs (seperti menu pendaftaran, pengaturan sidebar, opsi dukungan untuk tema). Sebaliknya, fungsi-fungsi yang disediakan oleh plugin umumnya independen dari tema, dan ditujukan untuk menambahkan kemampuan tertentu ke situs (seperti formulir kontak, optimisasi SEO); fungsi plugin tetap akan berfungsi meskipun tema diganti. Ada aturan praktis: jika suatu fungsi hanya berhubungan dengan tampilan situs, letakkanlah fungsi tersebut dalam file tema; jika fungsi tersebut bertujuan untuk menambahkan kemampuan umum ke situs, pertimbangkan untuk membuatnya menjadi plugin.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Membuat tema mendukung internasionalisasi (i18n) merupakan langkah penting dalam pengembangan profesional. Anda perlu membungkus semua string teks yang ditujukan untuk pengguna dengan fungsi penerjemahan dalam kode Anda.__('文本', 'text-domain')或_e('文本', 'text-domain')…di…style.cssBlok komentar dan…functions.phpDalam fungsi bidang teks (text field function), Anda perlu mengatur nilai dengan benar.Text Domain(Field for entering text): Tekst yang dimasukkan ke dalam field ini harus sesuai dengan nama folder tema Anda. Setelah persiapan kode selesai, Anda dapat menggunakan alat seperti Poedit untuk menghasilkan (generate) file terkait..potFile template, yang kemudian dibuat oleh penerjemah sesuai dengan kebutuhan..po和.moFile bahasa (language file).

Bagaimana cara mendeteksi dan memperbaiki kesalahan PHP yang mungkin muncul selama proses pengembangan?

Pada tahap pengembangan, disarankan untuk mengaktifkan mode debug di WordPress, karena ini dapat membantu Anda dengan cepat menemukan dan memperbaiki kesalahan. Buka file yang berada di direktori akar (root) WordPress Anda.wp-config.phpTemukan file tersebut, cari pengaturan yang relevan, lalu modifikasinya sesuai dengan petunjuk berikut:

define( 'WP_DEBUG', true ); // 开启调试模式
define( 'WP_DEBUG_LOG', true ); // 将错误日志记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误（避免用户看到）

Setelah diatur, kesalahan PHP, peringatan, dan pemberitahuan akan dicatat ke dalam file log.wp-content/debug.logBerada di dalam file. Pastikan untuk menonaktifkan mode debug sebelum tema tersebut diunggah (diluncurkan).