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

Untuk memulai pengembangan tema WordPress, komputer yang telah diatur dengan lingkungan PHP lokal merupakan syarat utama. Anda dapat memilih alat seperti XAMPP, MAMP, atau Local by Flywheel untuk membangun lingkungan pengembangan dengan cepat. Selanjutnya, Anda memerlukan editor kode, seperti Visual Studio Code, PHPStorm, atau Sublime Text, yang menyediakan fitur seperti penyorotan sintaks dan saran kode, sehingga dapat meningkatkan efisiensi pengembangan secara signifikan. Akhirnya, pastikan Anda telah menginstal dan mengaktifkan versi terbaru dari WordPress.

Sebelum memulai proses pengkodean, sangat penting untuk memahami struktur direktori tema WordPress. Sebuah tema dasar minimal memerlukan dua file:style.css和index.phpNamun, dalam pengembangan praktis, kita biasanya memerlukan lebih banyak file untuk memisahkan (mengdekupas) berbagai fungsi. Struktur tema modern yang tipikal dapat ditunjukkan sebagai berikut:

your-theme/
├── style.css          # 主题样式和基本信息
├── index.php         # 主模板文件
├── header.php        # 头部模板
├── footer.php        # 底部模板
├── sidebar.php       # 侧边栏模板
├── functions.php     # 功能和特性定义
├── page.php          # 页面模板
├── single.php        # 文章模板
└── assets/
    ├── css/
    ├── js/
    └── images/

Membuat file tema inti (core theme file)

Pada langkah ini, kita akan membuat fondasi dari tema tersebut. Berkas-berkas ini mendefinisikan identitas tema dan kerangka dasarnya.

推荐阅读 Panduan Utama Pengembangan Tema WordPress: Membangun Tema Kustom dari Nol hingga Satu.。

Mendefinisikan informasi tema dan tabel gaya utama

style.cssFile tersebut bukan hanya berisi kode gaya (style sheet), tetapi juga merupakan “kartu identitas” dari tema tersebut. Bagian komentar di bagian atas file tersebut berisi semua metainformasi yang diperlukan oleh WordPress untuk mengenali tema tersebut. Contoh komentar header dasar adalah sebagai 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%).

halaman akses

/*
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
*/

Di antaranya,Text DomainDigunakan untuk internasionalisasi; merupakan identifikasi kunci untuk pemanggilan fungsi penerjemahan selanjutnya. Setelah blok komentar, Anda dapat menambahkan gaya (style) ke tema Anda, sebagaimana Anda menulis kode CSS biasa.

Membangun template kerangka untuk sebuah tema

index.phpIni merupakan template utama default untuk suatu tema, sekaligus juga berfungsi sebagai template cadangan untuk semua halaman. Praktik yang baik adalah menggunakan fungsi template WordPress untuk memasukkan komponen-komponen yang termodulasi, alih-alih menumpuk semua kode dalam satu file saja. Template ini sederhana namun memiliki struktur yang jelas.index.phpMungkin seperti berikut:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <p>Jika ada postingan:</p> <p>Sementara ada postingan:</p> <p>Tampilkan konten postingan:</p> <p>Akhiri loop:</p> <p>Jika tidak ada postingan:</p> <p>Tampilkan pesan:</p> <p>Akhiri kode:</p>
</main>

\n

Memisahkan template bagian atas (header) dan bagian bawah (footer)

header.phpSebuah file biasanya berisi bagian header dari dokumen HTML, hingga bagian konten dimulai. File tersebut seharusnya mencakup…Pernyataan,Tag,Area (penggunaan)wp_head()(Titik kait), serta judul situs web dan navigasi utama. Fungsi kunci adalah…wp_head()Hal tersebut memungkinkan plugin dan tema untuk menyisipkan kode yang diperlukan (seperti CSS dan JS) ke dalam bagian header halaman web.

footer.phpFile tersebut berisi semua konten yang ada setelah bagian isi dokumen selesai, seperti area widget di bagian bawah halaman, informasi hak cipta, dan sebagainya. File tersebut harus diakhiri dengan…wp_footer()Panggilan fungsi telah selesai, dan fungsi tersebut diperlukan untuk kerja yang normal dari banyak plugin (seperti alat analisis kode).

推荐阅读 Membangun Situs Web Profesional: Panduan Lengkap untuk Membuat Tema WordPress Khusus dari Nol。

Mengintegrasikan fitur dan memperkuat tema (Introducing features and enhancing the theme)

functions.phpFile tersebut merupakan “pusat kontrol” untuk tema Anda; bukanlah sebuah file template, melainkan file PHP yang secara otomatis diunduh saat tema diinisialisasi. Di sini Anda dapat menambahkan fitur pendukung tema, daftar menu, file gaya (style sheet), skrip, serta mendefinisikan berbagai fungsi khusus (custom functions).

Mengaktifkan fitur tema inti (core theme feature).

lulus (tagihan atau inspeksi, dll)add_theme_support()Dalam fungsi tersebut, Anda dapat menyatakan dukungan terhadap beberapa fitur inti WordPress untuk tema Anda. Misalnya, mengaktifkan fitur thumbnail artikel (gambar profil) dan dukungan untuk tag HTML5 merupakan fitur standar pada tema-tema modern.

<?php
function my_theme_setup() {
    // 启用文章和评论的HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 启用文章缩略图功能
    add_theme_support( 'post-thumbnails' );
    // 设置默认缩略图尺寸
    set_post_thumbnail_size( 800, 400, true );
    // 启用标题标签支持（由WordPress自动生成<title>标签）
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Menu Pendaftaran dan Memuat Sumber Daya

Posisi menu navigasi yang telah terdaftar memungkinkan pengguna untuk mengelolanya di bagian “Tampilan” -> “Menu” di backend.register_nav_menus()Implementasi fungsi:

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

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

Mengunduh file CSS dan JavaScript dengan cara yang benar merupakan kunci untuk mendapatkan kinerja yang baik. Anda sebaiknya menggunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi, dan memasangnya kewp_enqueue_scriptsDi atas kait tersebut. Dengan cara ini, dapat dipastikan bahwa hubungan ketergantungan (dependency relationships) benar-benar terpenuhi, dan pengunduhan yang berulang dapat dihindari.

Membuat template halaman tertentu

WordPress mengikuti sistem hierarki template, yang berarti WordPress akan secara otomatis mencari file template yang paling cocok berdasarkan jenis halaman yang sedang dibuka. Dengan membuat template khusus untuk setiap jenis halaman, tata letak dan penampilan konten dapat disesuaikan lebih tepat.

Membuat template untuk artikel tunggal dan halaman independen

single.phpTemplate ini digunakan untuk menampilkan satu artikel saja.index.phpProses pengulangan (loop) mirip dengan proses lainnya, tetapi biasanya mencakup metainformasi yang lebih lengkap, seperti kategori, tag, penulis, waktu publikasi, dan area untuk komentar.

推荐阅读 Tutorial Lengkap Pengembangan Tema WordPress: Membangun Tema Kustom Dari Nol。

page.phpTemplate digunakan untuk menampilkan halaman statis yang independen. Biasanya, template tidak menampilkan metadata artikel (seperti kategori atau waktu publikasi), proses pengulangan (looping) dalam penampilan konten lebih sederhana, dan fokus utamanya adalah menampilkan isi yang telah disunting menggunakan editor halaman.

Membangun template halaman daftar artikel dan arsip

archive.phpTemplate digunakan untuk menampilkan halaman arsip yang berisi kategori, tag, penulis, tanggal, dan lainnya. Biasanya, template tersebut memiliki judul (misalnya “Kategori: Teknologi”) serta daftar artikel.

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

home.php或front-page.phpDigunakan untuk menyesuaikan tampilan halaman depan blog. Jika tersedia…front-page.phpHal tersebut akan dijadikan halaman utama situs web; jika memang ada.home.phpHal tersebut akan berfungsi sebagai halaman indeks untuk artikel-artikel tersebut.

Mengimplementasikan fitur pencarian kustom dan halaman 404

search.phpDigunakan untuk menampilkan hasil pencarian. Anda dapat menggunakannya di sini.the_search_query()Fungsi ini digunakan untuk menampilkan kata kunci pencarian yang digunakan oleh pengguna.

404.phpHal tersebut terjadi ketika pengguna mengakses alamat yang tidak ada. Sebuah halaman 404 yang baik seharusnya memuat pesan penjelasan yang ramah, kotak pencarian, serta tautan ke halaman-halaman penting.

Mengintegrasikan alat tambahan (widgets) dengan sidebar dinamis

Widget adalah fitur yang disediakan oleh WordPress untuk memungkinkan pengguna menambahkan blok konten dengan fleksibilitas, seperti daftar artikel terbaru, kategori, kotak pencarian, dan lainnya. Agar tema Anda mendukung widget, Anda perlu mendaftarkan satu atau lebih “sisi bar” (yang sebenarnya merupakan area yang telah disiapkan untuk menampilkan widget), lalu menampilkan widget tersebut dalam template Anda.

Area untuk mendaftarkan alat bantu (tool) sudah siap.

Gunakanregister_sidebar()Ada sebuah fungsi untuk mendaftarkan sebuah sidebar. Anda dapat menggunakannya…functions.phpDalam definisi tersebut, terdapat beberapa sidebar yang masing-masing digunakan untuk sidebar utama, bagian kaki halaman (footer), dan lainnya.

function my_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在此添加主侧边栏的小工具。', '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_theme_widgets_init' );

Menggunakan sidebar dalam template

Setelah mendaftar, Anda perlu menggunakannya dalam file template.dynamic_sidebar()Gunakan fungsi untuk menghasilkan output dari area tersebut. Misalnya, pada…sidebar.phpTengah:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Kemudian,index.php、single.phpDigunakan dalam template yang memerlukan sidebar.get_sidebar()Pengenalan Fungsi (Function Introduction)sidebar.phpPengguna sekarang dapat menambahkan berbagai widget ke “Sisi Kiri Utama” dengan cara menyeretnya dari halaman “Tampilan” -> “Widget” di panel administrasi WordPress.

Menyimpulkan.

Membangun tema kustom WordPress dari nol merupakan proses pembelajaran yang sistematis, yang dimulai dengan memahami struktur file dasar, kemudian secara bertahap mempelajari tingkat template, peningkatan fungsionalitas, serta area konten dinamis. Intinya adalah menguasai seluruh aspek tersebut.style.css、index.php、header.php、footer.php和functions.phpFungsi dan cara penulisan beberapa file dasar (fundamental files) tersebut.add_theme_support()Aktifkan fitur tersebut untuk membuat template halaman yang disesuaikan dengan kebutuhan, melalui struktur hierarki template. Setelah itu, lanjutkan prosesnya dengan…register_sidebar()Dengan mengintegrasikan berbagai alat tambahan (plugin), sebuah tema yang memiliki fungsi yang lengkap dan struktur yang jelas mulai terbentuk. Ini bukan hanya soal implementasi teknis, tetapi juga merupakan bukti dari pemahaman yang mendalam terhadap logika pengelolaan konten di WordPress.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah harus menggunakan sub-topik sebelum mengembangkan topik utama?

Tidak selalu demikian. Jika Anda memulai dari nol dan membuat tema yang sepenuhnya orisinal, Anda bisa langsung membuat tema induk (parent theme). Situasi terbaik untuk menggunakan sub tema (child theme) adalah ketika Anda ingin mengatur ulang dan memodifikasi tema yang sudah ada (tema induk), serta berharap dapat mengupdate tema induk tersebut di masa depan tanpa kehilangan modifikasi yang telah Anda lakukan. Belajar pengembangan dari nol dan langsung membuat tema induk akan lebih membantu Anda memahami seluruh arsitektur sistem tersebut.

Mengapa tema saya tidak terlihat di bagian “Tampilan” (Appearance) di backend?

Ini biasanya disebabkan oleh…style.cssMasalah ini disebabkan oleh format blok komentar informasi tema di bagian atas file yang tidak benar, tidak ada, atau mengandung kesalahan sintaks. Harap periksa dengan cermat blok komentar di awal file tersebut untuk memastikan bahwa formatnya sesuai dengan persyaratan yang ditentukan.Theme Name:Baris ini harus ada dan benar. Pastikan juga bahwa folder tema (theme folder) telah diletakkan di tempat yang sesuai.wp-content/themes/Di bawah menu.

Apa perbedaan antara fungsi.php dan plugin?

functions.phpKode yang terdapat dalam file tersebut sangat terkait erat dengan tema yang digunakan; ketika Anda beralih ke tema lain, fungsi-fungsi tersebut biasanya tidak akan berfungsi lagi. Kode tersebut cocok untuk disimpan di dalam file tema, karena berkaitan langsung dengan tampilan, layout, dan fitur-fitur template dari tema tersebut. Sedangkan plugin digunakan untuk menyediakan fungsi-fungsi yang independen dari tema, sehingga dapat digunakan di berbagai tema. Ada prinsip sederhana yang dapat diikuti: jika suatu fungsi mempengaruhi tampilan atau layout situs web, maka fungsi tersebut sebaiknya diletakkan di dalam file tema.functions.phpJika tujuannya adalah menambahkan logika bisnis yang independen (seperti formulir kontak, optimisasi SEO), maka hal tersebut sebaiknya dibuat menjadi sebuah plugin.

Bagaimana cara membuat tema saya mendukung berbagai bahasa?

Untuk membuat suatu tema mendukung berbagai bahasa (internasionalisasi dan lokalisasi), terdapat dua langkah utama yang perlu dilakukan. Pertama,style.cssBlok komentar dan…functions.phpDi semua bagian teks yang perlu diterjemahkan, gunakan format seperti ini:__( ‘文本’, ‘my-first-theme’ )Wrap such a translation function inside another function.‘my-first-theme’Itu adalah domain teks (text domain) milik Anda. Selanjutnya, Anda perlu menggunakan alat seperti Poedit untuk memindai file tema dan menghasilkan (generate) konten yang diperlukan..potFile template, dan buat file template yang sesuai untuk setiap bahasa..po和.moKonversi file tersebut, lalu letakkan hasilnya di dalam folder yang sesuai dengan tema yang ditentukan./languages/Di bawah menu.