Dari Pemula hingga Ahli: Panduan Lengkap dan Tutorial Praktis untuk Pengembangan Tema WordPress

Pengaturan Lingkungan dan Konsep Dasar untuk Pengembangan Topik (Topic Development)

Untuk memulai pengembangan tema WordPress, pertama-tama Anda perlu membangun lingkungan pengembangan lokal yang sesuai. Hal ini tidak hanya dapat meningkatkan efisiensi pengembangan, tetapi juga dapat menghindari risiko yang mungkin timbul saat melakukan debugging secara online. Solusi lingkungan lokal yang umum digunakan antara lain XAMPP, MAMP, dan Local by Flywheel; ketiganya telah mengintegrasikan PHP, MySQL, dan server web, dan dapat diinstal dengan satu klik saja. Pilih alat yang paling cocok untuk Anda, dan pastikan versi PHP-nya kompatibel dengan lingkungan server target Anda.

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di/wp-content/themes/Di dalam direktori tersebut terdapat berbagai folder yang berisi berbagai file PHP, CSS, JavaScript, dan gambar, baik yang wajib maupun yang opsional. Untuk tema yang paling dasar, hanya diperlukan dua file saja:style.css和index.phpDi antaranya,style.cssBukan hanya berisi kode gaya (style sheet), tetapi juga mengandung informasi metadata tentang tema tersebut. Informasi-informasi ini didefinisikan melalui blok komentar khusus, dan merupakan kunci bagi WordPress untuk mengenali suatu tema.

Memahami struktur inti file yang membahas suatu topik tertentu

style.cssBlok komentar di bagian atas file merupakan “kartu identitas” dari suatu topik. Berikut adalah contoh metadata standar:

推荐阅读 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
*/

index.phpIni adalah file template default untuk tema tersebut, dan merupakan template cadangan utama yang akan digunakan untuk semua permintaan halaman. Seiring dengan berlanjutnya proses pengembangan, Anda akan secara bertahap membuat file-file template yang lebih spesifik.header.php、footer.php、single.phpDan sebagainya, untuk membentuk fungsi yang lengkap.

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

Membangun struktur hierarki template dan mekanisme perulangan (loop) untuk sebuah tema

WordPress menggunakan sistem cerdas yang disebut “struktur template” (template hierarchy) untuk menentukan cara menampilkan konten yang berbeda. Ketika pengguna mengakses sebuah halaman, WordPress akan mencari file template yang sesuai sesuai dengan urutan prioritas tertentu. Misalnya, ketika mengakses sebuah artikel blog, WordPress akan mencari file template secara berurutan…single-post.php、single.phpDan yang terakhir adalahindex.phpMemahami dan memanfaatkan struktur hierarki ini merupakan kunci untuk membuat tema yang fleksibel dan memiliki fungsi yang kuat.

Memahami cara kerja loop (ulang) di WordPress

Inti dari semua penampilan konten adalah “WordPress loop”. Ini merupakan struktur kode PHP yang digunakan untuk memeriksa apakah ada artikel yang perlu ditampilkan di halaman saat ini. Jika ada, maka loop tersebut akan dijalankan untuk menelusuri dan menampilkan artikel-artikel tersebut. Struktur loop yang paling dasar adalah sebagai berikut:

<p>   
      
</p>
        <h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>

Dalam siklus ini,have_posts()和the_post()Ini adalah fungsi inti (core function).the_title()和the_content()Tag template digunakan untuk menampilkan informasi spesifik dari sebuah artikel. Dengan menggunakan perulangan (loop), Anda dapat mengontrol daftar artikel, halaman artikel individu, serta area mana pun yang memerlukan pencarian dan penampilan konten.

Buat file template untuk bagian header (atas) dan footer (bawah).

Untuk meningkatkan tingkat penggunaan kembali (reusability) dan kemudahan pemeliharaan (maintainability) kode, bagian header dan footer dari sebuah halaman web biasanya dipisahkan menjadi berkas template yang terpisah.header.phpFile tersebut harus memuat deklarasi jenis dokumen (document type declaration).Bagian navigasi umum di wilayah tersebut, serta di bagian atas situs web. Kemudian,index.phpDalam berbagai file tersebut, digunakan…get_header();Gunakan fungsi untuk memasukkannya (mengimpornya).

推荐阅读 Mulai dari Nol: Arsitektur Inti Pengembangan Tema WordPress。

Demikian pula, untuk membuatnya…footer.phpFile tersebut berisi informasi bagian bawah (footer) yang bersifat umum untuk situs web, referensi skrip (script references), dan lainnya.get_footer();Pengenalan fungsi (Function Introduction).get_sidebar();和get_template_part();Juga merupakan fungsi yang sering digunakan untuk template yang bersifat modular (terdiri dari komponen-komponen yang dapat digunakan kembali).

Implementasi Fitur Tema dan Fitur Lanjutan

Sebuah tema WordPress yang matang tidak hanya memerlukan tata letak (template) yang menarik, tetapi juga dukungan fitur yang kuat. Hal ini terutama dicapai melalui…functions.phpFile ini digunakan untuk mengimplementasikan berbagai fitur. File tersebut berfungsi seperti “otak” dari sebuah tema, digunakan untuk menambahkan fitur baru, mendaftarkan komponen, serta mengubah perilaku default (perilaku yang ditentukan secara default oleh sistem).

Tambahkan dukungan untuk tema ke dalam file fungsi.

functions.phpFile ini digunakan untuk mengaktifkan fitur-fitur inti WordPress, seperti thumbnail artikel, menu kustom, dukungan untuk tag HTML5, dan lainnya. Berikut adalah contoh umum pengaktifan suatu fitur:

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_setup() {
    // 添加对文章特色图片（缩略图）的支持
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_theme_support()Fungsi ini digunakan untuk mendeklarasikan berbagai fitur yang didukung oleh suatu tema. Dengan demikian,register_nav_menus()Lokasi restoran yang telah terdaftar dapat diberikan melalui menu “Tampilan” -> “Menu” di bagian administrasi, dan kemudian dapat digunakan dalam template.wp_nav_menu()Panggilan fungsi.

Mengintegrasikan file gaya (style sheet) dan file skrip (script file)

Pengetahuan tentang cara mengatur antrian sumber daya (resource queuing) yang benar merupakan keterampilan penting yang harus dikuasai oleh para pengembang tema profesional. Jangan pernah langsung membuat tautan langsung (hard link) ke file CSS atau JS dalam template, melainkan gunakan metode yang sesuai.wp_enqueue_style()和wp_enqueue_script()Fungsi tersebut memastikan bahwa hubungan ketergantungan antar komponen benar-benar terjaga, sehingga dapat mencegah pengunduhan ulang atau konflik sumber daya yang tidak diinginkan.

在functions.phpTambahkan ini ke dalam Chinese (sederhana):

推荐阅读 Mulai dari Nol: Panduan Lengkap dan Berbagi Praktik Terbaik dalam Pengembangan Tema WordPress。

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Yang diperoleh adalah…style.cssPath tersebut…get_template_directory_uri()Yang diperoleh adalah URL dari direktori akar (root directory) dari tema tersebut.

Membuat template halaman kustom dan sub-topik

Untuk memenuhi kebutuhan desain halaman tertentu, Anda dapat membuat template halaman khusus. Misalnya, membuat template halaman dengan lebar penuh yang tidak memerlukan sidebar. Cukup tambahkan komentar dengan nama template yang diinginkan di bagian awal setiap file PHP, lalu unggah file tersebut ke dalam direktori tema. Template tersebut akan muncul dalam daftar pilihan “Template” di editor halaman backend.

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

Cara membuat template halaman kustom

Buatlah sesuatu yang bernama…template-fullwidth.phpUntuk file tersebut, bagian awalnya harus berbunyi seperti ini:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽度页面模板
 */

Dalam berkas ini, Anda dapat menulis struktur HTML dan PHP yang independen; namun, isi dari struktur tersebut mungkin tidak termasuk (tidak disertakan dalam berkas tersebut).get_sidebar();Panggil (call) template tersebut. Saat membuat halaman baru, pilih template ini; WordPress akan menggunakan template ini untuk menampilkan kontennya.

Menggunakan sub-topik untuk melakukan penyesuaian dan peningkatan dengan aman

Mengubah tema pihak ketiga secara langsung berisiko, karena pembaruan tema dapat menimpa semua perubahan yang telah Anda lakukan. Cara yang benar adalah dengan membuat subtema. Subtema hanya berisi file-file kustom Anda sendiri dan mewarisi semua fitur dari tema induknya. Subtema hanya memerlukan satu…style.cssDan satu orang lagi.functions.php。

subtopicstyle.cssKomentar di bagian atas (header) harus mencakup…Template:Gunakan baris berikut untuk menentukan nama direktori tema induk:

/*
Theme Name: 我的子主题
Template: twentytwentyfour
*/

Di dalam subtopik tersebut…functions.phpDi dalamnya, Anda dapat menambahkan fitur baru atau menggantikan fungsi yang ada pada tema induk. Jika hanya perlu menambahkan gaya (style), maka tema anak (sub-theme) dapat melakukannya sendiri.style.cssAkan secara otomatis diunduh setelah gaya tema induk (parent theme) diunduh, sehingga aturan yang Anda buat akan menimpa aturan yang ada di tema induk.

Menyimpulkan.

Pengembangan tema WordPress merupakan proses yang dimulai dengan memahami struktur file dasar, kemudian secara bertahap mempelajari hierarki template, mekanisme perulangan (looping), hingga menambahkan fitur-fitur baru melalui file-fungsi khusus. Inti dari pengembangan tema ini adalah membangun template secara termodul (seperti header, footer, sidebar), serta mengelola sumber daya (resource) sesuai dengan aturan tertentu. Dengan membuat template halaman khusus, kebutuhan tata letak yang unik dapat terpenuhi. Pemahaman teknik sub-theme (sub-theme) sangat penting untuk melakukan penyesuaian yang aman dan memudahkan proses pemeliharaan di masa depan. Seluruh proses ini memerlukan penggabungan pengetahuan tentang PHP, HTML, CSS, dan JavaScript dengan fungsi serta sistem hook khusus WordPress, sehingga dapat dibangun antarmuka situs web yang tidak hanya menarik secara visual, tetapi juga memiliki fungsi yang lengkap.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk mengembangkan tema WordPress, seseorang harus mahir dalam PHP?

Ya, diperlukan pengetahuan dasar PHP yang kuat. WordPress sendiri dibangun menggunakan PHP, dan file template serta logika fungsional dari tema-temanya bergantung pada kode PHP untuk menghasilkan konten dinamis serta melakukan interaksi data. HTML, CSS, dan JavaScript merupakan dasar untuk presentasi halaman web di sisi pengguna (front end), sedangkan PHP berperan sebagai jembatan yang menghubungkan elemen-elemen tersebut dengan basis data WordPress di sisi server (back end).

Mengapa gaya kustom saya tidak berfungsi?

Hal ini biasanya disebabkan oleh prioritas (specificity) selektor CSS yang tidak cukup tinggi, atau karena tabel gaya (style sheet) tidak diunduh dengan benar. Pertama-tama, periksa alat pengembang browser untuk memastikan bahwa aturan CSS Anda diterapkan pada elemen-elemen yang diinginkan, dan apakah aturan tersebut tidak ditimpa oleh aturan lain dengan prioritas yang lebih tinggi. Selanjutnya, pastikan bahwa Anda mengunduh dan menginstal tabel gaya tersebut dengan benar.functions.php\nDi dalamnyawp_enqueue_style()Gunakan fungsi khusus untuk memuat file gaya (stylesheet), bukan menuliskannya langsung di dalam bagian header HTML. Saat menggunakan sub tema (sub-theme), pastikan bahwa file gaya dari tema induk (parent theme) diwarisi dengan benar.

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

functions.phpFungsi-fungsi yang terdapat dalam suatu tema sangat terkait erat dengan tema tersebut, sehingga ketika pengguna beralih ke tema lain, fungsi-fungsi tersebut akan tidak berfungsi lagi. Cakupan penggunaan fungsi-fungsi tersebut hanya terbatas pada situs web yang menggunakan tema tersebut. Sebaliknya, fungsi-fungsi yang disediakan oleh plugin bersifat independen terhadap tema; sehingga setelah beralih tema, fungsi plugin biasanya masih tetap aktif, yang memudahkan penggunaan plugin di berbagai situs web. Ada prinsip yang baik dalam hal ini: jika suatu fungsi hanya digunakan untuk tujuan penyajian konten (seperti tata letak atau gaya tampilan), sebaiknya fungsi tersebut dimasukkan ke dalam tema; namun jika fungsi tersebut bertujuan untuk menambahkan fitur inti pada situs web (seperti formulir kontak atau optimisasi SEO), lebih baik jika fungsi tersebut dibuat dalam bentuk plugin.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Anda perlu melakukan dua hal: persiapan bidang teks (text fields) dan pembuatan file bahasa (language files). Pertama-tama, di seluruh tema ini, gunakan fungsi penerjemahan (translation functions) dari WordPress untuk semua string yang ditujukan kepada pengguna.__('文本', 'my-theme')或_e('文本', 'my-theme')Dan pastikan…style.css\nYang didefinisikan di tengahText DomainSesuai dengan ‘my-theme’ yang ada di sini. Kemudian, gunakan alat seperti Poedit untuk memindai file tema tersebut, sehingga dapat dihasilkan….potFile template..po和.moFile tersebut diletakkan di dalam bagian yang berkaitan dengan topik (theme)./languages/Berada di dalam direktori tersebut. WordPress akan secara otomatis memuat terjemahan yang sesuai berdasarkan pengaturan bahasa situs web.