Halaman Utama/Pengetahuan./WordPress/Detail konten.

Panduan Memulai Pengembangan Tema WordPress: Membuat Tema Situs Web Eksklusif Anda dari Nol.

Baca dalam 4 menit.
2026-03-18
2026-06-04
1,997
Saya mendapatkan komisi ketika Anda berbelanja melalui tautan di bawah ini, tanpa biaya tambahan untuk Anda.

Sebelum memulai menulis kode, Anda memerlukan lingkungan pengembangan lokal. Lingkungan ini biasanya mencakup sebuah server lokal (seperti XAMPP, MAMP, atau Local), serta sebuah editor kode (seperti VS Code atau PhpStorm). Pastikan bahwa PHP (versi 7.4 atau lebih disarankan) dan MySQL telah terinstal di lingkungan Anda.

Sebuah tema WordPress standar merupakan sebuah folder yang berisi kumpulan file tertentu. Pertama-tama, buatlah folder tersebut di lokasi instalasi WordPress Anda.wp-content/themesBuatlah sebuah folder baru di dalam direktori tersebut, misalnya dengan nama “NewFolder”.my-first-theme。

Selanjutnya, buatlah dua file yang paling dasar dan penting: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 awal file tersebut digunakan untuk memberitahu WordPress tentang tema yang Anda gunakan.

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

在style.cssDalam berkas tersebut, Anda perlu menambahkan informasi header dengan format berikut:

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: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Informasi tersebut akan ditampilkan di halaman “Penampilan” -> “Tema” di panel administrasi WordPress (backend).index.phpFile tersebut merupakan template default dari tema tersebut. Meskipun file tersebut sementara waktu kosong, file tersebut harus tetap ada agar WordPress dapat mengenali bahwa ini merupakan tema yang valid.

Membangun file template dasar

Setelah memiliki file dasar, tema Anda masih belum dapat menampilkan konten apa pun. WordPress menggunakan sistem hierarki template untuk menentukan file template mana yang akan diunduh untuk jenis halaman yang berbeda. Selanjutnya, kita akan membuat beberapa file template inti.

Membuat template header (bagian atas halaman) dan footer (bagian bawah halaman)

Untuk mencapai penggunaan kode yang berulang (reusable) dan konsistensi, kita biasanya memisahkan bagian header (bagian atas halaman web) dan footer (bagian bawah halaman web) menjadi file-file yang terpisah. Mulailah dengan membuat file-file tersebut.header.phpFile tersebut berisi bagian kepala (header) dari dokumen HTML.<body>Tag, serta area umum di bagian atas situs web (seperti Logo dan menu navigasi).

Yang paling sederhana…header.phpContoh tersebut mungkin mencakup hal-hal berikut:

推荐阅读 Membuat Situs Web Profesional: Panduan Utama untuk Pengembangan dan Kustomisasi Tema WordPress Secara Menyeluruh.。

<!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>
    <header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

Perhatikan hal-hal yang terdapat di dalamnya.wp_head()Fungsi tersebut harus dipanggil, agar WordPress core, plugin, dan tema itu sendiri dapat menambahkan kode yang diperlukan (seperti CSS dan JS) di bagian atas halaman (header).

Selanjutnya, buatlahfooter.phpFile tersebut digunakan untuk menutup (mengakhiri proses atau aktivitas tertentu).<body>和<html>Tag, serta berisi konten bagian kaki halaman (footer).

    <footer>
        <p>©  . All rights reserved.</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>

Demikian pula,wp_footer()Fungsi juga diperlukan.

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

Sekarang, kita dapat melakukan pembaruan.index.php, menggunakanget_header()和get_footer()Gunakan fungsi untuk memasukkan kedua bagian tersebut:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容将在这里显示
        endwhile;
    else :
        // 没有找到文章时的内容
    endif;
    ?>
</main>

<?php get_footer(); ?>

Membuat siklus artikel dan template konten

Di atas…index.phpDi sini, kita melihat inti dari WordPress: The Loop. Fungsi ini digunakan untuk mengiterasi semua artikel di halaman saat ini (atau satu artikel tertentu). Agar konten artikel lebih terstruktur, kita biasanya mengeluarkan logika penampilan setiap artikel ke dalam file yang terpisah.

Membuatcontent.php或template-parts/content.phpFile, kemudian di dalam siklus tersebut…get_template_part()Fungsi tersebut memanggilnya.

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

// 在 index.php 的循环中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Kemudian, buatlah (create it).template-parts/content.php：

<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
    <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <div class="entry-meta">
        by
    </div>
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

Dengan cara ini, judul artikel, abstrak, metadata, dan lainnya akan dihasilkan dalam format yang terstandarisasi.

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

Mengintegrasikan gaya (styles) dan skrip (scripts)

Sebuah tema yang modern tidak dapat dipisahkan dari CSS dan JavaScript. WordPress menyediakan fungsi-fungsi standar untuk mengatur urutan pengeksekusi (enkoding) file gaya (style sheet) dan skrip dengan aman, bukan dengan langsung menggunakan kode tersebut dalam template.<link>或<script>Tag.

Register and Queue Main Style Sheet

Meskipun kita sudah memiliki…style.cssTetapi biasanya kita melakukannya melalui…functions.phpUntuk memuat file tersebut, pertama-tama buatlah direktori di dalam direktori akar tema (theme root directory).functions.phpDokumen.

Kemudian, gunakan…wp_enqueue_style()Kita memerlukan sebuah fungsi untuk memuat file skema gaya (stylesheet).functions.phpBuat sebuah fungsi di dalam kode tersebut, lalu ikatkan fungsi tersebut dengan sistem yang relevan (misalnya, dengan event tertentu atau proses yang berjalan di aplikasi).wp_enqueue_scriptsPada tindakan ini.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载Google Fonts示例
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()Fungsi tersebut akan secara otomatis mengambil tema yang digunakan.style.cssPath ke file.

Tambahkan skrip menu navigasi responsif.

Untuk menambahkan fitur interaktif, seperti menu yang responsif di perangkat seluler, kita perlu memasukkan JavaScript. Misalkan kita memiliki skrip sederhana untuk mengaktifkan/menonaktifkan tampilan menu.

Pertama-tama, buatlah satu…js/navigation.jsFile. Kemudian,functions.phpDalam fungsi yang sama, gunakan…wp_enqueue_script()Mari kita muatnya.

function my_first_theme_scripts() {
    // ... 之前的样式代码 ...

// 加载导航脚本
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}

Parameter terakhirtrueIni menunjukkan bahwa skrip harus diletakkan di bagian bawah halaman (di bawah semua konten lainnya).<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>(Menggunakan kode sebelum tag tertentu) Hal ini biasanya membantu meningkatkan kinerja pengunduhan halaman.

Mengimplementasikan fungsi inti dari tema tersebut.

functions.phpIni merupakan “otak” dari tema tersebut, yang berfungsi untuk menambahkan berbagai fitur dan dukungan. Selain memuat sumber daya (resource), kita juga perlu menyatakan fitur-fitur yang didukung oleh tema di sini.

Menambahkan dukungan untuk fitur tema.

WordPress menyediakan serangkaian “fitur tema” (theme features), dan Anda perlu menyatakan secara eksplisit bahwa Anda mendukung fitur-fitur tersebut agar dapat menggunakannya. Fitur-fitur dasar meliputi thumbnail artikel (gambar profil), menu kustom, serta dukungan untuk tag HTML5.

在functions.phpTambahkan kode berikut ke dalam:

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接自动添加到head中
    add_theme_support( 'automatic-feed-links' );
    // 让文章和页面支持“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 启用对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用标题标签支持，WordPress会自动管理文档标题
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

after_setup_themeIni adalah sebuah hook aksi yang dijalankan saat tema diinisialisasi, dan merupakan tempat standar untuk mengatur fitur-fitur tema.

Menu navigasi terdaftar.

Sebagian besar situs web memerlukan menu navigasi. Sistem menu di WordPress memungkinkan pengguna untuk mengatur item menu secara khusus di bagian “Tampilan” -> “Menu” di panel administrasi. Anda perlu terlebih dahulu mendaftarkan posisi menu untuk tema yang Anda gunakan.

Pada tadi…my_first_theme_setupDi dalam fungsi tersebut, lanjutkan dengan menambahkan:

function my_first_theme_setup() {
    // ... 之前的 add_theme_support 代码 ...

// 注册一个主菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}

Setelah Anda mendaftar, Anda dapat menggunakan file-file template (seperti…)header.phpDigunakan dalam (…)wp_nav_menu()Fungsi tersebut digunakan untuk menampilkan menu tersebut:

<nav>
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_class'     => 'primary-menu',
    ) );
    ?>
</nav>

Membuat sidebar dan area toolbar

Widget merupakan fitur lain yang sangat kuat di WordPress. Untuk menggunakannya, Anda perlu mendaftarkan sebuah sidebar (area tempat Widget akan ditampilkan) terlebih dahulu.

在functions.phpBuat sebuah fungsi baru di dalam kode tersebut, lalu kaitkannya (hook) dengan komponen atau proses yang sudah ada.widgets_initDari segi tindakan:

function my_first_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_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebar 1',  
            'id' =&gt; 'sidebars-1',  
            'description' =&gt; 'Sidebar pertama',  
        )  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Setelah mendaftar, Anda dapat melihat area “Main Sidebar” di menu “Tampilan” -> “Widget” di bagian administrasi, lalu menarik widget ke sana. Untuk menampilkan widget tersebut dalam tema Anda, Anda perlu mengedit template yang digunakan.sidebar.phpDi sini, kita memanggil metode getUserData di kelas UserData dalam file UserData.java.dynamic_sidebar( 'sidebar-1' )Fungsi.

Menyimpulkan.

Dengan panduan ini, kita telah menyelesaikan proses pengembangan tema WordPress yang sederhana namun memiliki fungsi yang lengkap. Kita memulai dengan membangun lingkungan dan membuat file-file dasar, kemudian secara bertahap membangun struktur template, memisahkan bagian header dan footer, serta mengimplementasikan mekanisme untuk menampilkan artikel secara otomatis. Selanjutnya, kita belajar cara menambahkan gaya (style) dan skrip ke tema dengan cara yang standar, untuk memastikan kompatibilitas dan kinerja yang optimal. Akhirnya,functions.phpDi dalamnya, kami mengaktifkan fitur-fitur inti dari tema tersebut, seperti gambar unggulan, menu navigasi, dan area alat tambahan (tooltips), sehingga tema ini menjadi sangat dapat disesuaikan (dikustomisasi) sesuai kebutuhan pengguna.

Ini hanyalah titik awal. Berdasarkan ini, Anda dapat melanjutkan untuk membuat file template yang lebih profesional (seperti…)single.php、page.php、archive.phpAnda dapat mengeksplorasi API WordPress yang lebih kompleks, seperti jenis artikel kustom, sistem klasifikasi (taxonomy), dan API Customizer, untuk menciptakan tema situs web yang kaya fitur dan memiliki desain yang unik.

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja teknik yang perlu dikuasai untuk mengembangkan tema WordPress?

Untuk mengembangkan tema WordPress, diperlukan pemahaman terhadap beberapa teknologi inti. Yang pertama adalah PHP, karena WordPress sendiri ditulis menggunakan PHP, sehingga semua file template dan logika fungsional sangat bergantung pada bahasa pemrograman ini. Anda perlu memahami sintaks PHP dasar, fungsi-fungsi, perulangan (loop), dan pernyataan kondisional (conditional statements).

Selanjutnya adalah HTML dan CSS, yang digunakan untuk membangun struktur dan tata letak (style) halaman web. Penting untuk memahami prinsip-prinsip desain halaman web yang responsif serta teknik tata letak CSS modern, seperti Flexbox dan Grid. Akhirnya, diperlukan pemahaman dasar tentang JavaScript untuk mengimplementasikan fitur interaksi di bagian frontend (halaman web). Kemampuan dalam menggunakan fungsi PHP khusus WordPress dan sistem Hook-nya merupakan kunci untuk mengembangkan tema (theme) dengan efisien.

File `style.css` dan `functions.php`, mana yang lebih penting?

Kedua file ini memainkan peran yang sangat berbeda namun sama pentingnya dalam pengembangan tema WordPress, sehingga tidak mungkin untuk membandingkan mana yang lebih penting dari yang lain.style.cssFile merupakan “identitas” dari sebuah tema, dan blok komentar di bagian awal file tersebut sangat diperlukan agar WordPress dapat mengenali sebuah tema. Tanpa blok komentar tersebut, tema tidak akan muncul dalam daftar tema di bagian administrasi (backend).

而functions.phpFile merupakan “pusat fungsionalitas” dari sebuah tema; hampir semua kode yang digunakan untuk memperluas fungsi tema ditulis di dalam file ini, seperti menu pendaftaran, penambahan dukungan untuk tema, pengambilan gaya skrip, definisi fungsi kustom, dan sebagainya. Tanpa file ini, tema akan kehilangan sebagian besar fitur dinamis dan kemampuan untuk diperluas (ekspansibilitasnya). Kedua komponen ini saling melengkapi dan tidak boleh dipisahkan.

Mengapa harus menggunakan fungsi wp_head() dan wp_footer()?

wp_head()和wp_footer()Ini merupakan hook kunci yang digunakan untuk komunikasi antara inti WordPress (core), tema (theme), dan plugin.header.php的</head>Menggunakan fungsi sebelum tag diterapkan.wp_head()Ini merupakan cara standar yang memungkinkan WordPress itu sendiri, plugin yang Anda instal, serta bagian lain dari tema Anda untuk menambahkan kode yang diperlukan ke bagian atas halaman (seperti meta tag, tautan ke file gaya (style sheet), referensi skrip, data terstruktur JSON-LD, dan lainnya).

Sama halnya,footer.php的<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>Menggunakan fungsi sebelum tag diterapkan.wp_footer()Fungsi-fungsi ini digunakan untuk memasukkan skrip yang perlu diunduh di bagian bawah halaman (seperti kode analisis, JS yang diunduh secara tertunda), atau konten HTML lainnya. Jika fungsi-fungsi tersebut dilewatkan, dapat menyebabkan plugin tidak berfungsi dengan benar, toolbar manajemen tidak muncul, serta berbagai masalah kompatibilitas.

Bagaimana cara membuat tema saya sesuai dengan standar resmi WordPress?

Agar tema Anda memenuhi standar resmi WordPress dan memiliki kualitas yang tinggi, Anda perlu mengikuti “WordPress Theme Development Manual” serta “Theme Review Requirements”. Hal ini mencakup penggunaan praktik pemrograman yang aman, serta penggunaan fungsi escape (pembebasan karakter berbahaya) untuk semua data yang dihasilkan secara dinamis.esc_html(), esc_url()Gunakan fungsi internasionalisasi (seperti…) untuk semua string terjemahan.__(), _e()) dan memuat bidang teks (text field).

Desain tema harus bersifat responsif, sehingga dapat ditampilkan dengan baik di semua perangkat. Kode yang digunakan harus jelas dan dilengkapi dengan komentar, serta mematuhi standar pengkodean WordPress. Tema juga harus menyediakan banyak opsi penyesuaian melalui WordPress Customizer, dan semua fitur serta hook inti WordPress harus diimplementasikan dengan benar. Sebelum dipublikasikan, sangat disarankan untuk menguji tema menggunakan plugin Theme Check.

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: