Panduan Pengantar Pengembangan Tema WordPress: Membangun Tema Kustom Pertama Anda Dari Nol

Memulai dengan pengembangan tema WordPress berarti Anda tidak lagi terbatas pada penggunaan tema yang sudah ada, melainkan dapat membuat tampilan dan fitur situs web yang unik sesuai dengan kebutuhan tertentu. Panduan ini akan membimbing Anda melalui langkah-langkah penting dalam membuat tema kustom yang sederhana namun lengkap fungsinya, mulai dari persiapan lingkungan hingga pengorganisasian file template.

Struktur dasar dan file dari tema WordPress

Sebuah tema WordPress yang paling sederhana hanya memerlukan dua file untuk dapat dikenali oleh sistem administrasi (backend). Memahami fungsi dari file-file inti ini merupakan langkah pertama dalam proses pengembangan.

File yang mendefinisikan gaya tampilan dan informasi dari suatu topik (topic).

File pertama yang diperlukan adalah…style.cssBukan hanya sebagai lembar gaya (style sheet) untuk tema tersebut, tetapi juga berfungsi sebagai “berkas header informasi” (information header file). Blok komentar di bagian atas berkas ini mendefinisikan metadata dari tema tersebut. Tanpa informasi ini, WordPress tidak akan dapat mengenali tema yang Anda gunakan.

推荐阅读 Dari Pemula hingga Ahli: Panduan Lengkap Pengembangan Tema WordPress Tingkat Profesional。

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

Di bawah blok komentar, Anda dapat menambahkan aturan gaya (style rules) sebagaimana Anda menulis kode CSS biasa.

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

Template for the core index of the topic

File kedua yang diperlukan adalah…index.phpIni adalah file template default untuk suatu tema. Ketika WordPress tidak menemukan template yang lebih spesifik (misalnya,single.php或page.phpKetika hal tersebut terjadi, alat tersebut akan digunakan untuk merender halaman web. Contoh paling sederhana dari penggunaannya adalah…index.phpBisa hanya menggunakan siklus untuk memanggil artikel-artikel blog saja.

Selain kedua file tersebut, sebuah tema yang lengkap dan fungsional biasanya juga mencakup:header.php(Header)footer.php(Footer)functions.php(Fungsi-fungsi tersebut)single.php(Artikel halaman) danpage.php(Page) Dan lainnya.

Membangun lingkungan pengembangan lokal

Sebelum memulai proses pengkodean, sangat penting untuk membuat lingkungan pengembangan lokal. Hal ini memungkinkan Anda melakukan pengujian dan debugging tanpa mempengaruhi situs web yang berjalan di internet.

Menggunakan perangkat lunak server lokal

Disarankan untuk menggunakan paket perangkat lunak server lokal yang terintegrasi, seperti Local by Flywheel, XAMPP, atau MAMP. Alat-alat ini memungkinkan instalasi Apache/Nginx, PHP, dan MySQL dengan satu klik saja, serta menyediakan antarmuka pengelolaan yang mudah digunakan. Sebagai contoh, Local by Flywheel dirancang khusus untuk WordPress, sehingga memungkinkan pembuatan situs web dengan cepat dan konfigurasi sertifikat SSL yang mudah.

推荐阅读 Panduan Lengkap Pengembangan Plugin WordPress: Membangun Ekstensi Profesional Dari Nol。

Menginstal WordPress dan editor kode

Dalam lingkungan server lokal, unduh paket instalasi WordPress terbaru, lalu lakukan instalasi sesuai petunjuk yang diberikan. Selain itu, Anda memerlukan editor kode yang efisien. Visual Studio Code merupakan pilihan yang sangat baik, karena memiliki berbagai ekstensi seperti PHP Intelephense (pemberitahuan cerdas tentang kode), WordPress Snippet (potongan kode yang dapat digunakan kembali), dan Live Server (fitur pratinjau langsung), yang dapat sangat meningkatkan efisiensi pengembangan.

Letakkan folder tema Anda (misalnya, bernama “my-first-theme”) di dalam direktori instalasi WordPress./wp-content/themes/Di dalamnya, masukkan…style.css和index.phpAnda dapat melihat dan mengaktifkannya di bagian “Tampilan” -> “Tema” di panel administrasi WordPress (WordPress backend).

Membangun file template inti untuk tema

Topik tersebut mengorganisir logika tampilan berbagai halaman melalui serangkaian berkas template. Memahami struktur hierarki template merupakan kunci dalam membangun sebuah topik (theme).

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

Membuat template untuk header dan footer

Biasanya, kita memisahkan konten bagian atas (header) dan bagian bawah (footer) dari sebuah situs web ke dalam file-file yang terpisah, agar dapat digunakan kembali (dipakai lagi).header.phpFile tersebut harus berisi header dokumen HTML.Area (panggilan)wp_head()Fungsi-fungsi tersebut, serta bagian umum yang terletak di bagian atas situs web (seperti Logo dan menu navigasi).

<!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>
    <header id="masthead">
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
    </header>

Demikian pula, untuk membuatnya…footer.phpMemuat konten bagian kaki (footer) dan memanggilnya…wp_footer()Fungsi. Lalu…index.phpDi dalamnya, digunakan…get_header()和get_footer()Gunakan fungsi untuk mengimpor (mengunduh) mereka.

Mengimplementasikan siklus artikel dan penampilan konten

Inti dari WordPress adalah “The Loop” (Siklus Pengulangan), yang berfungsi untuk memeriksa apakah ada artikel, dan jika ada artikel, maka setiap artikel akan diproses secara berurutan.index.phpDi dalamnya, struktur perulangan dasar adalah sebagai berikut:

推荐阅读 Cara Mengembangkan Tema WordPress yang Dikustomisasi: Panduan Dari Pemula Hingga Ahli。

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>">
            <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    &lt;?php endwhile;
else :
    echo &#039;<p>暂无文章。</p>';
endif;
?&gt;

Di sini digunakan…the_title()、the_permalink()和the_excerpt()Gunakan tag template untuk menampilkan informasi artikel.

Meningkatkan tema dengan menggunakan file fungsi

functions.phpFile merupakan “pusat kendali” untuk topik Anda; berfungsi untuk menambahkan fitur, mendaftarkan menu, serta menyisipkan elemen sidebar, bersama dengan file gaya (style sheet) dan skrip (script).

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

Mendaftarkan menu navigasi dan sidebar

Untuk membuat tema tersebut mendukung manajemen menu visual di backend, Anda perlu…functions.phpDaftar lokasi restoran di sini. Gunakan fitur ini untuk menemukan restoran yang Anda cari.register_nav_menus()Fungsi tersebut digunakan untuk menyelesaikan tugas tertentu.

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

Setelah itu, Anda dapat menggunakan file template (seperti…)header.phpDigunakan dalam (…)wp_nav_menu( array( 'theme_location' => 'primary' ) )Untuk menampilkan menu ini.

Mengintegrasikan gaya (styles) dan skrip (scripts) dengan benar

Jangan pernah langsung melakukannya.<link>或<script>Sumber daya yang dikodekan secara keras dalam tag (hard-coded resources in tags) sebaiknya tidak digunakan.wp_enqueue_style()和wp_enqueue_script()Fungsi tersebut, lalu di-mount (dipasang) ke…wp_enqueue_scriptsDi kait ini… Hal ini memastikan bahwa hubungan ketergantungan (dependency relationships) berjalan dengan benar dan mencegah pengunduhan yang berulang-ulang.

function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Menyimpulkan.

Dari pembuatan dokumen yang berisi header informasi dasar…style.cssDan perulangan dasar (basic loops).index.phpMulai saja; Anda telah mengambil langkah pertama dalam pengembangan tema WordPress. Dengan membagi komponen halaman header dan footer, membuat file template inti, dan…functions.phpDengan menambahkan fitur dan sumber daya secara terstruktur, Anda dapat perlahan-lahan membangun sebuah tema kustom yang memiliki struktur yang jelas dan mudah dikelola. Ingatlah bahwa pengembangan tema adalah proses yang bersifat iteratif: mulailah dengan memenuhi kebutuhan fitur dasar, lalu teruslah memperluas dan menyempurnakannya sesuai dengan kebutuhan.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah untuk membuat tema WordPress, seseorang harus menguasai PHP?

Ya, PHP merupakan bahasa pemrograman inti dari WordPress. Untuk mengembangkan tema dengan lebih mendalam, sangat penting untuk memahami dasar-dasar sintaks PHP, fungsi inti WordPress (tag template), serta mekanisme Hook dan Loop-nya. Meskipun Anda dapat memulai dengan mengubah kode CSS dan template sederhana dari tema yang sudah ada, fitur-fitur kustomisasi tidak dapat dicapai tanpa menggunakan PHP.

Bisakah saya menguji tema tersebut tanpa perlu mengubah kode?

Disarankan dengan kuat untuk melakukan pengembangan dan pengujian tema di lingkungan pengembangan lokal atau di lingkungan sementara/test situs web online. Jangan pernah langsung mengembangkan tema baru atau melakukan modifikasi besar-besaran di situs web yang sudah beroperasi secara resmi, karena hal tersebut dapat menyebabkan gangguan fungsi sementara atau tampilan yang tidak sesuai di situs web tersebut.

Mengapa efek dari tema yang saya aktifkan tidak terlihat di bagian belakang (backend)?

Silakan periksa terlebih dahulu apakah folder tema telah diletakkan di tempat yang benar./wp-content/themes/Di dalam direktori tersebut. Kemudian, pastikan.style.cssApakah format blok komentar informasi tema di bagian atas file tersebut benar? Kesalahan ejaan atau ketiadaan tanda koma dapat menyebabkan kegagalan dalam proses pengenalan (identifikasi). Akhirnya, pastikan hal tersebut sudah diperiksa dengan cermat.index.phpFile tersebut sudah ada.

Bagaimana cara membuat tata letak (layout) yang berbeda untuk jenis halaman yang berbeda?

WordPress mengikuti seperangkat aturan hierarki template. Misalnya, untuk membuat tata letak yang unik untuk halaman artikel blog tertentu, Anda dapat membuat…single.phpFile: Untuk membuat tata letak (layout) untuk halaman statis, silakan buat file tersebut.page.phpKetika halaman yang bersangkutan diakses, WordPress akan secara otomatis lebih memilih untuk menggunakan file template yang lebih spesifik tersebut, daripada template default.index.php。