WordPress Theme Development Practical Tutorial: Building Modern, Responsive Themes from Scratch

Preparasi dan pembinaan persekitaran.

Untuk memulakan projek pembangunan tema WordPress, langkah pertama adalah mengkonfigurasi persekitaran kerja yang sesuai. Ini termasuk menyediakan pelayan pembangunan lokal, mewujudkan struktur direktori projek yang jelas, dan menggunakan alat pembangunan yang moden.

Terdapat pelbagai pilihan untuk membina persekitaran pembangunan tempatan. Anda boleh menggunakan perpaket terintegrasi seperti XAMPP, MAMP, atau Local by Flywheel, yang membolehkan anda memasang Apache, MySQL, dan PHP dengan cepat pada komputer anda. Untuk pengalaman yang lebih hampir sama dengan persekitaran produksi, anda boleh mempertimbangkan untuk menggunakan kontena Docker. Selain itu, hampir semua pembangunan tema moden bermula dengan editor kod asas, seperti VS Code, dan digabungkan dengan tambahan (plugin) yang diperlukan untuk meningkatkan kecekapan penulisan kod.

Sebuah struktur direktori tema yang standard dan jelas merupakan asas kepada kebolehuruslan projek (project maintainability). Dalam WordPress…wp-content/themesDalam direktori tersebut, buat sebuah folder dengan nama yang sama seperti tema anda, contohnya…my-modern-themeDalam folder ini, anda mesti membuat dua fail utama:style.css和index.phpDi antaranya,style.cssBukan sahaja fail gaya (style sheets), tetapi juga mengandungi maklumat metadata berkaitan tema tersebut. Fail dan direktori lain, seperti yang digunakan untuk menyimpan skrip JavaScript, juga mempunyai maklumat yang berkaitan./jsTempat untuk menyimpan komponen templat/template-partsUntuk menyimpan templat halaman…/page-templatesDan sebagainya, boleh dibina secara beransur-ansur semasa proses pembangunan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Lengkap Tailwind CSS: Dari Permulaan Hingga Kemahiran Tinggi dan Teknik Praktikal。

Header Information for Theme Style Sheet

Topikstyle.cssBahagian kepala fail mesti mengandungi sebuah ulasan yang mematuhi format standard, yang digunakan untuk memberitahu sistem WordPress tentang tema yang anda buat. Maklumat ini sangat penting kerana ia menentukan nama tema, pengarang, deskripsi, versi, dan lain-lain butiran berkaitan tema tersebut.

UltaHost – Penyedia Hosting untuk WordPress

Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Lawati halaman

/*
Theme Name: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

Di antaranyaText DomainIa digunakan untuk pengekstrakan kandungan yang perlu diterjemahkan ke dalam bahasa lain, dan akan berfungsi sebagai bidang teks untuk fungsi terjemahan seterusnya. Setelah maklumat ini didefinisikan dengan betul, tema anda akan muncul dalam senarai “Tema” di bahagian “Penampilan” (Appearance) dalam panel pentadbiran WordPress.

Mengintegrasikan fail fungsi utama

Walaupunindex.php和style.cssCukup untuk membolehkan sesuatu topik dikenali, tetapi sebuah topik yang lengkap dari segi fungsionaliti mesti mengandungi…functions.phpFail ini bukan digunakan untuk mengeluarkan kandungan secara langsung, tetapi berfungsi sebagai “enjin fungsi” untuk tema, yang digunakan untuk menambahkan sokongan tema, menu pendaftaran, bar sisi, serta memasukkan gaya dan skrip.

Cipta dalam direktori akar tema.functions.phpFail. Pada peringkat awal, kita boleh menambahkan beberapa ciri asas ke dalamnya. Anda boleh melakukannya melalui…add_theme_support()Fungsi ini digunakan untuk menyatakan ciri-ciri yang disokong oleh tema tersebut, seperti gambar ringkasan artikel (Featured Image), logo yang boleh disesuaikan, tag HTML5, dan lain-lain.

Membina fail templat asas

WordPress menggunakan sistem hierarki templat untuk menentukan cara kandungan yang berbeza dipaparkan. Memahami dan membuat fail-fail templat asas ini adalah kunci untuk mengubah reka bentuk anda menjadi laman web yang dinamik.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Penguraian menyeluruh pembinaan laman web moden: Panduan praktikal lengkap daripada perancangan hingga pelancaran。

Fail templat yang paling asas adalah…index.phpIa merupakan templat penarikan balik (fallback) untuk semua halaman. Namun, untuk kawalan yang lebih terperinci, kita sepatutnya membuat templat-templat yang lebih khusus. Sebagai contoh, templat yang digunakan untuk menunjukkan senarai artikel blog.home.php或index.phpDigunakan untuk menunjukkan artikel tunggal.single.phpDigunakan untuk menunjukkan halaman statik.page.phpSerta untuk menunjukkan kategori artikel, tag, dan halaman arkib yang lain.archive.phpSelain itu,header.php和footer.phpDigunakan untuk memisahkan kod bahagian atas (header) dan kod bahagian bawah (footer) sebuah laman web, melalui…get_header()和get_footer()Fungsi tersebut dipanggil dalam pelbagai templat, membolehkan penggunaan kod yang berulang.

Create a header template.

header.phpFail-fail tersebut biasanya mengandungi dokumen HTML.<head>Struktur bahagian dan bahagian awal halaman, seperti identiti laman web dan menu navigasi utama. Langkah yang kritikal adalah…<head>Panggilan dalam bahasa Cinawp_head()Hook (Pautan): Ini merupakan tempat di mana kod CSS, JavaScript, dan metadata yang diperlukan dihasilkan oleh inti WordPress, plugin, dan tema itu sendiri.

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <p><strong>Halo, saya ingin mengucapkan terima kasih kerana melawat laman web saya.</strong></p>
</head>
<body no numeric noise key 1005>
<p>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/ms/</?php echo esc_url( home_url( '/' ) ); ?>">\n</a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Melaksanakan pengulangan artikel

Cycloping artikel merupakan mekanisme teras untuk pengeluaran kandungan dinamik di WordPress.index.php、single.phpDalam templat-templat tersebut, kami menggunakan…if ( have_posts() ) : while ( have_posts() ) : the_post();Lelakikan pengimbasan dan tunjukkan setiap artikel.

hosting.com Hosting Bersama

Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Lawati halaman

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            while ( have_posts() ) :
                the_post();
                // 为每篇文章加载对应的模板部件或内容模板
                get_template_part( 'template-parts/content', get_post_type() );
            endwhile;
            // 分页导航
            the_posts_navigation();
        else :
            // 没有找到内容时的模板
            get_template_part( 'template-parts/content', 'none' );
        endif;
        ?>
    </main>
</div>

get_template_part()Fungsi merupakan amalan yang baik, kerana ia menggalakkan pemisahan struktur HTML yang digunakan untuk menampilkan kandungan artikel daripada kod lain.template-parts/content.phpDalam fail komponen seperti ini, membuat fail templat utama menjadi lebih ringkas dan jelas adalah sangat penting.

Mengimplementasikan reka bentuk dan gaya yang responsif

Tema moden mesti bersifat responsif, iaitu mampu memberikan pengalaman pelayaran yang baik pada pelbagai saiz skrin, daripada telefon bimbit hingga komputer meja. Ini dicapai terutamanya melalui penggunaan kueri media CSS (CSS Media Queries), model kotak fleksibel (Flexbox), dan susun atur grid (CSS Grid).

Pertama sekali,functions.phpGunakan dengan betul dalam bahasa Cina.wp_enqueue_style()Fungsi tersebut akan menambahkan fail gaya utama anda ke dalam barisan (queue). Pastikan bahawa semasa memanggilnya, gaya yang bergantung pada gaya yang disediakan oleh WordPress sendiri telah diatur dengan betul.dashicons。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Terakhir Tailwind CSS: Dari Permulaan Hingga Kemahiran Tinggi dalam Pembangunan Web Moden。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

CSS Strategi yang Mengutamakan Peranti Mudah Alih

Gunakan strategi “mobile-first” semasa menulis kod CSS. Ini bermakna anda perlu menulis gaya asas terlebih dahulu untuk peranti skrin kecil (seperti telefon bimbit), dan kemudian menggunakan kueri media (media queries) untuk menambah gaya tambahan serta penyesuaian reka letak untuk skrin yang lebih besar (seperti tablet dan komputer meja).

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Menguruskan imej yang responsif

WordPress menyediakan sokongan imej yang sangat responsif. Gunakanlah ciri ini dengan sebaiknya.the_post_thumbnail()Anda perlu menghantar parameter saiz yang sesuai ke dalam fungsi tersebut, dan WordPress akan secara automatik menghasilkan output yang mengandungi maklumat yang diperlukan.srcset和sizesAtribut `

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

Tag tersebut membolehkan pelayar memilih fail imej yang paling sesuai berdasarkan skrin peranti, seterusnya mengoptimumkan prestasi pemuatannya.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Tambahkan ciri tema dan keupayaan untuk menyesuaikan (customization).

Setelah sebuah tema asas dibentuk, pelbagai fungsi boleh ditambah melalui API WordPress untuk meningkatkan kegunaan dan profesionalismenya. Ini termasuk menu yang disesuaikan, kawasan alat tambahan (bar sisi), serta penyesuaian tema melalui alat kustomisasi atau halaman tetapan.

Daftar menu navigasi

在functions.phpGunakan dalam bahasa Cinaregister_nav_menus()Fungsi tersebut digunakan untuk menentukan lokasi-lokasi menu yang disokong oleh tema yang anda gunakan. Selepas itu, pengguna boleh mengatur menu untuk diletakkan di lokasi-lokasi tersebut dalam bahagian “Penampilan” -> “Menu” di bahagian pentadbiran (backend).

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Create a gadget area.

Kawasan Alat Kecil (Sidebar) membenarkan pengguna untuk menyesuaikan blok halaman dengan menarik dan meletakkan alat kecil yang diinginkan.register_sidebar()Fungsi tersebut digunakan untuk pendaftaran. Biasanya, anda akan membuat beberapa kawasan alat tambahan (widgets) untuk sidebar utama, kawasan alat tambahan di bahagian bawah halaman, dan sebagainya.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Selepas pendaftaran, dalam fail templat (seperti…)sidebar.php）digunakan dalamdynamic_sidebar( 'sidebar-1' )函数调用即可显示该区域。

API Integrator Customizer

WordPress Customizer membenarkan pengguna menyesuaikan pilihan tema dalam masa nyata, melalui pratonton yang disediakan. Anda boleh menambahkan tetapan asas seperti pemilihan warna dan memuat naik logo menggunakan API Customizer. Proses ini melibatkan penggunaan alat dan fungsi yang disediakan oleh WordPress untuk mengubah suai penampilan laman web secara dinamik.$wp_customize->add_setting()和$wp_customize->add_control()Metode.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Kemudian, dalamheader.phpDalam hal ini, ia boleh dilakukan melalui…get_theme_mod( 'header_textcolor' )Dapatkan nilai tersebut dan gunakannya dengan cara seperti gaya terbenam (inline style).

RINGKASAN

Membangunkan sebuah tema WordPress yang moden dan responsif dari awal merupakan projek yang sistematik, yang memerlukan pengembang bukan sahaja mahir dalam PHP dan API teras WordPress, tetapi juga dalam HTML5, CSS3 (terutamanya Flexbox/Grid dan kueri media), serta JavaScript. Proses pembangunan tersebut mengikuti prinsip modulariti dan kebolehpenyelenggaraan: bermula dengan menyediakan persekitaran pembangunan dan mendefinisikan maklumat tema, kemudian membina fail-fail PHP yang mengikut hierarki templat, dan seterusnya melaksanakan fungsi utama untuk penulisan artikel. Selepas itu, strategi CSS yang mengutamakan peranti mudah alih dan teknologi imej responsif digunakan untuk memastikan laman web berfungsi dengan baik pada semua peranti. Akhirnya, menggunakan API yang kuat milik WordPress, menu navigasi, kawasan alat tambahan, dan ciri-ciri kustom dapat ditambahkan untuk memberikan pengguna keupayaan untuk menyesuaikan tema tersebut dengan bebas. Dengan mengikuti langkah-langkah ini, anda akan dapat membina sebuah tema WordPress yang profesional, cekap, dan mudah diselenggara.

FAQ - Soalan Lazim

Apakah teknologi asas yang perlu dikuasai untuk mengembangkan tema WordPress?

Untuk mengembangkan sebuah tema WordPress yang lengkap, anda perlu menguasai beberapa teknologi utama. Pertama sekali, PHP adalah penting kerana WordPress sendiri ditulis dalam PHP, dan semua fail templat serta logik fungsi bergantung pada bahasa pemrograman ini. Kemudian, HTML5 dan CSS3 digunakan untuk membina struktur dan gaya halaman, di mana reka bentuk responsif sangat bergantung pada kueri media CSS dan model susun atur moden seperti Flexbox dan Grid. Pemahaman asas tentang JavaScript juga sangat penting untuk melaksanakan fungsi interaktif. Akhir sekali, anda perlu memahami konsep-konsep asas WordPress dengan mendalam, seperti hierarki templat, pengulangan artikel, Hook (Hooks), dan Filter (Filters).

Apa fungsi Domain Teks dalam fail style.css?

Text DomainIa merupakan penanda kunci untuk internasionalisasi dan lokalisasi tema. Fungsinya adalah untuk mencipta ruang nama unik bagi semua rentetan teks yang boleh diterjemahkan dalam tema anda. Dalam kod, apabila anda menggunakan…__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')Dalam fungsi terjemahan seperti ini, parameter kedua merupakan kawasan teks. Ini memastikan alat terjemahan (seperti Poedit) dapat mengenal pasti dan mengekstrak rentetan teks yang berkaitan dengan topik anda dengan betul, seterusnya menghasilkan terjemahan yang sesuai..po和.moMenterjemahkan fail agar topik tersebut dapat dengan mudah diterjemahkan ke dalam mana-mana bahasa.

Bagaimana untuk menjadikan tema tersebut menyokong fungsi gambar ringkasan artikel?

Untuk membolehkan tema menyokong gambar ringkasan (juga dikenali sebagai gambar khas) untuk artikel, anda perlu mengubah suai tetapan tema tersebut.functions.phpTambahkan kenyataan sokongan tema yang sesuai ke dalam fail tersebut. Gunakan…add_theme_support()Fungsi, dan hantar (Function, and pass)'post-thumbnails'Parameter. Anda boleh mengaktifkannya untuk semua jenis artikel, atau menentukan bahawa ia hanya berfungsi untuk jenis artikel tertentu (seperti…).post和pageAktifkan pada (…)

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Setelah sokongan ini ditambahkan, kotak meta “Gambar Menarik” akan muncul pada halaman penyuntingan artikel, membolehkan pengguna mengunggah atau memilih gambar. Dalam templat, gunakan…has_post_thumbnail()Periksa sama ada terdapat gambar kecil (thumbnail), dan gunakannya.the_post_thumbnail()Fungsi tersebut digunakan untuk menunjukkannya.

Mengapa fungsi `get_template_part` disyorkan untuk digunakan?

get_template_part()Fungsi merupakan salah satu amalan terbaik dalam pembangunan tema WordPress untuk menggalakkan penggunaan kod yang berulang kali dan pengurusan kod yang lebih teratur (modulasi). Ia terutamanya digunakan untuk memisahkan kod templat yang sering digunakan (seperti struktur HTML yang digunakan untuk menampilkan kandungan artikel) ke dalam fail-fail komponen yang berasingan. Terdapat beberapa kelebihan yang ketara daripada pendekatan ini: yang pertama, ia meningkatkan keterbacaan dan kemudahan penyelenggaraan kod. File templat utama (seperti…index.phpIa menjadi sangat ringkas; selain itu, fleksibiliti juga telah ditingkatkan, di mana anda boleh memuatkan fail komponen yang berbeza berdasarkan keadaan yang berbeza (seperti jenis artikel), sebagai contoh…get_template_part( 'template-parts/content', 'page' )Akan dimuat turun terlebih dahulu.content-page.phpAkhir sekali, ia memudahkan penggunaan sub-topik (sub-topics). Sub-topik hanya perlu menyediakan satu fail komponen dengan nama yang sama untuk mengubah logik penampilan sub-topik induk (parent topic).