Halaman Utama/Pengetahuan./WordPress/Detail konten.

Mulai dari Nol: Memahami Dasar-Dasar Tema WordPress

Baca dalam 2 menit.
2026-03-15
2026-06-03
2,094
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Mulai dari Nol: Memahami Dasar-Dasar Tema WordPress

Untuk memahami pengembangan tema WordPress, pertama-tama perlu dipahami komponen-komponen utamanya. Sebuah tema WordPress pada dasarnya merupakan kumpulan berbagai file yang bersama-sama menentukan tampilan dan fungsi sebuah situs web, termasuk file gaya (style sheets), file template, skrip fungsi (function scripts), serta sumber daya lain seperti gambar. File inti dari sebuah tema adalah… style.css 和 index.phpYang pertama merupakan “kartu identitas” dari tema tersebut serta berisi definisi gaya (style)nya, sedangkan yang kedua adalah berkas template default.

Header File for Topic Information

Di dalam direktori akar setiap topik, harus ada satu file atau folder. style.css File tersebut memiliki bagian header yang berisi komentar khusus, yang berfungsi untuk menyatakan informasi dasar tentang tema tersebut kepada WordPress. Bagian header ini sangat penting karena merupakan kunci agar tema dapat dikenali dan diaktifkan oleh WordPress.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个用于学习 WordPress 主题开发的简单主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Di antaranya,Text Domain Digunakan untuk internasionalisasi; merupakan identifikasi kunci untuk memuat file terjemahan selanjutnya.

推荐阅读 Pemulaan Pengembangan Tema WordPress: Membangun Situs Web Khusus dari Nol。

Peran file template inti

Selain itu, style.cssTopik tersebut harus mencakup setidaknya satu berkas template PHP. Yang paling dasar adalah… index.phpIni merupakan template cadangan untuk semua halaman. WordPress akan menggunakan template ini ketika tidak dapat menemukan file template yang lebih spesifik. File template penting lainnya termasuk yang digunakan untuk menampilkan satu artikel saja. single.phpDigunakan untuk menampilkan daftar artikel. archive.phpDigunakan untuk menampilkan halaman. page.php Serta definisi bagian atas (header) dan bawah (footer) dari situs web. header.php 和 footer.php。

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%).
LOGO UltaHost. halaman akses

Membangun struktur hierarki template inti untuk sebuah tema

WordPress menggunakan sistem hierarki template untuk menentukan file template mana yang akan digunakan untuk halaman yang sedang diminta. Sistem ini mengikuti prinsip dari yang khusus ke yang umum, sehingga pengembang dapat melakukan desain yang sangat disesuaikan untuk berbagai jenis halaman.

Memahami urutan pemuatan template.

Ketika pengguna mengakses sebuah artikel blog, WordPress akan mencari berikut ini file template secara berurutan:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpDan terakhir, singular.php 和 index.phpMisalnya, untuk halaman dengan judul “about” (tipe postingan: page), WordPress akan mencari terlebih dahulu… page-about.phpLalu carilah. page.phpBaru di akhirnya digunakan. index.php。

\nMembuat file template yang sering digunakan.

Sebuah tema yang lengkap dan fungsional biasanya akan mencakup berikut ini file-file template dasar:
- header.phpMemuat deklarasi jenis dokumen.<head> Bagian awal dari sebuah wilayah atau situs web (seperti menu navigasi). Dapat digunakan di template lainnya. get_header() Pengenalan fungsi (Function Introduction).
- footer.phpBerisi bagian akhir dari situs web (seperti informasi hak cipta). Gunakan… get_footer() Pengenalan fungsi (Function Introduction).
- index.phpTemplate utama berfungsi sebagai cadangan terakhir untuk semua halaman.
- page.phpDigunakan untuk menampilkan halaman statis.
- single.phpDigunakan untuk menampilkan satu artikel saja.
- archive.phpDigunakan untuk menampilkan kategori, tag, penulis, tanggal, dan informasi lainnya pada halaman arsip.

Dengan memisahkan bagian-bagian tersebut, dapat sangat meningkatkan tingkat penggunaan kembali (reusability) dan kemudahan pemeliharaan (maintainability) kode. Dalam template siklus utama (main loop template), umumnya digunakan struktur yang mirip dengan berikut ini:

推荐阅读 Panduan Praktis Pengembangan Tema WordPress: Membangun Arsitektur dan Template Tema Kustom Dari Nol。

&lt;?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 显示文章内容
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    // 如果没有文章
    echo '<p>暂无内容。</p>';
endif;
?&gt;

Memanfaatkan fungsi dan hook untuk memperkuat fitur tema

Sebuah tema yang berkualitas tidak hanya harus memiliki antarmuka yang menarik, tetapi juga harus memiliki kemampuan ekspansi yang kuat. Hal ini terutama dapat dicapai melalui dua fitur inti WordPress: fungsi (functions) dan hook (hooks). File utama… functions.php Inilah tempat utama untuk menambahkan fitur-fitur tersebut.

\nFile fungsi tema

functions.php File tersebut diunduh secara otomatis saat tema diinisialisasi, dan berfungsi untuk mendefinisikan fitur-fitur tema, mendaftarkan menu dan sidebar, serta menambahkan berbagai filter dan aksi. File ini ibarat “otak” dari tema tersebut, yang mengendalikan logika perilaku tema.

Misalnya, kode untuk mendaftarkan sebuah menu navigasi dan mengaktifkan fitur thumbnail artikel adalah sebagai berikut:

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.
LOGO hosting.com halaman akses 
<?php
function my_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

    // 启用文章特色图像支持
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>

Di sini digunakan action hook. after_setup_themeHal tersebut memungkinkan kita untuk menjalankan fungsi kita sendiri setelah pengaturan dasar dari suatu topik selesai. my_theme_setup。

Memahami Aksi dan Filter

Hook terbagi menjadi dua jenis: Action dan Filter. Action memungkinkan Anda untuk menyisipkan dan menjalankan kode Anda pada titik waktu tertentu, misalnya untuk menampilkan sesuatu setelah isi artikel. Filter memungkinkan Anda untuk mengubah data yang dihasilkan selama proses eksekusi WordPress.

Misalnya, menggunakan filter untuk mengubah panjang teks ringkasan:

推荐阅读 Panduan Pengembangan Tema WordPress: Membangun Tema Profesional Dari Nol。

<?php
function my_excerpt_length( $length ) {
    return 20; // 将摘要长度改为20个单词
}
add_filter( 'excerpt_length', 'my_excerpt_length' );
?>

Dan gunakan fitur “Aksi” untuk menambahkan pernyataan hak cipta di akhir isi artikel:

&lt;?php
function my_post_footer( $content ) {
    if ( is_single() ) {
        $content .= &#039;<p class="copyright">本文版权归本站所有。</p>';
    }
    return $content;
}
add_filter( 'the_content', 'my_post_footer' );
?&gt;

Mengimplementasikan desain responsif dan penyesuaian tema (theme customization)

Tema WordPress modern harus bersifat responsif (mampu menyesuaikan tampilan sesuai ukuran layar) dan menyediakan opsi pengaturan yang mudah digunakan oleh pengguna. Hal ini dapat dicapai dengan menggabungkan teknologi CSS serta API kustom WordPress.

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.
Logo InterServer. halaman akses

Menerapkan CSS responsif pada aplikasi

Desain responsif umumnya diimplementasikan menggunakan kueri media (media queries) dalam CSS. style.css Di dalamnya, Anda dapat mendefinisikan gaya (style) sesuai dengan lebar layar yang berbeda.

/* 基础样式 */
.container {
    width: 100%;
    padding: 20px;
}

/* 平板设备（宽度大于768px） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备（宽度大于992px） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Mengintegrasikan pengaturan customizer

WordPress Customizer memungkinkan pengguna untuk melihat pratinjau (preview) dan mengubah pengaturan tema secara real-time. functions.phpAnda dapat menambahkan berbagai opsi untuk tema, seperti pengunggahan logo, pemilihan warna, dan lainnya.

Berikut adalah contoh opsi untuk menambahkan teks hak cipta di bagian kaki halaman:

<?php
function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    // 为设置项添加一个控件（输入框）
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
?>

Dalam berkas template footer.php Di dalamnya, Anda dapat menampilkan nilai dari opsi ini dengan cara berikut:

<p class="site-info">
    <?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 我的网站。' ) ); ?>
</p>

Menyimpulkan.

Pengembangan tema WordPress merupakan keterampilan komprehensif yang menggabungkan pengetahuan pemrograman PHP, struktur HTML, gaya CSS, serta API inti WordPress. Mulai dari memahami konsep-konsep dasar… style.css Mulailah dengan file template, lalu perlahan-lahan pahami sistem hierarki template tersebut, dan belajar cara menggunakannya dengan benar. functions.php Dengan memanfaatkan fitur ekstensi berupa “hook” (pautan/koneksi dalam kode), kita dapat mengembangkan tema yang responsif (mampu beradaptasi dengan berbagai ukuran layar) dan memiliki berbagai opsi kustomisasi yang lengkap. Ini merupakan jalur yang jelas untuk menjadi seorang pengembang tema yang kompeten. Dalam proses pengembangan, dengan mengikuti standar pemrograman resmi dan praktik terbaik, kita tidak hanya dapat memastikan kualitas dan keamanan tema tersebut, tetapi juga menciptakan dasar yang kokoh untuk pemeliharaan dan pengembangan lebih lanjut di masa depan.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja pengetahuan dasar yang diperlukan untuk belajar pengembangan tema WordPress?

Disarankan untuk memiliki pengetahuan dasar tentang HTML dan CSS, karena keduanya merupakan fondasi penting dalam membangun tampilan halaman web. Selain itu, diperlukan pemahaman dasar tentang PHP, karena inti WordPress dan sistem templatnya didukung oleh PHP. Pengetahuan awal tentang JavaScript juga akan sangat membantu saat mengembangkan fitur interaktif di kemudian hari.

Apakah fungsi-fungsi yang terdapat di file functions.php dari tema akan bertentangan (konflik) dengan fungsi-fungsi yang terdapat di file functions.php dari subtema?

Tidak akan ada konflik; keduanya akan diunduh (diload). Subtopiknya juga akan ikut diunduh. functions.php File tersebut akan berada di dalam sub-topik (sub-topic) dari topik utama (parent topic). functions.php File tersebut diunduh setelah proses lainnya selesai. Hal ini berarti Anda dapat menambahkan fitur baru ke dalam sub-topik (sub-topic) atau mengganti fitur yang telah didefinisikan dalam topik induk (parent topic), asalkan fungsi dalam topik induk tersebut diizinkan untuk diganti. Ini merupakan cara yang direkomendasikan untuk melakukan modifikasi terhadap fungsi inti dari sebuah tema dengan aman.

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Anda perlu menggunakan fungsi internasionalisasi (internationalization) dari WordPress untuk membungkus semua string teks yang perlu ditampilkan di antarmuka pengguna. Fungsi-fungsi utama yang digunakan dalam hal ini adalah: __() 和 _e() Fungsi, dan tentukan di mana mereka akan dieksekusi. style.css \nYang didefinisikan di tengah Text DomainKemudian, gunakan alat seperti Poedit untuk membuat file template .pot, yang akan digunakan oleh penerjemah untuk membuat file terjemahan .po dan .mo. Letakkan file-file tersebut di dalam folder tema yang bersangkutan. /languages/ Di bawah menu.

Apa saja masalah hukum dan regulasi yang perlu diperhatikan dalam pengembangan tema komersial?

Yang paling penting adalah mematuhi lisensi GNU GPL yang digunakan oleh WordPress itu sendiri. Hal ini berarti bahwa bagian kode PHP dari tema Anda harus menggunakan lisensi yang kompatibel dengan GPL. Umumnya, seluruh isi tema akan mewarisi lisensi GPL tersebut. Selain itu, Anda perlu memastikan bahwa sumber daya pihak ketiga yang Anda gunakan (seperti ikon, font, pustaka JavaScript) memiliki lisensi komersial yang sesuai. Dalam hal standar kode, Anda harus mengikuti standar kode resmi WordPress, dan memastikan bahwa tema Anda lulus pemeriksaan dasar menggunakan plugin Theme Check, agar memiliki kesempatan lebih besar untuk dimasukkan ke dalam direktori resmi WordPress.

Selanjutnya, apa yang harus kita lakukan selanjutnya?

Jika Anda sedang membangun atau mengoptimalkan situs web WordPress, langkah selanjutnya adalah terus membaca tentang optimasi kinerja, konfigurasi plugin, dan kustomisasi tema.

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.

Tag: