Dari Nol hingga Satu: Panduan Lengkap Pengembangan Tema WordPress dan Pelatihan Praktis.

Dasar-dasar Pengembangan Tema WordPress dan Pengaturan Lingkungan

Untuk memulai pengembangan tema WordPress, pertama-tama Anda perlu memahami konsep-konsep dasarnya. Sebuah tema WordPress pada dasarnya merupakan kumpulan berkas, yang mencakup file gaya (style sheets), file template, gambar, dan file JavaScript. Berkas-berkas ini bersama-sama menentukan tampilan dan fungsi dari sebuah situs web. Dengan mengembangkan sebuah tema, Anda sebenarnya sedang membuat seperangkat aturan yang lengkap yang memberitahu WordPress bagaimana cara menampilkan konten dari basis data ke pengunjung situs tersebut.

Pengaturan lingkungan sebelum proses pengembangan sangat penting. Anda memerlukan sebuah lingkungan pengembangan lokal, yang dapat dengan mudah diatur dengan menginstal alat-alat seperti XAMPP, MAMP, Local by Flywheel, atau Docker. Lingkungan lokal memungkinkan Anda untuk melakukan pengembangan, pengujian, dan debugging tanpa mengganggu situs web yang berjalan di server online. Selain itu, editor kode yang efisien juga sangat diperlukan, seperti Visual Studio Code,PhpStorm, atau Sublime Text. Editor-editor tersebut menyediakan fitur seperti penyorotan sintaks, saran kode (code hints), dan kemampuan debugging, yang secara signifikan meningkatkan efisiensi proses pengembangan.

Selanjutnya, Anda perlu memahami struktur direktori dari setiap topik. Setiap topik berada di dalam direktori yang terpisah./wp-content/themes/File tersebut berada di dalam direktori, dan disimpan dalam folder yang terpisah. Untuk tema yang paling dasar, hanya diperlukan dua file saja:style.css和index.php…di…style.cssDalam komentar di bagian atas (header comment), Anda perlu menyediakan metainformasi tentang topik tersebut.

推荐阅读 Menganalisis secara mendalam bidang kustom WordPress: dari dasar-dasar hingga praktik aplikasi tingkat lanjut.。

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

Inistyle.cssFile tersebut bukan hanya berisi kode gaya (style sheet), tetapi juga merupakan “kartu identitas” dari tema tersebut. WordPress membaca komentar-komentar dalam file tersebut untuk mengenali dan menampilkan tema yang Anda gunakan di latar belakang.

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 template inti dan struktur hierarki tema

WordPress menggunakan sistem cerdas yang disebut “Hierarchical Template Structure” (Struktur Hierarkis Templat) untuk menentukan template mana yang harus digunakan untuk menampilkan konten sesuai dengan permintaan halaman tertentu. Memahami struktur hierarkis ini sangat penting dalam pengembangan tema (theme).

File template yang paling penting (yang paling inti) adalah…index.phpIni berfungsi sebagai template cadangan utama untuk semua halaman. Ketika WordPress tidak dapat menemukan template yang lebih spesifik, maka template ini akan digunakan. Halaman utama (home page) biasanya dibuat menggunakan template ini.front-page.php或home.phpKontrol. Halaman tunggal artikel merupakan pilihan utama.single.phpUntuk jenis artikel tertentu, seperti “produk”, WordPress akan mencari (atau melakukan proses pencarian terkait) informasi yang relevan.single-product.phpHalaman ini digunakan untuk…page.phpJika halaman memiliki template khusus (custom template), maka template tersebut akan digunakan.page-{slug}.php或page-{id}.phpHalaman arsip artikel (seperti berdasarkan kategori, tag, penulis, atau tanggal) sesuai dengan…archive.phpdan varian-varian yang lebih spesifik darinya, seperticategory.php、tag.phpdan lain-lain.

Template untuk bagian atas dan bawah judul (header dan footer)

Untuk mengikuti prinsip DRY (Don't Repeat Yourself), tema WordPress menggunakan…get_header()、get_footer()和get_sidebar()Gunakan fungsi seperti require() dan include() untuk memasukkan bagian umum. Ini berarti Anda perlu membuatnya.header.php和footer.phpDokumen.

header.phpSebuah file biasanya berisi header dokumen HTML, tag meta, tautan ke file gaya (style sheet) dan skrip, serta bagian navigasi di bagian atas situs web. Yang sangat penting adalah, file tersebut harus memuat semua komponen tersebut.wp_head()Panggilan fungsi tersebut memungkinkan inti WordPress, plugin, serta tema itu sendiri untuk menggunakan fungsi tersebut.<head>Sebagian dari kode yang diperlukan telah dimasukkan.

推荐阅读 Panduan Pemula untuk Pengembangan Tema WordPress: Membangun Situs Web Anda dari Nol.。

footer.phpFile tersebut berisi informasi bagian bawah situs web, referensi skrip, dan lainnya, serta diakhiri dengan…wp_footer()Fungsi telah selesai, dan ini sesuai dengan…wp_head()Fungsinya mirip; digunakan untuk menyisipkan kode di bagian bawah halaman.

Dalam berkas template, Anda dapat memasukkannya dengan cara berikut:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Fitur tema dan siklus (loop) di WordPress

Fungsi dari sebuah tema tidak terbatas hanya pada penampilannya saja. Dengan…functions.phpFile ini memungkinkan Anda menambahkan fitur, mendaftarkan karakteristik tertentu, serta mengintegrasikan plugin ke dalam tema Anda. File ini akan diunduh secara otomatis saat tema diaktifkan, dan berfungsi seperti plugin khusus untuk tema tersebut.

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 siklus (loop) di WordPress

Pemrosesan berulang (loop) dalam WordPress merupakan logika inti dalam pengembangan tema. Pemrosesan ini berupa sepotong kode PHP yang digunakan untuk memeriksa apakah ada artikel (atau postingan) di halaman saat ini yang perlu ditampilkan. Jika ada, kode tersebut akan berulang-ulang dan menampilkan setiap artikel tersebut. Struktur dasar dari pemrosesan berulang tersebut adalah sebagai berikut:

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

Dalam siklus tersebut, Anda dapat menggunakan serangkaian tag template untuk menampilkan informasi artikel, misalnya:the_title()Output judul,the_content()Outputkan konten lengkapnya,the_excerpt()Output ringkasan,the_permalink()Mendapatkan tautan artikel.the_post_thumbnail()Output featured images.

Menu Pendaftaran danSidebar

Tema-tema modern umumnya mendukung pengguna untuk mengatur menu dan plugin secara khusus melalui backend. Hal ini memerlukan…functions.phpDaftarkan diri di sana.

推荐阅读 Panduan Memulai Pengembangan Tema WordPress: Membuat Tema Kustom Pertama Anda dari Nol.。

Gunakanregister_nav_menus()Sebuah fungsi dapat mendaftarkan satu atau lebih lokasi menu:

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

Kemudian, dalam berkas template (seperti…)header.phpDigunakan dalam (…)wp_nav_menu()Untuk menampilkan menu.

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

Sama halnya, sidebar (area untuk menampilkan widget) juga diatur melalui…register_sidebar()Pendaftaran Fungsi:

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name' => __( 'Sidebar Utama', 'my-first-theme' ),
            'id' => 'sidebar-1',
            'description' => __( 'Tambahkan widget Anda di sini.', 'my-first-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', 'mytheme_widgets_init' );

Di dalam template, gunakandynamic_sidebar( 'sidebar-1' )Untuk memanggil area ini.

Integrasi Pengaturan Gaya, Skrip, dan Tema

Agar topik tersebut terlihat lebih profesional dan user-friendly, diperlukan penanganan yang tepat terhadap proses pengunduhan (loading) gaya (style) dan skrip (script), serta integrasi sebanyak mungkin dari fitur kustomisasi (customizer) yang disediakan oleh WordPress itu sendiri.

Mengunduh gaya (styles) dan skrip secara berurutan (dalam antrian).

Cara yang benar adalah dengan menggunakan…wp_enqueue_style()和wp_enqueue_script()Fungsi-fungsi tersebut, tambahkanlah ke dalam…functions.phpIni memastikan bahwa ketergantungan tersebut benar dan menghindari pemuatan yang berlebihan.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Integrated Theme Customizer

WordPress Customizer memungkinkan pengguna untuk mengatur pengaturan tema dalam tampilan pratinjau (preview) secara real-time.$wp_customizeUntuk objek, Anda dapat menambahkan pengaturan dan kontrol.

Misalnya, menambahkan opsi untuk memilih warna judul situs web:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Kemudian, di bagian yang Anda maksud…style.cssAtau gunakan nilai ini dalam gaya tampilan yang dihasilkan secara dinamis:

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

Menyimpulkan.

Pengembangan tema WordPress merupakan keterampilan yang menarik, yang menggabungkan desain dan pemrograman. Semuanya dimulai dengan pemahaman terhadap file-file inti (seperti…style.css和index.phpPemahaman tentang struktur data, serta pengetahuan mendalam mengenai hierarki template, mekanisme perulangan (loop) di WordPress, dan…functions.phpDari berbagai fitur yang dimiliki oleh WordPress, Anda dapat memanfaatkannya untuk membuat tema yang strukturnya jelas dan kinerjanya baik. Hal ini dapat dicapai dengan mengatur file template dengan benar, menggunakan tag-tag template yang sesuai, mendaftarkan menu dan area tambahan (plugins), serta memuat sumber daya secara teratur (dengan metode queuing). Selain itu, integrasi dengan alat pengaturan tema (theme customizer) memberikan pengalaman pengaturan yang intuitif bagi pengguna akhir. Setelah memahami dasar-dasar ini, Anda akan mampu mengembangkan tema WordPress yang lengkap dengan berbagai fitur, dan ini akan menjadi landasan yang kuat untuk mempelajari kerangka kerja tema yang lebih canggih, seperti Underscores atau Genesis, serta pengembangan tema berbasis Block.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah diperlukan keahlian dalam PHP untuk mengembangkan tema WordPress?

Meskipun tidak perlu mencapai tingkat keahlian yang tinggi, pengetahuan dasar PHP yang kuat sangat diperlukan. Anda perlu memahami sintaks PHP, variabel, fungsi, perulangan (loop), dan pernyataan kondisional, karena inti WordPress serta berkas template tema dibuat menggunakan PHP. Selain itu, penguasaan yang baik terhadap HTML, CSS, dan JavaScript dasar juga sangat penting.

Bagaimana cara membuat tema saya sesuai dengan standar resmi WordPress?

Agar tema Anda memenuhi standar dan berpotensi dimasukkan ke dalam direktori tema resmi WordPress, Anda perlu mengikuti “WordPress Theme Development Manual” dan “Theme Review Requirements”. Hal ini mencakup penggunaan praktik pemrograman yang aman, persiapan untuk mendukung berbagai bahasa (dengan menggunakan field teks dan fungsi penerjemahan), memastikan desain yang responsif (mampu beradaptasi dengan berbagai ukuran layar), tidak mengkodekan fungsi-fungsi penting secara langsung dalam tema (disarankan menggunakan subtheme atau plugin), serta melakukan pengujian menggunakan plugin Theme Check yang disediakan oleh WordPress.

Mengapa perubahan tema saya tidak terlihat setelah saya mengeksekusi perintah refresh?

Ini biasanya disebabkan oleh cache browser atau mekanisme cache WordPress. Pertama-tama, cobalah menekan tombol-tombol tersebut secara bersamaan.Ctrl + F5(Windows/Linux) atauCmd + Shift + R(Pada Mac): Lakukan pembaruan keras (hard refresh) untuk membersihkan cache browser. Jika masalah masih terjadi, pastikan Anda berada dalam lingkungan pengembangan lokal, dan periksa apakah ada plugin yang berfungsi untuk menyimpan cache. Cobalah untuk sementara waktu menonaktifkan plugin tersebut. Selain itu, pastikan bahwa Anda telah mengedit file template yang benar, dan file tersebut telah disimpan dengan sukses.

Apa perbedaan antara subtopik (subtopic) dan topik utama (parent topic)? Kapan keduanya harus digunakan?

Topik induk merupakan topik yang lengkap dan mandiri dalam fungsinya. Sementara itu, topik anak (sub-topic) bergantung pada topik induk, dan hanya berisi sejumlah kecil file (setidaknya satu file yang diperlukan).style.cssSubtema digunakan untuk menutupi atau memperluas gaya dan fungsi dari tema induk. Ketika Anda ingin melakukan modifikasi khusus pada sebuah tema yang sudah ada, namun tetap ingin mempertahankan modifikasi tersebut ketika tema induk diperbarui, maka Anda harus membuat subtema. Ini merupakan praktik terbaik dalam mengupgrade dan menyesuaikan tema.

Bagaimana cara menambahkan dukungan penuh untuk editor Gutenberg ke tema saya?

Untuk menyempurnakan dukungan terhadap editor Gutenberg, Anda perlu…functions.phpGunakan dalam bahasa Cinaadd_theme_support()Fungsi mendefinisikan sejumlah fitur. Misalnya, menambahkanalign-wide和align-fullDukung pengaturan palet warna, latar belakang bergradasi, kontrol ukuran font, dan lainnya sesuai keinginan pengguna. Selain itu, buatlah tabel gaya (style sheet) yang terpisah untuk editor artikel dan halaman, serta gunakan tabel gaya tersebut secara efektif dalam proses pengeditan.add_editor_style()Tambahkannya. Untuk penyesuaian yang lebih mendalam, Anda mungkin perlu belajar cara membuat blok kustom.