Panduan Dasar Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda Dari Nol

Mengapa mengembangkan tema WordPress sendiri?

Setelah berinteraksi dengan banyak tema siap pakai, para pengembang seringkali terinspirasi untuk membuat tema mereka sendiri. Hal ini tidak hanya dilakukan untuk menciptakan desain visual yang unik, tetapi juga untuk mendapatkan kendali penuh atas kode yang digunakan. Tema-tema yang tersedia di pasaran sering kali memuat terlalu banyak fitur dan kode yang mungkin tidak dibutuhkan, yang dapat menyebabkan situs web berjalan lambat, menimbulkan risiko keamanan, atau mengalami masalah kompatibilitas saat diperbarui di masa depan.

Dengan membangun tema dari nol, Anda dapat memastikan bahwa kode yang digunakan sederhana, efisien, dan aman. Proses ini juga merupakan cara yang sangat baik untuk memahami lebih dalam cara kerja inti WordPress. Anda akan mempelajari bagaimana struktur template bekerja, bagaimana data diambil dari basis data dan ditampilkan di halaman, serta cara menggunakannya.functions.phpFungsi-fungsi sebuah file dapat diperluas melalui aksi (actions) dan hook filter. Pada akhirnya, Anda akan mendapatkan alat yang benar-benar disesuaikan dengan kebutuhan proyek Anda, dan pemeliharaan serta pengembangannya sepenuhnya berada di bawah kendali Anda.

Pengaturan Lingkungan dan Alat Sebelum Memulai

Sebelum menulis baris kode pertama, sangat penting untuk membangun lingkungan pengembangan lokal yang efisien. Hal ini memungkinkan Anda melakukan pengujian dan debugging dengan bebas tanpa mempengaruhi situs web yang berjalan di server. Anda dapat memilih perangkat lunak lingkungan terintegrasi seperti Local by Flywheel, XAMPP, atau MAMP, yang dapat menginstal Apache, MySQL, dan PHP dengan satu klik. Pastikan bahwa versi PHP yang Anda gunakan sesuai dengan persyaratan instalasi WordPress Anda; umumnya versi 7.4 atau lebih baru.

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Membuat Tema Kustom Dari Nol。

Editor kode merupakan senjata utama Anda. Visual Studio Code, PhpStorm, atau Sublime Text semuanya merupakan pilihan yang sangat baik; mereka menyediakan fitur penyorotan sintaks, autocompletion kode, dan alat debugging yang dapat sangat meningkatkan efisiensi pengembangan. Selain itu, Anda juga memerlukan browser modern (seperti Chrome atau Firefox) beserta alat pengembangnya, untuk melakukan debugging HTML, CSS, dan JavaScript secara real-time.

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

Terakhir, Anda memerlukan instalasi WordPress yang baru dan bersih. Jangan melakukan pengujian pengembangan tema langsung di situs bisnis utama Anda. Setelah instalasi selesai, pilih struktur tautan non-default di bagian “Pengaturan -> Tautan Abadi” (Settings -> Permanent Links), misalnya “Nama Artikel” (Article Name). Hal ini akan membantu membangun aturan penulisan ulang (rewrite rules) yang benar sejak awal.

Membangun struktur dasar file untuk tema (theme)

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di/wp-content/themes/Folder-folder dalam direktori tersebut berisi serangkaian file yang memiliki kegunaan tertentu. Mari kita mulai dengan membuat file yang paling dasar.

Pertama-tama, di dalam dokumen Anda…/wp-content/themes/Buatlah sebuah folder baru di dalam direktori tersebut, dan beri nama folder tersebut sesuai dengan topik Anda, misalnya:my-first-themeSemua file tema akan diletakkan di sini.

Kemudian, buatlah dua file inti yang sangat penting. Yang pertama adalah file berisi kode gaya (stylesheet).style.cssKomentar di bagian atas kode tersebut tidak hanya digunakan untuk mendefinisikan gaya tampilan (style), tetapi juga merupakan “kartu identitas” yang digunakan oleh WordPress untuk mengenali tema tersebut. Isinya harus sesuai dengan contoh berikut:

推荐阅读 Praktik Pengembangan Tema WordPress: Membangun Tema Situs Web Tingkat Profesional Dari Nol。

/*
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 kedua yang diperlukan adalah…index.phpIni merupakan template default untuk semua halaman. Sebagai titik awal, template ini dapat dianggap sebagai struktur PHP/HTML paling dasar yang digunakan di seluruh situs web.

<!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>© Situs Web Saya</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Pada saat ini, tema Anda telah diidentifikasi dan diaktifkan oleh WordPress, meskipun fungsionalitasnya sangat terbatas.

Memahami dan menerapkan struktur hierarki template

Salah satu daya tarik utama WordPress terletak pada “struktur hierarki templat” (template hierarchy) yang sangat kuat. Aturan-aturan ini menentukan bahwa untuk setiap permintaan halaman di situs web, WordPress akan secara otomatis mencari dan memuat file template yang sesuai untuk menampilkan kontennya. Dengan memahami struktur ini, Anda akan memegang kunci dalam pengembangan tema (theme) untuk situs web Anda.

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

Proses kerjanya dapat disederhanakan sebagai berikut: Ketika sebuah halaman diminta, WordPress akan mencari berkas template berdasarkan jenis halaman tersebut (misalnya halaman artikel, halaman biasa, arsip kategori) serta beberapa kondisi tertentu (seperti ID artikel, slug kategori), dengan mengikuti daftar prioritas yang telah ditentukan. Sebagai contoh, untuk sebuah artikel blog, WordPress akan mencari berkas template secara berurutan:single-{post-type}-{slug}.php、single-{post-type}.php、single.phpDan terakhir,singular.php…sampai file pertama yang ada ditemukan. Jika tidak ada satupun file yang ditemukan, maka proses akan kembali ke tahap awal.index.php。

Mari kita prakтиkkan dan membuat beberapa file template yang penting. Yang pertama adalah…header.php和footer.phpDigunakan untuk memodulasi kode bagian atas (header) dan bawah (footer) halaman.index.phpKode bagian atas dan bawah tersebut perlu dipindahkan ke dalam kedua berkas tersebut, lalu digunakan sesuai kebutuhan.get_header()和get_footer()Fungsi-fungsi tersebut memanggil mereka.

Selanjutnya, buatlah satu…page.phpDigunakan untuk menampilkan halaman yang terpisah, satu per satu.single.phpDigunakan untuk menampilkan artikel individu. Anda dapat menggunakannya dalam template-template ini.the_title()和the_content()Tag template digunakan untuk menghasilkan konten tertentu.

推荐阅读 Pemulaan dalam Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda dari Nol。

Mengembangkan fitur tema melalui file functions.php

Subject:functions.phpFile tersebut merupakan “kotak alat” (toolbox) Anda, yang memungkinkan Anda menambahkan fitur dan mengubah perilaku tema dengan cara menambahkan kode PHP serta memanggil fungsi dan hook bawaan WordPress. File ini akan diunduh secara otomatis saat tema diinisialisasi.

Salah satu kegunaan dasar dan penting adalah untuk mendaftarkan menu dan sidebar (area alat tambahan). Misalnya, dengan menggunakan…register_nav_menus()Fungsi ini digunakan untuk menentukan posisi menu navigasi dalam deklarasi tema:

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

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

Demikian pula, Anda juga dapat menggunakan…register_sidebar()Fungsi tersebut digunakan untuk membuat area alat tambahan (toolkit). Tugas kunci lainnya adalah melalui…add_theme_support()Fungsi-fungsi tersebut mengaktifkan berbagai fitur untuk tema Anda, seperti thumbnail artikel, logo kustom, dukungan untuk formulir HTML5, dan lainnya.

Selain itu, Anda juga perlu memuat lembar gaya dan file skrip Anda dengan benar. Jangan pernah menggunakan tag atau untuk mengimpor secara langsung di file template. Cara yang benar adalah dengan menggunakanwp_enqueue_style()和wp_enqueue_script()Fungsi, dan memasangnya kewp_enqueue_scriptsDi kait ini, barulah WordPress dapat mengelola hubungan ketergantungan (dependencies) dan urutan pengunduhan (loading order) antar komponen.

Menerapkan gaya desain (style) dan menambahkan interaktivitas pada aplikasi

Sebuah tema yang tidak memiliki gaya (style) hanyalah “kerangka” saja. Dengan menulis kode CSS, Anda dapat mendefinisikan tampilan visual situs web, termasuk tata letak (layout), warna, font, dan desain yang responsif (mampu beradaptasi dengan berbagai ukuran layar). Disarankan untuk mengorganisir kode CSS Anda secara termodul (dalam bagian-bagian yang terstruktur). Anda juga bisa mempertimbangkan penggunaan preprocessor seperti Sass untuk memudahkan pengelolaan kode tersebut. Namun, intinya tetaplah pada penentuan gaya visual situs web itu sendiri.style.cssPenulisan kode tersebut.

Untuk memastikan kompatibilitas di berbagai browser dan tata letak yang responsif, CSS Anda sebaiknya dimulai dengan mengatur ulang (reset) atau menstandarkan gaya tampilan (styles), kemudian mendefinisikan gaya global, dan baru setelah itu gaya khusus untuk komponen tertentu. Manfaatkan sepenuhnya fitur-fitur yang tersedia di WordPress untuk mencapai hal ini.body_class()和post_class()Fungsi-fungsi tersebut akan secara dinamis menghasilkan nama kelas CSS berdasarkan halaman yang sedang ditampilkan, sehingga Anda dapat dengan akurat menentukan dan menulis kode gaya (style) yang diperlukan.

Interaktivitas pada dasarnya bergantung pada JavaScript. Sama seperti halnya dengan tabel gaya (style sheets), Anda sebaiknya menggunakan JavaScript untuk mencapai interaktivitas yang diinginkan.wp_enqueue_script()Untuk menambahkan file JavaScript dengan aman, sebuah praktik terbaik adalah dengan mendaftarkan skrip Anda dan mengenkapsulkannya dalam sebuah fungsi.

function mytheme_scripts() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Perhatikan parameter terakhir.trueHal tersebut berarti skrip akan diunduh dan dimuat di bagian bawah halaman, dan umumnya ini merupakan kebiasaan yang baik. Untuk skrip yang memerlukan ketergantungan pada pustaka seperti jQuery, ketergantungan tersebut harus dideklarasikan dalam parameter array.

Menyimpulkan.

Membangun tema kustom pertama Anda untuk WordPress adalah proses yang bertahap. Proses ini dimulai dengan memahami alasan mengapa Anda perlu mengembangkan tema tersebut sendiri, kemudian dilanjutkan dengan membangun lingkungan pengembangan yang sesuai, membuat struktur file dasar, memahami secara mendalam esensi dari hierarki template, hingga akhirnya mampu mengimplementasikan fitur-fitur yang diinginkan dalam tema tersebut.functions.phpPusat pengendali yang kuat ini berfungsi untuk memperluas fitur-fitur sebuah situs web, dan akhirnya “diberi kehidupan” serta “kepribadian” melalui penggunaan CSS (Cascading Style Sheets) dan JavaScript. Proses ini tidak hanya mengajarkan Anda cara membuat sebuah tema (tema visual untuk situs web), tetapi yang lebih penting, memungkinkan Anda memahami cara kerja WordPress serta filosofi yang mendasari pemisahan data dari tampilan (data dari presentasi).

Pengalaman praktis adalah guru terbaik. Jangan takut dengan tingkat kerumitan yang ada di awal; mulailah dari hal yang paling sederhana saja.index.php和style.cssMulailah dengan mengaktifkan tema yang Anda pilih, lalu tambahkan file template dan fitur baru secara bertahap. Setiap kali menambahkan sesuatu, ujilah fungsi tersebut dan perhatikan perubahannya. Dokumen resmi WordPress serta kode sumbernya merupakan sumber belajar yang terbaik. Saat Anda selesai membuat tema pertama Anda—meskipun sangat sederhana—Anda sudah menjadi salah satu pengembang WordPress.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema diperlukan keahlian khusus dalam PHP?

Meskipun kemampuan yang mahir dalam PHP sangat membantu untuk pengembangan tingkat lanjut, memulai pengembangan tema WordPress tidak memerlukan Anda untuk menjadi seorang ahli PHP. Anda hanya perlu memahami sintaks dasar PHP, seperti variabel, array, fungsi, pengecekan kondisi, dan perulangan. WordPress menyediakan banyak fungsi bawaan (tag template) serta sistem hook yang jelas, yang dapat Anda gunakan dengan mudah, seolah-olah Anda sedang “membangun sesuatu dari blok-blok”. Seiring proses belajar, keterampilan PHP Anda akan secara alami meningkat.

Bagaimana cara menampilkan daftar artikel berdasarkan tema saya di frontend?

Menampilkan daftar artikel di halaman utama, kategori, atau arsip merupakan kebutuhan umum dalam sebuah aplikasi berbasis tema. Anda perlu melakukan hal ini dalam file template yang sesuai (misalnya, file template untuk halaman utama, halaman kategori, atau halaman arsip).home.php、archive.php、index.phpDalam penggunaan WordPress, Anda akan menggunakan siklus utama (main loop) untuk mengontrol alur eksekusi kode program. Biasanya, Anda akan menggunakan…if ( have_posts() )和while ( have_posts() )Kombinasi tersebut digunakan untuk menelusuri isi artikel, dan di dalam siklus (loop), proses tertentu dilakukan menggunakan kombinasi tersebut.the_title()、the_excerpt()、the_permalink()Gunakan fungsi-fungsi tertentu untuk menampilkan judul, ringkasan, dan tautan setiap artikel.

Bagaimana cara menambahkan halaman pengaturan khusus untuk sebuah tema?

Ketika fitur-fitur tema Anda menjadi semakin kompleks dan memerlukan opsi konfigurasi bagi pengguna, seperti mengganti skema warna atau mengunggah logo, Anda dapat memanfaatkan “Customizer” (Pengaturan Khusus) atau API “Options Page” (Halaman Opsi) yang tersedia di WordPress. Metode yang lebih baru dan direkomendasikan adalah menggunakan “Theme Customizer”, yang memungkinkan Anda untuk melakukan pengaturan tersebut dengan cara yang lebih mudah dan terstruktur.functions.phpGunakan dalam bahasa Cina$wp_customize->add_setting()和$wp_customize->add_control()Tambahkan pengaturan dan kontrol untuk memberikan pengalaman konfigurasi yang memungkinkan pengguna melihat pratinjauan secara real-time.

Apa hubungan antara subtopik (subtopic) dan topik utama (parent topic)?

Subtema merupakan fitur yang sangat kuat yang mewarisi semua fitur, gaya, dan template dari tema lain (tema induk). Tujuan utamanya adalah untuk memodifikasi, mengganti, atau memperluas tema induk tanpa perlu mengubah file tema induk tersebut secara langsung. Membuat sebuah subtema sangat cepat; Anda hanya perlu sebuah file yang berisi komentar header yang diperlukan.style.cssDan satu orang lagi.functions.phpFile: Ketika WordPress tidak dapat menemukan file template tertentu di sub-theme, maka WordPress akan secara otomatis mencarinya di parent-theme. Ini merupakan praktik terbaik untuk melakukan pembaruan (update) pada parent-theme sambil tetap mempertahankan modifikasi yang telah dilakukan secara khusus (custom modifications).