Mulai dari Nol: Panduan Lengkap dan Teknologi Inti untuk Mengembangkan Tema WordPress

Tema WordPress merupakan kerangka dasar yang menentukan tampilan dan fungsi sebuah situs web. Menguasai kemampuan pengembangan tema berarti Anda dapat sepenuhnya menyesuaikan segala aspek situs web Anda, bebas dari keterbatasan tema yang sudah tersedia, dan mewujudkan konsep desain serta kebutuhan fungsional yang unik. Memulai dengan memahami konsep dasar dan struktur file tema merupakan langkah pertama dalam perjalanan tersebut.

Setiap tema WordPress merupakan sebuah file yang terletak di…/wp-content/themes/Folder dalam direktori tersebut. Untuk sebuah tema fungsional yang paling dasar, hanya diperlukan dua file saja:style.css和index.phpDi antaranya,style.cssFile tersebut tidak hanya digunakan untuk menyimpan kode gaya (style) saja, tetapi juga berisi komentar di bagian awal file (header) yang berisi metadata tentang tema tersebut. Metadata ini sangat penting bagi WordPress untuk mengenali suatu tema dengan benar.

在style.cssDi bagian atas, Anda perlu menggunakan komentar khusus untuk mendefinisikan topiknya. Contoh tipikalnya adalah sebagai berikut:

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Tutorial Praktis Dari Pemula Hingga Ahli。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Informasi ini akan muncul di daftar “Tampilan > Tema” (Appearance > Themes) di panel administrasi WordPress.index.phpIni adalah file template utama dari tema tersebut, yang digunakan sebagai solusi default ketika template yang lebih spesifik tidak tersedia. Seiring dengan perkembangan proyek, Anda akan secara bertahap menggantikan atau melengkapi file template ini dengan file-file template yang lebih spesifik.

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 hierarki template dari suatu topik

WordPress menggunakan sistem hierarki template yang canggih untuk menentukan file template mana yang harus digunakan untuk merender setiap permintaan halaman tertentu. Memahami sistem hierarki ini merupakan dasar penting dalam pengembangan tema yang efisien, karena hal tersebut akan membantu Anda menentukan nama file yang tepat saat membuat halaman-halaman khusus, seperti halaman detail artikel atau halaman daftar kategori.

Aturan Penamaan File Template Utama

Struktur hierarki template di WordPress mengikuti prinsip “dari khusus ke umum”. Misalnya, ketika seseorang mengakses sebuah artikel blog dengan ID 123, WordPress akan mencari template yang sesuai dengan urutan berikut:single-post-123.php、single-post.php、single.phpDan terakhir,singular.phpJika semua hal tersebut tidak ada, barulah metode tersebut akan digunakan.index.php。

File template inti yang sering digunakan meliputi:
- front-page.phpDigunakan untuk mengatur halaman utama situs web.
- home.phpHalaman indeks artikel blog.
- single.phpSatu artikel blog atau satu artikel dari jenis artikel kustom.
- page.phpHalaman tunggal (Single Page).
- archive.phpTemplate umum untuk berbagai halaman arsip (pengelompokan, tag, penulis, dll.).
- category.phpHalaman direktori kategori tertentu.
- 404.phpHalaman kesalahan 404.
- header.php、footer.php、sidebar.phpIni biasanya merupakan fragmen template lokal.

Fungsi-fungsi umum yang digunakan untuk memanggil template lokal:

Untuk menjaga modulasi dan kemudahan pemeliharaan kode, WordPress menyediakan beberapa fungsi kunci untuk memuat file template lokal. Yang paling penting adalah…get_header()、get_footer()和get_sidebar()Mereka masing-masing digunakan untuk memasukkan (mengintroduksikan) konten tertentu.header.php、footer.php和sidebar.php。

推荐阅读 Konsep-konsep inti dalam pengembangan tema WordPress:。

Fungsi lain yang sangat penting adalah…get_template_part()Hal tersebut memungkinkan Anda untuk memasukkan fragmen template dengan cara yang lebih fleksibel. Misalnya, dalam siklus penulisan artikel di blog, Anda mungkin ingin memasukkan template khusus untuk konten artikel tersebut.

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

Kode ini akan mencari terlebih dahulu…template-parts/content-post.php(Assuming the article type is...)postJika tidak ditemukan, maka akan dilakukan proses pengunduhan (loading).template-parts/content.php。

Menggunakan fungsi inti dan fitur pengendali (hook) untuk memandu proses.

Kekuatan WordPress berasal dari pustaka fungsi yang besar dan sistem “hook” yang berbasis peristiwa (event-driven). Dalam pengembangan tema, penggunaan fungsi inti dan hook dengan mahir merupakan kunci untuk mengimplementasikan fitur yang kompleks, mengoptimalkan kinerja, serta meningkatkan keamanan.

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

Fungsi dasar untuk mengambil dan menghasilkan konten

Dalam berkas template, Anda sering menggunakan serangkaian fungsi untuk mendapatkan dan menampilkan konten dinamis. Misalnya,the_title()Digunakan untuk menampilkan judul artikel atau halaman saat ini.the_content()Maka, konten utama yang telah diformat akan ditampilkan. Yang sesuai dengan fungsi output langsung adalah…get_Fungsi-fungsi di awal, seperti…get_the_title()Mereka mengembalikan data yang dapat Anda gunakan untuk diproses lebih lanjut dalam kode Anda.

Siklus artikel blog merupakan inti dari template WordPress, dan struktur kode standarnya adalah sebagai berikut:

<p>   
      
</p>
        <!-- 在这里输出文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
    <!-- 这里可以放置分页导航 -->
<?php else : ?>
    <!-- 如果没有找到文章，显示的内容 -->
    <p>Tidak ada konten untuk saat ini.</p>
<?php endif; ?>

Mengembangkan fungsionalitas melalui hook (pemanggil fungsi tertentu yang telah ada dalam sistem).

Hook terbagi menjadi dua jenis: “aksi” (action) dan “filter”. Hook tipe aksi memungkinkan Anda untuk menambahkan kode Anda sendiri saat peristiwa tertentu terjadi, misalnya saat…wp_headOutput additional meta tags within the hook. You can use them.add_action()Fungsi yang digunakan untuk “menggantungkan” (menghubungkan) fungsi lain ke dalamnya.

推荐阅读 Panduan Dasar Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda Dari Nol。

Misalnya, dalam topik…functions.phpTambahkan dukungan untuk tautan Feed ke dalam file:

add_action( 'after_setup_theme', 'mytheme_setup' );
function mytheme_setup() {
    // 为文章和评论添加Feed链接到head中
    add_theme_support( 'automatic-feed-links' );
}

Filter hooks memungkinkan Anda untuk memodifikasi data. Misalnya, dengan menggunakan…excerpt_lengthFilter dapat mengubah panjang ringkasan 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

add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );
function mytheme_custom_excerpt_length( $length ) {
    return 30; // 将摘要长度设置为30个单词
}

functions.phpFile merupakan “pusat fungsional” dari sebuah tema; semua fungsi kustom, pemanggilan hook, serta deklarasi fungsi-fungsi tema seharusnya ditempatkan di sini.

Deklarasi fitur tema mendukung (Theme feature declaration is supported.)

Gunakanadd_theme_support()Menggunakan fungsi untuk menyatakan fitur-fitur inti WordPress yang didukung oleh tema Anda merupakan praktik pengembangan yang baik. Hal ini tidak hanya memungkinkan fitur-fitur tersebut untuk diaktifkan, tetapi juga memastikan kompatibilitas dengan versi WordPress di masa depan.

Pernyataan fungsional yang umum meliputi:

add_action( 'after_setup_theme', 'mytheme_theme_support' );
function mytheme_theme_support() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5语义化标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
}

Mengintegrasikan gaya dan file skrip kustom

Sebuah tema yang modern harus mengelola file gaya CSS (Cascading Style Sheets) dan skrip JavaScript-nya dengan benar, agar dapat diunduh sesuai kebutuhan, menghindari konflik, serta mematuhi praktik terbaik untuk optimalisasi kinerja halaman web (front-end performance).

Pendaftaran yang aman dan pengunduhan sumber daya (resources)

Jangan pernah menggunakan kode langsung di dalam file template.<link>或<script>Menggunakan tag untuk mengkodekan sumber daya secara manual. Cara yang benar adalah dengan menggunakanwp_enqueue_scriptsAction hook, used in conjunction with...wp_enqueue_style()和wp_enqueue_script()Fungsi.

在functions.phpDi dalamnya, Anda perlu mendefinisikan sebuah fungsi untuk menangani proses antrian sumber daya (resource queuing):

add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );
function mytheme_enqueue_assets() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0' );

// 加载Google字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', array(), null );

// 加载主JavaScript文件，并依赖jQuery，在页脚加载
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );

// 如果需要传递PHP变量到JS，可以使用wp_localize_script
    wp_localize_script( 'mytheme-script', 'myThemeData', array(
        'ajax_url' => admin_url( 'admin-ajax.php' ),
        'home_url' => home_url(),
    ));
}

Metode ini memastikan bahwa hubungan ketergantungan (dependency relationships) benar-benar terpenuhi, mencegah pengunduhan berulang (reloading), dan memungkinkan plugin serta tema lainnya untuk dikelola melalui deklarasi ketergantungan (dependency declarations) yang ada.

Menambahkan dukungan untuk penyesuaian gaya (styling) pada editor Gutenberg

Seiring dengan semakin populernya editor blok, menjadi sangat penting untuk menambahkan dukungan gaya tampilan (front-end style) ke editor backend, agar pengalaman pengeditan dapat mencapai prinsip “apa yang terlihat, itulah yang dihasilkan” (what you see is what you get). Anda dapat menggunakan…add_theme_support( ‘editor-styles’ )Dan tambahkan pula sebuah tabel gaya editor ke dalam antrian (queue).

add_action( 'after_setup_theme', 'mytheme_editor_styles' );
function mytheme_editor_styles() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'assets/css/editor-style.css' );
}

Menyimpulkan.

Pengembangan tema WordPress dimulai dengan memahami struktur file dasar, kemudian secara bertahap mempelajari tingkat template, fungsi inti (core functions), sistem hook, dan manajemen sumber daya (resource management). Kuncinya adalah praktik: mulai dari yang paling sederhana…style.css和index.phpMulai, lalu buatlah.header.php和footer.phpLakukan pemisahan modul secara terstruktur (modularization). Selanjutnya, gunakan hierarki template untuk membuat template khusus untuk berbagai jenis halaman.single.php或page.php…di…functions.phpDi dalamnya, penggunaan “kait” (hook) dan…add_theme_supportTambahkan fitur dengan aman, dan selalu lakukan proses tersebut dengan cara yang benar (sesuai dengan standar atau prosedur yang berlaku).wp_enqueue_scriptsDigunakan untuk mengelola gaya tampilan (style) dan skrip (script) dalam sebuah tema WordPress. Dengan mengikuti prinsip-prinsip dan langkah-langkah inti ini, Anda akan dapat membuat tema WordPress yang profesional, efisien, dan mudah diperawat.

FAQ - Pertanyaan yang Sering Diajukan.

Untuk membuat sebuah tema WordPress, setidaknya diperlukan beberapa file berikut:

Dari segi teknis, sebuah tema yang diakui dan diaktifkan oleh WordPress memerlukan setidaknya dua file:style.css和index.php。style.cssKomentar di bagian header file harus mencakup metainformasi topik yang benar, misalnya…Theme NameDanindex.phpSebagai file template yang paling mendasar, file ini digunakan untuk merender semua halaman.

Bagaimana cara membuat template halaman khusus (custom page template) untuk tema saya?

Membuat template halaman kustom sangat sederhana. Anda hanya perlu melakukannya di file template mana pun (yang biasanya…).page.phpTambahkan blok komentar PHP tertentu di bagian atas kode. Misalnya, untuk membuat template “halaman penuh lebar” (full-width page), Anda dapat membuat file baru dengan nama…template-full-width.phpFile tersebut, dan tuliskan di awal file:/* Template Name: 全宽页面 */Setelah menyimpannya, saat Anda mengedit halaman di backend WordPress, Anda dapat melihat dan memilih opsi “Halaman Lebar Penuh” (Full Width Page) dari daftar drop-down “Template” di bagian “Properti Halaman” (Page Properties).

Mengapa perlu menggunakan `add_action` di `functions.php` untuk menambahkan fitur?

Langsung saja…functions.phpMenulis kode fungsi di tengah proses dapat menyebabkan kode tersebut dieksekusi pada waktu yang tidak tepat, sehingga menimbulkan kesalahan atau fungsi tidak berjalan sebagaimana mestinya.add_action()或add_filter()Menggantungkan fungsi Anda pada hook tertentu di WordPress dapat memastikan bahwa kode tersebut dieksekusi pada waktu yang tepat dan dengan cara yang aman. Misalnya,after_setup_themeHook digunakan untuk inisialisasi tema (theme).wp_enqueue_scriptsHook digunakan untuk memuat sumber daya (resource). Ini merupakan praktik terbaik dalam arsitektur berbasis plugin WordPress, yang dapat meningkatkan modulasi dan kompatibilitas kode.

Bagaimana cara membuat tema saya mendukung terjemahan berbahasa multibahasa?

Untuk membuat sebuah tema mendukung berbagai bahasa, perlu dilakukan beberapa langkah. Pertama-tama,style.cssDigunakan di bagian header dan semua file template.__()、_e()Gunakan fungsi penerjemahan untuk membungkus semua string teks yang perlu diterjemahkan. Selanjutnya,functions.phpGunakan dalam bahasa Cinaload_theme_textdomain()Fungsi tersebut digunakan untuk memuat file terjemahan. Setelah itu, alat seperti Poedit digunakan untuk mengekstrak string-string dari kode sumber dan menghasilkan file terjemahan yang diperlukan..potFile, dan mohon penerjemah untuk membuat terjemahan yang sesuai dalam bahasa yang ditentukan (misalnya:zh_CN.po和.moSilakan pastikan bahwa file terjemahan tersebut diletakkan di dalam direktori tema (theme directory)./languages/Cukup letakkan di dalam folder tersebut.

Apa saja izin dan norma yang perlu diperhatikan saat mengembangkan tema komersial?

Dalam mengembangkan tema komersial yang digunakan untuk distribusi atau penjualan, Anda harus mematuhi persyaratan lisensi WordPress dengan ketat. Poin terpenting adalah tema tersebut harus menggunakan lisensi GPL v2 atau versi yang lebih baru, yang sama dengan lisensi inti WordPress. Hal ini berarti orang lain berhak menggunakan, memodifikasi, dan mendistribusikan kembali kode tema Anda. Selain itu, Anda perlu mengikuti standar pengkodean resmi WordPress serta pedoman peninjauan tema untuk memastikan kualitas, keamanan, dan kompatibilitas kode. Penting juga untuk menyatakan dengan jelas lisensi dari semua sumber daya pihak ketiga (seperti font dan kumpulan ikon) yang digunakan, dan memastikan bahwa lisensi tersebut kompatibel dengan GPL atau telah mendapatkan izin komersial.