Pemula dalam Pengembangan Tema WordPress: Bangun Skin Situs Web Pertamamu dari Nol

Konsep Dasar Pengembangan Tema WordPress

Sebelum memulai menulis kode, sangat penting untuk memahami komponen dasar dari sebuah tema WordPress. Pada dasarnya, sebuah tema WordPress merupakan kumpulan berbagai file yang bersama-sama mendefinisikan tampilan dan fungsi dari sebuah situs web. File-file tersebut mencakup file template, file gaya (style sheet), file fungsi (function files) yang bersifat opsional, skrip (scripts), dan lainnya.

File inti (core file) adalah…style.css和index.phpDi antaranya,style.cssBukan hanya berfungsi sebagai lembar gaya (style sheet) dari sebuah tema, tetapi juga sebagai “kartu identitas” dari tema tersebut. Komentar di bagian awal file tersebut berisi informasi penting seperti nama tema, penulis, deskripsi, versi, dan lainnya. WordPress menggunakan informasi-informasi ini untuk mengenali dan mengelola tema tersebut di belakang layar.

File template berfungsi untuk mengontrol logika tampilan dari berbagai halaman. Misalnya,single.phpDigunakan untuk menampilkan satu artikel saja.page.phpDigunakan untuk menampilkan halaman yang independen (tidak tergantung pada halaman lain).archive.phpDigunakan untuk menampilkan daftar arsip artikel. File-file tersebut mengikuti sistem hierarki template WordPress; ketika template tertentu tidak ditemukan, sistem akan secara otomatis beralih ke template yang lebih umum, dan jika template tersebut juga tidak ada, sistem akan kembali ke template default.index.php。

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Membuat Tampilan Situs Web Khusus Anda Dari Nol。

File kunci lainnya adalah…functions.phpFile ini bukanlah file template, melainkan file fungsi (function file) dari sebuah tema. Di dalamnya, Anda dapat menambahkan fitur khusus, mendaftarkan menu dan sidebar (area alat tambahan), memberikan dukungan untuk gambar khas (gambar thumbnail artikel), serta mengatur penggunaan file JavaScript dan CSS secara bertahap (secara berurutan). File ini ibarat “otak” dari sebuah tema, yang bertanggung jawab atas pemrosesan logika dan pengembangan fitur-fitur tambahan.

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%).

halaman akses

Memahami file-file dasar tersebut dan fungsinya merupakan langkah pertama dalam membangun sebuah tema yang stabil dan mudah diperawat.

Membangun lingkungan pengembangan lokal dan membuat struktur tema

Sebelum memulai proses pengkodean, sangat penting untuk membangun lingkungan pengembangan lokal yang efisien. Alat pengembangan lokal seperti Local by Flywheel, XAMPP, atau MAMP sangat direkomendasikan, karena alat-alat ini dapat dengan cepat membangun lingkungan kerja WordPress di komputer lokal yang mencakup Apache, MySQL, dan PHP. Dengan lingkungan ini, Anda dapat melakukan pengembangan secara offline, serta melakukan pengujian dan debugging dengan bebas, tanpa mempengaruhi situs web yang aktif di internet.

Setelah lingkungan siap, Anda perlu melanjutkan ke direktori instalasi WordPress.wp-content/themes/Di dalam folder tersebut, buatlah sebuah folder baru sebagai direktori untuk topik Anda. Nama folder tersebut sebaiknya terdiri dari huruf kecil, angka, dan tanda hubung (-), serta bersifat deskriptif. Contohnya:my-first-theme。

Selanjutnya, buatlah dua file paling dasar. Yang pertama adalah…style.cssPada bagian awal file tersebut, harus terdapat komentar dengan format berikut:

推荐阅读 Apa itu pengembangan tema WordPress?。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

“Text Domain” digunakan untuk keperluan internasionalisasi, dan biasanya sama dengan nama direktori tema (theme directory). Kemudian adalah…index.phpIni adalah file template yang paling dasar; untuk sementara waktu, file tersebut hanya perlu berisi struktur HTML yang sederhana saja:

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    <header>
        <h1>Topik pertamaku</h1>
    </header>
    <main>
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_content();
            endwhile;
        endif;
        ?>
    </main>
    <footer>
        <p>© Hak Cipta Dilindungi Undang-Undang</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Saat ini, masuklah ke panel administrasi WordPress Anda, lalu ke menu “Tampilan” (Appearance) -> “Tema” (Themes). Di sana, Anda seharusnya dapat melihat tema baru tersebut dan mengaktifkannya. Meskipun sederhana, tema ini sudah cukup untuk digunakan.

Penjelasan Rinci tentang File Template Inti dan Penggunaan Perulangan (Core Template Files and Loop Usage)

WordPress menggunakan “The Loop” untuk mengambil isi artikel dari basis data dan menampilkannya di halaman web. The Loop merupakan konsep inti dalam pengembangan tema WordPress, dan hampir semua file template dibangun berdasarkan konsep ini.

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.

halaman akses

Memahami siklus utama (main loop) WordPress

Struktur dasar dari perulangan (loop) adalah sekumpulan instruksi yang dijalankan berulang-ulang sesuai dengan kondisi tertentu.if和whilePerintah tersebut memeriksa apakah ada artikel dalam kueri saat ini, kemudian mengulasi setiap artikel tersebut sehingga data-data artikel (judul, isi, penulis, dll.) dapat digunakan oleh tag-tag template. Struktur perulangan yang tipikal adalah sebagai berikut:

<p>   
      
</p>
        <!-- 在这里输出文章内容，例如： -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <br />
    <p>Tidak ditemukan artikel apa pun.</p>
<?php endif; ?>

the_post()Fungsi ini digunakan untuk mengatur data artikel yang sedang aktif, sehingga data tersebut dapat digunakan setelahnya.the_title()、the_content()Tag template seperti “etc.”.

\nMembuat file template yang sering digunakan.

Agar topik tersebut dapat ditangani secara profesional untuk berbagai jenis halaman, Anda perlu membuat beberapa file template inti. Yang pertama adalah…header.php和footer.phpDigunakan untuk memisahkan kode header (bagian atas halaman) dan kode footer (bagian bawah halaman) dari…index.phpDipisahkan dari yang lain.header.phpDi dalamnya, letakkan dari…到Konten yang dimulai setelah tag; pada...footer.phpLetakkan di dalamnya.Kemudian,index.phpDi dalamnya, digunakan…get_header()和get_footer()Gunakan fungsi untuk mengimpor (mengunduh) mereka.

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Kode Dasar hingga Trik Praktis。

Selanjutnya, buatlahsingle.phpDigunakan untuk satu artikel saja.page.phpDigunakan untuk halaman-halaman yang independen. Anda dapat menggunakan (isi/fungsi tertentu) di dalam file-file ini terlebih dahulu.get_header()和get_footer()Lalu, tambahkan siklus (loop) dan struktur HTML yang khusus digunakan untuk satu artikel atau halaman tertentu. Misalnya,single.phpDi dalamnya, mungkin akan terjadi pemanggilan (call) terhadap suatu fungsi atau prosedur tertentu.the_post_thumbnail()Untuk menampilkan gambar-gambar khas dari artikel tersebut…page.phpTanggal publikasinya mungkin tidak ditampilkan.

Terakhir, buatlah (create it).archive.phpUntuk menangani halaman arsip yang berisi kategori, tag, penulis, dan lainnya, Anda biasanya menggunakan…the_archive_title()Berikut adalah daftar judul artikel yang telah diarsipkan, disertai ringkasan atau daftar isi dari beberapa artikel tersebut:

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.

halaman akses

Dengan memisahkan template-template ini, struktur tema Anda akan menjadi lebih jelas dan mudah dikelola.

Meningkatkan fitur dan tampilan tema (theme)

Setelah kerangka tema dasar selesai dibangun, langkah selanjutnya adalah menambahkan fitur dan mempercantik tampilannya. Hal ini dilakukan terutama melalui…functions.php和style.cssUntuk melakukannya.

Menambahkan fitur inti melalui file fungsi

functions.phpFile merupakan tempat utama untuk menambahkan fitur ke sebuah tema. Pertama-tama, Anda harus menambahkan dukungan untuk fitur-fitur dasar ke tema tersebut, dan hal ini dapat dilakukan dengan…add_theme_support()Implementasi fungsi.

function my_first_theme_setup() {
    // 让主题支持文章和评论的RSS feed链接
    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' ) );
    // 让主题支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Kedua, Anda perlu mendaftarkan posisi menu utama dan sidebar (area alat tambahan) untuk tema tersebut. Gunakan prosedur yang tersedia untuk mendaftarkan menu tersebut.register_nav_menus()Fungsi:

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'init', 'my_first_theme_menus' );

Kemudian, Anda dapat menggunakan file template tersebut (seperti…)header.phpDigunakan dalam (…)wp_nav_menu( array( 'theme_location' => 'primary' ) );Untuk menampilkan menu.

Mengintegrasikan gaya (styles) dan skrip (scripts)

Cara yang benar untuk mengintegrasikan file CSS dan JavaScript adalah dengan menggunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi-fungsi tersebut perlu diunggah (dimount) ke sistem atau platform yang sesuai.wp_enqueue_scriptsDi atas kait tersebut. Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar dan mencegah terjadinya pengunduhan ulang (reloading) yang tidak perlu.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入Google字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );
    // 引入主题的JavaScript文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menulis gaya dasar (basic styles)

Terakhir,style.cssDi sini, Anda dapat mulai menulis kode gaya (style). Mulailah dengan mengatur ulang gaya default browser, lalu secara bertahap tambahkan gaya tambahan sesuai kebutuhan Anda.body、headerNavigasi menu, isi artikel, sidebar, dan…footerDefinisikan gaya tampilan situs web Anda. Gunakan kueri media desain responsif (responsive design media queries) untuk memastikan tema Anda terlihat baik di perangkat ponsel, tablet, maupun desktop. Dengan terus melakukan penyesuaian dan pengujian, tampilan situs web Anda akan perlahan menjadi lebih menarik dan profesional.

Menyimpulkan.

Dari membuat sebuah konten yang mencakupstyle.css和index.phpMulai dari folder sederhana, hingga proses pembangunan (construction).header.php、footer.php、single.phpMulai dari file template profesional, hingga proses penggunaannya (atau penerapannya).functions.phpDengan menambahkan fitur tema, menu, dan skrip ke dalam file tersebut, Anda telah menyelesaikan tahap utama dalam pembuatan tema WordPress pertama Anda. Proses ini tidak hanya memungkinkan Anda memahami konsep-konsep penting seperti struktur template, penggunaan perulangan (looping), dan hook aksi (action hooks), tetapi juga membantu Anda memahami bagaimana tema WordPress memisahkan data, logika, dan tampilan (presentation layer). Teruslah berlatih, dan cobalah menambahkan lebih banyak template ke dalam tema Anda.search.php、404.phpDengan fitur dasar dan fitur lanjutan (seperti dukungan untuk jenis artikel yang dapat disesuaikan), Anda akan dapat membuat skin situs web yang lebih kuat dan unik.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress, seseorang harus menguasai PHP?

Ya, PHP merupakan bahasa pemrograman inti dari WordPress. Untuk mengembangkan tema yang memiliki fungsi yang lengkap, Anda perlu menguasai dasar-dasar sintaks PHP, terutama pemahaman tentang fungsi, pernyataan kondisional, perulangan, serta cara berinteraksi dengan API WordPress (seperti tag template dan fungsi hook). HTML dan CSS merupakan dasar untuk membangun antarmuka pengguna (frontend), sedangkan JavaScript digunakan untuk menambahkan efek interaktif.

Apa perbedaan antara file functions.php dari tema dan plugin?

functions.phpFungsi-fungsi dalam file tersebut terikat dengan tema yang sedang aktif. Jika Anda mengganti tema, fungsi-fungsi tersebut akan tidak lagi tersedia. Fitur ini paling cocok untuk ditambahkan ke dalam file tersebut jika fungsi tersebut sangat terkait dengan tampilan visual dan tata letak (layout) dari tema tersebut, misalnya penempatan menu khusus untuk tema tersebut, sidebar, atau definisi kode singkat (shortcode) yang khas untuk tema tersebut.

Fungsi yang disediakan oleh plugin tersebut independen dari tema yang digunakan; tidak peduli tema apa yang dipilih, fungsi plugin umumnya akan tetap tersedia. Plugin lebih cocok digunakan untuk menambahkan fitur-fitur umum yang tidak berkaitan dengan tampilan tema, seperti formulir kontak, optimisasi SEO, dan penyimpanan cache (cache). Sebuah praktik yang baik adalah membuat fitur-fitur umum yang mungkin dapat digunakan di berbagai tema menjadi plugin.

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Untuk membuat suatu tema mendukung berbagai bahasa, atau dengan kata lain menerapkan konsep internasionalisasi (i18n), yang utama dilakukan adalah mengemas semua teks yang ditampilkan kepada pengguna dalam kode program. Dalam file PHP, hal ini dapat dilakukan dengan menggunakan teknik tertentu.__()、_e()等翻译函数来输出文本。在JavaScript文件中，也需要通过wp_set_script_translations()Lakukan pemrosesan yang serupa.

Anda perlu…style.css“Text Domain” danfunctions.phpPanggilan di tengah (mid-call)load_theme_textdomain()Saat melakukan hal tersebut, pastikan untuk menentukan sebuah domain teks (Text Domain) yang unik. Setelah itu, gunakan alat seperti Poedit untuk memindai kode tema Anda dan menghasilkan (generate) file yang diperlukan..potFile template untuk penerjemahan; penerjemah dapat menggunakan file ini sebagai dasar untuk melakukan pekerjaan mereka..po和.moFile bahasa. Letakkan file-file bahasa tersebut di dalam folder tema (theme folder)./languages/Cukup letakkan di dalam direktori tersebut.

Bagaimana cara men-debug kesalahan dalam tema WordPress saat proses pengembangan?

Mengaktifkan mode debug di WordPress merupakan kunci untuk menemukan dan memecahkan masalah. Hal ini dapat dilakukan dengan mengedit file konfigurasi WordPress.wp-config.phpFile, akan…WP_DEBUGKonstanta diatur ketrueAnda juga dapat mengaktifkan keduanya secara bersamaan.WP_DEBUG_LOG(Catatkan kesalahan ke dalam berkas log) danWP_DEBUG_DISPLAY(Terdapat kesalahan yang ditampilkan di halaman tersebut.) Harap perhatikan: sebelum situs web diluncurkan, pastikan untuk menonaktifkan mode debug (mode pelacakan kesalahan).

Selain itu, menggunakan alat pengembang browser (buka dengan menekan F12) untuk memeriksa struktur HTML, gaya CSS, dan kesalahan di konsol JavaScript merupakan cara yang sangat penting dalam proses debugging (pemecahan masalah) pada bagian frontend (bagian kode yang ditampilkan di halaman web). Untuk logika PHP yang kompleks, penggunaan alat-alat tersebut juga sangat diperlukan.error_log()Fungsi atau plugin debugging khusus (seperti Query Monitor) juga dapat sangat meningkatkan efisiensi.