Hướng dẫn tối thượng phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh đầu tiên từ con số không

Công tác chuẩn bị và thiết lập môi trường

Trước khi bắt đầu viết mã nguồn, một môi trường phát triển địa phương ổn định và hiệu quả là điều cực kỳ quan trọng. Điều này không chỉ giúp bạn có thể làm việc mà không cần kết nối Internet, mà còn giúp tránh những rủi ro có thể phát sinh khi thao tác trực tiếp trên các máy chủ trực tuyến. Đầu tiên, bạn cần cài đặt một môi trường máy chủ địa phương, chẳng hạn như XAMPP, MAMP hoặc Local by Flywheel – những công cụ này sẽ tự động cấu hình sẵn Apache, MySQL và PHP, những thành phần cơ bản cần thiết để vận hành WordPress.

Tiếp theo, bạn cần tải về các tệp cốt lõi mới nhất của WordPress và cài đặt chúng trên máy chủ của mình. Sau khi hoàn tất quá trình cài đặt cơ bản, bạn có thể bắt đầu tạo thư mục chứa các tài liệu liên quan đến chủ đề (theme) của mình. Tất cả các chủ đề WordPress đều được lưu trữ tại đây. /wp-content/themes/ Nằm trong thư mục này. Vui lòng tạo một thư mục mới ở đây, ví dụ như… my-first-themeTên của thư mục này chính là biểu tượng cho chủ đề của bạn.

Một chủ đề WordPress hợp lệ cần ít nhất hai tệp tin cốt lõi:style.css 和 index.php。style.css Tệp tin không chỉ là các bảng định dạng (style sheets), mà còn là “chứng minh thư” của một chủ đề (theme); phần chú thích ở đầu tệp (file header) chứa đựng tất cả thông tin meta liên quan đến chủ đề đó.

Đọc thêm Xây dựng website chuyên nghiệp: Hướng dẫn toàn diện phát triển chủ đề WordPress tùy chỉnh từ đầu。

Thông tin tiêu đề của tệp biểu mẫu phong cách chủ đề (Theme Style Sheet)

style.css Đầu tệp tin phải chứa một đoạn chú thích CSS cụ thể, dùng để mô tả chủ đề của bạn cho WordPress. Thông tin này sẽ được hiển thị trên trang quản lý “Giao diện” -> “Chủ đề” ở phía sau hậu trường.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

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

Trong đó,Text Domain Được sử dụng cho mục đích hóa đa ngôn ngữ (internationalization); tên tệp này nên phải trùng khớp với tên thư mục chứa nội dung liên quan đến chủ đề của bạn. index.php Đây là tệp mẫu mặc định của chủ đề (theme), đóng vai trò là tệp mẫu dự phòng cho tất cả các trang web được tạo ra từ chủ đề đó. Ban đầu, nó có thể chỉ là một cấu trúc HTML đơn giản, được sử dụng để kiểm tra xem chủ đề có được WordPress nhận diện đúng cách hay không.

Hiểu về cấu trúc các cấp độ của mẫu (template hierarchy) và cách tạo ra các mẫu cốt lõi (core templates)

WordPress sử dụng một hệ thống thông minh được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định nên tải tệp template nào cho một trang cụ thể. Việc hiểu rõ các quy tắc của hệ thống này là yếu tố then chốt trong quá trình phát triển các giao diện (theme) cho WordPress. Nói một cách đơn giản, khi người dùng truy cập một trang, WordPress sẽ tìm kiếm tệp template tương ứng theo thứ tự từ cụ thể nhất đến tổng quát nhất.

Ví dụ, khi truy cập một bài viết trên blog có ID là 5, WordPress sẽ tìm kiếm theo thứ tự sau:single-post-5.php -> single-post.php -> single.php -> singular.php -> Và cuối cùng mới đến điều đó. index.phpNếu tìm thấy tệp tin phù hợp, nó sẽ được sử dụng; nếu không, quá trình tìm kiếm sẽ tiếp tục diễn ra ở các phần tiếp theo.

Tạo mẫu trang đơn cho bài viết

single.php Đây là mẫu chuẩn được sử dụng để hiển thị từng bài viết trên blog. Trong tệp này, bạn sẽ sử dụng một loạt thẻ và hàm cốt lõi của WordPress để hiển thị nội dung bài viết.

Đọc thêm Hướng dẫn bắt đầu phát triển theme WordPress: Xây dựng theme đầu tiên từ con số 0。

<?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 1008>
            <header class="entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
                <div class="entry-meta">
                    发布于： | 作者：
                </div>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

Mẫu này sử dụng the_post() Hãy thực hiện các thiết lập toàn cục (global settings) nhé. $post Biến, sau đó thông qua… the_title()、the_content() Các hàm như vậy được sử dụng để xuất dữ liệu bài viết. Đồng thời, chúng cũng giới thiệu các thành phần mẫu (template components):get_header(), get_sidebar(), get_footer()。

Tạo mẫu trang (Create a page template)

page.php Mẫu (template) được sử dụng để hiển thị các trang tĩnh. Cấu trúc của nó là… single.php Tương tự, nhưng thường không chứa các yếu tố phân loại, thẻ mô tả (tags) và các dữ liệu siêu dữ liệu (metadata) khác của bài viết. Bạn có thể tạo thêm nhiều mẫu trang cụ thể theo nhu cầu của mình; ví dụ, bạn có thể tạo một mẫu trang có tên “Về chúng tôi” (About Us). page-about.php Đối với các tệp tin đó, WordPress sẽ tự động áp dụng nội dung chứa trong chúng cho các trang có tiêu đề hoặc tên miền (slug) là “about”.

Tích hợp các thành phần mẫu với menu điều hướng

Để duy trì tính mô-đun hóa và khả năng tái sử dụng của mã nguồn, các chủ đề WordPress thường chia các phần như tiêu đề trang, chân trang, bên cạnh trang thành các tệp “thiết kế thành phần” (template components) riêng biệt. Bằng cách sử dụng những tệp này, người phát triển có thể dễ dàng thay đổi hoặc tái get_template_part() Bạn có thể dễ dàng đưa các thành phần này vào các mẫu (templates) khác nhau bằng cách sử dụng các hàm (functions).

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

Xây dựng tệp đầu (header file) cho chủ đề (theme)

header.php Tệp tin chứa phần đầu (header) của tài liệu HTML. Các khu vực (regions) cũng như các phần hiển thị ở phía trên trang web, như logo và menu điều hướng chính.

<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

Function Keys wp_head() Cho phép phần cốt lõi của WordPress, các plugin, và các script khác thêm những đoạn mã cần thiết (như các liên kết CSS, JS) vào phần đầu trang (header).wp_nav_menu() Hàm này được sử dụng để hiển thị một menu điều hướng đã được đăng ký.

Vị trí của mục điều hướng đăng ký

Menü điều hướng cần được “đăng ký” trước tại mục tương ứng trong gói thiết kế (theme), sau đó người dùng mới có thể phân bổ các mục menu trong phần “Giao diện” -> “Menü” ở phía backend. Quy trình này thường được thực hiện trong các gói thiết kế (theme) được cung cấp sẵn. functions.php Hoàn tất trong tệp tin.

Đọc thêm Hướng dẫn hoàn chỉnh từ con số 0 về phát triển theme WordPress: Xây dựng website cá nhân hóa。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() Hàm đã đăng ký hai vị trí cho các mục trong thực đơn. add_theme_support() Chúng tôi đã triển khai các tính năng như Logo tùy chỉnh và thẻ tiêu đề, đây là những phương pháp tiêu chuẩn trong việc phát triển giao diện cho các chủ đề WordPress hiện đại.

Nâng cao chức năng và phong cách của chủ đề (Theme Features and Styles)

functions.php Tệp tin này thuộc chủ đề của bạn (“Trung tâm điều khiển”) và được sử dụng để thêm các tính năng mới, thay đổi hành vi mặc định, cũng như tải các tập lệnh (script) và bảng định dạng (stylesheet). Nó có chức năng tương tự như các plugin, nhưng được thiết kế riêng để áp dụng trực tiếp cho chủ đ

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Cách đưa các định dạng kiểu (styles) và mã nguồn (scripts) vào trang web một cách an toàn

Cách đúng để tải các phong cách (styles) và script là sử dụng… wp_enqueue_style() 和 wp_enqueue_script() hàm, và gắn chúng vào wp_enqueue_scripts hook hành động này.

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' );

Phương pháp này đảm bảo rằng các mối phụ thuộc giữa các thành phần được thiết lập đúng đắn và tránh tình trạng tải lại các tài nguyên (dữ liệu, chức năng) một cách không cần thiết. get_stylesheet_uri() Quay lại trang chủ style.css URL đó… get_template_directory_uri() Trả về URL của thư mục chủ đề.

Tạo khu vực công cụ bên cạnh (sidebar tools area)

Khu vực công cụ nhỏ (Sidebar) cho phép người dùng tự định hình các khối nội dung bằng cách kéo thả từ giao diện quản trị. Việc đăng ký một khu vực công cụ nhỏ cũng tương tự như vậy. functions.php Hoàn thành tại đây.

function my_first_theme_widgets_init() {
    register_sidebar(
        array(
            'name'          => esc_html__( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => esc_html__( '在此添加小工具。', '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', 'my_first_theme_widgets_init' );

Sau khi đăng ký, bạn có thể sử dụng sidebar.php Sử dụng trong các thành phần mẫu (template components). dynamic_sidebar( 'sidebar-1' ) Hàm đã được sử dụng để hiển thị nội dung của khu vực này.

Tóm lại

Hướng dẫn này trình bày một cách có hệ thống quy trình phát triển các chủ đề (theme) cho WordPress. Bắt đầu từ việc thiết lập môi trường phát triển trên máy tính, tạo các tệp cơ bản của chủ đề, hiểu rõ và triển khai hệ thống cấu trúc mẫu (template hierarchy) mạnh mẽ của WordPress, tiếp theo là tích hợp các thành phần mẫu (template components), đăng ký các menu điều hướng (navigation menus) và các khu vực hiển thị công cụ (widgets), và cuối cùng là… functions.php Bạn đã mở rộng các tính năng của chủ đề một cách an toàn và hiệu quả. Bằng cách tuân theo những bước này, bạn đã tạo ra một chủ đề tùy chỉnh có cấu trúc rõ ràng, chức năng đầy đủ và tuân thủ các tiêu chuẩn lập trình của WordPress. Điều này tạo nên nền tảng vững chắc cho việc phát triển những chủ đề phức tạp và có nhiều tính năng hơn trong tương lai. Hãy nhớ rằng, việc phát triển chủ đề là một quá trình học hỏi không ngừng; việc thực hành thường xuyên và tham khảo tài liệu chính thức là chìa khóa để nâng cao kỹ năng của bạn.

FAQ 常见问题

###: Cấu trúc phân cấp của các mẫu (templates) trong WordPress là gì?
Cấu trúc các bộ điều khiển mẫu (template hierarchy) trong WordPress là một tập hợp các quy tắc được sử dụng để xác định mẫu nào sẽ được áp dụng cho từng loại trang khác nhau. Đây là một thứ tự tìm kiếm từ chi tiết đến tổng quát. Ví dụ, đối với một bài viết cụ thể, WordPress sẽ ưu tiên tìm kiếm mẫu phù hợp với ID hoặc loại bài viết đó. Nếu không tìm thấy mẫu phù hợp, nó sẽ lần lượt kiểm tra các mẫu có tính chất chung hơn, cho đến khi tìm thấy mẫu phù hợp nhất. index.phpViệc hiểu rõ mối quan hệ giữa các thành phần trong cấu trúc là rất quan trọng để tạo ra những chủ đề có cấu trúc chính xác.

Tại sao lại phải sử dụng `wp_enqueue_style` để tải các file định dạng style (CSS)?

Sử dụng wp_enqueue_style() 和 wp_enqueue_script() Đây là phương thức tải tài nguyên được WordPress chính thức khuyến nghị và được tiêu chuẩn hóa. Nó có thể xử lý các mối phụ thuộc giữa các tài nguyên một cách chính xác (ví dụ: đảm bảo jQuery được tải trước các script tùy chỉnh), ngăn chặn việc tải lại cùng một tài nguyên nhiều lần, và tương thích tốt với các plugin quản lý bộ nhớ đệm (cache), các chủ đề con (sub-theme), cùng với toàn bộ hệ sinh thái liên quan đến WordPress. Bạn có thể sử dụng phương thức này trực tiếp trong các tệp template của mình. 或 Việc sử dụng các thẻ (labels) là một phương pháp không được khuyến nghị.

Sự khác biệt giữa tệp `functions.php` và các plugin là gì?

functions.php Các tệp tin là một phần của chủ đề (theme); chúng chỉ hoạt động khi chủ đề đó được kích hoạt và sẽ ngừng hoạt động khi chủ đề được thay đổi. Chúng chủ yếu được sử dụng để thêm các tính năng liên quan mật thiết đến giao diện và chức năng của chủ đề đó. Ngược lại, các tính năng do plugin cung cấp thường hoạt động độc lập với chủ đề; ngay cả khi thay đổi chủ đề, các tính năng của plugin vẫn sẽ được giữ nguyên. Nói chung, nếu một tính năng có mối liên hệ mật thiết với phong cách hoặc bố cục của chủ đề, thì nên đặt nó vào phần tương ứng của tệp tin chủ đề. functions.php；nếu nó là chức năng phổ biến, thì phù hợp hơn để tạo thành plugin.

Làm thế nào để chủ đề của tôi hỗ trợ đa ngôn ngữ (quốc tế hóa)?

Để một chủ đề hỗ trợ nhiều ngôn ngữ, tức là thực hiện quá trình quốc tế hóa (i18n – Internationalization), chủ yếu cần thực hiện các bước sau: Đầu tiên, style.css Phần đầu và tất cả các nội dung khác… load_theme_textdomain() Đã thiết lập đúng trong quá trình gọi. Text DomainThứ hai, trong… functions.php trong load_theme_textdomain() Hàm được sử dụng để chỉ định thư mục chứa các tệp ngôn ngữ (language files). Cuối cùng, và cũng là bước quan trọng nhất, trong tất cả các tệp mẫu PHP của chủ đề (theme’s PHP template files)… functions.php Trong đó, tất cả các chuỗi dữ liệu nhắm đến người dùng đều được bao bọc bằng các hàm dịch của WordPress. Ví dụ: esc_html__( ‘文本’, ‘my-first-theme’ ) 或 _e( ‘文本’, ‘my-first-theme’ )Sau khi hoàn thành, bạn có thể sử dụng các công cụ như Poedit để tạo ra sản phẩm cuối cùng. .pot Đây là tệp mẫu dùng để những người dịch tạo ra các bản dịch bằng các ngôn ngữ khác nhau. .po 和 .mo Tệp.