Preparasi dan pengaturan lingkungan.
Sebelum memulai menulis kode apa pun, Anda memerlukan lingkungan pengembangan yang sesuai. Ini mencakup lingkungan server lokal (seperti XAMPP, Local by Flywheel, atau MAMP) serta editor kode (seperti VS Code, Sublime Text, atau PHPStorm). Pastikan bahwa PHP, MySQL, dan Apache/Nginx telah terinstal dengan benar di lingkungan lokal Anda.
Selanjutnya, Anda perlu melakukannya di server lokal Anda.wp-content/themes/Buatlah folder baru di dalam direktori tersebut. Nama folder tersebut sama dengan nama topik Anda, misalnya…my-first-themeIni adalah “rumah” untuk semua file tema Anda.
Sebuah tema WordPress yang paling dasar hanya memerlukan dua file:style.css和index.phpDi antaranya,style.cssBukan hanya sekadar file berisi kode gaya (style sheet), tetapi juga merupakan “kartu identitas” dari sebuah tema; bagian komentar di bagian atas file tersebut berisi metainformasi tentang tema tersebut. Mari kita buat file ini terlebih dahulu.
Create a theme information header file
style.cssBlok komentar di bagian atas file merupakan kunci bagi WordPress untuk mengenali sebuah tema. Silakan buat blok komentar tersebut di dalam folder tema Anda.style.cssDan tuliskan konten berikut:
/*
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
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/Informasi tersebut akan ditampilkan di halaman “Appearance” -> “Themes” di panel administrasi WordPress (backend).Text DomainDigunakan untuk internasionalisasi; merupakan identifikasi kunci yang diperlukan untuk memuat file terjemahan selanjutnya.
Membuat template indeks dasar
Selanjutnya, buatlah file inti (core file) untuk tema tersebut.index.phpMeskipun file tersebut saat ini hanya berisi satu baris kode, file tersebut tetap dapat dikenali oleh WordPress dan akan mengaktifkan tema Anda.
<?php get_header(); ?>
<h1>Halo, WordPress Theme World!</h1>
<?php get_footer(); ?>get_header()和get_footer()Ini adalah fungsi template dari WordPress, dan fungsi-fungsi tersebut akan mencoba memuat file yang bernama…header.php和footer.phpFile-file tersebut belum kita buat, tetapi menuliskannya terlebih dahulu merupakan praktik yang standar. Sekarang, Anda dapat masuk ke panel administrasi WordPress, lalu pilih “Tampilan” (Appearance) -> “Tema” (Themes), cari dan aktifkan tema “My First Theme”. Setelah itu, refresh halaman depan situs web Anda, dan Anda akan melihat tulisan “Hello, WordPress Theme World!”.
Memahami struktur hierarki template dan membuat file inti (core files)
WordPress menggunakan seperangkat aturan yang disebut “hierarki template” untuk menentukan file template mana yang harus digunakan untuk menampilkan konten berdasarkan jenis permintaan halaman yang berbeda (seperti halaman utama, halaman artikel, halaman kategori). Memahami mekanisme ini merupakan dasar penting dalam pengembangan tema (theme) yang efisien.
推荐阅读 Memulai Pengembangan Tema WordPress: Membuat Tema Kustom Pertama Anda Secara Bertahap。
Template yang paling umum digunakan adalah…index.phpIni merupakan alternatif terakhir untuk semua halaman. Namun, untuk lebih mengontrol tampilan masing-masing halaman dengan lebih detail, kita perlu membuat berkas template yang lebih spesifik. Pertama-tama, mari kita buat tiga berkas dasar dan paling penting:header.php、footer.php和functions.php。
Membangun template header untuk situs web
header.phpFile biasanya berisi bagian kepala (header) dari dokumen HTML.<head>Bagian tersebut mencakup area publik di bagian atas situs web, seperti Logo dan menu navigasi. Buatlah elemen-elemen tersebut dengan desain yang seragam dan mudah dilihat oleh pengguna.header.phpFile:
<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
<header id="site-header">
<div class="container">
<h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<nav>
'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</div>
</header>
<main id="main-content">Berikut adalah beberapa fungsi kunci:wp_head()Hook (pautan) memungkinkan inti WordPress, plugin, dan tema untuk berinteraksi dan berkomunikasi satu sama lain secara mandiri.<head>Masukkan kode yang diperlukan ke dalam area tersebut (misalnya, tautan ke lembar gaya/stylesheet).body_class()Sejumlah nama kelas CSS akan dihasilkan, yang memudahkan Anda untuk mengontrol tampilan halaman berdasarkan kebutuhan.wp_nav_menu()Digunakan untuk menampilkan sebuah menu navigasi.
Membangun template bagian bawah situs web
footer.phpFile tersebut biasanya berisi bagian bawah (footer) yang bersifat umum untuk seluruh situs web, seperti informasi hak cipta, dan berakhir pada titik tertentu dalam kode sumber.header.phpTag yang dibuka di tengah. Buatlah.footer.php：
</main><!-- #main-content -->
<footer id="site-footer">
<div class="container">
<p>© . All rights reserved.</p>
</div>
</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>wp_footer()与wp_head()“Serupa” adalah sebuah hook (fungsi atau mekanisme penghubung) yang penting, yang digunakan untuk melakukan sesuatu tertentu dalam proses tertentu.<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>Masukkan skrip atau kode di depan tag.
Sekarang, kembali ke…index.phpGantilah dengan menggunakan file header dan footer yang baru kami buat:
推荐阅读 Cara memilih dan menyesuaikan tema WordPress yang ramah dengan SEO (Search Engine Optimization):。
<article>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>Kode ini merupakan bagian dari siklus inti (The Loop) dalam tema WordPress. Siklus ini akan memeriksa apakah halaman saat ini berisi artikel, dan kemudian akan mengulang prosesnya untuk menampilkan judul serta isi setiap artikel.
Meningkatkan fitur tema melalui file fungsi
functions.phpIni adalah “Pusat Kontrol” (Control Center) untuk tema Anda. Bukan berupa file template, melainkan file PHP yang secara otomatis diunduh saat tema diinisialisasi. Di sini Anda dapat menambahkan fitur pendukung tema, mengatur lokasi menu, menyusun skema tata letak (stylesheet), serta menambahkan skrip (scripts). Silakan buat file tersebut.functions.php：
<?php
/**
* My First Theme 的功能函数文件
*/
// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图片功能
add_theme_support( 'post-thumbnails' );
// 注册一个主导航菜单
register_nav_menus( array(
'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
) );
// 为文章摘录添加HTML支持
add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
}
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
return '...';
}
// 注册并加载样式表
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 加载一个自定义样式表
wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );File fungsi ini melakukan beberapa hal yang penting: 1) Dengan…add_theme_support()Fungsi-fungsi yang umum digunakan oleh tema WordPress modern telah diaktifkan; 2) Melalui…register_nav_menus()Kami telah mendaftarkan lokasi restoran kami, sehingga informasi tersebut dapat digunakan kembali di masa depan.header.phpYang dipanggil di tengah (the function that is called in the middle)primaryMenu dapat diberikan atribut penampilan di bagian “Penampilan” (Appearance) -> “Menu” (Menu) di backend; 3) Gunakanlah fitur tersebut.wp_enqueue_style()Fungsi tersebut berhasil menambahkan file gaya (stylesheet) ke dalam antrian (queue) dengan cara yang aman dan sesuai dengan persyaratan keamanan.
Create an independent article template.
Untuk meningkatkan tampilan sebuah artikel secara optimal, kita dapat membuat sebuah file template khusus.single.phpBerdasarkan tingkatan template, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan lebih memilih untuk menggunakan template yang sesuai dengan struktur dan fitur artikel tersebut.single.php…bukan…index.php。
<?php get_header(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
<?php
printf(
esc_html__( '发布于 %s', 'my-first-theme' ),
get_the_date()
);
?>
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail( 'large' ); ?>
</div>
<?php endif; ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php get_footer(); ?>Template ini menampilkan informasi artikel secara lebih rinci, seperti tanggal publikasi dan gambar utama (jika telah diatur).post_class()Fungsi tersebut akan menghasilkan kelas CSS yang sesuai dengan jenis artikel.
Menambahkan gaya dasar dan desain responsif
Sekarang, tema Anda sudah memiliki kerangka dan fitur dasar; saatnya untuk membuatnya lebih menarik secara visual. Kita akan…style.cssTambahkan beberapa kode CSS dasar ke dalamnya, dan pastikan desainnya bersifat responsif (mampu beradaptasi dengan berbagai ukuran layar).
Di milikmustyle.cssTambahkan gaya berikut ke file (di bawah bagian header informasi topik):
/* 基础重置与排版 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
#site-header {
background: #fff;
border-bottom: 1px solid #eee;
padding: 1rem 0;
}
#site-header h1 a {
color: #333;
text-decoration: none;
}
/* 导航菜单 */
#primary-menu {
display: flex;
list-style: none;
}
#primary-menu li {
margin-right: 1rem;
}
#primary-menu a {
text-decoration: none;
color: #555;
}
/* 主内容区 */
#main-content {
padding: 2rem 0;
}
article {
background: #fff;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* 底部样式 */
#site-footer {
background: #333;
color: #fff;
text-align: center;
padding: 1.5rem 0;
margin-top: 2rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 0 15px;
}
#primary-menu {
flex-direction: column;
}
#primary-menu li {
margin-right: 0;
margin-bottom: 0.5rem;
}
article {
padding: 1rem;
}
}Gaya-gaya ini memberikan tampilan yang jelas dan modern, serta menyediakan tata letak yang responsif (mampu beradaptasi dengan berbagai ukuran layar) untuk perangkat dengan layar kecil. Anda dapat membuatnya sendiri./assets/css/custom.cssFile tersebut digunakan untuk menyimpan lebih banyak gaya (style) kustom, dan file tersebut sudah ada.functions.phpYang terdaftar dalam antrian tersebut akan diunduh dan dimuat.
Menyimpulkan.
Dengan mengikuti langkah-langkah dalam artikel ini, Anda telah berhasil membuat sebuah tema WordPress yang memiliki fungsi yang lengkap dan struktur yang jelas, dimulai dari sebuah folder kosong. Anda juga telah memahami file-file dasar yang digunakan dalam pengembangan tema.style.css和index.phpSaya telah mempelajari konsep hierarki template (struktur lapisan template), dan kemudian membuatnya.header.php、footer.php、single.phpFile-file template inti lainnya juga disertakan. Anda juga melakukannya melalui…functions.phpFile tersebut menambahkan dukungan fungsional dan kemampuan manajemen sumber daya untuk topik Anda, lalu memberikan “kehidupan visual” kepadanya melalui CSS.
Ini hanyalah titik awal. Selanjutnya, Anda dapat mengeksplorasi cara membuat lebih banyak file template (seperti…)page.php、archive.php、404.phpAnda perlu mempelajari lebih dalam tentang sistem Hook, Action, dan Filter di WordPress, serta cara membuat tema Anda mendukung penggunaan Widget dan Customizer. Dengan terus berlatih dan bereksperimen, Anda akan menjadi seorang pengembang tema WordPress yang mahir.
FAQ - Pertanyaan yang Sering Diajukan.
Bagaimana cara mengubah Logo dari sebuah tema?
在header.phpDalam berkas tersebut, temukan baris kode yang menampilkan judul situs web. Anda dapat menggunakan…
\n`Penggantian tagbloginfo( ‘name’ )Dan tautkan ke gambar Logo Anda. Cara yang lebih profesional adalah…functions.phpGunakan dalam bahasa Cinaadd_theme_support( ‘custom-logo’ )Untuk mendukung fitur pengunggahan logo di WordPress Customizer.
Mengapa menu navigasi saya tidak muncul?
Pertama-tama, pastikan Anda sudah…functions.phpMelaluiregister_nav_menus()Sudah mendaftarkan lokasi restoran (misalnya)...primarySetelah itu, Anda perlu masuk ke panel administrasi WordPress, lalu menuju halaman “Appearance” -> “Menus”. Buat menu baru, pilih item-item menu yang diinginkan, dan centang posisi menu yang telah Anda daftarkan (misalnya “Primary Menu”) di kolom “Display Location”. Setelah selesai, simpan perubahan tersebut.
Bagaimana cara menambahkan sidebar ke sebuah tema?
Pertama, difunctions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi tersebut digunakan untuk mendaftarkan area komponen sidebar (sisi kiri halaman). Setelah itu, komponen sidebar tersebut akan ditampilkan di file template tempat Anda ingin menampilkan sidebar tersebut.index.php或single.phpDalam hal ini, gunakandynamic_sidebar()Fungsi memanggil area ini. Pada saat yang sama, Anda perlu membuat (create)…sidebar.phpFile tersebut digunakan untuk mendefinisikan struktur HTML spesifik dari sidebar.
Apakah operasi yang ada di file functions.php harus dihubungkan (dikaitkan) menggunakan “hook” (pemanggil fungsi tertentu)?
Ya, dalam sebagian besar kasus, untuk memastikan kode dieksekusi pada waktu yang tepat, Anda sebaiknya mengemas kode fungsional ke dalam fungsi dan menggunakan hook tertentu (seperti…)after_setup_theme、wp_enqueue_scripts) Mount. Cukup tuliskan langsung saja.functions.phpKode yang berlaku di seluruh sistem (global scope) dapat dieksekusi pada waktu yang tidak tepat atau menyebabkan kesalahan.
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.
- 10 Tips Desain dan Pengembangan Tema WordPress yang Penting untuk Meningkatkan Kualitas Situs Web Anda
- Cara Memilih Tema WordPress yang Paling Cocok untuk Anda: Pertimbangan Komprehensif Mengenai Kinerja, Keamanan, dan Desain
- Pendahuluan: Mengapa Memilih WordPress untuk Pengembangan
- Cara Memilih dan Mengatur Tema WordPress Khusus Anda: Panduan Lengkap dari Pemula hingga Ahli
- Bagaimana cara memilih dan menyesuaikan tema WordPress yang sempurna untuk Anda?
Bahasa Indonesia