Mulai dari Nol: Memahami Proses Inti dan Praktik Terbaik dalam Pengembangan Tema WordPress Modern

Development Environment and Project Initialization

Langkah pertama dalam mengembangkan tema WordPress modern adalah membuat lingkungan pengembangan lokal yang efisien dan memenuhi standar. Hari ini, kita tidak lagi mengembangkan kode langsung di server, melainkan menggunakan rangkaian alat (toolchain) lokal untuk meningkatkan efisiensi proses pengembangan.

Untuk lingkungan lokal, Anda dapat memilih alat terintegrasi seperti… Local、Laragon 或 MAMPAlat-alat ini memungkinkan Anda untuk menginstal Apache/Nginx, PHP, dan MySQL dengan satu klik, sehingga sangat memudahkan proses konfigurasi lingkungan. Pilihan mana yang harus Anda gunakan terutama bergantung pada preferensi sistem operasi Anda dan kebutuhan fungsional tertentu.

Bagaimana cara mengatur struktur direktori tema dengan benar?

Struktur direktori yang jelas dan terorganisir merupakan dasar penting dalam pengembangan tema profesional. Struktur ini tidak hanya memudahkan Anda dalam memelihara kode, tetapi juga membantu pengembang lain untuk memahami dan bekerja sama dengan kode tersebut. Tema WordPress modern umumnya mengikuti struktur yang mirip dengan “pola” tertentu.

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

Di dalam direktori instalasi WordPress Anda… wp-content/themes Dalam folder tersebut, buatlah sebuah folder dengan nama yang sesuai dengan tema Anda, misalnya… my-awesome-themeKemudian, di dalam folder ini, disarankan untuk membuat direktori-direktori inti berikut:
* /assetsDigunakan untuk menyimpan semua sumber daya statis (static resources).
* /assets/cssTempat untuk menyimpan file berisi aturan tata letak (style sheets), misalnya… style.css 和 editor-style.css。
* /assets/jsTempat untuk menyimpan file JavaScript.
* /assets/imagesDigunakan untuk menyimpan file media seperti gambar dan ikon.
* /assets/fontsTempat untuk menyimpan font kustom.
* /template-partsTempat untuk menyimpan potongan-potongan template yang dapat digunakan kembali, seperti header, footer, metadata artikel, dan lainnya.
* /inc 或 /includesBerfungsi untuk menyimpan berbagai file yang memperkuat fitur tema, seperti fungsi kustom, pendaftaran alat bantu (toolkit), dan definisi jenis artikel kustom, dan lainnya.
* /patterns(Opsional, tetapi direkomendasikan): File yang berisi definisi mode blok untuk editor seluruh situs web.

Buat file informasi tema yang diperlukan.

Setiap tema WordPress harus memiliki file dengan nama… style.css File tersebut bukan hanya berisi kode gaya (style sheet), tetapi juga merupakan “kartu identitas” dari tema tersebut. Informasi dalam header komentar di bagian atas file inilah yang menjadi kunci bagi WordPress untuk mengenali tema yang digunakan.

/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/

Di antaranya,Text Domain Digunakan untuk internasionalisasi; ini merupakan identifikasi unik dari tema Anda dalam berkas terjemahan.Requires at least 和 Requires PHP Hal tersebut menentukan versi minimum WordPress dan PHP yang diperlukan untuk menjalankan tema tersebut, yang sangat penting bagi pengalaman pengguna dan keamanan sistem.

Selain itu, untuk mendukung fitur Editor Seluruh Situs (Full Site Editor/FSE), Anda juga perlu membuat sebuah… theme.json File ini merupakan jembatan komunikasi antara editor Gutenberg dan tema-tema yang digunakan, berfungsi untuk mendefinisikan gaya tampilan secara global, palet warna, pengaturan tata letak, dan lainnya.

Membangun template tema inti (core theme template)

File template merupakan kerangka dasar dari tema WordPress, dan file-file ini menentukan bagaimana berbagai jenis konten akan ditampilkan. WordPress akan secara otomatis memilih file template yang sesuai berdasarkan “tingkatan hierarki template” untuk menampilkan halaman tersebut.

推荐阅读 Panduan Memulai Pengembangan Tema WordPress: Membuat Situs Web Kustom dari Nol.。

Dua file template yang paling dasar adalah… index.php(Template utama, sebagai pilihan cadangan) dan style.css(Style sheet). Namun, untuk membuat sebuah tema yang fungsional secara lengkap, Anda perlu memulai dengan membangun dari beberapa template inti berikut ini.

Bagaimana cara membuat bagian kepala (header) dan bagian bawah (footer) dari sebuah situs web?

Bagian atas dan bawah situs web merupakan bagian yang digunakan bersama oleh setiap halaman. Kita akan meletakkannya secara terpisah. header.php 和 footer.php Tengah.

在 header.php Dalam berkas tersebut, Anda perlu menempatkan bagian head dari dokumen HTML, serta memanggil fungsi-fungsi inti dari WordPress. Fungsi-fungsi kunci yang perlu dipanggil meliputi: wp_head()Hal tersebut memungkinkan inti WordPress, plugin, dan tema untuk menambahkan kode yang diperlukan (seperti tabel gaya, meta tag) di sini.

<!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>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <!-- 你的网站导航和Logo代码 -->
</header>

footer.php Maka bertanggung jawab untuk menutup yang ada di… header.php Tag yang dibuka di dalamnya, lalu memanggilnya. wp_footer() Fungsi ini sangat penting untuk memuat skrip dan fitur plugin.

Bagaimana cara membuat siklus artikel (artikel loop)?

Pemrosesan siklus artikel merupakan logika inti dari tema WordPress, yang berfungsi untuk mengambil dan menampilkan artikel dari basis data. Logika ini biasanya ditempatkan di bagian kode yang bertanggung jawab atas pengelolaan artikel dalam tema tersebut. index.php、single.php(Satu artikel) atau page.php(Dalam halaman tunggal.)

Struktur dasar dari siklus penulisan artikel adalah sebagai berikut. Struktur ini menggunakan… have_posts() 和 the_post() Fungsi ini digunakan untuk mengiterasi artikel-artikel yang ditemukan dalam hasil pencarian.

推荐阅读 Panduan Utama: Cara Mengembangkan Tema WordPress yang Kuat dan Fleksibel.。

<p>   
      
</p>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <br />
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>
<?php endif; ?>

Dalam siklus ini, Anda menggunakan beberapa tag template, seperti… the_title() Output judul artikel,the_content() Output konten artikel,the_permalink() Mendapatkan tautan artikel.

Fitur Tema dan Pengaturan Kustom

Semua kode yang memperbaiki fungsionalitas tema sebaiknya dikelola secara terpusat, bukan tersebar di berbagai berkas template. Praktik terbaik adalah dengan membuat sebuah berkas bernama “settings.php” di direktori akar tema. functions.php File tersebut diunduh secara otomatis saat tema diinisialisasi, dan berfungsi seperti “plugin” untuk tema Anda.

Bagaimana cara mendaftarkan menu navigasi dan sidebar?

Menyusun menu navigasi dan sidebar (area alat tambahan) secara khusus merupakan fitur dasar dari sebuah tema. Anda perlu melakukannya… functions.php Untuk mendaftarkannya, Anda perlu menggunakan fungsi tertentu terlebih dahulu, setelah itu barulah dapat dikelola di menu “Penampilan” (Appearance) yang berada di bagian belakang (backend).

Gunakan register_nav_menus() Fungsi ini digunakan untuk mendaftarkan posisi elemen menu. Misalnya, untuk mendaftarkan sebuah “Menu Utama” dan sebuah “Menu Kaki Halaman”.

function my_awesome_theme_setup() {
    register_nav_menus(
        array(
            'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
            'footer'  => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
        )
    );
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );

Untuk mendaftarkan alat bantu (widget) di area pendaftaran (sidebar), Anda perlu menggunakan… register_sidebar() Fungsi tersebut memungkinkan Anda untuk mendefinisikan nama, ID, deskripsi, serta tag HTML yang digunakan untuk membungkus bagian samping (sidebar) dari halaman web.

Bagaimana cara menambahkan dukungan untuk gambar khusus (gambar yang memiliki fitur khusus) ke dalam sebuah artikel?

Gambar khas (gambar thumbnail artikel) merupakan fitur standar di situs web konten modern. WordPress tidak mengaktifkan fitur ini secara default, dan tema yang digunakan perlu secara eksplisit menyatakan dukungannya terhadap fitur tersebut.

Anda dapat menggunakan apa yang telah disebutkan di atas. my_awesome_theme_setup() Dalam fungsi, digunakan… add_theme_support() Ada sebuah fungsi yang digunakan untuk mengaktifkannya. Fungsi ini berfungsi untuk mengaktifkan berbagai fitur inti (core) dan tema WordPress.

function my_awesome_theme_setup() {
    // ... 之前的菜单注册代码 ...
    add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
    // 你还可以设置缩略图尺寸
    set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
    add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}

Setelah diaktifkan, kotak meta “Gambar Khas” akan muncul di antarmuka pengeditan artikel, memungkinkan pengguna untuk mengunggah atau memilih gambar. Dalam template, Anda dapat menggunakan fitur ini untuk menambahkan gambar khusus ke dalam konten artikel. the_post_thumbnail() Fungsi tersebut digunakan untuk mengeluarkan (menghasilkan) hasilnya.

Optimasi Tampilan, Skrip, dan Kinerja

Menyisipkan file CSS dan JavaScript dengan benar ke dalam antrian (queue) merupakan praktik penting dalam pengembangan WordPress. Jangan pernah menggunakan file tersebut langsung di dalam file template. <link> 或 <script> Sumber daya sebaiknya tidak dikodekan secara keras (hard-coded) dalam tag, melainkan sebaiknya digunakan dengan cara yang lebih dinamis. wp_enqueue_style() 和 wp_enqueue_script() Fungsi.

Bagaimana cara yang benar untuk menambahkan kode CSS dan JS ke dalam antrian (queue)?

在 functions.php Buatlah sebuah fungsi baru dalam kode tersebut untuk mendaftarkan dan mengatur antrian (queue) sumber daya tema (theme resources) Anda. Setelah itu, pasang (mount) fungsi tersebut ke sistem yang sesuai. wp_enqueue_scripts Aksi ini tergantung pada hook tersebut.

function my_awesome_theme_scripts() {
    // 注册并排队主样式表（style.css）
    wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );

// 注册并排队一个自定义的CSS文件
    wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );

// 注册并排队一个自定义的JavaScript文件
    wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
    wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );

Perhatikan, parameter terakhir adalah… true Ini menunjukkan bahwa skrip berada di bagian bawah dokumen.<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>Mengunduh (atau memuat) konten terlebih dahulu umumnya dapat meningkatkan kinerja rendering halaman.

Bagaimana cara menerapkan internasionalisasi dan lokalisasi?

Agar topik Anda dapat digunakan di seluruh dunia, Anda perlu melakukan proses internasionalisasi (i18n). Artinya, semua string teks yang ditampilkan dalam template dan kode PHP harus dibungkus oleh fungsi penerjemahan.

Fungsi yang paling sering digunakan adalah… esc_html__()(Digunakan untuk menghasilkan kode HTML yang telah di-ekspos.) esc_html_e()(Digunakan untuk menampilkan kembali kode HTML yang telah di-ekspos secara langsung.) Semua hal tersebut perlu disediakan dalam informasi header tema (theme header). Text Domain。

// Dalam pesan peringatan “Tidak ada artikel” selama siklus penampilan artikel
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>

// 在导航菜单注册时
'primary' =&gt; esc_html__( 'Primary Menu', 'my-awesome-theme' ),

Setelah kode siap, Anda dapat menggunakan alat seperti Poedit untuk memindai semua string terjemahan dan menghasilkan file terjemahan yang diinginkan. .pot(Berkas template), kemudian buat yang sesuai dengannya. .po 和 .mo Terjemahkan file tersebut, lalu letakkan di dalam folder yang sesuai dengan tema yang ditentukan. /languages Di dalam katalog.

Menyimpulkan.

Artikel panjang ini secara sistematis memperkenalkan proses inti pengembangan tema WordPress modern, mulai dari penyusunan lingkungan hingga penyempurnaan fungsionalitasnya. Kita memulai dengan membangun struktur proyek yang terstandarisasi, dan menekankan pentingnya hal tersebut… style.css 和 theme.json Pentingnya hal tersebut tidak dapat diabaikan. Selanjutnya, kita membahas lebih dalam logika pembangunan struktur hierarki template, terutama dalam hal menampilkan konten secara dinamis melalui siklus artikel (article loop). Pada bagian peningkatan fungsionalitas, kita mempelajari cara menggunakan… functions.php Untuk memperluas fitur aplikasi, tambahkan menu pendaftaran, alat bantu (tools), serta dukungan untuk penggunaan gambar khusus (feature images).

Terakhir, kita fokus pada pengelolaan sumber daya front-end dan kualitas kode, serta menekankan pentingnya menambahkan skrip gaya (style scripts) menggunakan metode standar WordPress serta melakukan persiapan untuk mendukung fitur internasionalisasi (internationalization). Dengan mengikuti praktik terbaik ini, kita tidak hanya dapat mengembangkan tema yang memiliki struktur yang jelas dan mudah diperawat, tetapi juga dapat memastikan kompatibilitas, keamanan, dan kemampuan untuk diperluas (scalability) dari tema tersebut, sehingga menciptakan dasar yang kuat untuk membangun proyek-proyek yang lebih kompleks.

FAQ - Pertanyaan yang Sering Diajukan.

Apa perbedaan antara tema (theme) dan plugin? Di mana seharusnya kode fungsional (functional code) diletakkan?

Tema bertanggung jawab atas penampilan visual dan tata letak konten situs web (yaitu “penampilannya”), sedangkan plugin digunakan untuk menambahkan fitur-fitur tertentu ke situs web, seperti formulir kontak, optimisasi SEO, dan fitur perdagangan elektronik. Ada prinsip sederhana yang dapat diikuti: jika kode tersebut berfungsi untuk mengubah penampilan situs web, maka kode tersebut termasuk dalam komponen tema; jika kode tersebut berfungsi untuk menambahkan fitur baru, maka sebaiknya kode tersebut dibuat menjadi plugin. Dari segi jangka panjang, dengan membuat kode yang berfungsi menjadi plugin, Anda dapat mempertahankan fitur-fitur tersebut saat mengganti tema.

Apakah file `theme.json` wajib digunakan? Apa keuntungannya?

Untuk pengembangan tema modern yang berorientasi pada masa depan, sangat disarankan untuk menggunakan… theme.jsonFungsi ini bukan lagi fitur tambahan yang bersifat opsional, melainkan inti dari arsitektur editor seluruh situs WordPress. Keuntungannya antara lain: memungkinkan pengelolaan gaya dan pengaturan global (warna, font, jarak) secara terpusat, memberikan pengalaman yang lebih konsisten saat menggunakan editor blok, mengurangi penggunaan gaya yang ditulis secara langsung (inline styles), serta mempermudah implementasi desain responsif dan mode gelap (dark mode). Sejak WordPress 5.8, fitur ini telah menjadi bagian penting dalam pengembangan tema (theme development).

Bagaimana cara mengatur ulang tampilan widget default di WordPress?

HTML output dari plugin inti WordPress (seperti daftar kategori dan daftar artikel terbaru) sering kali mengandung banyak tata letak (nesting) yang tidak Anda butuhkan. div Dan nama kelas. Anda dapat mengatur mereka secara khusus menggunakan filter. Misalnya, dengan menggunakan… widget_categories_args Alat bantu untuk memodifikasi parameter pencarian dalam direktori kategori menggunakan filter, atau lebih lanjut lagi, dengan cara… widget_categories_output Ada beberapa cara untuk memodifikasi kode HTML yang dihasilkan oleh filter tersebut. Salah satunya adalah dengan langsung mengedit kode HTML tersebut. Namun, metode yang lebih modern dan fleksibel adalah dengan membuat blok kustom sendiri sebagai pengganti alat bantu (toolkit) tradisional.

Apa itu tingkatan template (template hierarchy), dan bagaimana cara memanfaatkannya?

Lapisan template (template hierarchy) merupakan sistem pengambilan keputusan di WordPress untuk menentukan file template mana yang akan digunakan untuk menampilkan halaman saat ini. Sistem ini mengikuti prinsip dari yang “paling spesifik” ke yang “paling umum”. Misalnya, untuk sebuah artikel dengan ID 123, WordPress akan mencari file template secara berurutan:single-post-123.php -> single-post.php -> single.php -> singular.php -> Dan yang terakhir adalah… index.phpAnda dapat membuat file template yang lebih spesifik (seperti…) category-news.php Merancang halaman kategori “Berita” secara terpisah memungkinkan kita untuk mengontrol tampilan setiap halaman dengan lebih akurat. Hal ini jauh lebih mudah dipahami daripada menulis banyak pernyataan kondisi (conditional statements) dalam satu file saja.

Bagaimana cara melakukan debugging dan pengecekan kesalahan saat mengembangkan sebuah tema?

Langkah pertama yang harus dilakukan adalah… wp-config.php Aktifkan mode debug WordPress di dalam file tersebut. WP_DEBUG Konstanta diatur ke trueIni akan membuat semua kesalahan PHP, peringatan, dan notifikasi ditampilkan di halaman. Selain itu, disarankan untuk mengatur (setting) hal tersebut. WP_DEBUG_LOG 为 trueCatatkan kesalahan tersebut ke dalam… /wp-content/debug.log Dalam file tersebut, hindari agar pesan kesalahan langsung terlihat oleh pengunjung. Selain itu, menggunakan alat pengembang browser (tag Console dan Network) untuk memeriksa kesalahan JavaScript serta masalah pengunduhan sumber daya (resource) juga merupakan keterampilan penting dalam proses debugging frontend.