Halaman Utama/Pengetahuan./WordPress/Detail konten.

Pemulaan dalam Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol

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

Pengaturan awal: Membuat lingkungan tema yang lengkap

Sebelum menulis kode apa pun, membangun lingkungan pengembangan yang terstruktur dengan baik merupakan kunci keberhasilan. Pertama-tama, Anda perlu menginstal WordPress di server lokal atau remote. Buatlah sebuah direktori untuk menyimpan tema-tema, yang berada di bawah direktori instalasi WordPress. /wp-content/themes/ Ya. Kita akan membuat sesuatu yang bernama… my-first-theme Ini adalah folder baru, dan inilah direktori inti dari tema kustom kita.

Sebuah tema WordPress yang paling dasar hanya memerlukan dua file agar dapat dikenali oleh sistem. File pertama adalah file skema (stylesheet). style.cssTidak hanya mendefinisikan tampilan situs, tetapi juga informasi komentar di bagian header merupakan “kartu identitas” dari tema tersebut, yang mencakup nama tema, penulis, deskripsi, dan metadata lainnya. Yang kedua adalah file template inti (core template file). index.phpIni adalah file template pintu masuk (entry template) bawaan WordPress.

Mari kita mulai dengan membuatnya terlebih dahulu. style.css File, di mana informasi header yang diperlukan ditulis ke dalamnya.

推荐阅读 Pengembangan Tema WordPress: Panduan Lengkap untuk Membangun Tema Khusus dari Nol。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Selanjutnya, buatlah yang paling dasar. index.php File tersebut bisa sangat sederhana; fungsinya hanyalah untuk menguji apakah suatu tema telah diidentifikasi dengan benar atau tidak.

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 
<!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>

Setelah menyelesaikan kedua file tersebut, masuklah ke panel administrasi WordPress Anda, lalu kunjungi halaman “Tampilan” (Appearance) → “Tema” (Themes). Di sana, Anda seharusnya dapat melihat tema “My First Theme” yang baru saja Anda buat. Aktifkan tema tersebut, kemudian kunjungi halaman utama situs web Anda, dan Anda akan melihat tampilan dasar dari tema tersebut. Ini menandakan bahwa kerangka tema Anda telah berhasil dibangun.

Memahami file template inti dan struktur hierarkinya

WordPress menggunakan Hierarki Template (Template Hierarchy) untuk menentukan file template mana yang harus digunakan untuk merender dan menampilkan halaman tertentu. Memahami aturan ini merupakan hal yang sangat penting dalam pengembangan tema (theme development). Singkatnya, ketika pengguna mengakses sebuah halaman tertentu, WordPress akan mencari file template yang sesuai berdasarkan urutan prioritas tertentu. Yang paling mendasar adalah… index.phpItu adalah opsi kembali (backward) terakhir untuk semua halaman.

Misalnya, ketika seseorang mengakses konten tertentu dari sebuah artikel blog, WordPress akan mencari informasi tersebut terlebih dahulu. single-post.phpJika tidak ada, maka carilah. single.phpJika belum ada, maka akan digunakan. index.phpUntuk halaman yang menampilkan daftar artikel, sistem akan mencari secara berurutan… home.php、front-page.php、index.php。

Untuk mengimplementasikan tema blog yang fungsional secara lengkap, kita setidaknya perlu membuat beberapa file template kunci berikut:header.php(Top of the website page)footer.php(Footer of the website page)sidebar.php(Sidebar, optional)index.php(Indeks Isi Utama)single.php(Satu artikel)page.php(Single-page) dan style.css(Sheet Style).

推荐阅读 Bagaimana cara mengembangkan tema WordPress kustom dari nol?。

lulus (tagihan atau inspeksi, dll) get_header()、get_footer() 和 get_sidebar() Dengan fungsi-fungsi template ini, kita dapat memodulasi kode yang umum digunakan, sehingga memungkinkan penggunaan kembali kode tersebut. File template utama, misalnya… index.php Struktur tersebut akan menjadi sangat jelas akibatnya.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Pemikiran modular ini tidak hanya membuat kode lebih mudah diperawat, tetapi juga memungkinkan Anda untuk dengan mudah membuat header dan footer khusus untuk berbagai jenis halaman.

Praktik Pengembangan: Membuat Siklus Utama dan Memanggil Isi Artikel

Inti dari setiap tema blog adalah “The Loop” (Siklus Utama). Ini merupakan struktur kode PHP yang digunakan oleh WordPress untuk mengambil isi artikel dari basis data dan menampilkannya di halaman web. Di dalam siklus tersebut, Anda dapat menggunakan serangkaian tag template (Template Tags) untuk menampilkan judul artikel, isi artikel, penulis, tanggal, dan informasi lainnya.

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

Mari kita bangun yang paling dasar saja.index.phpFile: Daftar artikel ditampilkan dalam siklus utama (main loop).

<?php get_header(); ?>

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">Artikel Terbaru</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/id/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Diterbitkan pada:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Maaf, tidak ditemukan artikel apa pun.</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Dalam kode di atas, kita menggunakan… have_posts() 和 the_post() Untuk membangun siklus. Tag template. the_title()、the_permalink()、the_excerpt() “等” digunakan untuk menghasilkan konten yang sesuai.post_class() Fungsi tersebut akan secara otomatis menghasilkan serangkaian kelas CSS yang sangat berguna untuk kontainer artikel, yang memudahkan kita dalam melakukan desain tata letak (style design).

Untuk sebuah artikel tunggal, kita perlu membuat… single.phpStrukturnya mirip dengan halaman indeks, tetapi biasanya hanya menampilkan satu artikel saja dalam setiap siklus, dan seluruh isi artikel tersebut ditampilkan secara lengkap.the_content())。

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

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Di sini diperkenalkan sebuah fungsi yang lebih kuat. get_template_part()Fungsi ini digunakan untuk memuat file fragmen template lain yang berada di dalam direktori tema. Sebagai contoh,get_template_part( 'template-parts/content', 'single' ); 会优先加载 template-parts/content-single.php Jika file tersebut tidak ada, maka file tersebut akan diunduh (diload). template-parts/content.phpHal ini semakin meningkatkan struktur organisasi kode dan tingkat kegunaan kodenya (reusabilitasnya).

Peningkatan Fungsi Tema dan Praktik Terbaik

Setelah sebuah tema dasar terbentuk, kita dapat membuatnya lebih kuat dan stabil dengan menambahkan file-fungsi terkait tema serta mengikuti praktik terbaik. Salah satu file yang paling penting adalah… functions.php。

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

Subject:functions.phpFile tersebut tidak wajib ada, tetapi memungkinkan Anda menambahkan fitur ke tema Anda, mendaftarkan karakteristik tertentu, serta berinteraksi dengan API inti WordPress. File ini berfungsi seperti “plugin” untuk tema Anda, namun tetap terikat pada tema tersebut. Yang perlu Anda lakukan di sini adalah melakukan proses “pendaftaran” dan “penyataan” (registration and declaration), bukan langsung menghasilkan konten.

Sebuah standarfunctions.phpBerikut adalah beberapa bagian yang perlu disertakan:

1. Menu Pendaftaran: Gunakan register_nav_menus() Fungsi.
2. Register the sidebar: Use it. register_sidebar() Fungsi.
3. Menambahkan dukungan untuk tema: Gunakan add_theme_support() Fungsi ini digunakan untuk mengaktifkan fitur-fitur inti seperti gambar khas artikel, logo kustom, dan lainnya.
4. Memuat gaya dan skrip: Gunakan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi, dan gunakan dengan benar. wp_enqueue_scripts Kait (hook).

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
?&gt;

Ikuti praktik terbaik ini, seperti menambahkan fitur melalui hook, mengatur urutan pengunduhan sumber daya dengan benar, dan menggunakan fungsi penerjemahan. __() 和 _e() Membuat tema menjadi internasional (dapat digunakan di berbagai bahasa) akan memastikan bahwa tema tersebut aman, efisien, dan memenuhi standar pengembangan resmi WordPress.

Menyimpulkan.

Dari saat pembuatan konten yang berisi… style.css 和 index.php Mulai dari folder-folder dasar, Anda telah menyelesaikan perjalanan utama dalam membangun sebuah tema WordPress yang disesuaikan (custom theme). Kita telah membahas secara mendalam sistem hierarki template, memahami bagaimana WordPress secara cerdas memilih file template yang sesuai untuk menampilkan berbagai halaman. Kita juga telah mempraktikkan pembuatan loop utama (main loop) dan belajar menggunakan berbagai tag template untuk menghasilkan konten secara dinamis. Akhirnya, kita… functions.php Fitur dan standar yang digunakan dalam tema tersebut telah ditingkatkan secara signifikan. Meskipun ini hanyalah awal, hal tersebut membuka pintu bagi Anda untuk terus mengeksplorasi, menambahkan lebih banyak file template, gaya desain yang lebih beragam, serta fitur interaktif, sehingga pada akhirnya Anda dapat membuat situs web yang benar-benar sesuai dengan kebutuhan Anda atau klien Anda.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah pengembangan tema memerlukan pemahaman tentang PHP?

Ya, untuk mengembangkan tema WordPress secara mendalam, diperlukan pengetahuan dasar tentang PHP. Karena WordPress sendiri dibangun menggunakan PHP, semua file template, pemanggilan fungsi, dan logika pemrosesan data tidak dapat dipisahkan dari PHP. Bagi pemula, sangat penting untuk menguasai sintaks dasar PHP, variabel, array, perulangan (loop), pengecekan kondisi (condition checking), dan fungsi (functions).

Bagaimana cara membuat tema saya cocok untuk perangkat seluler?

Membuat sebuah tema memiliki desain yang responsif merupakan persyaratan dasar untuk situs web modern. Anda perlu menggunakan Media Queries dalam CSS untuk menyesuaikan tata letak dan gaya tampilan berdasarkan lebar layar yang berbeda. Saat mengembangkan situs web, sebaiknya selalu mengikuti strategi “mobile-first” (mengutamakan penggunaan perangkat seluler terlebih dahulu). Mulailah dengan menulis kode gaya yang cocok untuk layar kecil, lalu secara bertahap tambahkan atau gantikan kode tersebut menggunakan Media Queries untuk layar yang lebih besar.

Apa cara terbaik untuk mengembangkan dan menguji tema (tema desain atau fitur aplikasi)?

Sangat disarankan untuk mengembangkan tema dalam lingkungan pengembangan lokal. Dengan menggunakan alat-alat seperti Local by Flywheel, XAMPP, MAMP, atau Docker untuk membangun lingkungan server lokal, Anda dapat melakukan iterasi dan pengujian dengan cepat tanpa mempengaruhi situs web yang aktif di internet. Selain itu, aktifkan fitur-fitur tertentu di WordPress untuk mendukung proses pengembangan tema tersebut. WP_DEBUG Pengaturan mode sangat penting, karena ia memungkinkan kesalahan dan peringatan PHP ditampilkan di layar, sehingga Anda dapat dengan cepat menemukan dan memperbaiki masalah dalam kode.

Apa teknologi front-end yang perlu saya kuasai?

Selain PHP, Anda juga perlu menguasai HTML dan CSS dengan baik, karena keduanya merupakan dasar untuk membangun struktur dan tata letak (layout) serta gaya (style) halaman web. Untuk interaksi yang lebih kompleks dan efek dinamis, pengetahuan tentang JavaScript juga sangat penting. Terutama, penting untuk mempelajari cara memasukkan dan menggunakan file JavaScript dengan aman dan benar di WordPress. wp_enqueue_script), serta belajar cara menggunakan pustaka JavaScript yang disediakan oleh WordPress itu sendiri.

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: