Panduan Memulai Pengembangan Tema WordPress: Membuat Situs Web yang Personal dari Nol.

Konsep Dasar Pengembangan Tema WordPress

Sebelum memulai menulis kode, sangat penting untuk memahami komponen dasar dari sebuah tema WordPress. Sebuah tema pada dasarnya adalah sebuah folder yang berisi serangkaian file, dan file-file inilah yang bersama-sama menentukan tampilan serta sebagian fungsi dari situs web. Sistem WordPress membaca file-file tersebut untuk merender konten halaman web.

Sebuah tema yang paling dasar setidaknya memerlukan dua file:style.css和index.phpDi antaranya,style.cssTidak hanya bertanggung jawab atas tata letak (style) halaman, blok komentar di bagian awal file tersebut juga berisi metadata tentang tema, seperti nama tema, penulis, deskripsi, nomor versi, dan lainnya. Inilah titik awal yang digunakan oleh WordPress untuk mengenali sebuah tema.

WordPress menggunakan sistem hierarki template untuk menentukan template file mana yang akan digunakan pada halaman-halaman tertentu. Misalnya, ketika seseorang mengakses sebuah artikel tertentu, WordPress akan mencari template yang sesuai terlebih dahulu.single.phpSaat mengakses halaman daftar artikel blog, sistem akan mencari…index.php或home.phpSaat mengakses halaman tersebut, maka proses pencarian akan dimulai.page.phpMemahami hubungan hierarki ini akan memungkinkan Anda untuk menulis kode di posisi yang tepat.

推荐阅读 Dari Nol ke Satu: Penjelasan Rinci tentang Teknologi Inti dan Praktik Terbaik dalam Proses Pembangunan Situs Web Modern。

Fungsi dari file inti tema (theme core file):

functions.phpFile ini merupakan inti dari fungsi-fungsi sebuah tema. Meskipun bukan file yang wajib ada, hampir semua tema modern menggunakan file ini. Di dalam file ini, Anda dapat menambahkan fitur-fitur yang mendukung tema, menu pendaftaran, sidebar, memasukkan skrip dan tabel gaya (style sheets), serta mendefinisikan berbagai fungsi kustom. File ini akan diunduh secara otomatis saat tema diinisialisasi, dan merupakan kunci untuk memperluas kemampuan sebuah tema.

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

File kunci lainnya adalah…header.phpBiasanya, halaman tersebut berisi deklarasi jenis dokumen, bagian untuk menyisipkan kode CSS dan JS, serta bagian yang bersama untuk semua halaman situs web (seperti header).footer.phpMaka, kode tersebut akan mencakup konten bersama untuk bagian kaki halaman (footer) serta tag penutupnya. Semua ini dilakukan menggunakan fungsi-fungsi yang tersedia di WordPress.get_header()和get_footer()Anda dapat dengan mudah memasukkannya ke dalam file template lainnya, sehingga kode tetap termodulasi dan mudah diperawat.

Membangun lingkungan pengembangan lokal dan membuat struktur tema

Sebelum meng部署 tema ke server online, membuat lingkungan pengembangan lokal merupakan cara yang paling efisien dan aman. Anda dapat menggunakan alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Docker untuk dengan cepat menginstal Apache, MySQL, dan PHP di komputer lokal, serta menjalankan WordPress.

Setelah lingkungan siap, Anda dapat mulai membuat tema pertama Anda. Pertama-tama, masuk ke direktori instalasi WordPress.wp-content/themesFolder. Buatlah folder baru di sini, dan beri nama sesuai dengan nama tema Anda, misalnya “my-first-theme”. Semua file terkait tema akan diletakkan di dalam folder tersebut.

Selanjutnya, buatlah file-file dasar yang telah disebutkan di atas. Yang pertama adalah…style.cssFile tersebut harus memuat informasi tabel gaya (style sheet) yang spesifik di bagian awalnya (header).

推荐阅读 Membuat Situs Web Profesional: Panduan Utama untuk Pengembangan dan Kustomisasi Tema WordPress Secara Menyeluruh.。

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

Kemudian, buatlah yang paling dasar saja.index.phpFile tersebut. Pada awalnya, file tersebut bisa sangat sederhana; fungsinya hanyalah untuk memastikan bahwa tema tersebut dapat dikenali dan diaktifkan oleh WordPress.

<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Halo, komunitas pengembang tema WordPress!</h1>
    <?php wp_footer(); ?>
</body>
</html>

Pada saat ini, masuk ke halaman “Appearance” -> “Themes” di panel administrasi WordPress, dan Anda seharusnya dapat melihat tema Anda sudah terdaftar di sana. Aktifkan tema tersebut, lalu kunjungi halaman utama situs web Anda untuk melihat pesan sederhana yang dihasilkan oleh kode yang telah Anda tulis sebelumnya. Dengan demikian, kerangka tema kosong pertama Anda telah berhasil dibangun.

Membangun template tema dan struktur perulangan (loop structure)

Tugas utama dari sebuah tema adalah untuk menampilkan konten, dan penampilan konten di WordPress bergantung pada “loop” (siklus pengulangan). Loop merupakan struktur kode PHP di WordPress yang digunakan untuk mengambil artikel (termasuk halaman dan jenis artikel khusus) dari basis data, lalu menampilkan hasilnya di halaman web.

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

Memahami dan mengimplementasikan siklus utama (main loop)

Struktur perulangan yang paling dasar adalah sebagai berikut, dan biasanya ditempatkan di…index.php或single.phpDalam berbagai file template:

<p>   
      
</p>
        <!-- 在这里输出每篇文章的内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <br />
    <p>Tidak ditemukan artikel apa pun.</p>
<?php endif; ?>

have_posts()Fungsi tersebut memeriksa apakah ada artikel yang perlu ditampilkan.the_post()Fungsi tersebut bertugas untuk mengatur data artikel yang sedang aktif, sehingga data tersebut dapat digunakan oleh tag-tag template (seperti…)the_title()、the_content()) Memanggil.

\nMembuat file template yang sering digunakan.

Agar topik tersebut dapat ditangani secara profesional di berbagai halaman, Anda perlu membuat serangkaian berkas template. Selain itu…index.phpTemplate penarikan kembali (rollback template) ini juga seharusnya mencakup pembuatan:

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Dari Pemula Hingga Pemahaman Mendalam dan Praktik Nyata。

• header.phpEkstrak kode header umum.
• footer.phpEkstrak kode bagian bawah yang umum digunakan (common bottom code).
• single.phpDigunakan untuk menampilkan satu artikel saja.
• page.phpDigunakan untuk menampilkan halaman tunggal.
• archive.phpDigunakan untuk menampilkan halaman arsip yang berisi kategori, tag, penulis, dan informasi lainnya.

Kemudian, Anda perlu melakukan rekonstruksi.index.phpGunakan fungsi-fungsi WordPress untuk memasukkan bagian-bagian yang bersifat modular (termodulasi).

<main>
        <?php while ( have_posts() ) : the_post(); ?>
            <article>
                <h2><a href="/id/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <?php the_excerpt(); ?>
            </article>
        <?php endwhile; ?>
    </main>

Dengan cara ini, bagian atas dan bawah halaman dikelola oleh file-file yang terpisah, sehingga file template utama hanya fokus pada logika konten yang khusus untuk halaman tersebut. Strukturnya menjadi lebih jelas dan mudah untuk diperawat.

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 fungsi-fungsi yang terdapat di file functions.php untuk memperkuat fitur-fitur tema.

functions.phpIni adalah “Toolbox” untuk topik Anda. Di sini, Anda dapat menambahkan kode untuk memodifikasi dan memperluas fungsi inti WordPress dengan aman, tanpa perlu mengubah file inti WordPress itu sendiri.

Fungsi-fungsi yang didukung oleh fitur pendaftaran topik:

lulus (tagihan atau inspeksi, dll)add_theme_support()Dalam sebuah fungsi, Anda dapat mendeklarasikan berbagai fitur yang didukung oleh suatu tema. Misalnya, Anda dapat membuat tema tersebut mendukung penggunaan gambar khusus untuk artikel, logo yang dapat disesuaikan, serta ringkasan artikel (abstract).

function my_first_theme_setup() {
    // 让主题支持文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );

// 支持文章格式（可选）
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 为文章和页面开启HTML5标记支持
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Perhatikan, kami telah memasang (menghubungkan) fungsi tersebut ke sistem.after_setup_themeAksi ini terjadi pada hook tertentu. Ini merupakan hook standar yang dieksekusi oleh WordPress setelah tema diunduh dan diinstal, dan merupakan tempat yang tepat untuk melakukan proses inisialisasi tema.

Menu Pendaftaran dan Skrip Gaya (Registration Menu and Style Script)

Menetapkan posisi menu navigasi memungkinkan pengguna untuk mengelola menu melalui menu “Tampilan” -> “Menu” di bagian administrasi (backend).

function my_first_theme_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-first-theme' ),
            'footer'  => __( '底部菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'my_first_theme_menus' );

Dalam berkas template, Anda dapat menggunakan…wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )Untuk menampilkan menu ini.

Terakhir, file CSS dan JavaScript harus diintegrasikan dengan benar; ini merupakan praktik terbaik.

function my_first_theme_scripts() {
    // 引入主题的主要样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );

// 引入自定义的JavaScript文件
    wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );

Gunakanwp_enqueue_style()和wp_enqueue_script()Fungsi tersebut, lalu di-mount (dipasang) ke…wp_enqueue_scripts“Hook” merupakan metode yang direkomendasikan secara resmi oleh WordPress. Metode ini mampu mengelola hubungan antar komponen (dependencies), mencegah pengunduhan ulang file yang sama, serta memastikan kompatibilitas dengan berbagai lingkungan, termasuk penggunaan plugin.

Menyimpulkan.

Dari membuat sebuah konten yang mencakupstyle.css和index.phpDimulai dengan folder tersebut, kemudian memahami struktur template dan mekanisme “perulangan” (looping), hingga akhirnya dapat memanfaatkannya dengan efektif.functions.phpAnda telah menambahkan berbagai fitur kaya ke dalam file tema tersebut, dan Anda telah melewati langkah-langkah inti dalam pengembangan tema WordPress. Kunci dari pengembangan tema adalah pemikiran yang termodulasi: memisahkan bagian-bagian yang berulang (seperti header dan footer) menjadi file-file yang terpisah.functions.phpFungsi manajemen terpusat (centralized management) memungkinkan pengelolaan konten secara efisien, dan aturan hierarki template WordPress digunakan untuk mengatur logika penampilan konten. Dengan memahami dasar-dasar ini, Anda telah membangun fondasi yang kuat untuk membuat situs web yang personal. Anda dapat melanjutkan penjelajahan Anda ke fitur-fitur lebih lanjut seperti area alat tambahan (plugins), jenis artikel yang dapat disesuaikan, serta API untuk penyesuaian tema (theme customizers), sehingga meningkatkan keterampilan pengembangan WordPress Anda secara berkelanjutan.

FAQ - Pertanyaan yang Sering Diajukan.

Apa yang harus dilakukan jika halaman web tidak diperbarui secara langsung setelah topiknya diubah?

Ini biasanya disebabkan oleh cache browser atau mekanisme cache WordPress. Pertama-tama, cobalah melakukan refresh paksa di browser dengan menekan Ctrl+F5 (atau Cmd+Shift+R). Jika masalah masih terjadi, periksa apakah Anda menggunakan plugin cache atau cache di sisi server, lalu cobalah untuk membersihkan semua cache. Untuk file CSS dan JS,wp_enqueue_style和wp_enqueue_scriptDalam sebuah fungsi, Anda dapat menetapkan nilai dinamis untuk parameter nomor versi (misalnya:time()Selama proses pengembangan, hindari penggunaan cache, tetapi setelah produk diluncurkan, ubahlah versi menjadi nomor versi yang tetap (fixed version number).

Mengapa tema saya tidak ditampilkan di bagian belakang (backend)?

Silakan periksa terlebih dahulu apakah folder tema Anda diletakkan di path yang benar:wp-content/themes/Kedua, pastikan…style.cssBlok komentar di bagian atas file memiliki format yang benar sekali, terutama baris “Theme Name:”, yang sangat penting. Akhirnya, pastikan pengaturan hak akses (permissions) untuk folder tema dan file-file di dalamnya sudah benar, sehingga server web (seperti Apache) memiliki akses untuk membaca file-file tersebut.

Bagaimana cara menambahkan sidebar ke tema saya?

Menambahkan sidebar terdiri dari dua langkah. Pertama,functions.phpGunakan dalam bahasa Cinaregister_sidebar()Fungsi tersebut mendaftarkan satu atau lebih area untuk menampilkan alat bantu (tooltips). Kemudian, pada file template tempat Anda ingin menampilkan sidebar (seperti…sidebar.phpDalam hal ini, gunakandynamic_sidebar()Gunakan fungsi untuk memanggilnya. Selain itu, Anda perlu melakukannya di dalam berkas template utama (misalnya…).index.phpDigunakan dalam (…)get_sidebar()Untuk memasukkan template sidebar.

Bagaimana cara memastikan kesesuaian antara tema yang dikembangkan dengan plugin yang digunakan?

Mengikuti standar pengkodean WordPress merupakan dasar untuk memastikan kekompatibilitas. Untuk konten yang mungkin ditambahkan oleh plugin, pastikan tema Anda dapat memanggil (menggunakan fungsi/fungsi tertentu) dari plugin tersebut dengan benar.wp_head()和wp_footer()Fungsi tersebut sangat penting karena banyak plugin yang bergantung pada kedua “hook” ini untuk menambahkan kode yang diperlukan (seperti kode statistik, CSS/JS). Selain itu, kode tersebut selalu digunakan saat menampilkan isi artikel.the_content()Bukan dengan mengakses basis data secara langsung, tetapi dengan menggunakan sebuah fungsi. Fungsi tersebut akan menerapkan semua perubahan yang telah ditambahkan oleh plugin melalui filter “the_content”.