Mulai dari Nol: Panduan Langsung untuk Mengembangkan Tema WordPress yang Dikustomisasi

Mengembangkan tema WordPress khusus adalah cara terbaik untuk mewujudkan kreativitas Anda menjadi kenyataan di dunia maya, serta sepenuhnya mengontrol tampilan dan fungsi situs web Anda. Berbeda dengan menggunakan tema siap pakai, tema khusus memungkinkan Anda memulai dari nol dan membuat situs web yang unik yang benar-benar sesuai dengan kebutuhan Anda atau klien Anda. Meskipun prosesnya mungkin terdengar menakutkan, Anda dapat menyelesaikannya dengan jelas selama Anda mengikuti spesifikasi resmi WordPress dan langkah-langkah yang telah ditentukan. Artikel ini akan memandu Anda melalui seluruh proses, mulai dari membuat file dasar hingga mengimplementasikan fungsi-fungsi inti dari situs web Anda.

Preparasi dan pengaturan lingkungan.

Sebelum menulis baris kode pertama, Anda memerlukan lingkungan pengembangan yang sesuai dan perencanaan proyek yang jelas.

Pembuatan lingkungan pengembangan lokal

Pertama-tama, Anda perlu membangun lingkungan server PHP di komputer lokal Anda. Kami merekomendasikan penggunaan paket perangkat lunak terintegrasi, seperti XAMPP, MAMP, atau Local by Flywheel. Alat-alat ini dapat menginstal Apache, MySQL, dan PHP dengan satu klik, sehingga menghindari proses konfigurasi yang rumit. Sebagai contoh, setelah menginstal XAMPP, file-file situs web Anda biasanya berada di dalam direktori instalasi XAMPP tersebut.htdocsDi dalam folder tersebut. Di sini, Anda dapat membuat folder baru, misalnya…my-custom-themeIni akan menjadi direktori akar (root directory) untuk tema Anda.

推荐阅读 Belajar mengembangkan tema WordPress dari nol: panduan utama untuk membuat situs web yang dipersonalisasi.。

Pengaturan Struktur Proyek Tematik

Sebuah tema WordPress standar setidaknya mencakup dua file inti:style.css和index.phpNamun, sebelum proyek dimulai, disarankan untuk merencanakan struktur direktori yang jelas dan dapat diperluas. Struktur tema modern yang tipikal dapat ditampilkan sebagai berikut:

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

my-custom-theme/
├── style.css          // 主样式表，包含主题信息头
├── index.php          // 主模板文件
├── functions.php      // 主题功能与函数文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
├── sidebar.php        // 侧边栏模板
├── page.php           // 页面模板
├── single.php         // 文章页模板
├── archive.php        // 文章归档页模板
├── 404.php            // 404错误页模板
├── search.php         // 搜索结果页模板
├── assets/            // 静态资源目录
│   ├── css/           // 样式文件
│   ├── js/            // 脚本文件
│   └── images/        // 图片资源
└── templates/         // 可选的模板部件目录

Memiliki struktur yang baik membantu dalam pengorganisasian dan pemeliharaan kode.

Membuat file tema inti (core theme file)

Ini merupakan fondasi utama dalam pembuatan sebuah tema (theme). Header informasi yang terdapat dalam file tersebut akan memberitahu WordPress bahwa tema tersebut valid (memenuhi persyaratan yang dibutuhkan).

Mendefinisikan lembar gaya tema (theme style sheet)

style.cssIni merupakan “kartu identitas” dari tema tersebut, dan blok komentar di bagian atasnya (header informasi tema) sangat penting. WordPress membutuhkan informasi ini untuk mengenali dan menampilkan tema Anda di bagian belakang (di server). Buatlah header informasi tema tersebut dengan benar.style.cssBuka file tersebut, lalu masukkan konten berikut:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Di antaranya,Text DomainDigunakan untuk internasionalisasi (i18n); ini merupakan identifikasi unik dari tema Anda, dan biasanya sama dengan nama folder tema tersebut. Setelah blok komentar ini, Anda dapat mulai menulis kode gaya CSS (CSS styles) Anda.

推荐阅读 Panduan Pengembangan Tema WordPress: Tutorial Praktis Lengkap dari Pemula hingga Ahli。

Membangun file template dasar

index.phpIni adalah template penolakan (fallback template) yang digunakan untuk semua halaman. Template ini sangat mendasar, tetapi kita bisa memulainya dari struktur HTML yang sederhana. Pertama-tama, buatlah satu…header.phpFile ini digunakan untuk menyimpan bagian kepala dokumen (header).<!DOCTYPE html>Buka.<body>Bagian yang berkaitan dengan label (…) danfooter.phpDigunakan untuk menyimpan tag penutup dan konten bagian kaki halaman (footer).

header.phpContoh:

<!DOCTYPE html>
<html no numeric noise key 1006>
<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 1003>
    <header>
        <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

Perhatikan bahwa kata “used” telah digunakan dalam teks tersebut.wp_head()“Hook” (pautan/konektor) merupakan komponen penting dalam WordPress, yang diperlukan untuk menambahkan skrip dan gaya (style) ke dalam inti sistem WordPress, plugin, maupun tema.

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

footer.phpContoh:

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
<p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p>
<p>Saya tidak punya cukup uang untuk membeli mobil baru.</p>

Di sini digunakan…wp_footer()Kait (hook).

Sekarang, milikmu…index.phpBisa dibuat sangat ringkas:

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Membangun Tema Berkelas Profesional Dari Nol。

<?php get_header(); ?>

<main>
    <p>   
      
</p>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
        
        <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
    <?php endif; ?>
</main>

\n

Template ini menggunakan loop inti (The Loop) dari WordPress untuk menampilkan daftar artikel.

Mengintegrasikan fitur dan konten dinamis

Sebuah tema yang sebenarnya bukan hanya sekadar halaman statis; tema tersebut perlu berinteraksi dengan inti WordPress, memuat sumber daya yang diperlukan, dan mengimplementasikan fitur-fitur dinamis.

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

Menulis file fungsi tema

functions.phpIni adalah tema Anda, “Otak” (Brain), yang digunakan untuk menambahkan fitur-fitur baru, menu pendaftaran, sidebar, memuat gaya tampilan (styles), dan skrip (scripts), dll. Buatlah file ini dan mulailah menambahkan fitur-fitur dasar ke dalamnya.

<?php
// 主题设置
function my_custom_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章缩略图（特色图像）
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );

add_theme_support()Fungsi tersebut digunakan untuk mengaktifkan fitur tema (theme feature).register_nav_menus()和register_sidebar()Maka, daftarkan menu navigasi dan area alat tambahan (toolkit) secara terpisah.

Mengunduh gaya (styles) dan skrip (scripts)

Cara yang benar untuk memuat sumber daya (resource) adalah dengan mengunggah file tabel gaya (style sheet) dan file JavaScript melalui…wp_enqueue_scripts“Hook queuing. On your…”functions.phpTambahkan ini ke dalam Chinese (sederhana):

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );

// 如果使用评论功能，加载评论回复脚本（仅当需要时）
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

get_stylesheet_uri()mendapatkanstyle.cssURL tersebut…get_template_directory_uri()Mendapatkan URL direktori tema.

Membuat struktur hierarki template

WordPress menggunakan struktur hierarki template untuk menentukan template mana yang akan digunakan pada halaman tertentu. Dengan membuat file template khusus, tampilan konten Anda dapat disesuaikan secara lebih detail dan fleksibel.

Membuat template untuk berbagai jenis konten

Anda perlu membuat template khusus untuk berbagai jenis halaman. Misalnya:
* single.phpDigunakan untuk menampilkan satu artikel saja.
* page.phpDigunakan untuk menampilkan halaman tunggal.
* archive.phpDigunakan untuk menampilkan kategori, tag, penulis, tanggal, dan informasi lainnya pada halaman arsip.
* search.phpDigunakan untuk menampilkan hasil pencarian.
* 404.phpDigunakan untuk menampilkan halaman “Tidak Ditemukan”.

Sebuah dasarsingle.phpMungkin seperti berikut:

<?php get_header(); ?>

<main>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <header>
                <h1><?php the_title(); ?></h1>
                <div>
                    |
                </div>
            </header>
            <?php if ( has_post_thumbnail() ) : ?>
                <div>
                    <?php the_post_thumbnail(); ?>
                </div>
            <?php endif; ?>
            <div>
                <?php the_content(); ?>
            </div>
            <footer>
                &lt;?php the_tags( &#039;标签: &#039;, &#039;, &#039;, &#039;<br />' ); ?&gt;
            </footer>
        </article>
    <?php endwhile; ?>
</main>

\n

Template ini menggunakan…the_post_thumbnail()Untuk menampilkan gambar-gambar khusus, serta…comments_template()Mari kita load bagian komentar.

Menggunakan komponen template untuk mewujudkan pendekatan modularisasi

Untuk lebih meningkatkan tingkat penggunaan kembali kode (code reuse), bagian-bagian yang berulang di dalam halaman, seperti metode informasi artikel (article metadata), item daftar artikel (article list items), dan sebagainya, dapat diekstrak menjadi komponen template (template parts). Misalnya, dengan membuat sebuah…template-parts/content.phpFile, lalu…index.php或archive.phpDigunakan dalam perulangan (loop).get_template_part( 'template-parts/content' );Gunakan fungsi tersebut untuk memanggilnya. Dengan cara ini, file template utama Anda tetap sederhana dan ringkas.

Menyimpulkan.

Dengan langkah-langkah di atas, Anda telah menyelesaikan pengembangan sebuah tema WordPress custom yang sederhana namun memiliki fungsi yang lengkap. Proses ini mencakup berbagai tahap penting, mulai dari penyiapan lingkungan, pembuatan file inti, penggunaan fitur-fitur WordPress, hingga pembangunan struktur template. Ingatlah bahwa pengembangan tema merupakan proses yang bersifat iteratif; Anda dapat memulai dengan fitur yang paling dasar, lalu secara bertahap menambahkan fitur yang lebih kompleks, seperti jenis artikel yang dapat disesuaikan, opsi pengaturan tema (theme customizer), dan desain yang responsif (responsive design). Yang paling penting adalah mengikuti standar pemrograman dan praktik terbaik WordPress, agar tema Anda aman, efisien, dan mudah dikelola. Sekarang, salin folder tema Anda ke direktori instalasi WordPress.wp-content/themes/Di sana, Anda dapat melihat dan mengaktifkannya di bagian “Tampilan” -> “Tema” di bagian belakang (backend).

FAQ - Pertanyaan yang Sering Diajukan.

Apa saja dasar-dasar bahasa pemrograman yang diperlukan untuk mengembangkan tema WordPress?

Untuk mengembangkan tema WordPress, Anda perlu menguasai HTML, CSS, dan PHP. HTML digunakan untuk membangun struktur halaman, CSS untuk desain tampilan, sedangkan PHP merupakan bahasa pemrograman di sisi server WordPress yang digunakan untuk memproses logika, melakukan kueri terhadap basis data, dan menghasilkan konten dinamis. Selain itu, pengetahuan dasar tentang JavaScript juga sangat membantu dalam menambahkan fitur interaktif ke dalam tema tersebut.

Mengapa fungsi get_header() dan get_footer() harus digunakan?

get_header()和get_footer()Ini adalah tag template dari WordPress, yang digunakan untuk memasukkan konten tertentu ke dalam halaman web.header.php和footer.phpGunakan fungsi-fungsi tersebut, bukan langsung menggunakan kode yang ada.includePernyataan tersebut menjelaskan bahwa “statements” merupakan inti dari mekanisme hierarki template dan subtheme di WordPress. Subtheme dapat menimpa bagian header dan footer dari template induk dengan membuat file dengan nama yang sama, sehingga memberikan fleksibilitas yang sangat besar dalam pengaturan tampilan situs web.

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Anda perlu menggunakan fungsi internasionalisasi (i18n) dari WordPress untuk membungkus semua string teks yang ditampilkan dalam tema. Fungsi-fungsi utama yang digunakan adalah:__()、_e()Fungsi-fungsi seperti itu, dan juga…style.cssPastikan pengaturan yang benar telah dilakukan di sana.Text DomainKemudian, gunakan alat seperti Poedit untuk menghasilkannya..potFile template for translation: Translators can use this file to create translations in the corresponding languages (such as…)zh_CN.po和.moIni adalah file terjemahan dari (nama file). Terakhir, difunctions.phpMelaluiload_theme_textdomain()Memuat dan menerjemahkan fungsi.

Setelah pengembangan tema selesai, bagaimana cara menguji kompatibilitasnya?

Sebelum mempublikasikan atau mendeploy sebuah tema ke lingkungan produksi, melakukan pengujian yang menyeluruh sangatlah penting. Pertama-tama, lakukan pengujian responsivitas di berbagai browser (Chrome, Firefox, Safari, Edge) dan perangkat (desktop, tablet, ponsel). Selanjutnya, uji tema tersebut dengan berbagai konfigurasi WordPress, seperti mengaktifkan/menonaktifkan berbagai plugin, serta menggunakan jenis artikel dan widget yang berbeda. Anda juga dapat menggunakan plugin resmi WordPress bernama Theme Check untuk memeriksa tema Anda, sehingga memastikan bahwa tema tersebut mematuhi standar pemrograman WordPress terbaru dan praktik terbaik.