Halaman Utama/Pengetahuan./WordPress/Detail konten.

Ajaran Langsung Cara Membuat Tema WordPress Custom yang Sangat Fungsional

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

Mengapa memilih untuk membangun tema WordPress dari awal?

Di dunia open source, tersedia banyak tema WordPress yang gratis maupun berbayar, sehingga banyak pengguna lebih memilih untuk langsung mengunduh dan menggunakannya. Namun, memilih untuk membuat tema khusus dari nol dapat memberikan keuntungan yang tak terbandingkan. Pertama-tama, hal ini memberikan kontrol penuh kepada pengembang terhadap tampilan, fitur, dan kinerja situs web. Anda dapat menghilangkan semua kode dan fitur yang tidak diperlukan, sehingga menciptakan solusi yang ringan dan sesuai dengan kebutuhan proyek Anda, yang pada gilirannya dapat meningkatkan kecepatan pengunduhan situs dan pengalaman pengguna secara signifikan.

Kedua, tema kustom tidak akan mengalami masalah kompatibilitas dengan fitur inti atau plugin yang sudah terinstal saat diperbarui, seperti yang terjadi pada beberapa tema pihak ketiga. Anda juga dapat mengikuti praktik terbaik dan pedoman keamanan yang ditetapkan oleh pengembang WordPress inti, sehingga kode yang digunakan lebih mudah dipelihara dan aman dalam jangka panjang, yang sangat penting untuk proyek komersial. Terakhir, ini merupakan proses belajar yang sangat baik, yang akan memungkinkan Anda memahami lebih dalam tentang struktur hierarki template WordPress.WP_QueryTheme Customizer API, serta Hook (…)actions 和 filtersKonsep-konsep inti seperti ini sangat penting bagi setiap pengembang WordPress.

Langkah-langkah persiapan mencakup beberapa hal penting: pastikan Anda memiliki lingkungan pengembangan WordPress, baik yang berbasis lokal maupun online; editor kode yang andal, seperti VS Code atau PhpStorm; serta pemahaman dasar tentang HTML, CSS, PHP, dan JavaScript. Sekarang, mari kita mulai membuat file tema pertama kita.

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Mahir Membangun Tema Kustom。

Membangun struktur dasar dan file inti dari sebuah tema

Sebuah tema WordPress yang valid memerlukan setidaknya dua file inti:index.php 和 style.cssYang terakhir tidak hanya menyediakan gaya tampilan (style), tetapi juga berisi metadata yang menjelaskan tema tersebut kepada WordPress. Mari kita mulai dengan membuat direktori tema (theme directory).

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

Membuat direktori tema dan file skema (style sheet)

Pertama-tama, di dalam direktori instalasi WordPress Anda: wp-content/themes/ Dalam folder tersebut, buatlah sebuah direktori baru, misalnya… my-custom-themeSemua file tema akan diletakkan di sini.

Selanjutnya, buatlah (create it). style.css Anda perlu membuat sebuah file, lalu menambahkan blok komentar yang diperlukan di bagian awal file tersebut. Komentar-komentar ini diperlukan agar WordPress dapat mengenali tema yang Anda buat.

/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个为学习和实践而打造的强大自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Text Domain Digunakan untuk internasionalisasi; akan diperlukan saat memanggil fungsi penerjemahan nantinya.

Membangun template indeks dasar

index.php Ini adalah template default untuk suatu topik, sekaligus merupakan solusi terakhir (fallback) dalam struktur hierarki template. Template ini sangat mendasar (sederhana). index.php Kita dapat memastikan bahwa situs web dapat menampilkan kontennya dalam segala kondisi.

推荐阅读 Panduan lengkap untuk pengembangan tema WordPress: membangun tema kustomisasi berkinerja tinggi dari nol.。

<!DOCTYPE html>
<html no numeric noise key 1009>
<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 1006>
    <?php wp_body_open(); ?>

<header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 循环内容将在这里展示
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无内容。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>© Hak Cipta ….</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

Pada saat ini, cukup letakkan kedua file tersebut ke dalam direktori tema (theme directory), maka Anda akan dapat melihat dan mengaktifkan tema Anda di bagian “Appearance” -> “Themes” di panel administrasi WordPress. Meskipun tampilannya sangat sederhana, tema tersebut sudah memiliki fitur yang lengkap. Selanjutnya, kita perlu memperkenalkan konsep modularitas dan peningkatan fungsionalitas (modularization and feature enhancement) ke dalam tema tersebut.

Mengimplementasikan desain berlapis (template hierarchy) dan modularisasi

Untuk kejelasan dan kemudahan pemeliharaan kode, tidak sebaiknya semua struktur HTML dimasukkan ke dalam satu tempat. index.php Ya. Sistem hierarki template di WordPress memungkinkan kita untuk membuat file template khusus untuk berbagai jenis halaman.

Memisahkan bagian header, footer, dan sidebar

Membuat header.php、footer.php 和 sidebar.php Ini adalah langkah pertama dalam proses modularisasi.

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

将 index.php 中 <head> 到 <main> Bagian sebelumnya dipindahkan ke… header.php\n. Akan <footer> Bagian setelahnya dipindahkan ke… footer.phpKemudian, index.php Gunakan dalam bahasa Cina get_header() 和 get_footer() Fungsi tersebut memasukkan (mengintegrasikan) komponen-komponen tersebut ke dalam kode program.

<?php get_header(); ?>

<main>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无内容。</p>';
    endif;
    ?&gt;
</main>

<?php get_sidebar(); ?> <!-- 如果创建了侧边栏文件 -->
<?php get_footer(); ?>

Membuat template isi artikel

Untuk penampilan konten artikel, praktik terbaik adalah dengan membuat sebuah bagian template yang terpisah. content.php 或 template-parts/content.phpPindahkan logika penampilan yang ada di dalam siklus ke dalam bagian tersebut. Setelah itu… index.php Digunakan dalam perulangan (loop). get_template_part() Panggillah itu.

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

Fungsi ini akan pertama-tama mencari hal-hal seperti… content-video.php Format template khusus ini tidak ditemukan; dalam hal tersebut, sistem akan kembali ke versi sebelumnya (atau ke pengaturan default). content.php。

推荐阅读 Pengembangan Tema WordPress, Dari Pemula hingga Ahli: Panduan Inti untuk Membangun Situs Web Kustom.。

Mengintegrasikan fitur inti WordPress dengan penyesuaian tema

Sebuah tema yang kuat harus terintegrasi secara mendalam dengan fitur-fitur inti WordPress, seperti menu, widget, thumbnail artikel, dan alat pengaturan tema (theme customizer).

Mendaftarkan menu navigasi dan area alat tambahan (tools)

Dalam topik tersebut… functions.php Dalam berkas tersebut, digunakan… register_nav_menus() Alamat untuk mendaftar restoran.

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 
function my_custom_theme_setup() {
    // 注册主菜单
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-custom-theme' ),
        'footer'  => esc_html__( '页脚菜单', 'my-custom-theme' ),
    ) );

// 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Pada saat yang sama, kita juga dapat mendaftarkan area untuk alat-alat tambahan (sidebar).

function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( '在此添加小工具。', 'my-custom-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_custom_theme_widgets_init' );

在 header.php Atau dalam file template, gunakan… wp_nav_menu() Tampilkan menu.

Menambahkan opsi untuk pengaturan tema (theme customizer)

Customizer memungkinkan pengguna untuk melihat pratinjau (preview) dan mengubah pengaturan tema secara real-time. Kita dapat menggunakan fitur ini untuk… WP_Customize_Manager Menambahkan opsi ke objek.

function my_custom_theme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'theme_options', array(
        'title'    => __( '主题选项', 'my-custom-theme' ),
        'priority' => 130,
    ) );

// 添加一个页脚版权文本设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 Your Company',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

$wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'theme_options',
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );

Lalu… footer.php Di dalamnya, digunakan… get_theme_mod() Keluarkan nilai ini.

<p><?php echo esc_html( get_theme_mod( 'footer_copyright_text', '© 2026 Your Company' ) ); ?></p>

Meningkatkan kinerja dan keamanan tema (theme).

Langkah kunci terakhir dalam membangun sebuah tema adalah memastikan bahwa tema tersebut dapat diimplementasikan dengan cepat dan aman.

Mengunduh skrip dan gaya (styles) dengan benar

Harus digunakan. wp_enqueue_scripts Fungsi “hook” digunakan untuk memuat file CSS dan JavaScript, sehingga memastikan bahwa hubungan antar file-file tersebut dapat ditangani dengan benar dan menghindari pemuat ulang yang tidak perlu.

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 加载Google Fonts
    wp_enqueue_style( 'my-custom-theme-fonts', 'https://fonts.googleapis.com/css2?family=...' );

// 加载主JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );

// 为评论回复脚本添加条件加载
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Menerapkan langkah-langkah keamanan dasar

Jangan pernah mempercayai output asli dari pengguna atau basis data. Selalu melakukan proses “escaping” terhadap semua konten dinamis.

  • Gunakan esc_html(), esc_attr(), esc_url() Mengubah teks yang akan ditampilkan dalam atribut HTML atau isi halaman menjadi format yang aman (terlindungi dari serangan seperti penyalahgunaan karakter khusus).
  • Sebelum memasukkan data ke dalam basis data, gunakan… sanitize_text_field() dll. untuk pembersihan.
  • Gunakan dalam template. the_title(), the_content() Fungsi-fungsi seperti itu sudah memiliki mekanisme ekstraksi (pengambilan data) dan konversi (pengubah format data) yang terintegrasi. Untuk bidang data yang disesuaikan (custom fields), gunakan metode yang sesuai. echo esc_html( get_post_meta( $post->ID, 'key', true ) );。

Menyimpulkan.

Dengan langkah-langkah di atas, kita telah menyelesaikan pembuatan kerangka tema WordPress kustom yang sangat fungsional. Kita memulainya dengan membuat komponen dasar… style.css 和 index.php Pertama-tama, kami mulai secara bertahap memperkenalkan konsep hierarki template dan desain berbasis modul, serta memisahkan bagian header dan footer dari halaman utama. Setelah itu, kami melanjutkan proses pengembangan dengan… functions.php Fitur-fitur inti WordPress telah terintegrasi, seperti menu navigasi, widget, dan thumbnail artikel, serta menyediakan antarmuka pengaturan yang user-friendly melalui tema customizer. Di akhir, kami menekankan pentingnya penggunaan… wp_enqueue_scripts Pentingnya mengoptimalkan proses pengunduhan sumber daya (resource loading) serta menerapkan langkah-langkah keamanan seperti mekanisme escape pada hasil pengolahan data (output escaping).

Meskipun topik ini bersifat dasar, strukturnya jelas dan mengikuti praktik terbaik, sehingga menciptakan dasar yang kuat untuk menambahkan fitur-fitur kompleks di kemudian hari, seperti jenis artikel kustom, opsi tema tingkat lanjut, pengambilan data menggunakan AJAX, dan lainnya. Teruslah mengeksplorasi WordPress Codex serta sumber daya pengembang lainnya, dan kamu akan dapat terus memperluas kemampuan tema ini.

FAQ - Pertanyaan yang Sering Diajukan.

Apa bahasa pemrograman yang harus dikuasai untuk membuat tema WordPress?

Membangun sebuah tema WordPress yang fungsional secara lengkap memerlukan pemahaman yang baik tentang PHP, HTML, CSS, dan JavaScript. PHP digunakan untuk menangani logika di sisi server dan berinteraksi dengan inti WordPress; HTML membentuk kerangka halaman; CSS bertanggung jawab atas tata letak dan gaya tampilan; sedangkan JavaScript digunakan untuk menciptakan interaksi pengguna serta efek dinamis di halaman web. Memiliki pengetahuan dasar tentang SQL juga akan membantu dalam memahami cara WordPress melakukan kueri data.

Apa fungsi khusus dari file functions.php dalam sebuah tema?

functions.php File tersebut merupakan “pusat fungsionalitas” dari sebuah tema, dan memainkan peran yang sangat penting. File ini bukanlah sebuah plugin yang diunduh setiap kali halaman dibuka, melainkan merupakan bagian dari tema itu sendiri. Kode yang Anda tambahkan ke dalam file ini dapat mengubah perilaku default dari tema, meregistrasikan fitur baru (seperti menu atau area widget), menambahkan dukungan untuk fitur tertentu (seperti thumbnail artikel), mengatur urutan pengunduhan skrip dan gaya (style), serta mendefinisikan berbagai fungsi kustom. File ini berfungsi sebagai jembatan yang menghubungkan tema Anda dengan fitur-fitur inti dari WordPress.

Bagaimana cara membuat tema WordPress yang saya buat mendukung berbagai bahasa?

Membuat suatu tema mendukung berbagai bahasa (internasionalisasi/i18n dan lokalisasi/l10n) terutama melibatkan dua langkah. Pertama, style.css Untuk penjelasan atau keterangan yang terdapat di awal sebuah teks, serta semua string yang perlu diterjemahkan, gunakan tanda seperti “Catatan: …” atau “Perlu diterjemahkan: …”. __（'Text', 'text-domain'） 或 _e（'Text', 'text-domain'） Lakukan pengemasan fungsi terjemahan tersebut. Selanjutnya, gunakan alat seperti Poedit untuk memindai file tema dan menghasilkan (generate) konten yang diperlukan. .pot File template, lalu buat file yang sesuai untuk masing-masing bahasa. .po Dan yang telah dikompilasi .mo File tersebut kemudian diletakkan di dalam bagian yang berkaitan dengan topik tersebut. /languages/ Berada di dalam direktori tersebut. Pengguna dapat mengelola terjemahan-terjemahan ini dengan menggunakan plugin seperti Loco Translate.

Bagaimana cara memilih tema dan subtema (child theme) yang sesuai?

Hal ini tergantung pada tujuan spesifik dan model pengembangan Anda. Jika Anda memulai dari nol untuk membuat desain dan fitur yang unik untuk sebuah proyek tertentu, dan tidak berencana untuk mengandalkan gaya serta template dari tema induk lainnya, maka membuat tema khusus (custom theme) merupakan pilihan yang tepat. Kelebihannya adalah kode yang digunakan sepenuhnya mandiri (tidak bergantung pada kode dari tema induk) dan tidak ada redundansi (tidak ada kode yang berulang).

Subtema digunakan untuk memodifikasi atau memperluas tema induk yang sudah ada. Ketika Anda ingin menyesuaikan tema populer seperti Astra atau GeneratePress, namun tetap ingin dapat mengupdate tema induk dengan aman di masa depan tanpa kehilangan modifikasi yang telah Anda buat, maka Anda perlu menggunakan subtema. Subtema hanya berisi file-file kustom Anda sendiri (seperti…) style.css, functions.php File template yang digunakan untuk penutupan (dan file template lainnya) mewarisi semua fitur dari tema induk. Ini merupakan metode kustomisasi yang direkomendasikan oleh WordPress secara resmi, dan dapat memastikan kompatibilitas terhadap pembaruan hingga tingkat tertinggi.

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: