Phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh đầu tiên của bạn từ đầu

Hiểu cấu trúc cốt lõi của chủ đề WordPress

Trước khi bắt đầu viết mã, bạn cần hiểu rõ những nền tảng cơ bản của một chủ đề WordPress: các tệp template (mẫu) và các tệp style sheet (bảng định dạng). WordPress sử dụng một loạt các tệp cụ thể để hiển thị các phần khác nhau của trang web, và những tệp này tuân theo các quy ước đặt tên tiêu chuẩn. Một chủ đề được thiết kế một cách tối giản chỉ cần hai loại tệp:index.php(Chính sách tệp mẫu) vàstyle.css(Các tệp biểu mẫu kiểu cốt lõi và thông tin chủ đề), nhưng để xây dựng một trang web có nhiều tính năng, chúng ta cần thêm nhiều thứ nữa.

style.cssTệp tin không chỉ chứa các quy tắc CSS mà còn bao gồm các khối chú thích ở phần đầu tệp (header), trong đó được định nghĩa các thông tin meta về chủ đề như tên chủ đề, tác giả, mô tả và phiên bản. Đây chính là cách mà WordPress nhận diện một chủ đề. Ví dụ, một đoạn chú thích cơ bản ở phần đầu tệp có thể như sau:

/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Ngoài các tệp tin cốt lõi, cấu trúc của một chủ đề (theme) điển hình còn bao gồm:header.php(Người đó gật đầu)footer.php(Phía dưới trang web),sidebar.php(Bên cạnh) Vàfunctions.php(Thư mục chứa các hàm chức năng liên quan đến chủ đề). Hãy tìm hiểu cách sử dụng các thẻ mẫu (template tags) để đưa những tệp tin này vào hệ thống.get_header(), get_footer()Việc kết hợp các thành phần một cách có cấu trúc (theo nguyên tắc mô-đun hóa) là chìa khóa để phát triển phần mềm một cách hiệu quả.

Đọc thêm Hướng dẫn cơ bản về phát triển giao diện WordPress: Tạo ra giao diện trang web riêng của bạn từ con số không。

Tạo tệp tin chủ đề và thư mục

Trước hết, chúng ta cần phải thực hiện một số thao tác trong thư mục cài đặt của WordPress.wp-content/themes/Hãy tạo một thư mục mới ở vị trí mong muốn. Tên của thư mục này sẽ là mã định danh cho chủ đề của bạn; khuyến nghị sử dụng chữ cái viết thường, số và dấu gạch nối, ví dụ như: “my-project-%year-%month”.my-first-themeTất cả các tệp tin liên quan đến chủ đề sẽ được đặt tại đây.

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

Tạo tệp biểu định kiểu cốt lõi

Như đã được nhấn mạnh trước đó,style.cssĐiều này là bắt buộc. Hãy tạo tập tin này trong thư mục chứa các chủ đề (theme folder) và điền đầy đủ thông tin liên quan đến chủ đề đó. Sau đó, bạn có thể bắt đầu viết mã CSS cơ bản để định nghĩa giao diện của trang web. Để tránh sự can thiệp từ các kiểu dáng mặc định của trình duyệt, thông thường bạn nên bắt đầu bằng việc thiết lập lại các kiểu dáng (reset styles).

/* 在 style.css 的头部注释块之后 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: #333;
}

Tạo tệp mẫu chính (main template file)

Tiếp theo, hãy tạo…index.phpĐây là tệp mẫu mặc định và quan trọng nhất. Cấu trúc ban đầu của nó nên bao gồm các phần gọi đến phần đầu (header), vòng lặp nội dung (content loop), và phần cuối (footer). Các thẻ mẫu (template tags) là các hàm tích hợp sẵn của WordPress, được sử dụng để chèn nội dung động.
Một thiết kế cực kỳ đơn giản (minimalist design).index.phpPhiên bản ban đầu có thể như sau:

<?php get_header(); ?>

<main id="primary" class="site-main">
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            // 文章内容将在这里输出
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>暂无文章。</p>';
    endif;
    ?&gt;
</main>

Phân tích mẫu: Phần đầu, phần chân và phần thanh bên

Để tái sử dụng và tăng tính rõ ràng của mã nguồn, các chủ đề WordPress thường tách những phần chung của trang web ra thành các tệp riêng biệt.

Thực hiện mẫu giao diện đầu trang cho trang web

Tạo raheader.phpTệp này chứa phần đầu (header) của một tài liệu HTML.到Phần mở rộng các thẻ (tag extensions), cùng với khu vực điều hướng ở phía trên trang web. Các thẻ mẫu quan trọng bao gồm…bloginfo()Dùng để lấy thông tin về trang web, cũng như…wp_head()“Hook” (khóa móc) cho phép các plugin (tiện ích mở rộng) và theme (giao diện) thêm mã lệnh vào nội dung trang web một cách có chọn lọc.
Một cái cơ bảnheader.phpứng dụng:

Đọc thêm Hướng dẫn toàn diện phát triển chủ đề WordPress: Xây dựng website tùy chỉnh từ con số không。

<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1005>
<?php wp_body_open(); ?>
<header class="site-header">
    <div class="site-branding">
        <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>
    </div>
    <nav class="main-navigation">
        'primary',
            'menu_id'        =&gt; 'primary-menu',
        ));
        ?&gt;
    </nav>
</header>

Thực hiện mẫu thiết kế phần cuối trang web (footer template)

Tạo rafooter.phpNó chứa toàn bộ nội dung xuất hiện sau phần kết thúc của nội dung chính, chẳng hạn như thông tin bản quyền ở phần chân trang, cùng những yếu tố vô cùng quan trọng khác.wp_footer()Việc gọi các hàm “hook” là điều cần thiết để nhiều plugin (chẳng hạn như những plugin dùng để phân tích mã nguồn) có thể hoạt động bình thường.

<footer class="site-footer">
    <p>©  . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Nâng cao chức năng của các chủ đề và khả năng tùy chỉnh

functions.phpĐó chính là “bộ não” của chủ đề bạn – công cụ được sử dụng để thêm các tính năng mới, đăng ký các thành phần như menu điều hướng, khu vực công cụ (widgets), và thiết lập các kiểu trình bày thông qua script, mà không cần phải chỉnh sửa các tệp cốt lõi (core files).

Các tính năng được hỗ trợ khi đăng ký chủ đề:

在functions.phpbạn có thể sử dụngadd_theme_support()Các hàm được sử dụng để khai báo những tính năng mà một chủ đề hỗ trợ. Ví dụ, việc kích hoạt tính năng hiển thị ảnh thu nhỏ (hình ảnh đại diện) cho bài viết và tùy chỉnh biểu tượng là những tính năng tiêu chuẩn trong các chủ đề hiện đại.

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

<?php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章特色图像
    add_theme_support('post-thumbnails');
    // 注册一个主菜单
    register_nav_menus(array(
        'primary' => __('主菜单', 'my-first-theme'),
    ));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>

Đưa vào bảng định dạng (style sheet) và script

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àowp_enqueue_scriptsNó được đặt trên những chiếc móc (hooks). Điều này giúp đảm bảo rằng các mối phụ thuộc giữa các thành phần được quản lý một cách hiệu quả và tránh tình trạng tải lại các tài nguyên không cần thiết.

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

Tóm lại

Từ khi tạo thư mục chủ đề và…style.cssBắt đầu, đến khi hoàn thành việc xây dựng.index.php…Phân tích thành các thành phần riêng lẻ…header.php和footer.phpCác tệp mẫu được sử dụng để tạo nội dung, sau đó quá trình tạo nội dung được thực hiện thông qua các công cụ hoặc quy trình cụ thể.functions.phpCác tệp tin này cung cấp các chức năng và nguồn lực cốt lõi cho chủ đề của bạn, và quá trình này tạo nên khung công cụ cơ bản cho việc phát triển chủ đề WordPress. Mỗi bước đều nhấn mạnh đến khái niệm về cấu trúc phân cấp của các mẫu (templates) trong WordPress cũng như các thực hành tốt nhất, chẳng hạn như cách sử dụng đúng các thẻ mẫu (template tags) và các hook (hooks). Khi bạn nắm vững những kiến thức cơ bản này, bạn sẽ có một nền tảng vững chắc để tùy chỉnh và mở rộng bất kỳ chức năng nào, nhằm đáp ứng nhu cầu của các dự án khác nhau.

FAQ 常见问题

Một theme WordPress cơ bản cần ít nhất bao nhiêu tệp tin?
Một chủ đề WordPress có thể sử dụng được cần ít nhất hai tệp tin:index.php和style.cssTrong đó,style.cssKhối chú thích ở đầu tệp tin phải được thêm vào và chứa đúng thông tin về chủ đề; đây là điều kiện bắt buộc để WordPress có thể nhận diện được chủ đề đó.

Đọc thêm Từ Không Đến Có: Hướng Dẫn Toàn Diện và Thực Hành Phát Triển Giao Diện WordPress。

Làm thế nào để thêm một khu vực công cụ nhỏ vào chủ đề (theme) của tôi?

Bạn cần phải thông qua…functions.phpĐây là hướng dẫn để tạo tệp cần thiết để đăng ký các tiện ích (widget) vào khu vực bên cạnh (sidebar). Hãy làm theo các bước sau:register_sidebar()Bạn cần định nghĩa một hàm và chỉ định các tham số của nó, chẳng hạn như tên, ID và mô tả. Sau đó, bạn có thể sử dụng hàm đó trong các tệp mẫu tương ứng (ví dụ:…)sidebar.php）sử dụngdynamic_sidebar()Hãy sử dụng một hàm để gọi nó.

Tại sao menu điều hướng tùy chỉnh của tôi không hiển thị?

Điều này thường xảy ra vì chưa thực hiện bước cần thiết (chẳng hạn là chưa thiết lập hoặc không sử dụng đúng công cụ cần thiết).functions.phpHãy đăng ký địa điểm của nhà hàng một cách chính xác. Vui lòng đảm bảo rằng bạn đã sử dụng thông tin đúng.register_nav_menus()Hàm này được sử dụng để đăng ký vị trí của một mục trong thực đơn (ví dụ: ‘primary’), và…header.phptrongwp_nav_menu()Khi…‘theme_location’Giá trị của các tham số được thiết lập hoàn toàn trùng khớp với giá trị khi đăng ký. Cuối cùng, bạn cần phải chuyển một menu đến vị trí mong muốn trong phần cài đặt “Giao diện > Menu” ở phía sau trang quản trị WordPress.

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

我应该在什么时候使用get_template_part()函数？

get_template_part()Các hàm được sử dụng để mô-đun hóa các đoạn mã có thể được tái sử dụng, đặc biệt phù hợp cho việc xuất hiển nội dung có định dạng khác nhau trong các vòng lặp của bài viết. Ví dụ, bạn có thể tạo một hàm để xử lý việc này.content.phpCác tệp tin được sử dụng để định nghĩa cấu trúc HTML chung cho mỗi bài viết, sau đó…index.phptrong vòng lặpget_template_part(‘content’)Hãy gọi nó. Điều này giúp tăng tính tái sử dụng và khả năng bảo trì của mã nguồn, đồng thời cũng tạo điều kiện để tạo ra các mẫu (templates) chuyên nghiệp hơn.content-page.phpĐiều này trở nên khả thi.