Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal. Lingkungan ini biasanya terdiri dari sebuah server lokal (seperti XAMPP, MAMP, atau Local by Flywheel), PHP, basis data MySQL, serta editor kode (seperti VS Code atau Sublime Text). Pastikan bahwa versi PHP yang Anda gunakan sesuai dengan persyaratan resmi WordPress.
Selanjutnya, di dalam direktori instalasi WordPress Anda…wp-content/themesDalam folder tersebut, buatlah sebuah folder baru, misalnya…my-first-themeFolder ini akan berisi semua file terkait dengan topikmu.
Sebuah tema WordPress yang paling dasar hanya memerlukan dua file:style.css和index.phpPertama-tama, buatlah…style.cssAnda perlu membuat sebuah file, lalu menambahkan komentar berisi informasi tema di bagian awal file tersebut. Hal ini diperlukan agar WordPress dapat mengenali tema yang digunakan.
推荐阅读 Tema WordPress yang Dikustomisasi: Panduan Lengkap untuk Membuat Tampilan Situs Web Khusus dari Nol。
/*
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
Text Domain: my-first-theme
*/Kemudian, buatlah yang paling sederhana saja.index.phpFile tersebut saat ini hanya berisi sebuah kerangka HTML (skeleton) dan kalimat “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
<h1>Halo Dunia! Ini adalah tema pertamaku.</h1>
<?php wp_footer(); ?>
</body>
</html>Sekarang, masuk ke panel administrasi WordPress Anda, lalu ke menu “Tampilan” (Appearance) -> “Tema” (Themes). Di sana, Anda seharusnya dapat melihat tema “My First Theme” dan dapat mengaktifkannya. Meskipun fungsionalitasnya masih sederhana, Anda telah berhasil membuat sebuah tema yang dapat dikenali oleh WordPress.
Membangun file template inti untuk tema
Sebuah tema yang lengkap terdiri dari serangkaian berkas template, yang mengontrol tampilan berbagai bagian dari situs web. Mari kita mulai membangunnya dari beberapa berkas yang paling penting.
Memisahkan bagian header (tulisan di bagian atas halaman) dari bagian footer (tulisan di bagian bawah halaman)
Mengelompokkan kode yang berulang (seperti bagian header dan footer) ke dalam file-file terpisah merupakan langkah pertama yang penting. Buatlah file-file tersebut.header.phpFile tersebut berisi konten yang berasal dari…<!DOCTYPE html>Buka.<body>Semua konten yang berada sebelum tag tersebut.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?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>Membuatfooter.phpFile tersebut berisi konten bagian kaki halaman (footer) serta tag penutup (end tag).
<footer id="colophon" class="site-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>Kemudian, modifikasi milikmu.index.phpDokumen, gunakanget_header()和get_footer()Gunakan fungsi untuk memasukkan bagian-bagian tersebut.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容将在这里显示
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Membuat siklus artikel dan sidebar
Di atas…index.phpSudah terdapat kode dasar dari siklus utama WordPress (The Loop), yang digunakan untuk mengambil dan menampilkan daftar artikel. Selanjutnya, kita akan membuat…sidebar.phpMari tambahkan sebuah sidebar.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Untuk memasukkan sidebar ke dalam halaman, Anda perlu…index.phpUbah struktur bagian utama konten di depan dan belakang, lalu gunakan…get_sidebar()Fungsi. Pada saat yang sama, perlu juga membuat satu (fungsi) lagi.functions.phpFile digunakan untuk mendaftarkan area toolbar samping ini.
Mengimplementasikan tata letak (layout) dan gaya (style) yang responsif
Desain responsif memastikan bahwa tema Anda dapat ditampilkan dengan baik di berbagai perangkat. Kita akan memulai dengan struktur CSS dasar dan kueri media (media queries).
Mengatur gaya dasar dan model kotak elastis (elastic box model)
Di milikmustyle.cssDi bawah komentar informasi topik, tambahkan fitur untuk mengatur ulang gaya tampilan (reset style) dan tata letak dasar (basic layout). Menggunakan Flexbox untuk membuat tata letak yang responsif (responsive layout) merupakan awal yang baik.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Menambahkan media query
Pertanyaan terkait media (media queries) merupakan inti dari desain responsif. Kami menambahkan sebuah titik pemutus (breakpoint) yang sederhana; ketika lebar layar kurang dari 768 piksel (di bawah ukuran perangkat tablet pada umumnya), tata letak area konten dan sidebar akan berubah dari posisi berdampingan menjadi posisi bertumpuk.
推荐阅读 Pengembangan Tema WordPress: Panduan Lengkap dari Pemula hingga Ahli.。
Pertama-tama, modifikasi struktur HTML-nya.index.phpGunakan sebuah kontainer untuk membungkus konten utama dan sidebar.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Kemudian, tambahkan gaya yang sesuai di dalam CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Meningkatkan fitur tema melalui fungsi.php
functions.phpFile merupakan “ruang mesin” (engine room) dari topik Anda, yang digunakan untuk menambahkan fitur, mendaftarkan karakteristik tertentu, serta memasukkan skrip dan gaya (styles) dengan aman.
Mendaftarkan menu navigasi dan area alat tambahan (tools)
在functions.phpDi dalamnya, digunakan…register_nav_menusFungsi ini digunakan untuk mendaftarkan posisi menu navigasi dari suatu tema.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Setelah mendaftar, Anda dapatheader.php和footer.phpGunakan dalam bahasa Cinawp_nav_menu()Fungsi tersebut digunakan untuk memanggil menu-menu tersebut.
Mengunduh gaya dan skrip dengan aman
Jangan pernah membuat tautan langsung (hard link) ke file CSS atau JavaScript di dalam file template. Sebaiknya gunakan metode lain untuk mengintegrasikannya.wp_enqueue_style()和wp_enqueue_script()Fungsi, dan melaluiwp_enqueue_scriptsGunakan “hook” untuk memuatnya.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Buat lebih banyak file template untuk memperkaya fitur-fitur yang tersedia.
Saat ini, kami hanya memiliki satu topik saja.index.phpHal tersebut akan digunakan di semua halaman. Tingkatan struktur template WordPress menentukan bahwa template yang lebih spesifik akan dicari untuk jenis halaman yang berbeda. Mari kita buat beberapa template tersebut.
Artikel tunggal dan template halaman
Membuatsingle.phpDigunakan untuk menampilkan satu artikel saja.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Membuatpage.phpDigunakan untuk menampilkan halaman statis. Strukturnya adalah…single.phpMirip, tetapi biasanya tidak menampilkan metainformasi seperti kategori atau tag.
Untuk mengikuti prinsip DRY (Don’t Repeat Yourself), kita dapat mengekstrak bagian konten yang akan ditampilkan pada artikel dan halaman ke dalam komponen template (Template Part). Buatlah komponen tersebut di direktori akar tema (theme root directory).template-partsBuat sebuah folder, lalu buat file di dalamnya.content-single.php和content-page.php。
Template untuk Halaman Arsip Artikel
Membuatarchive.phpHalaman arsip ini digunakan untuk menampilkan kategori, tag, penulis, dan informasi lainnya. Halaman ini dapat digunakan kembali (dipakai lagi) untuk konten lainnya.index.phpPada siklus tersebut, judul arsip biasanya ditampilkan di bagian atas.
<?php get_header(); ?>
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
\nMenyimpulkan.
Dengan panduan ini, Anda telah berhasil membangun sebuah tema WordPress yang responsif, meskipun sederhana namun lengkap. Anda telah memahami struktur dasar file dari sebuah tema, belajar cara memisahkan komponen-komponen template (header, footer, sidebar), menerapkan mekanisme loop dasar WordPress, serta menggunakan kueri media (media queries) dalam CSS untuk menciptakan tata letak yang responsif. Selain itu, Anda juga telah menguasai cara…functions.phpCara untuk mendaftarkan menu, alat tambahan (tools), dan sumber daya yang diunduh dengan aman (securely loaded resources) melalui file, serta memulai memahami sistem hierarki template yang canggih di WordPress.
Pengembangan tema merupakan proses yang terus berlanjut dan semakin mendalam. Selanjutnya, Anda dapat mengeksplorasi lebih banyak file template (seperti…)404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ - Pertanyaan yang Sering Diajukan.
Berapa banyak file minimum yang diperlukan untuk sebuah tema WordPress?
Sebuah tema minimalis yang dapat dikenali oleh WordPress hanya memerlukan dua file:style.css和index.php。style.cssBagian kepala (header) harus memuat anotasi informasi tema yang benar.index.phpMaka, ini akan dijadikan sebagai template default untuk semua halaman.
Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?
Anda perlu melakukan dua hal. Pertama-tama,style.cssKomentar di bagian atas (header) dan semua tempat di mana teks digunakan (misalnya, melalui…)__()或_e()Fungsi tersebut menggunakan domain teks (text domain). Dalam panduan ini, domain teks yang kami gunakan adalah “my-first-theme”. Selanjutnya, gunakan alat seperti Poedit untuk membuat file berformat .pot, lalu terjemahkan file tersebut ke dalam format .po dan .mo, dan letakkan file-file tersebut di dalam folder tema yang bersangkutan./languagesDi dalam direktori tersebut. Akhirnya,functions.phpGunakan dalam bahasa Cinaload_theme_textdomain()Memuat dan menerjemahkan fungsi.
Mengapa gaya atau skrip kustom saya tidak berfungsi?
Ini biasanya terjadi karena file tidak dimuat dengan cara yang direkomendasikan oleh WordPress. Pastikan bahwa Anda menggunakan metode yang benar untuk memuat file tersebut.functions.phpDalam berkas tersebut, digunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi, dan memasangnya kewp_enqueue_scriptsGunakan “hook” untuk menambahkan gaya (style) dan skrip (script). Tautan yang ditulis langsung di dalam file template mungkin akan diabaikan oleh plugin pengecachean, atau proses pengunduhan (loading)nya bisa terjadi dalam urutan yang tidak tepat dalam beberapa kasus.
Bagaimana cara menambahkan dukungan untuk Logo khusus (custom Logo) ke tema saya?
Ini adalah sebuah fitur yang sangat umum. Anda perlu…functions.phpDalam fungsi pengaturan tema file (melalui…)after_setup_theme(Extraction of the hook execution part), tambahkanadd_theme_support( 'custom-logo' )Anda dapat mengirimkan array parameter untuk mendefinisikan ukuran dan atribut lainnya dari Logo. Setelah parameter tersebut ditambahkan, pengguna dapat mengunggah Logo di menu “Tampilan” -> “Kustom” -> “Identitas Situs”. Di sisi frontend, Anda dapat menggunakan…the_custom_logo()Gunakan fungsi untuk menampilkannya.
Bagaimana cara men-debug kesalahan PHP selama proses pengembangan?
Disarankan untuk mengembangkan di lingkungan lokal.wp-config.phpAktifkan mode debug WordPress di dalam file tersebut.WP_DEBUGKonstanta diatur ketrueAnda juga dapat mengatur hal tersebut secara bersamaan.WP_DEBUG_LOG和WP_DEBUG_DISPLAYUntuk menentukan apakah kesalahan (error) akan dicatat ke dalam berkas log atau ditampilkan di layar, perlu dipertimbangkan terlebih dahulu. Ingatlah untuk mematikan mode debug (mode pelacakan kesalahan) sebelum mengunggah aplikasi atau fitur tersebut ke server.
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.
- 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
- Membangun Tema WordPress Tanpa Kode: Panduan Lengkap Dari Nol Sampai Mahir
Bahasa Indonesia