Panduan Dasar Pengembangan Tema WordPress: Bangun Tema Pertamamu Dari Nol

Mempersiapkan dan mengonfigurasi lingkungan.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan yang sesuai. Lingkungan pengembangan lokal memungkinkan Anda melakukan pengujian dan debugging tanpa mempengaruhi situs web yang berjalan di internet. Kami merekomendasikan penggunaan paket perangkat lunak terintegrasi seperti XAMPP, MAMP, atau Local by Flywheel, yang dapat menginstal Apache, MySQL/MariaDB, dan PHP dengan satu klik saja.

Pastikan bahwa versi PHP Anda adalah 7.4 atau lebih tinggi, karena ini merupakan versi minimum yang direkomendasikan oleh WordPress secara resmi. Selain itu, Anda memerlukan sebuah editor kode, seperti Visual Studio Code, Sublime Text, atau PHPStorm, yang dapat menyediakan fitur penyorotan sintaks dan saran kode (code hints), sehingga dapat meningkatkan efisiensi pengembangan secara signifikan.

Membuat struktur dasar tema WordPress

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di wp-content/themes/ Folder yang berada di dalam direktori tersebut merupakan identifikasi tema Anda. Disarankan untuk menggunakan huruf kecil, angka, dan tanda hubung (-) dalam nama folder, dan hindari penggunaan spasi. Sebagai contoh, Anda dapat membuat folder dengan nama “my-project-2023”. my-first-theme Folder tersebut.

Di dalam folder ini, setidaknya diperlukan dua file inti:style.css 和 index.php。style.css Bukan hanya sebagai lembar gaya (style sheet), fungsi yang lebih penting dari file tersebut adalah menyediakan metadata tentang tema, yang akan ditampilkan di halaman “Penampilan” (Appearance) -> “Tema” (Themes) di panel administrasi WordPress.

Menulis header informasi tema

在 style.css Di bagian atas file, Anda perlu menambahkan sebuah blok komentar khusus untuk mendefinisikan informasi tentang topik file tersebut. Berikut adalah contohnya:

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

/*
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 antaranya,Text Domain Digunakan untuk internasionalisasi (dukungan berbagai bahasa); nama file ini harus sama dengan nama folder tema Anda.index.php File tersebut merupakan template default untuk tema tersebut, dan berfungsi sebagai template cadangan untuk semua halaman. Pada awalnya, Anda dapat menulis struktur HTML sederhana di dalamnya untuk melakukan pengujian.

File template inti (core template file) dan struktur hierarki template

WordPress menggunakan seperangkat aturan yang disebut “Hierarki Template” untuk menentukan file template mana yang harus digunakan untuk merender sebuah halaman tertentu. Memahami struktur ini sangat penting dalam pengembangan tema (theme development). Konsep utamanya adalah: WordPress akan mencari file template yang paling spesifik terlebih dahulu; jika tidak ditemukan, sistem akan beralih ke file template yang lebih umum, dan jika masih tidak ditemukan, sistem akan kembali ke file template dasar (default template). index.php。

推荐阅读 Pemulaan dalam Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol。

File Template yang Sering Digunakan dan Fungsinya

• header.phpBagian header dari sebuah situs web biasanya mencakup informasi tentang wilayah (region), identitas situs web, serta navigasi utama (main navigation).
• footer.phpBagian kaki (footer) dari sebuah situs web biasanya berisi informasi hak cipta, tautan tambahan (link tambahan), dan lainnya.
• sidebar.phpArea sidebar.
• index.phpTemplate utama berfungsi sebagai cadangan terakhir untuk semua halaman.
• single.phpDigunakan untuk menampilkan satu artikel blog.
• page.phpDigunakan untuk menampilkan halaman tertentu, seperti “Tentang Kami” atau “Hubungi Kami”.
• archive.phpDigunakan untuk menampilkan daftar arsip artikel (seperti kategori, tag, penulis, dan tanggal arsip).
• front-page.phpDigunakan untuk mendefinisikan halaman utama situs web (jika ada halaman statis yang diatur sebagai halaman utama).
• home.phpDigunakan untuk menampilkan halaman indeks artikel blog (jika halaman utama yang statis telah diatur, template ini akan menampilkan daftar artikel terbaru).
• 404.phpDigunakan untuk menampilkan halaman kesalahan “404 Not Found”.
• search.phpDigunakan untuk menampilkan hasil pencarian.
• functions.phpIni bukanlah sebuah file template, melainkan file fungsi untuk tema, yang digunakan untuk menambahkan fitur, mendaftarkan menu, sidebar, dan lainnya.

Template Tags and Loops

Dalam berkas template, Anda sering menggunakan “tag template”. Tag-tag ini merupakan fungsi PHP yang disediakan oleh WordPress untuk menghasilkan konten dinamis, seperti… bloginfo('name') Judul situs web:the_title() Judul Artikel:

Konsep yang paling mendasar adalah “WordPress Loop”. Ini merupakan struktur kode PHP yang digunakan untuk memeriksa apakah halaman saat ini memiliki artikel (atau daftar artikel) yang perlu ditampilkan, lalu mengulang proses penampilan artikel-artikel tersebut secara berulang-ulang. Contoh loop yang paling sederhana adalah sebagai berikut:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

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

functions.php Ini adalah “otak” dari tema Anda; semua fungsi yang tidak terkait dengan proses rendering template harus ditambahkan ke dalam file ini. File ini akan diunduh secara otomatis saat tema diinisialisasi.

Fitur pendaftaran topik (Topic Registration)

在 functions.php Di dalam WordPress, Anda dapat memperluas fungsionalitas dengan menggunakan berbagai “Hook” yang tersedia, seperti Action Hooks dan Filter Hooks. Pertama-tama, biasanya Anda perlu menyatakan bahwa tema Anda mendukung fitur-fitur tertentu. Misalnya, untuk menambahkan thumbnail artikel (gambar profil) dan dukungan menu:

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Dipasang ke WordPress after_setup_theme Pastikan bahwa aksi tersebut dijalankan pada waktu yang tepat.

Mengintegrasikan gaya (styles) dan skrip (scripts)

Tema modern seharusnya mengatur file gaya (CSS) dan JavaScript dengan benar, sehingga dapat berfungsi dengan baik dalam hal tampilan dan interaksi pengguna. wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut ditambahkan ke dalam antrian (queue), bukan langsung ditulis menggunakan tag `` atau `` dalam file template. Keuntungan dari pendekatan ini adalah memudahkan manajemen ketergantungan antar-fungsi, mencegah pengunduhan berulang, serta mengikuti praktik terbaik yang digunakan oleh WordPress.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

`get_stylesheet_uri()` merujuk ke file tema (template) yang digunakan di situs web Anda. style.css Fungsi `get_template_directory_uri()` mengembalikan URL dari direktori tema (theme directory) yang sedang digunakan.

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Membangun Tema Kustom Anda dari Nol。

Membangun tata letak halaman dan komponen template

Sebuah halaman web standar biasanya terdiri dari bagian header (tajuk halaman), isi utama (body content), dan footer (kaki halaman). WordPress mendorong Anda untuk memisahkan bagian-bagian yang dapat digunakan kembali menjadi file-file terpisah, lalu memasukkannya ke dalam template utama menggunakan fungsi-fungsi tertentu.

Membagi komponen template

Membuat header.php、footer.php 和 sidebar.php…di… header.php Di dalamnya, Anda perlu menyertakan bagian "Full" yang lengkap dan mengakhirinya dengan wadah judul yang jelas (seperti tag ""). Di dalamnya, Anda perlu menyertakan bagian "Full" yang lengkap dan mengakhirinya dengan wadah judul yang jelas (seperti tag ""). footer.php Di dalam teks tersebut, bagian-bagian tertentu biasanya diakhiri dengan tag `` dan `>`.

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

Menggabungkan semua komponen menjadi halaman yang utuh.

Dalam template halaman (seperti…) index.php、single.phpDalam dokumen tersebut, Anda dapat menggunakan fungsi-fungsi berikut untuk mengintegrasikan komponen-komponen tersebut:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

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

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php File: Jika tidak ada, maka akan diunduh/diload. template-parts/content.phpHal ini sangat meningkatkan tingkat penggunaan kembali (reusability) dan kemudahan pemeliharaan (maintainability) kode.

Menyimpulkan.

Membangun sebuah tema WordPress dari nol merupakan proses pembelajaran yang sistematis. Pertama-tama, Anda perlu membangun lingkungan pengembangan lokal yang tepat dan memahami struktur file dasar dari sebuah tema. Kuncinya adalah menguasai hierarki template WordPress, karena hal ini menentukan bagaimana berbagai konten akan ditampilkan. functions.php Untuk membuat sebuah tema, Anda dapat menambahkan fitur dan karakteristik yang kuat ke dalamnya, serta mengikuti praktik terbaik dalam mengelola gaya tampilan (style) dan skrip (script). Selain itu, dengan membagi halaman menjadi komponen-komponen seperti header, footer, dan sidebar, lalu menyusunnya menggunakan fungsi-fungsi yang disediakan oleh WordPress, Anda dapat membuat kode tema yang terstruktur dengan baik dan mudah dikelola. Dengan mengikuti langkah-langkah ini, Anda tidak hanya akan berhasil membuat tema pertama Anda, tetapi juga akan membangun dasar yang kuat untuk pengembangan proyek-proyek yang lebih kompleks dan profesional di masa depan.

推荐阅读 Pemula dalam Pengembangan Tema WordPress: Bangun Tema Kustom Pertamamu dari Nol。

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress, seseorang harus menguasai PHP?

Ya, PHP merupakan bahasa pemrograman inti dari WordPress. File template untuk tema (seperti…) index.php、page.php）dan file fungsi (functions.phpSemua file tersebut merupakan file PHP. Anda perlu menguasai sintaks dasar PHP, penilaian kondisi (conditional statements), perulangan (loops), serta penggunaan fungsi, agar dapat memunculkan dan mengoperasikan data di dalam WordPress secara dinamis.

Dalam pengembangan tema, apa perbedaan antara `page.php` dan `front-page.php`?

page.php Digunakan untuk merender halaman-halaman individu yang dibuat di WordPress, seperti “Tentang Kami”, “Kontak”, dan lainnya. front-page.php Ini adalah template yang khusus digunakan untuk merender halaman “Beranda” (Home Page) sebuah situs web. Di panel pengaturan WordPress (Settings -> Reading), jika Anda memilih opsi “A Single Static Page” dan menetapkan halaman tertentu sebagai halaman “Beranda”, maka WordPress akan menggunakan halaman tersebut sebagai halaman utama situs web secara otomatis. front-page.php Untuk menampilkan halaman ini, silakan lakukan langkah-langkah yang diperlukan. Jika Anda menghadapi masalah, berikan lebih banyak detail agar kami dapat membantu Anda. front-page.php Jika tidak ada, maka akan digunakan. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Gunakan wp_enqueue_style() Ini adalah metode yang direkomendasikan secara resmi oleh WordPress. Metode ini memastikan bahwa file skema (stylesheet) hanya diunduh sekali saja, bahkan jika file yang sama digunakan oleh beberapa plugin atau tema. Metode ini juga memungkinkan pengelolaan yang lebih mudah terhadap hubungan antar file skema (misalnya, skema Anda bergantung pada suatu framework dasar). Selain itu, metode ini lebih kompatibel dengan sistem caching dan plugin, serta memungkinkan tema anak (sub-theme) untuk dengan mudah menggantikan tampilan skema dari tema induk (parent-theme).

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Membuat tema mendukung berbagai bahasa terutama melibatkan dua langkah. Pertama, dalam semua string teks pada tema, gunakan fungsi penerjemahan dari WordPress, seperti… ()、_e() 或 esc_html()Dan tentukan posisi (lokasi) mereka. style.css \nYang didefinisikan di tengah Text DomainMisalnya:_e( 'Hello World', 'my-first-theme' )Kedua, gunakan alat seperti Poedit untuk memindai kode tema Anda dan menghasilkan… .pot File template; penerjemah dapat menggunakan file ini untuk membuat terjemahan dalam berbagai bahasa. .po Dan yang telah dikompilasi .mo File: Letakkan file bahasa di dalam folder tema (theme folder). /languages/ Di dalam direktori tersebut, WordPress akan secara otomatis memuat terjemahan yang sesuai berdasarkan pengaturan bahasa situs web.