Belajar mengembangkan tema WordPress dari nol: Membuat situs web yang dipersonalisasi.

Membangun lingkungan pengembangan tema WordPress.

Sebelum memulai menulis kode, mengonfigurasi lingkungan pengembangan lokal dengan benar merupakan langkah pertama yang sangat penting. Lingkungan pengembangan yang efisien dapat sangat meningkatkan efisiensi kerja Anda dan membantu Anda dalam melakukan debugging serta pengujian kode dengan lebih mudah. Dari berbagai alat yang tersedia, kami merekomendasikan penggunaan… Local、MAMP 或 XAMPP Sebagai solusi server lokal, alat-alat ini dapat diinstal dengan satu klik saja, dan sudah mencakup PHP, MySQL (atau MariaDB), serta server web (seperti Apache atau Nginx) yang diperlukan untuk menjalankan WordPress.

Pada saat yang sama, sebuah editor kode yang sangat canggih sangat penting. Misalnya, Visual Studio Code 或 PhpStormSemua editor tersebut mendukung fitur penyorotan sintaks (syntax highlighting), petunjuk kode (code hints), dan integrasi dengan sistem pengelolaan versi (version control), yang dapat membantu Anda menulis dan mendebug kode dengan lebih efisien. Disarankan untuk menginstal plugin yang berkaitan dengan pengembangan WordPress di editor Anda, seperti PHP Intelephense.

Membuat struktur dasar untuk tema pertamamu

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di wp-content/themes/your-theme-name Folder yang terdapat dalam direktori tersebut. Komponen utama dari folder ini adalah file gaya (style files) dan file template. Pertama-tama, Anda perlu membuat folder tema ini secara manual atau melalui baris perintah (command line).

推荐阅读 Membuat Situs Web yang Sempurna: Mengembangkan Tema WordPress Khusus dari Nol。

Selanjutnya, buatlah file gaya (style file) untuk tema tersebut. File ini biasanya diberi nama… style.cssBukan hanya sebagai tempat untuk menyimpan aturan CSS, yang lebih penting adalah bahwa blok komentar di bagian awal file tersebut berisi metadata tentang tema tersebut. Informasi-informasi ini sangat penting bagi WordPress untuk mengenali sebuah tema. Contoh yang tipikal… style.css Bagian awal (header) dari file mungkin terlihat seperti 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

/*
Theme Name: 我的个性化主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始打造的个性化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-personal-theme
*/

Di antaranya,Text Domain Untuk keperluan internasionalisasi, Anda perlu menggunakan fitur ini pada semua string yang dapat diterjemahkan di kemudian hari. Setelah file tersebut dibuat, letakkanlah di dalam folder tema Anda. Dengan demikian, file tersebut akan muncul dalam daftar tema di WordPress Admin, di bawah menu “Tampilan” -> “Tema”. Meskipun untuk saat ini file tersebut masih kosong, Anda dapat mulai mengisinya dengan konten yang diperlukan.

Memahami file template inti dari topik tersebut

WordPress menggunakan sistem hierarki template untuk menentukan file mana yang harus diunduh dan dimuat sesuai dengan permintaan halaman yang diakses pengguna. Dengan kata lain, ketika pengguna mengakses halaman utama situs web Anda, WordPress akan mencari file template yang sesuai terlebih dahulu. front-page.phpJika tidak ada, maka carilah. home.phpTerakhir, ada pilihan default. index.phpMemahami hubungan hierarki ini merupakan dasar untuk membangun logika topik (topic logic).

Membuat file template dasar

File dasar yang wajib dimasukkan ke dalam semua tema adalah… index.php 和 style.cssNamun, untuk membangun sebuah situs web yang memiliki struktur yang jelas dan fungsi yang lengkap, kita biasanya perlu membuat serangkaian berkas template. Di antaranya,header.php 和 footer.php Ini adalah dua bagian template yang sangat penting. Kedua bagian tersebut berisi elemen-elemen yang akan muncul di setiap halaman situs web, yaitu bagian atas (seperti menu navigasi, identitas situs) dan bagian bawah (seperti informasi hak cipta).

Dalam template halaman, Anda dapat menggunakan fungsi template yang disediakan oleh WordPress untuk memasukkan bagian-bagian tersebut. Misalnya, index.php Di awal, Anda dapat menggunakan… Untuk memasukkan template header, fungsi ini akan secara otomatis mencari dan memuat file yang terdapat di dalam direktori tema (theme directory). header.php File. Demikian pula, gunakan hal yang sama di akhir halaman. Untuk memasukkan template bagian akhir (tail template), desain yang bersifat modular ini memungkinkan penggunaan kode yang sama berulang kali (code reuse) serta memudahkan proses pemeliharaan (maintenance).

推荐阅读 Panduan Lengkap Pengembangan Tema WordPress: Membangun Situs Web yang Dikustomisasi dari Nol。

Membangun siklus utama (main loop)

Fungsi inti dari WordPress adalah untuk menampilkan konten, dan proses penampilan konten tersebut dilakukan melalui “siklus utama” (main loop). Siklus utama merupakan struktur kode PHP di WordPress yang digunakan untuk mengambil artikel (atau halaman, jenis artikel khusus) dari basis data dan menampilkannya di halaman web. Kode siklus utama yang paling dasar adalah sebagai berikut:

<p>   
      
</p>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    <br />
    <p>Tidak ada konten untuk saat ini.</p>
<?php endif; ?>

Kode ini pertama-tama memeriksa apakah ada artikel.have_posts()Jika ada, maka masuk ke dalam siklus (if there is any, then enter the loop).while ( have_posts() ) : the_post();Di dalam loop tersebut, Anda dapat menggunakan serangkaian tag template yang diawali dengan “the_” untuk menampilkan informasi artikel, misalnya: the_title() Output judul artikel,the_content() Struktur perulangan ini akan digunakan di halaman utama, halaman kategori, halaman pencarian, dan halaman-halaman lain yang menampilkan daftar konten.

Menambahkan fitur tema dan gaya (styles)

Sebuah tema yang berkualitas tidak hanya harus memiliki struktur yang baik, tetapi juga harus dilengkapi dengan fitur yang lengkap dan tampilan yang menarik. WordPress mencapai hal ini dengan menggunakan file “fitur” (features) dan file “tampilan” (styles).

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

Menggunakan file fungsi untuk memperkuat tema (Using function files to enhance the theme)

Subject: functions.php File tersebut merupakan “Swiss Army Knife” (alat serba guna) bagi Anda. Bukan file template, melainkan file PHP yang secara otomatis diunduh saat tema Anda diinisialisasi, dan berfungsi untuk menambahkan berbagai fitur ke dalam tema Anda. Di sini, Anda dapat mendefinisikan fitur-fitur yang didukung oleh tema, mendaftarkan menu navigasi, mengunduh file gaya (style sheet) dan skrip, serta mendefinisikan area untuk widget (fitur tambahan).

Misalnya, untuk menambahkan dukungan terhadap gambar khas artikel (gambar thumbnail) untuk suatu tema, Anda dapat… functions.php Tambahkan kode berikut ke dalam:

<?php
add_theme_support( 'post-thumbnails' );

Untuk mendaftarkan posisi menu navigasi utama, Anda dapat menggunakan:

推荐阅读 Bagaimana cara merancang dan mengembangkan sebuah tema WordPress yang berkualitas tinggi (level profesional)?。

<?php
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-personal-theme' ),
) );

Setelah itu, Anda dapat melanjutkan dengan… header.php Gunakan dalam bahasa Cina wp_nav_menu( array( 'theme_location' => 'primary' ) ); Untuk menampilkan menu ini.

Menulis CSS yang responsif dan termodulasi

Situs web modern harus bersifat responsif, sehingga dapat ditampilkan dengan baik di berbagai perangkat dengan ukuran layar yang berbeda. style.css Dalam hal ini, Anda sebaiknya menerapkan strategi CSS yang mengutamakan penggunaan perangkat seluler (mobile-first), serta menggunakan media query secara bijak untuk menyesuaikan tampilan situs web dengan perangkat tablet dan desktop. Selain itu, memodulisasi kode CSS merupakan kebiasaan yang baik; misalnya, buat blok gaya yang terpisah untuk bagian header, navigasi, kartu artikel, dan footer, serta tambahkan komentar yang jelas untuk setiap blok tersebut.

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

Untuk meningkatkan keterawatan kode, disarankan untuk menggunakan aturan CSS utama dalam format yang terstruktur dan teratur. wp_enqueue_style() Fungsi tersebut sedang berjalan (atau “dijalankan”). functions.php Proses pengunduhan dilakukan secara bertahap (dalam antrian), bukan semuanya dilakukan sekaligus. style.css Ya. Hal ini memungkinkan Anda untuk lebih baik mengelola hubungan antar komponen (dependensi) dan urutan pengunduhan (loading sequence) dari file-file yang diperlukan.

Praktik: Membangun template halaman artikel tunggal

Sekarang, mari kita gabungkan semua pengetahuan yang telah kita pelajari untuk membuat sebuah template halaman artikel yang lebih terstruktur. single.phpTemplate ini digunakan untuk menampilkan satu artikel blog.

Membangun struktur template artikel yang lengkap

“Sebuah yang lengkap…” single.php Biasanya, sebuah konten artikel terdiri dari bagian kepala (header), bagian isi artikel (article content), dan bagian penutup (footer). Di bagian isi artikel, kita akan mengatur metadata artikel dengan lebih rinci, seperti tanggal publikasi, penulis, kategori, dan tag-tag yang relevan.

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <header class="entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <span class="posted-on">
                        <?php the_time( 'Y年m月d日' ); ?>
                    </span>
                    <span class="byline">
                        作者：
                    </span>
                    <span class="cat-links">
                        分类：
                    </span>
                </div>
            </header>

<?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>

<div class="entry-content">
                <?php the_content(); ?>
            </div>

<footer class="entry-footer">
                <span class="tags-links">
                    标签：
                </span>
            </footer>
        </article>


</main>

Template ini menunjukkan cara menggunakan… the_time()、the_author_posts_link()、the_category()、the_tags() Gunakan tag template untuk memperkaya isi halaman. Pada saat yang sama, fitur tersebut juga telah digunakan (it has been utilized). post_class() Fungsi tersebut secara otomatis menambahkan kelas CSS yang bersifat semantik ke dalam konten artikel, sehingga memudahkan pengendalian tata letak (style)nya.

Mengintegrasikan sidebar dan template komentar

Pada halaman artikel tunggal, sidebar (sisi kiri/sisi kanan) dan area komentar merupakan elemen yang umum ditemukan. Anda dapat menggunakan (fitur/fungsi tertentu) untuk mengoptimalkan tampilan halaman tersebut. get_sidebar() Fungsi untuk mengimpor (function to import) sidebar.php File template, yang biasanya berisi kode untuk memanggil berbagai alat (tool) tertentu. Template komentar (comment template) dibuat dengan menggunakan pendekatan yang serupa. comments_template() Pengenalan fungsi tersebut akan secara otomatis memuat file-file yang terdapat di dalam direktori tema (theme directory). comments.php File tersebut digunakan untuk memproses penampilan komentar dan formulir. Anda perlu membuat kedua file template tersebut sendiri agar fitur tersebut dapat berfungsi dengan sempurna.

Menyimpulkan.

Mengembangkan sebuah tema WordPress dari nol merupakan proses pembelajaran yang sistematis, yang memerlukan Anda untuk menguasai pemrograman PHP, struktur HTML, desain tata letak menggunakan CSS, serta pemahaman yang mendalam tentang konsep-konsep inti WordPress (seperti hierarki template, loop utama, dan fungsi hook). Proses ini dimulai dengan membangun lingkungan pengembangan yang sesuai, membuat file-file template dasar, dan memanfaatkan berbagai fitur yang tersedia di WordPress. functions.php Dengan menambahkan fitur-fitur baru dan kemudian membuat template halaman yang spesifik, Anda tidak hanya dapat membuat situs web yang benar-benar sesuai dengan kebutuhan Anda sendiri, tetapi juga dapat memahami lebih dalam mekanisme kerja WordPress, sebuah sistem manajemen konten yang sangat kuat. Ingatlah bahwa pengembangan tema adalah proses yang berkelanjutan dan terus ber iterasi, mulai dari yang paling sederhana… style.css 和 index.php Memulai dengan menambahkan fitur-fitur yang kompleks secara bertahap merupakan jalur terbaik menuju kesuksesan.

FAQ - Pertanyaan yang Sering Diajukan.

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

Untuk mengembangkan tema WordPress, diperlukan pengetahuan dasar tentang PHP, HTML, CSS, dan JavaScript. PHP digunakan untuk memproses logika dan memanggil fungsi-fungsi WordPress; HTML bertanggung jawab atas struktur halaman; CSS mengontrol tata letak dan gaya tampilan; sedangkan JavaScript digunakan untuk menciptakan efek interaksi di bagian frontend. Di antara ketiganya, PHP beserta tag-tag template, fungsi-fungsi khusus WordPress, dan mekanisme hook-nya merupakan hal yang paling penting untuk dipelajari.

Apa perbedaan antara file functions.php dari tema dan plugin?

functions.php File merupakan bagian dari tema, dan fungsinya terkait dengan tema yang sedang aktif. Saat Anda mengganti tema, file tersebut akan berubah sesuai dengan tema baru yang dipilih. functions.php Fungsi yang ditambahkan tersebut tidak akan lagi berlaku. Sedangkan plugin merupakan modul yang independen dari tema, sehingga fungsinya tidak berubah saat tema diganti. Umumnya, fungsi-fungsi yang erat kaitannya dengan tampilan dan susunan situs web ditempatkan dalam tema tersebut. functions.php Yang menyediakan fungsi-fungsi independen dan umum lebih cocok dijadikan plugin, agar kode dapat lebih mudah dipindahkan (dipergunakan di sistem lain).

Bagaimana cara membuat tema saya mendukung multibahasa (internasionalisasi)?

Untuk membuat suatu tema mendukung internasionalisasi, pertama-tama diperlukan… style.css Pastikan bahwa komentar di bagian atas (header) dan bidang teks yang digunakan untuk memuat konten (loading text field) telah diatur dengan benar. Text DomainKemudian, di semua file template PHP dari tema tersebut, lapis semua string yang ditujukan untuk pengguna dengan fungsi penerjemahan dari WordPress. __( ‘字符串’, ‘your-text-domain’ ) 或 _e( ‘字符串’, ‘your-text-domain’ )。

Selanjutnya, Anda perlu menggunakan alat seperti Poedit untuk memindai kode tema dan menghasilkan (generate)… .pot File template, dan berdasarkan file ini, buat file yang sesuai untuk setiap bahasa. .po Dan yang telah dikompilasi .mo Akhirnya, letakkan file-file terjemahan tersebut di dalam folder yang sesuai dengan tema yang digunakan. /languages Di dalam direktori tersebut, WordPress akan secara otomatis memuat terjemahan yang sesuai berdasarkan pengaturan bahasa situs web.

Bagaimana cara melakukan debugging dan menyelesaikan masalah (error troubleshooting) selama proses pengembangan?

Pada tahap pengembangan, sangat disarankan untuk mengaktifkan mode debug (mode perbaikan kesalahan) di WordPress. Anda dapat melakukannya di situs web Anda… wp-config.php Berikut adalah konstanta-konstanta yang didefinisikan dalam file untuk mengaktifkan fitur tersebut:

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 /wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不建议在页面上直接显示错误

Sementara itu, gunakan alat pengembang yang tersedia di browser (buka dengan menekan F12) untuk memeriksa struktur HTML, gaya CSS, serta kesalahan di konsol JavaScript. Untuk logika kode PHP, Anda dapat menggunakannya bersama-sama dengan alat-alat tersebut. var_dump() 或 error_log() Fungsi tersebut digunakan untuk melakukan output (penampilan hasil) dan pencatatan (pengarsipan data), sehingga dapat melacak nilai variabel serta alur eksekusi program.