Panduan Memulai Pengembangan Tema WordPress: Membuat Tema Kustom Pertama Anda dari Nol.

Preparasi dan pengaturan lingkungan.

Sebelum mulai menulis kode, Anda memerlukan lingkungan pengembangan lokal yang stabil dan profesional. Sangat disarankan untuk tidak memodifikasi file tema secara langsung di server online. Lingkungan pengembangan lokal memungkinkan Anda melakukan pengujian dengan bebas tanpa memengaruhi akses normal situs web. Anda dapat memilih perangkat lunak lingkungan terintegrasi, seperti XAMPP, MAMP (Mac), atau Laragon (Windows), yang dapat diinstal dan dikonfigurasi dengan mudah untuk Apache, MySQL, dan PHP.

WordPress itu sendiri juga perlu diinstal di lingkungan lokal Anda. Kunjungi situs web WordPress untuk mengunduh paket instalasi terbaru, lalu ekstrak ke direktori root situs web server lokal Anda (misalnya XAMPP). htdocs Kemudian, akses melalui browser dan selesaikan “instalasi lima menit” yang terkenal. Selama instalasi, ingatlah informasi data yang Anda tetapkan.

Terakhir, Anda membutuhkan editor kode atau lingkungan pengembangan terintegrasi yang bagus. Visual Studio Code, PhpStorm, atau Sublime Text adalah pilihan yang sangat baik, karena mereka menyediakan penyorotan sintaks, petunjuk kode, dan fungsi manajemen file, yang sangat meningkatkan efisiensi pengembangan.

推荐阅读 Pelajari pengembangan tema WordPress secara bertahap: Membuat tema kustom dari nol.。

Memahami struktur dasar tema WordPress.

Sebuah tema WordPress pada dasarnya adalah sesuatu yang terletak di /wp-content/themes/ Folder di bawah direktori ini berisi serangkaian file dan direktori yang mengikuti aturan tertentu. File-file ini bekerja sama untuk memberi tahu WordPress bagaimana menampilkan tampilan dan konten situs web.

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

Mekanisme intinya adalah “hierarki template”. WordPress akan secara otomatis memilih file template yang sesuai untuk menampilkan konten berdasarkan tipe halaman yang sedang diakses. Misalnya, saat mengakses sebuah artikel blog, WordPress akan terlebih dahulu mencari single.phpSaat mengunjungi halaman utama blog, pengunjung akan mencari home.php 或 index.phpMekanisme ini memberikan fleksibilitas yang sangat besar pada topik tersebut.

Setiap topik harus mencakup dua file dasar:style.css 和 index.php。style.css Perannya tidak hanya menyediakan gaya, tetapi blok komentar di bagian atas file juga merupakan “kartu identitas” dari tema tersebut, yang digunakan untuk memberi tahu WordPress tentang nama tema, penulis, deskripsi, dan informasi lainnya.index.php Ini adalah jaring pengaman terakhir. Jika file template yang lebih spesifik tidak ada, WordPress akan menggunakan ini.

Sebuah contoh anotasi header tema khas adalah sebagai berikut:

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

Text Domain Untuk internasionalisasi, ini adalah pengidentifikasi yang digunakan saat memanggil fungsi terjemahan selanjutnya.

推荐阅读 Membangun Situs Web Profesional: Panduan Lengkap untuk Membuat Tema WordPress Kustom dari Nol.。

Selain kedua file tersebut, sebuah tema yang lengkap biasanya juga mencakup:header.php(Bagian atas halaman web),footer.php(Di bagian bawah halaman web),sidebar.php(Sidebar) dan functions.php(Dokumen peningkatan fungsi tema). Dengan memahami infrastruktur ini, Anda telah menguasai kerangka pengembangan tema.

\nMembuat file template inti

Sekarang, mari kita mulai membuat tema pertama. Di dalam folder "Tema" Anda, buat folder baru bernama "Tema pertama". /wp-content/themes/ Di bawah direktori, buat folder baru dan beri nama, misalnya my-first-themeKemudian, buat file paling dasar di dalam folder tersebut.

Pertama, buatlah style.cssDan tambahkan catatan judul untuk topik yang disebutkan. Selanjutnya, buat index.phpIni adalah file template pertama Anda. Yang paling sederhana. index.php Ini hanya bisa mencakup loop yang memanggil judul dan konten artikel:

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

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

Kode ini menggunakan tag template. get_header(), get_sidebar(), get_footer(), the_title() 和 the_content()Untuk membuatnya berfungsi, Anda perlu membuat file header, sidebar, dan footer yang sesuai.

Membuat header.phpIni seharusnya mencakup bagian awal dokumen HTML, hingga area konten utama dimulai:

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

Di sini,wp_head() Ini adalah hook yang sangat penting, yang memungkinkan inti WordPress, plugin, dan tema menyisipkan kode yang diperlukan (seperti tautan stylesheet) ke bagian header halaman.body_class() Fungsi tersebut akan mengeluarkan serangkaian nama kelas CSS yang semantik, sehingga memudahkan Anda untuk melakukan kontrol gaya secara lebih detail.

推荐阅读 Arsitektur inti dan cara kerja WordPress.。

Membuat footer.php Untuk menutup tab yang terbuka:

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

Perhatikan,wp_footer() Ini adalah dengan wp_head() Kait ekor yang relatif, juga sangat penting.

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

Membuat sidebar.phpUntuk saat ini, Anda hanya dapat menempatkan satu kontrol sederhana untuk dipanggil:

<aside>
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
  <?php endif; ?>
</aside>

Pada titik ini, tema Anda sudah memiliki fungsi “menggunakan template” dasar, yang dapat diaktifkan dan dipratinjau di latar belakang. Meski sederhana, ini mengikuti arsitektur inti WordPress.

Meningkatkan fungsionalitas tema melalui Functions.php.

functions.php File tersebut merupakan “pusat kendali” dari tema Anda. Ini bukan file template, melainkan file PHP yang dimuat secara otomatis saat tema diinisialisasi, yang digunakan untuk menambahkan fungsionalitas, mendaftarkan komponen, dan menghubungkan ke berbagai API WordPress. Ini merupakan kunci untuk membuat tema yang profesional.

Kamu perlu membuat file ini di direktori root tema. Pertama, mari kita tambahkan lembar gaya dan file skrip untuk tema ini. Cara yang benar adalah dengan “mengantre” melalui fungsi yang disediakan oleh WordPress, bukan dengan menulisnya langsung di HTML. <link> Tag.

<?php
function my_first_theme_scripts() {
    // 添加主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 添加一个自定义样式表
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 添加一个 JavaScript 文件
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Di sini,wp_enqueue_style() 和 wp_enqueue_script() Ini adalah fungsi yang digunakan untuk menambahkan sumber daya secara aman.get_stylesheet_uri() Menunjuk ke topik tersebut. style.css。add_action() Memasang fungsi kami ke wp_enqueue_scripts Di hook ini, pastikan itu dieksekusi pada waktu yang tepat.

Selanjutnya, daftarkan menu navigasi dan sidebar (area gadget):

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 启用文章特色图像功能
    add_theme_support( 'post-thumbnails' );

// 为“文章”类型启用文章格式支持
    add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );

// 添加对 HTML5 标记格式的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );

// 启用标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Buat agar lokasi menu yang dapat dipilih muncul di antarmuka “Tampilan” -> “Menu” di latar belakang.add_theme_support() Fungsi digunakan untuk mengaktifkan berbagai fitur tema, yang merupakan praktik standar dalam pengembangan tema modern. Misalnya, mengaktifkan title-tag Setelah itu, Anda tidak perlu lagi header.php Output manual dalam bahasa Cina <title> Saya sudah menandainya.

Terakhir, daftarkan area widget sidebar:

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

Sampai saat ini, tema Anda sudah memiliki rantai lengkap mulai dari presentasi dasar hingga peningkatan fungsionalitas. Dengan menggunakan menu pengaturan latar belakang dan menambahkan widget, Anda akan dapat melihat perubahan dinamis pada tema tersebut.

Menyimpulkan.

Dari membuat sebuah konten yang mencakup style.css 和 index.php Mulai dari folder, hingga membangun komponen template yang terpisah.header.php, footer.php), hingga kemudian melalui kekuatan yang besar… functions.php Dengan mendaftarkan file, menambahkan sidebar, dan memuat sumber daya secara aman, Anda telah menyelesaikan seluruh langkah utama dalam membuat tema WordPress kustom. Inti dari proses ini adalah memahami dan mengikuti hierarki template dan sistem hook WordPress.

Kamu tidak lagi sekadar pengguna tema, tetapi juga penciptanya. Setelah menguasai dasar-dasar ini, kamu dapat melanjutkan untuk mempelajari file template yang lebih kompleks, seperti single.php、page.php、archive.phpExplore lebih banyak kemungkinan dari loop WordPress, dan manfaatkan tag kondisional (seperti is_page(), is_single()) Mencapai kontrol halaman yang lebih halus. Dunia pengembangan tema sangat luas dan menarik, dan ini hanyalah awal yang kuat.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah saya perlu ahli PHP untuk mengembangkan tema WordPress?

Diperlukan pengetahuan dasar tentang PHP, tetapi tidak perlu mahir. Anda setidaknya harus memahami konsep-konsep dasar variabel, array, pernyataan kondisional (if/else), loop (while/foreach), dan fungsi. Karena pengembangan tema WordPress sangat bergantung pada fungsi PHP bawaan (tag template) dan sistem hook, fokus pembelajaran adalah memahami cara menggunakan fungsi PHP khusus WordPress, bukan menulis algoritma PHP yang kompleks dari awal.

Mengapa harus menggunakan fungsi wp_head() dan wp_footer()?

Kedua fungsi ini adalah hook inti dari WordPress.wp_head() Terletak di </head> Sebelum tag ini, WordPress inti, plugin, dan tema Anda sendiri dapat menyisipkan kode yang diperlukan di bagian header halaman, seperti tautan lembar gaya CSS, tag meta, variabel JavaScript, dan lain-lain.wp_footer() Terletak di <p>Saya ingin memperkenalkan Anda kepada teman saya, John Smith.</p> Sebelum tag, biasanya digunakan untuk memasukkan kode analitik, file JavaScript yang dimuat tertunda. Jika tag ini tidak ada, banyak plugin tidak akan berfungsi dengan baik, dan bahkan beberapa fitur WordPress sendiri mungkin tidak berjalan dengan baik.

Bagaimana cara menambahkan template halaman untuk topik saya?

Buat file PHP baru, misalnya page-fullwidth.phpDi bagian atas file ini, Anda perlu menambahkan blok komentar dengan nama template tertentu. Misalnya:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的页面模板
 */

Kemudian, Anda dapat menulis sesuatu yang berbeda dari yang ada di dalam file ini. page.php Struktur HTML, seperti menghilangkan bagian-bagian tertentu. get_sidebar() Panggilan. Setelah menyimpan, di halaman edit backend WordPress, dalam daftar drop-down “Template” di “Atribut Halaman”, opsi “Halaman Lebar Penuh” akan muncul untuk Anda pilih.

Apa praktik terbaik dalam mengelola CSS dan JavaScript saat mengembangkan tema?

Praktik terbaiknya adalah menggunakan yang disediakan oleh WordPress. wp_enqueue_style() 和 wp_enqueue_script() Fungsi, dalam functions.php \nDipasang di tengah. wp_enqueue_scripts Gunakan hook untuk menambahkan sumber daya. Cara ini dapat: 1) Menangani ketergantungan dengan benar (misalnya skrip Anda bergantung pada jQuery); 2) Menghindari memuat ulang sumber daya yang sama; 3) Memudahkan pengelolaan plugin dan kode tema lainnya; 4) Sesuai dengan standar pengkodean WordPress. Pastikan untuk tidak menggunakan langsung dalam file template. <link> 或 <script> Mengkodekan sumber daya label secara keras.

Bagaimana topik saya dapat menerapkan dukungan multibahasa (internasionalisasi)?

Kamu perlu melakukan dua hal. Pertama, di style.css Saat menerjemahkan teks dengan komentar dan panggilan header, gunakan “Text Domain” yang benar. Seperti yang ditunjukkan dalam panduan, tentukan Text Domain: my-first-themeKedua, dalam functions.php Seperti semua file template, gunakan fungsi terjemahan WordPress untuk mengemas semua teks antarmuka pengguna yang perlu diterjemahkan, yang paling sering digunakan adalah __()(Kembali ke string terjemahan) dan _e()(Langsung menampilkan string yang diterjemahkan). Misalnya:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>Setelah itu, Anda dapat menggunakan alat seperti Poedit untuk menghasilkan .pot File template, untuk digunakan oleh penerjemah dalam menciptakan terjemahan dalam berbagai bahasa. .po 和 .mo Dokumen.