Panduan Memulai Pengembangan Tema WordPress: Dari Nol hingga Rilis Langsung.

Pengaturan Lingkungan Pengembangan Tema WordPress

Sebelum memulai menulis kode, sangat penting untuk membangun lingkungan pengembangan lokal yang stabil dan efisien. Hal ini tidak hanya memungkinkan Anda untuk bekerja secara offline, tetapi juga menghindari risiko yang mungkin timbul saat melakukan pengujian di server online.

Pembangunan lingkungan pengembangan lokal

Cara yang paling umum digunakan adalah dengan menggunakan paket perangkat lunak server lokal yang terintegrasi, seperti XAMPP, MAMP, atau Laragon. Alat-alat ini memungkinkan penginstalan Apache, MySQL, dan PHP dengan satu klik, sehingga menghindari proses konfigurasi yang rumit. Untuk pengembangan WordPress, lebih disarankan untuk menggunakan lingkungan yang telah dioptimalkan khusus untuk WordPress, seperti Local by Flywheel atau DesktopServer. Lingkungan tersebut menyediakan fitur-fitur yang memudahkan, seperti pembuatan situs web, pengelolaan basis data, dan penggantian versi PHP.

Pemilihan Alat Inti dan Editor

Anda memerlukan sebuah editor kode. Rekomendasi editor kode yang dapat Anda gunakan adalah Visual Studio Code, PhpStorm, atau Sublime Text. Ketiganya dilengkapi dengan fitur-fitur canggih seperti penyorotan kode (code highlighting), autocompletion (pembuatan kode secara otomatis), dan manajemen proyek (project management). Terutama Visual Studio Code, dengan tambahan plugin yang berkaitan dengan WordPress (seperti WordPress Snippet dan PHP Intelephense), dapat sangat meningkatkan efisiensi pengembangan.

推荐阅读 Menguasai pengembangan plugin WordPress: Membangun ekstensi fungsional pertamamu dari nol.。

Selain itu, sistem kontrol versi seperti Git sangat penting. Bahkan jika Anda seorang pengembang mandiri, menggunakan Git untuk melacak perubahan kode, membuat cabang (branch), dan membuat cadangan proyek merupakan kebiasaan yang baik. Anda dapat menginisialisasi repositori di lokal, dan mempertimbangkan untuk mengirimkannya ke platform penanganan repositori jarak jauh seperti GitHub, GitLab, atau Bitbucket di kemudian hari.

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 struktur dasar tema WordPress

Sebuah tema WordPress yang standar merupakan sebuah folder yang berisi berbagai file tertentu, dan folder tersebut terletak di… /wp-content/themes/ Di dalam direktori tersebut, bahkan untuk tema yang paling sederhana sekalipun, harus terdapat dua file inti.

File gaya tabel tema (theme style sheet file)

style.css Ini adalah file “identitas” dan definisi tampilan (appearance) dari sebuah tema. Bagian komentar di bagian atas file tersebut berisi semua metainformasi tentang tema tersebut, dan informasi-informasi ini akan dibaca oleh WordPress dan ditampilkan di halaman “Appearance” -> “Themes” di panel administrasi. Contoh komentar di bagian atas file tersebut adalah sebagai berikut:

/*
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.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Dalam berkas ini, Anda akan melanjutkan penulisan semua aturan gaya CSS untuk mengontrol tampilan bagian depan situs web, seperti font, warna, tata letak, dan lainnya.

File template indeks inti

index.php Ini adalah template default untuk sebuah tema, dan juga merupakan template yang wajib digunakan. Ketika WordPress tidak dapat menemukan file template yang lebih spesifik (misalnya… single.php 或 page.phpKetika hal tersebut terjadi, tag tersebut akan digunakan untuk merender halaman. Tag tersebut biasanya berisi tag template dari WordPress, yang digunakan untuk memanggil bagian header, konten artikel yang diulang (dalam bentuk siklus), sidebar, dan footer.

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula hingga Praktik, Keterampilan Penting untuk Membangun Situs Web yang Personal.。

Selain kedua file tersebut, sebuah tema yang berfungsi dengan lengkap biasanya juga mencakup file-file template berikut:
* header.phpBagian atas situs web (header area)<head> (Bersama dengan navigasi di bagian atas.)
* footer.phpBagian kaki halaman dari situs web.
* functions.php:“:” digunakan untuk menambahkan fitur tema, menu pendaftaran, sidebar, dan lainnya.
* page.php:Digunakan untuk merender halaman statis.
* single.php:Digunakan untuk merender sebuah artikel tunggal.
* archive.php:Digunakan untuk merender halaman arsip seperti kategori dan tag.

Buatlah tema pertamamu dari nol.

Sekarang, mari kita mulai membuat tema yang paling sederhana untuk memahami cara berkolaborasi antar komponen-komponennya.

Membuat file dan direktori dasar

Pertama-tama, pada situs WordPress lokal Anda… /wp-content/themes/ Dalam direktori tersebut, buatlah sebuah folder baru dengan nama… my-first-themeKemudian, buat dua file kosong di dalam folder tersebut:style.css 和 index.phpMasukkan komentar header CSS yang disebutkan pada bagian sebelumnya ke dalam kode. style.css Dokumen.

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

Membangun template indeks dasar

Selanjutnya, lakukan pengeditan. index.php File. Versi yang paling dasar dapat berisi pemanggilan terhadap fungsi-fungsi inti WordPress. Pertama-tama, kita menggunakan… get_header() Fungsi tersebut digunakan untuk memasukkan bagian header (header section) ke dalam kode program.

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 在这里输出文章内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

<?php get_footer(); ?>

Kode ini mengimplementasikan “The Loop”, yang merupakan komponen inti dari WordPress. Kode tersebut memeriksa apakah ada artikel, kemudian mengulasi setiap artikel dan menampilkan judul serta isi dari artikel tersebut. Setelah itu, kode tersebut menggunakan… get_footer() Mengintegrasikan bagian kaki halaman (footer).

Menambahkan fitur dan menu pendaftaran

Untuk membuat topik ini lebih praktis, kami membuat… functions.php File. Dalam file ini, kita dapat menggunakan fitur-fitur yang disediakan oleh WordPress. add_theme_support() Fungsi tersebut digunakan untuk mengaktifkan fitur-fitur tertentu dari tema, seperti thumbnail artikel (gambar profil) dan logo kustom.

推荐阅读 Panduan Lengkap untuk Pengembangan Tema WordPress: Membangun Tema Situs Web Tingkat Profesional dari Nol hingga Satu.。

<?php
function my_first_theme_setup() {
    // 让主题支持文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 注册一个侧边栏小工具区域
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( '在此添加小工具。', 'my-first-theme' ),
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Kemudian, Anda perlu… header.php Dalam dokumen tersebut, digunakan wp_nav_menu() Fungsi ini digunakan untuk menampilkan menu yang telah Anda daftarkan.

Pengembangan lanjutan topik (topic) dan persiapan untuk penerbitannya

Setelah tema dasar selesai dibuat, Anda dapat meningkatkan fungsionalitas dan fleksibilitasnya dengan menggunakan template yang lebih detail serta mekanisme penghubung (hooks) yang lebih canggih.

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

Menggunakan komponen template untuk mengoptimalkan struktur.

Komponen template (Template Parts) merupakan cara yang baik untuk memodulasi potongan-potongan template yang dapat digunakan kembali, seperti kartu ringkasan artikel. Anda dapat membuat satu… template-parts/content.php Masukkan kode yang digunakan untuk menampilkan isi setiap artikel ke dalam file tersebut. Setelah itu… index.php Dalam siklus tersebut, digunakan… get_template_part() Gunakan fungsi untuk memanggilnya:

while ( have_posts() ) :
    the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

(Menggunakan Action dan Filter Hooks)

Hook (Penyangkut) merupakan fondasi dari sistem pengembangan plugin di WordPress, dan juga banyak digunakan dalam pengembangan tema (theme). Hook tindakan (Action Hooks) memungkinkan Anda untuk menambahkan kode pada titik tertentu dalam proses pengolahan konten, misalnya untuk menambahkan informasi tambahan setelah isi artikel. Hook filter (Filter Hooks) memungkinkan Anda untuk memodifikasi data, seperti mengubah panjang ringkasan artikel.

Misalnya, dengan menggunakan… wp_enqueue_scripts Gunakan “action hook” untuk mengintegrasikan file JavaScript dan CSS dengan benar.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 引入自定义的 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' );

Melakukan pengujian akhir dan pengemasan (final testing and packaging).

Sebelum dipublikasikan, harus dilakukan pengujian yang menyeluruh. Pastikan tampilan tema berjalan dengan baik di berbagai browser (Chrome, Firefox, Safari, Edge). Periksa juga tata letak halaman (layout) yang responsif (mampu menyesuaikan diri dengan ukuran layar) menggunakan ponsel dan komputer. Aktifkan mode debug di panel administrasi WordPress (WordPress backend). wp-config.php Di dalam pengaturan define( 'WP_DEBUG', true );Perbaiki semua peringatan dan kesalahan PHP. Periksa apakah semua fitur inti WordPress (seperti komentar, pencarian, dan halamanan) berfungsi dengan baik.

Terakhir, hapus file-log, file-backup, dan konten lainnya yang tidak diperlukan selama proses pengembangan. Kompresi seluruh folder tema tersebut menjadi file ZIP, dan file ZIP inilah yang dapat digunakan untuk proses instalasi.

Menyimpulkan.

Pengembangan tema WordPress dimulai dengan memahami struktur dasarnya.style.css, index.phpProses ini dimulai dengan langkah-langkah dasar, kemudian secara bertahap memperdalam pemahaman tentang struktur template, mekanisme penggunaan fungsi (function hooks), serta komponen-komponen yang termodulasi (modularized components). Hal ini dilakukan dengan membangun lingkungan lokal (local environment), membuat file-file inti (core files), dan memanfaatkan berbagai alat yang tersedia. functions.php Dengan memperkuat fitur-fitur yang ada dan melakukan pengujian yang ketat, Anda dapat membuat tema yang memenuhi standar serta memiliki berbagai fitur yang lengkap. Setelah memahami konsep-konsep inti ini, Anda akan mampu menyesuaikan tampilan dan fungsi situs web sesuai keinginan Anda, serta membangun dasar yang kuat untuk mempelajari kerangka kerja yang lebih canggih, seperti Underscores dan Sage.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah saya harus menguasai PHP untuk mengembangkan tema WordPress?

Ya, untuk mengembangkan tema WordPress secara mendalam, Anda perlu menguasai PHP. Karena WordPress sendiri ditulis menggunakan PHP, semua file template (.php) mengandung kode PHP yang digunakan untuk menghasilkan konten secara dinamis. Meskipun Anda dapat memodifikasi tampilan sub-tema tanpa perlu menulis terlalu banyak kode PHP, pengetahuan tentang PHP sangat diperlukan jika Anda ingin membuat template khusus, mengimplementasikan fitur yang kompleks, atau memodifikasi logika pengecekan data (query logic).

Apa fungsi dari file functions.php dalam sebuah tema?

functions.php File merupakan “pusat fungsionalitas” dari sebuah tema. File ini digunakan untuk menambahkan atau mengubah fitur-fitur sebuah tema, tanpa perlu mengubah file inti (core file) tema tersebut. Fungsi utama file ini antara lain: mengaktifkan fitur-fitur tertentu dalam tema (seperti gambar khusus, latar belakang yang dapat disesuaikan), mendaftarkan menu navigasi dan area alat tambahan (sidebar widgets), mengatur urutan pengunduhan file gaya (style sheets) dan skrip, mendefinisikan fungsi khusus (custom functions), serta menggunakan mekanisme aksi (actions) dan filter (filters) untuk mengubah perilaku default WordPress.

Apa itu subtopik, dan mengapa perlu menggunakannya?

Subtema adalah tema yang bergantung pada tema lain (tema induk), di mana subtema tersebut mewarisi semua fitur, gaya, dan file template dari tema induk. Namun, subtema memungkinkan Anda untuk dengan aman menimpa atau menambahkan fitur baru. Tujuan utama penggunaan subtema adalah agar modifikasi khusus yang Anda buat tetap tersimpan saat tema induk diperbarui. Jika Anda langsung mengubah file tema induk, perubahan tersebut akan tertimpa, sedangkan modifikasi yang Anda lakukan pada subtema akan tetap ada. Ini merupakan praktik terbaik untuk melakukan penyesuaian dan pemeliharaan tema.

Bagaimana cara membuat tema saya mendukung terjemahan multibahasa?

Untuk membuat sebuah tema mendukung berbagai bahasa (internasionalisasi dan lokalisasi, i18n/l10n), terdapat dua langkah utama yang perlu dilakukan. Pertama, seluruh string teks dalam tema perlu dibungkus menggunakan fungsi penerjemahan yang disediakan oleh WordPress. Misalnya, Anda dapat menggunakan fungsi `wpgettext()` untuk melakukan penerjemahan. esc_html__( ‘文本’, ‘text-domain’ ) 或 _e( ‘文本’, ‘text-domain’ )Kedua, gunakan alat seperti Poedit untuk menghasilkan file template berformat .pot. Dengan file ini, penerjemah dapat membuat file .po dan .mo (misalnya, zh_CN.po). style.css Bagian kepala (header) telah diatur dengan benar. Text Domain Itu adalah kuncinya.