Panduan Lengkap Pengembangan Tema WordPress: Membangun Situs Web Khusus dari Nol

Anda ingin membangun sesuatu dari nol.WordPressSebelum membangun sebuah situs web, yang pertama perlu dipahami adalah tema utamanya. Tema tersebut menentukan tampilan, susunan halaman, fitur, dan pengalaman pengguna (user experience) dari situs tersebut. Berbeda dengan menggunakan tema siap pakai, pengembangan tema sendiri memberikan kendali penuh, kinerja yang lebih baik, serta citra merek yang unik. Baik Anda seorang pengembang front-end yang ingin memahami lebih dalam tentang proses pengembangan tema tersebut…PHPDynamic rendering, atau…PHPPara pengembang backend ingin meningkatkan keterampilan mereka di bidang frontend; menguasai teknik pengembangan tema (theme development) akan membuka pintu baru bagi mereka.

Pengaturan Awal: Membangun Lingkungan Pengembangan Lokal

Sebelum menulis baris kode pertama, lingkungan pengembangan lokal yang profesional dapat sangat meningkatkan efisiensi dan pengalaman pengembangan. Hal ini menghindari risiko yang mungkin timbul akibat perubahan langsung pada server yang berada di internet.

Konfigurasi lingkungan pengembangan lokal.

Pertama-tama, kita perlu mensimulasikan lingkungan server jaringan di komputer lokal kita. Rekomendasikan untuk menggunakan paket perangkat lunak seperti… Local（由WP Engine(Produksi)XAMPP 或 MAMPSemua alat tersebut dapat diinstal dengan satu klik saja.Apache、MySQL和PHP… denganLocalSebagai contoh, fitur tersebut telah diintegrasikan ke dalam sistem.WordPressInstalasi dengan satu klik saja.SSLFitur penangkapan sertifikat dan email sangat ramah bagi para pengembang.

推荐阅读 Belajar Pengembangan Tema WordPress Dari Nol: Panduan Lengkap untuk Membangun Tema Situs Web Kustom。

Setelah proses instalasi selesai, buatlah yang baru.WordPressSitus web. Pastikan bahwa…PHPVersi yang digunakan harus 7.4 atau lebih tinggi. Selain itu, ingatlah nama database, nama pengguna, dan kata sandi, karena informasi tersebut akan digunakan dalam proses konfigurasi selanjutnya.

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

Code Editing and Version Control

Seorang pekerja yang ingin menyelesaikan pekerjaannya dengan baik, harus terlebih dahulu memastikan bahwa alat yang digunakannya memadai. Kami merekomendasikan penggunaan editor kode yang memiliki fitur yang kuat, seperti… Visual Studio Code、PhpStorm 或 Sublime TextMereka menyediakan fitur penyorotan sintaks, saran kode (code hints), autocompletion, serta ekosistem plugin yang sangat kuat.

Sementara itu, mulailah segera menggunakan sistem pengelolaan versi (version control system), dan versi yang disarankan adalah…GitDengan menginisialisasi sebuah file di direktori akar proyek…GitGudang, dan gunakanlah..gitignoreAnda dapat menghilangkan file-file yang tidak diperlukan (seperti media yang diunggah dan file cache) dari repositori, sehingga Anda dapat mengelola perubahan kode dengan aman, memudahkan proses penelusuran kembali (backtracking), dan kolaborasi dengan tim. Untuk menghosting repositori tersebut, Anda bisa menggunakan layanan penyimpanan kode terpercaya, seperti GitHub, Bitbucket, atau GitLab.GitHub、GitLab或BitbucketIni merupakan praktik yang diakui sebagai standar industri.

Memahami struktur file dan template inti dari suatu topik.

Sebuah standarWordPress“Topik” (theme) merupakan sebuah folder yang berisi berbagai file tertentu. Memahami fungsi dari masing-masing file merupakan dasar penting dalam membangun sebuah “topik” yang efektif.

File tema yang wajib dimasukkan:

Berdasarkan…WordPressMenurut persyaratan resmi, sebuah tema yang paling sederhana hanya memerlukan dua file:style.css 和 index.phpDi antaranya,style.cssBukan hanya sekadar lembar gaya (style sheet), tetapi juga merupakan “kartu identitas” dari sebuah tema; komentar di bagian awal file tersebut berisi metainformasi tentang tema tersebut.

推荐阅读 Panduan lengkap untuk membangun website: Proses profesional dari nol hingga peluncuran dan analisis teknologi intinya.。

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

index.phpJadi, file template tersebut berfungsi sebagai cadangan; ketika file template yang lebih spesifik tidak tersedia, file ini akan digunakan. Tentu saja, sebuah tema yang matang tidak hanya terdiri dari kedua file tersebut saja.

File template yang sering digunakan dan tingkatannya (hierarkinya):

WordPressMenggunakan sistem hierarki template untuk menentukan template mana yang akan digunakan untuk berbagai jenis konten.PHPFile template. Ini merupakan konsep inti dalam pengembangan tema (theme development).

Proses pemanggilan template yang tipikal adalah sebagai berikut:
1. 访问单篇文章：优先使用single-post.phpJika tidak tersedia, maka gunakanlah yang lain.single.phpDan terakhir,singular.php。
2. 访问页面：优先使用page-{slug}.php或page-{id}.phpJika tidak tersedia, maka gunakanlah yang lain.page.phpDan terakhir,singular.php。
3. 访问文章归档页：优先使用archive-{post-type}.phpJika tidak tersedia, maka gunakanlah yang lain.archive.phpDan terakhir,index.php。

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

Template kunci lainnya meliputi:header.php(Bagian atas)footer.php(Footer)sidebar.php(Sidebar)functions.php(Berkas fungsi fungsional) sertafront-page.php(Halaman utama statis). Memahami bagaimana file-file ini berfungsi dan bekerja.get_header()， get_footer()Fungsi-fungsi seperti ini dikombinasikan bersama-sama dan merupakan kunci dalam membangun halaman web.

Membangun kerangka tema dari nol

Sekarang, mari kita mulai membuat sesuatu yang bernama “MyFirstTheme”Pembentukan kerangka tema, pengetahuan sejati diperoleh melalui praktik.”

\nMembuat file template dasar.

Di milikmuWordPress“Install Directory”wp-content/themes/Di bawah ini, buatlah sebuah entitas baru dengan nama…my-first-themefolder tersebut. Kemudian buat berikut ini:

推荐阅读 Seluruh proses pembuatan situs web modern: teknologi dan praktik inti dari desain arsitektur hingga penyebaran dan operasi pemeliharaan.。

1. style.cssTulis informasi header di atas ke dalam file.
2. index.phpIni adalah template yang paling dasar.

在index.phpDi sini, kita akan membangun yang paling sederhana terlebih dahulu.HTML5Struktur tersebut, beserta bagian header dan footer, perlu dibuat secara manual.

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

<!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>
        <h1>My custom theme</h1>
    </header>
    <main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>
    <footer>
        <p>© Situs Web Saya</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Hati-hatiwp_head()和wp_footer()Kedua “hook” ini memungkinkan plugin dan tema untuk menyisipkan kode di posisi yang sesuai, dan keduanya harus dipanggil (dijalankan).

Pisahkan template menjadi komponen-komponen yang termodulasi.

Kode di atas menuliskan semua isi dalam satu file, yang akan dengan cepat menjadi sulit untuk dikelola. Selanjutnya, kita akan melakukan pemisahan kode menjadi modul-modul yang terstruktur.

Membuatheader.php…Buka.Pindahkan semua kode yang berada sebelum tag ke dalam:

<!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>
<header>
    <h1><a href="/id/</?php echo esc_url( home_url( '/' ) ); ?>">My custom theme</a></h1>
</header>
<main>

Membuatfooter.phpAkan ditutup.Pindahkan semua kode yang berada setelah tag ke tempat lain.

</main>
<footer>
    <p>©  我的网站</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>

Lalu, ringkaskan saja.index.phpFile:

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title( &#039;<h2>', '</h2>' );
        the_content();
    endwhile;
else :
    _e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?&gt;

Sekarang, struktur topik Anda menjadi jelas dan mudah dikelola. Anda dapat…WordPressPada bagian “Tampilan” -> “Tema” di backend, tema tersebut dapat dilihat dan diaktifkan.

Mengintegrasikan fitur inti dengan opsi kustom

Setelah kerangka tema dasar selesai dibuat, langkah selanjutnya adalah “menghidupkannya”, yaitu dengan menambahkan elemen-elemen yang membuatnya lebih menarik dan interaktif.functions.phpFitur dan karakteristik penambahan file.

Pendaftaran tema menggunakan fungsi functions.php didukung.

functions.phpFile tersebut merupakan bagian dari topik Anda yang berjudul “Backend”, dan berfungsi untuk mendefinisikan fungsi-fungsi, mendaftarkan fitur-fitur tertentu, menambahkan filter, dan sebagainya. File ini bukanlah file template, namun akan secara otomatis dimasukkan setiap kali halaman diunduh (diload).

Di dalamnya, kita dapat menggunakan… add_theme_support() Fungsi tersebut digunakan untuk mendeklarasikan fitur-fitur yang didukung oleh suatu tema. Misalnya, untuk mengaktifkan fitur gambar khusus pada artikel, logo kustom, serta dukungan terhadap format artikel tertentu.

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和评论的RSS feed链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 启用自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Cara yang benar untuk memperkenalkan lembar gaya dan skrip.

Jangan pernah menggunakan kode yang terenkripsi (hard-coded) dalam file template. 或 Gunakan tag untuk memasukkan sumber daya statis. Cara yang benar adalah dengan… wp_enqueue_style() 和 wp_enqueue_script() Fungsi tersebut memastikan terlaksananya manajemen ketergantungan (dependency management), kontrol versi (version control), serta penghindaran dari proses pengunduhan (loading) yang berulang-ulang.

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

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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tambahkan menu navigasi

Menu navigasi merupakan “rangka” dari sebuah situs web. Pertama-tama, gunakan… register_nav_menus() Lokasi untuk mendaftarkan fungsi:

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

Kemudian,header.php的Di dalam wilayah tersebut, gunakan menu tersebut untuk memanggil fitur yang diinginkan.

<?php
wp_nav_menu(
    array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => 'nav',
        'container_class'=> 'primary-navigation',
    )
);
?>

Dengan langkah-langkah di atas, Anda telah membuat sebuah tema yang memiliki struktur dasar, dukungan fungsional, dan kode yang termodulasi. Meskipun tampak sederhana, tema tersebut sudah mencakup berbagai komponen penting.WordPressSemua konsep inti dalam pengembangan tema (theme development).

Menyimpulkan.

Dari membangun lingkungan lokal hingga menulis file template pertama, lalu melanjutkan ke…functions.phpDalam proses mengintegrasikan fitur-fitur inti tersebut, kami telah melalui berbagai tahap.WordPressProses pembuatan suatu tema dari awal hingga selesai. Kuncinya adalah memahami sistem hierarki template, yang memetakan berbagai permintaan konten ke komponen yang sesuai.PHPFile template. Selain itu, pendekatan berpikir termodulasi (pemisahan komponen menjadi bagian-bagian yang lebih kecil).header.php， footer.phpPraktik pengembangan yang terstandarisasi (seperti pendaftaran skrip yang benar, penggunaan fungsi hook) merupakan dasar untuk membuat tema yang mudah diperawat dan stabil. Dari sini, Anda dapat melanjutkan penjelajahan lebih dalam, seperti mengatur kueri artikel khusus, membuat area untuk widget, serta melakukan integrasi.Customizer APISerta topik-topik tingkat lanjut seperti pengembangan template kustom, sehingga dapat membangun situs web yang lebih kuat dan profesional.

FAQ - Pertanyaan yang Sering Diajukan.

Bagaimana cara menambahkan sidebar ke sebuah tema?

在WordPressDi dalamnya, bilah samping disebut sebagai “area widget”. Pertama-tama,functions.phpGunakan dalam bahasa Cina register_sidebar() Fungsi ini mendaftarkan satu atau lebih area komponen (widget).

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在此添加小部件以显示在主侧边栏。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h3 class="widget-title">',
        'after_title'   =&gt; '</h3>'function my_first_theme_widgets_init() {  
    register_sidebars( array(  
        'sidebars' =&gt; array(  
            'name' =&gt; 'Sidebar 1',  
            'id' =&gt; 'sidebars-1',  
            'description' =&gt; 'Sidebar pertama',  
        )  
    ) );  
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Kemudian, dalam file template tempat Anda ingin menampilkan sidebar (seperti…)single.php或page.php）中，调用 dynamic_sidebar() Fungsi tersebut digunakan untuk mengeluarkan (menghasilkan) hasilnya.

Apa itu subtopik, dan mengapa perlu menggunakannya?

Subtopik adalah sebuah topik yang mewarisi semua fitur dan gaya dari topik lainnya (yang disebut topik induk). File intinya adalah…style.cssDi antaranya, harus dilalui dengan…Template:Field di bagian header menyatakan topik induknya (parent topic).

Manfaat terbesar dari menggunakan sub-topik adalah keamanan dan keberlanjutan (sustainability). Ketika topik induk (parent topic) diperbarui, modifikasi kustom yang Anda lakukan pada sub-topik (seperti penggantian gaya tampilan, penambahan fitur, atau perubahan template) tidak akan hilang atau terhapus. Ini merupakan cara yang standar dan direkomendasikan untuk melakukan personalisasi pada topik yang sudah ada.

Apa yang bisa terjadi jika terjadi kesalahan pada file functions.php?

functions.phpKesalahan sintaksis atau kesalahan fatal dalam file tersebut dapat menyebabkan seluruh situs web mengalami “white screen death” (yaitu hanya menampilkan halaman kosong). Hal ini terjadi karena file tersebut tidak dapat dieksekusi dengan benar oleh sistem.WordPressKomponen tersebut dimasukkan selama proses pengambilan (loading) inti (core), dan setiap kesalahan dapat menginterupsi proses inisialisasi.

Ketika menghadapi situasi seperti ini, Anda perlu melakukannya melalui…FTPAtau manajer file host, akan terjadi kesalahan.functions.phpMengganti nama file (misalnya menjadi…)functions.php.bakDengan cara ini, situs web akan sementara mengabaikan file tersebut dan mengembalikan akses ke halaman yang diinginkan, sehingga Anda dapat memperbaiki kesalahan yang ada.

Bagaimana cara membuat template halaman kustom?

Template halaman kustom memungkinkan Anda memberikan tata letak yang unik untuk halaman tertentu. Pertama-tama, buatlah file baru di dalam direktori tema Anda.PHPPada file tersebut, tambahkan sebuah komentar dengan format tertentu di bagian awal file untuk menyatakan bahwa ini adalah sebuah template halaman (page template).

Misalnya, untuk membuat sebuah yang bernama…page-fullwidth.phpFile tersebut:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>

Setelah menyimpannya, saat Anda membuat atau mengedit sebuah halaman, Anda dapat memilih template “Halaman Lebar Penuh” dari menu drop-down “Properti Halaman” -> “Template”.