Tema WordPress merupakan inti dari tampilan dan fungsi sebuah situs web. Dengan pengembangan yang disesuaikan (custom development), para pengembang dapat sepenuhnya mengendalikan logika desain, kinerja, serta ekspansi fungsi situs web tersebut, sehingga terbebas dari keterbatasan yang ditimbulkan oleh tema pihak ketiga. Panduan ini akan membimbing Anda mulai dari struktur direktori yang paling dasar, dan secara bertahap membangun sebuah tema WordPress yang lengkap fungsinya serta memenuhi standar pengembangan modern. Anda akan memahami konsep dasar arsitektur tema, logika pengorganisasian file template, serta cara menyisipkan konten dinamis menggunakan fungsi PHP dan hook.
Pengembangan Tema: Dasar dan Persiapan Lingkungan
Sebelum memulai menulis kode, sangat penting untuk membangun lingkungan pengembangan yang tepat dan memahami struktur dasar dari topik yang akan Anda kerjakan. Hal ini akan memastikan bahwa pekerjaan pengembangan Anda berjalan dengan efisien dan sesuai dengan standar ekosistem WordPress.
Membangun lingkungan pengembangan lokal
Kami merekomendasikan penggunaan lingkungan pengembangan lokal, seperti Local, XAMPP, atau MAMP. Alat-alat ini memungkinkan Anda untuk menginstal PHP, MySQL, dan Apache/Nginx dengan satu klik saja. Buatlah instalasi WordPress yang baru di lingkungan tersebut sebagai platform pengujian untuk tema Anda.
推荐阅读 Panduan Pengembangan Tema WordPress: Membangun Tema Profesional Dari Nol。
Standard Directory Structure for Understanding Topics
Sebuah tema yang paling sederhana dan dapat dikenali oleh WordPress hanya memerlukan dua file:style.css 和 index.phpNamun, direktori tema kustom yang terstruktur dengan baik seharusnya mengorganisir berbagai jenis file dengan tepat. Struktur direktori tema yang tipikal adalah sebagai berikut:
your-theme/
├── style.css (必需，主题样式表和信息头)
├── index.php (必需，主模板文件)
├── functions.php (主题功能增强文件)
├── header.php (头部模板)
├── footer.php (底部模板)
├── sidebar.php (侧边栏模板)
└── assets/ (静态资源目录)
├── css/
├── js/
└── images/Membuat file lembar gaya inti (core style sheet file)
style.css File tersebut bukan hanya berisi file gaya (style files), tetapi juga merupakan “kartu identitas” dari tema tersebut. Blok komentar di bagian atas file tersebut berisi semua metainformasi yang diperlukan oleh WordPress untuk mengenali tema tersebut.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Di antaranya,Text Domain Digunakan untuk internasionalisasi; ini merupakan identifikasi yang wajib digunakan saat memanggil fungsi penerjemahan selanjutnya.
Membangun sistem berkas template inti (core template files system)
WordPress menggunakan sistem hierarki template untuk menentukan template mana yang akan digunakan untuk berbagai jenis halaman. Pembuatan file-file template ini merupakan inti dari proses pengembangan tema (theme development).
Membuat file template dasar
Pertama-tama, buatlah template untuk bagian kepala (header) dan bagian bawah (footer) yang terpisah. Filenya… header.php Harus mencakup bagian kepala dokumen HTML (HTML header).Di bagian awal suatu wilayah (region) maupun isi utama sebuah halaman (page content), biasanya digunakan… wp_head() Fungsi ini digunakan untuk memungkinkan plugin dan fitur inti (core features) menanamkan kode ke dalam sistem.
<!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>\nDokumen footer.php Maka akan mencakup konten bagian kaki halaman (footer), dan diakhiri dengan… wp_footer() Fungsi telah selesai.
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>
<p>Saya tidak punya cukup uang untuk membeli mobil baru.</p>Mengimplementasikan file template utama
index.php Sebagai file cadangan (backup file) untuk template akhir, tugas utamanya adalah memasukkan bagian header dan footer, serta membuat siklus utama (main loop) untuk menampilkan daftar artikel.
<?php get_header(); ?>
<main>
<p>
</p>
<article>
<h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
<p>Tidak ada artikel saat ini.</p>
<?php endif; ?>
</main>
\nMembangun template halaman khusus (dedicated page templates)
Berdasarkan tingkatan struktur template, Anda dapat membuat template yang lebih spesifik untuk halaman tertentu. Misalnya, Anda bisa membuat… single.php Digunakan untuk menampilkan satu artikel saja.page.php Digunakan untuk menampilkan halaman yang independen.archive.php Digunakan untuk menampilkan arsip berdasarkan kategori. WordPress akan secara otomatis memilih dan menggunakan template yang lebih spesifik ini sebagai prioritas.
Meningkatkan fitur tema melalui file fungsi
functions.php File tersebut merupakan bagian dari tema Anda yang bernama “Control Center”, yang digunakan untuk menambahkan fitur baru, mendaftarkan menu, dan mendukung penggunaan gambar khusus, tanpa perlu mengubah file inti (core files) apa pun.
Menambahkan dukungan dasar untuk tema (theme support).
在 functions.php Di dalamnya, digunakan… add_theme_support() Fungsi tersebut digunakan untuk mendeklarasikan fitur-fitur yang didukung oleh suatu tema. Ini merupakan titik awal yang standar.
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Area untuk menambahkan widget di sidebar halaman pendaftaran
Gunakan register_sidebar() Fungsi ini digunakan untuk mendefinisikan area alat tambahan (widget), yang memungkinkan pengguna menambahkan konten secara dinamis di latar belakang.
推荐阅读 Pemulaan dalam Pengembangan Tema WordPress: Bangun Tema Kustom Pertama Anda dari Nol。
function my_custom_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );Mengintegrasikan skrip dan gaya (styles) dengan aman
Jangan pernah membuat tautan langsung (hard link) ke file CSS dan JS dalam template. Sebaiknya gunakan metode yang lebih tepat untuk mengintegrasikannya. wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut, lalu di-mount (dipasang) ke… wp_enqueue_scripts Di atas kait itu.
function my_custom_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );Mengimplementasikan tag template dan perulangan (looping)
Tag template merupakan serangkaian fungsi PHP yang disediakan oleh WordPress, yang digunakan untuk menghasilkan konten secara dinamis dalam template, seperti judul artikel, isi artikel, tanggal, dan lainnya. Tag-tag ini biasanya digunakan di dalam siklus utama (main loop).
Memahami dan menerapkan siklus utama (main loop)
Loop utama (main loop) merupakan konsep yang paling mendasar dalam template WordPress; konsep ini menggunakan variabel-variabel global untuk menjalankan proses pengambilan dan penampilan konten situs web. $wp_query Untuk menelusuri artikel-artikel yang perlu ditampilkan di halaman saat ini, struktur dasarnya adalah sebagai berikut:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
<!-- 没有找到文章时的内容 -->
<?php endif; ?>Saat melakukan pemanggilan (calling). the_post() Setelah itu, data artikel secara global telah diatur dengan benar, dan berbagai tag template dapat digunakan selanjutnya.
Gunakan tag template yang umum digunakan untuk menghasilkan konten.
Di dalam siklus, Anda dapat memanggil serangkaian fungsi untuk menampilkan informasi artikel. Misalnya:
- the_title()Judul Artikel:
- the_permalink()Cetak tautan permanen untuk artikel tersebut.
- the_content()Silakan berikan seluruh isi artikel tersebut agar saya dapat menerjemahkannya ke dalam bahasa Indonesia.
- the_excerpt(): Menampilkan abstrak artikel.
- the_post_thumbnail():Output the featured images from the article.
- the_date() 和 the_author()Tampilkan tanggal dan penulis.
Mengimplementasikan navigasi halaman untuk artikel
Setelah siklus penampilan daftar artikel (seperti halaman utama atau halaman arsip) selesai, diperlukan fitur navigasi halaman (paging) untuk memudahkan pengguna melanjutkan membaca artikel berikutnya. the_posts_pagination() Fungsi ini digunakan untuk menghasilkan daftar tautan halaman (pagination) yang terlihat menarik dan mudah diakses oleh pengguna.
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上一页', 'my-custom-theme' ),
'next_text' => __( '下一页', 'my-custom-theme' ),
) );Menyimpulkan.
Dari saat pembuatan dokumen yang berisi header informasi yang benar… style.css dan yang mendasar index.php Baiklah, Anda telah melewati langkah-langkah penting dalam membangun tema WordPress yang disesuaikan (custom theme). Kita telah membahas secara mendalam sistem hierarki template (template hierarchy) dan memahami cara mengatur komponen-komponen dalam tema tersebut. header.php 和 footer.php Untuk meningkatkan tingkat penggunaan kembali kode (code reuse), dan melalui… functions.php File tersebut telah dengan baik menambahkan fitur tema dan sumber daya yang diperlukan. Memahami dan menggunakan “loop utama” (main loop) serta “tag template” dengan benar merupakan kunci untuk menampilkan konten dinamis di halaman web. Dengan mengikuti langkah-langkah dan praktik terbaik ini, Anda tidak hanya membuat sebuah tema yang berfungsi dengan baik, tetapi juga membangun dasar proyek yang mudah dikelola, dapat diperluas, dan sesuai dengan standar WordPress.
FAQ - Pertanyaan yang Sering Diajukan.
Apakah untuk mengembangkan tema WordPress, seseorang harus menguasai PHP?
Ya, PHP merupakan bahasa pemrograman yang harus dikuasai. Inti dari WordPress sendiri ditulis menggunakan PHP, dan semua file template, logika fungsional, serta interaksi dengan basis data bergantung pada PHP. HTML, CSS, dan JavaScript digunakan untuk membangun tampilan dan interaksi di sisi pengguna (front end), tetapi PHP merupakan dasar untuk memasukkan data dinamis ke dalam halaman web tersebut.
Mengapa tema saya tidak ditampilkan atau tidak dapat diaktifkan di backend?
Alasan yang paling umum adalah… style.css Format komentar header informasi tema di bagian atas file tidak benar, informasi yang diperlukan hilang, atau ada masalah dengan kode pengkodean file. Silakan isi header informasi sesuai dengan standar yang berlaku, dan pastikan kode pengkodean file adalah UTF-8 tanpa BOM. Selanjutnya, periksa apakah folder tema telah diletakkan di tempat yang benar./wp-content/themes/Di bawah menu.
Apa perbedaan antara file functions.php dan plugin?
functions.php Fungsi-fungsi yang terdapat dalam file tersebut terikat erat dengan tema yang sedang digunakan; ketika tema diubah, fungsi-fungsi tersebut akan tidak berfungsi lagi. Fungsi-fungsi ini cocok untuk ditambahkan yang berkaitan erat dengan tampilan dan tata letak tema (seperti menu pendaftaran, pengaturan area widget, opsi dukungan untuk tema). Sebaliknya, fungsi-fungsi yang disediakan oleh plugin umumnya independen terhadap tema, sehingga tetap dapat digunakan setelah tema diubah, dan cocok untuk ditambahkan fungsi-fungsi yang bersifat umum (seperti formulir kontak, optimisasi SEO, pengelolaan cache).
Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?
Anda perlu menggunakan fungsi internasionalisasi (internationalization) dari WordPress untuk mengemas semua teks yang ditujukan untuk pengguna. Dalam kode, gunakan fungsi-fungsi yang disediakan oleh WordPress untuk mengatur penanganan teks dalam berbagai bahasa. () 或 _e() Fungsi-fungsi seperti tersebut, dan tentukan di mana (specify where) mereka harus digunakan. style.css \nYang didefinisikan di tengah Text DomainMisalnya:echo ( ‘阅读更多’, ‘my-custom-theme’ );Kemudian, gunakan alat seperti Poedit untuk menghasilkannya..potFile template untuk penerjemah, digunakan dalam proses pembuatan konten terjemahan..po和.moFile bahasa (language file).
Apakah selama proses pengembangan, kita sebaiknya langsung memodifikasi file template inti?
Jangan pernah mengubah file inti WordPress secara langsung, begitu pula file inti dari tema induk lain yang Anda gunakan (kecuali jika Anda membuat tema turunan/subtheme). Setiap perubahan akan dihapus saat pembaruan berikutnya dilakukan. Pengembangan kustom harus selalu dilakukan dalam tema independen atau subtheme Anda sendiri; ini merupakan prinsip dasar dalam pengembangan WordPress.
Selanjutnya, apa yang harus kita lakukan selanjutnya?
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.
- Membangun Tema WordPress dari Nol: Menciptakan Antarmuka Situs Web yang Unik
- Panduan Pengembangan Tema WordPress: Membangun Situs Web Kustom Dari Nol
- Panduan Lengkap Pengembangan Tema WordPress: Tutorial Praktis Dari Nol Hingga Mahir
- Panduan Lengkap Pengembangan Tema WordPress: Membangun Template Situs Web Berkelas Profesional Dari Nol
- Praktik Pengembangan Tema WordPress: Membangun Situs Web Perusahaan yang Responsif dari Nol
Bahasa Indonesia