Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Dasar Pengembangan Tema WordPress: Tutorial Lengkap Dari Pemula Hingga Ahli

3 menit baca
2026-03-18
2026-06-04
2,456
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Tema WordPress merupakan inti dari tampilan dan fungsi sebuah situs web. Mengembangkan tema sendiri tidak hanya memungkinkan Anda menciptakan desain yang sepenuhnya disesuaikan dengan keinginan, tetapi juga memungkinkan Anda memahami lebih dalam cara kerja WordPress dan meningkatkan keterampilan pengembangan Anda. Panduan ini akan membimbing Anda dari awal hingga Anda berhasil membuat tema dasar yang memenuhi standar WordPress.

Pembangunan Lingkungan Pengembangan dan Pembangunan Infrastruktur Dasar

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal yang sesuai. Anda dapat menggunakan XAMPP, MAMP, atau aplikasi desktop seperti Local by Flywheel. Pastikan bahwa PHP, MySQL, dan Apache/Nginx telah terinstal di lingkungan tersebut.

Membuat direktori tema dan file inti

Sebuah tema WordPress yang paling dasar hanya memerlukan dua file. Pertama-tama, di dalam direktori instalasi WordPress Anda…wp-content/themesDalam folder tersebut, buatlah sebuah folder baru, misalnya…my-first-theme。

推荐阅读 Panduan Pengembangan Tema WordPress: Membangun Situs Web yang Dikustomisasi dari Nol。

Dalam folder tersebut, buatlah file inti pertama:style.cssFile ini bukan hanya berisi lembar gaya (style sheet), tetapi juga memuat metadata tentang tema yang digunakan. Di bagian awal file, harus ada komentar dengan format yang benar.

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 
/*
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
*/

File inti yang kedua adalah…index.phpIni adalah file template default untuk sebuah tema. Ketika WordPress tidak menemukan template yang lebih spesifik, maka file ini akan digunakan. Awalnya, file ini bisa sangat sederhana.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
    <header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Sekarang, tema Anda sudah dapat muncul di daftar “Tema” (Themes) pada panel administrasi WordPress (Backend) dan telah diaktifkan.

File template inti dan hierarki template.

WordPress menggunakan seperangkat aturan yang disebut “hierarki template” untuk menentukan template file mana yang akan digunakan untuk halaman tertentu. Memahami hierarki ini sangat penting dalam pengembangan tema (theme development).

Artikel dan template halaman.

Ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari informasi tersebut terlebih dahulu.single.phpJika tidak ada, maka kembali ke…index.phpKamu bisa membuatsingle.phpUntuk menyesuaikan tampilan halaman artikel secara khusus.

推荐阅读 Panduan Memulai Pengembangan Tema WordPress: Membuat Tema Situs Web Eksklusif Anda dari Nol.。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
        <div class="entry-meta">
            发布于： | 作者：
        </div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
    <footer class="entry-footer">
        &lt;?php the_tags( &#039;标签：&#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
    </footer>
</article>

\n

Untuk halaman yang independen (tidak tergantung pada halaman lain dalam situs), WordPress akan mencari (atau mengambil informasi dari) sumber tertentu.page.phpAnda juga dapat membuat template untuk ID halaman tertentu atau nama alias halaman, misalnya:page-about.phpAkan digunakan khusus untuk halaman “Tentang”.

Template untuk Arsip dan Halaman Utama

Halaman daftar artikel blog (seperti berdasarkan kategori, tag, arsip penulis) menggunakanarchive.phpAnda dapat menggunakannya.is_category()、is_tag()Tag-tag yang digunakan untuk menentukan kondisi dibedakan secara internal (di dalam kode program).

Halaman utama situs web secara default dibuat oleh…index.phpKontrol. Namun, Anda dapat membuatnya.front-page.phpUntuk mendefinisikan halaman utama yang statis, atau untuk membuatnya…home.phpBerikut adalah definisi untuk halaman depan blog yang menampilkan artikel terbaru:

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

Fitur Tema dan Mekanisme Hook

Ketangguhan dan kemampuan untuk diperluas (scalability) WordPress sebagian besar berkat sistem Hook-nya, yang mencakup Action dan Filter. Tema-tema (themes) dapat memanfaatkan fitur ini untuk menyesuaikan tampilan dan fungsionalitas situs web sesuai kebutuhan.functions.phpFile digunakan untuk memanfaatkan sistem ini.

Penginisialisasi Tema dan Dukungan Fungsi

functions.phpFile tersebut digunakan untuk menambahkan fitur tema, menu pendaftaran, sidebar, dan lainnya. Pertama-tama, biasanya…after_setup_themeAction hook ini digunakan untuk menginisialisasi fungsi-fungsi dasar dari tema tersebut.

<?php
function my_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

\nArea alat pendaftan.

Area widget seperti sidebar atau footer juga perlu disertakan.functions.phpDaftar di sini. Gunakanlah fitur yang tersedia.widgets_initKait (hook).

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Pemahaman Mendalam dan Praktik Nyata。

function my_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Sidebar Utama', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Tambahkan widget di sini.', 'my-first-theme' ),
        'before_widget' =&gt; ' '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>'function my_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebars',  
            'id' =&gt; 'sidebars',  
            'description' =&gt; 'Sidebars untuk tema ini',  
        ),  
    ) );  
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

Setelah Anda mendaftar, Anda dapat menggunakan file-file template (seperti…)sidebar.phpDigunakan dalam (…)dynamic_sidebar( 'sidebar-1' )Saatnya memanggil fungsi untuk area ini.

Template Components and Loop Optimization

Untuk menjaga kebersihan dan kemudahan penggunaan kembali kode, WordPress mendorong pemisahan bagian-bagian template yang berulang (seperti header, footer, dan sidebar) menjadi file-file yang terpisah.

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

Membagi komponen template

Membuatheader.php、footer.php和sidebar.phpFile.index.phpPindahkan bagian kode yang sesuai ke tempat yang ditentukan. Kemudian, gunakan kode tersebut di posisi asalnya.get_header()、get_footer()和get_sidebar()Fungsi digunakan untuk mengandung (mengumpulkan) elemen-elemen tersebut.

Pemrosesan lanjutan untuk siklus artikel

Penggunaan dasar perulangan (basic loop usage)while ( have_posts() ) : the_post(); ... endwhile;Namun, pada halaman arsip, Anda biasanya perlu menampilkan ringkasan artikel, bukan teks lengkapnya. Untuk hal ini, Anda dapat menggunakan…the_excerpt()Fungsi.

Untuk lebih mengontrol siklus, terutama dalam hal kueri yang dibuat secara khusus (custom queries), Anda perlu memahami…WP_QueryKelas. Misalnya, hanya menampilkan artikel-artikel dari kategori tertentu di halaman utama:

<?php
$custom_query = new WP_Query( array(
    'category_name' => 'featured',
    'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 显示文章内容
    endwhile;
    wp_reset_postdata(); // 重置主查询数据
endif;
?>

Ingat, setelah melakukan pencarian khusus (custom query), gunakan…wp_reset_postdata()Untuk mengembalikan pengaturan global…$postVariabel sangat penting; jika tidak, hal tersebut dapat mempengaruhi tampilan komponen template selanjutnya (seperti sidebar) dengan benar.

Menyimpulkan.

Dari saat pembuatan…style.css和index.phpMulai, hingga memahami struktur dan cara menggunakan template tersebut.functions.phpDengan menambahkan fitur baru, membagi komponen template, dan mengoptimalkan struktur kode yang berulang, Anda telah menyelesaikan proses pengembangan tema WordPress yang sederhana namun lengkap. Kuncinya adalah mengikuti standar dan konvensi yang ditetapkan oleh WordPress, sehingga tema Anda memiliki kompatibilitas yang baik dan mudah dikelola. Selanjutnya, Anda dapat mencoba menambahkan metode informasi (metadata) yang lebih lengkap ke dalam artikel, mengintegrasikan jenis artikel khusus (custom article types), atau menggunakan preprocessor seperti Sass untuk mengelola tata letak (style) tema Anda, sehingga tema Anda menjadi lebih profesional dan lebih kuat.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah saya harus menguasai PHP untuk mengembangkan tema WordPress?

Ya, PHP merupakan bahasa pemrograman inti dari WordPress. File template tema (berformat .php) menggunakan PHP untuk menghasilkan konten HTML secara dinamis, memanggil fungsi-fungsi WordPress, dan memproses data. Bahkan jika Anda menggunakan alat pembangun halaman (page builder), pemahaman tentang PHP tetap diperlukan untuk melakukan penyesuaian mendalam dan menyelesaikan masalah yang mungkin muncul.

Apa fungsi dari file functions.php dalam sebuah tema?

functions.phpIni adalah “Function Center” dari tema Anda. Fungsi utamanya adalah untuk mengaktifkan berbagai fitur tema (seperti menu, thumbnail), area untuk mendaftarkan plugin atau widget, menu navigasi, mengatur urutan pengunduhan skrip dan gaya (styles), mendefinisikan fungsi khusus (custom functions), serta memodifikasi perilaku default WordPress melalui mekanisme hook (Actions dan Filters). Function Center akan secara otomatis diunduh saat tema diinisialisasi.

Bagaimana cara membuat tema saya mendukung terjemahan multibahasa?

Anda perlu melakukan dua hal. Pertama, gunakan fungsi penerjemahan WordPress di sekitar semua string yang perlu diterjemahkan. Contohnya:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Dan juga…style.css和functions.phpPertama, pastikan domain teks (text domain) diatur dengan benar. Kedua, gunakan alat seperti Poedit untuk membuat file template berformat .pot, lalu generate file bahasa (.mo) yang sesuai, dan letakkan file tersebut di dalam folder tema (theme)./languagesDi bawah menu.

Bagaimana cara yang benar untuk mengintegrasikan file CSS dan JavaScript dalam pengembangan tema?

Jangan pernah menggunakan kode atau tag secara langsung dalam file template. Cara yang benar adalah dengan menggunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi, dan memasang panggilan-panggilan ini kewp_enqueue_scriptsAksi ini terhubung ke sebuah “hook” (pintu masuk khusus dalam kode program). Hal ini memastikan bahwa hubungan antar komponen (dependencies) benar-benar terjaga, mencegah pengunduhan berulang, dan kompatibel dengan sistem manajemen skrip WordPress.

```php
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

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: