Hướng dẫn tối thượng về phát triển chủ đề WordPress: Thực chiến từ nhập môn đến tùy chỉnh

Việc phát triển các chủ đề (theme) cho WordPress là yếu tố then chốt trong quá trình xây dựng các trang web cá nhân hóa. Khác với việc sử dụng các chủ đề có sẵn, việc tự phát triển chủ đề cho phép bạn kiểm soát hoàn toàn về giao diện, chức năng và hiệu suất của trang web. Hướng dẫn này sẽ hướng dẫn bạn từ những khái niệm cơ bản, dần dần đi sâu vào các khía cạnh tùy chỉnh nâng cao, đồng thời đề cập đến các thực tiễn tốt nhất và các công cụ cốt lõi trong quá trình phát triển chủ đề

Những kiến thức cơ bản về chủ đề (theme) và cấu trúc của WordPress

Một chủ đề WordPress về cơ bản là một tập hợp các tệp nằm trong thư mục `wp-content/themes/`./wp-content/themes/Các thư mục trong danh mục đó chứa một loạt tệp tin cụ thể, và những tệp tin này cùng nhau quyết định giao diện trang web (phần hiển thị trước mặt người dùng).

Các tệp cấu thành cốt lõi của giao diện

Mỗi chủ đề đều phải bao gồm hai tệp tin cơ bản:style.css和index.phpTrong đó,style.cssKhông chỉ chứa các thông tin về phong cách thiết kế (styles), các ghi chú trong phần đầu tệp (file header) còn được sử dụng để thông báo các thông tin meta về chủ đề (theme) cho WordPress.

Đọc thêm Cách chọn và tùy chỉnh chủ đề WordPress đầu tiên của bạn。

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

index.phpĐây là tệp mẫu chính của chủ đề (theme template file), đóng vai trò là mẫu dự phòng mặc định cho tất cả các yêu cầu trang (page requests). Đây là ví dụ về một tệp mẫu đơn giản nhất.index.phpCó thể chỉ chứa các hàm cơ bản dùng để gọi phần đầu (header), vòng lặp chính (main loop), và phần chân (footer) của WordPress.

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

<h2><?php the_title(); ?></h2>

Hiểu về cấu trúc phân cấp của các mẫu (templates)

WordPress sử dụng một cấu trúc phân cấp các mẫu (templates) thông minh để chọn tệp mẫu phù hợp nhất để hiển thị nội dung. Ví dụ, khi truy cập vào một bài viết cụ thể, WordPress sẽ tìm kiếm theo thứ tự ưu tiên như sau:single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.phpViệc nắm vững bộ quy tắc này là chìa khóa để phát triển phần mềm một cách hiệu quả.

Công nghệ phát triển cốt lõi và hàm (Core Development Technologies and Functions)

Việc phát triển các chủ đề WordPress hiện đại rất khuyến nghị sử dụng kiến trúc “chủ đề dựa trên các khối” (block-based themes), tuy nhiên, phương pháp phát triển truyền thống dựa trên các mẫu (templates) và hàm (functions) bằng PHP vẫn là kiến thức cơ bản mà mọi người cần nắm vững.

Sử dụng vòng lặp trong WordPress để hiển thị nội dung

The LoopĐây là cấu trúc mã PHP trong WordPress dùng để truy xuất và hiển thị các bài viết từ cơ sở dữ liệu. Nó là trung tâm của toàn bộ quá trình xuất thông tin nội dung.

<?php
if ( have_posts() ) {
    while ( have_posts() ) {
        the_post();
        // 模板标签在这里使用，如 the_title(), the_content()
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
        &lt;?php
    }
} else {
    echo &#039;<p>暂无文章。</p>';
}
?&gt;

Tích hợp chức năng menu và sidebar

Thông quaregister_nav_menus()Bạn có thể đăng ký nhiều vị trí menu điều hướng khác nhau trong chủ đề, chẳng hạn như “Menu chính” và “Menu chân trang”.

Đọc thêm Hướng dẫn toàn diện về quy trình xây dựng trang web: Từ con số không xây dựng một trang web chuyên nghiệp, hiệu suất cao。

function my_theme_setup() {
    register_nav_menus( array(
        'primary' => __( '主要菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Trong mẫu, hãy sử dụng…wp_nav_menu()Hàm được sử dụng để gọi các menu đã được đăng ký. Đối với thanh bên cạnh của các tiện ích (widgets), bạn cần phải sử dụng hàm này trước tiên.register_sidebar()Hãy đăng ký trước, sau đó sử dụng nó trong mẫu (template).dynamic_sidebar()Hiển thị nội dung.

Chức năng chủ đề và tùy chỉnh nâng cao

Sau khi hoàn thành việc xây dựng cấu trúc nền tảng, việc thêm các tính năng và thực hiện tùy chỉnh sâu rộng thông qua các tệp chứa hàm chủ đề (theme functions) cùng các hook của WordPress chính là yếu tố then chốt để phân biệt một chủ đề bình thường với một chủ đề xuất sắc.

Thêm hỗ trợ cho các chủ đề thông qua tệp chứa hàm (function files)

functions.phpTệp tin chính là “trung tâm điều khiển” cho chủ đề của bạn. Tại đây, bạn có thể…add_theme_support()Các hàm được sử dụng để khai báo các tính năng khác nhau mà chủ đề hỗ trợ.

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

function my_theme_features() {
    // 支持文章和评论的Feed链接
    add_theme_support( 'automatic-feed-links' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_features' );

Sử dụng Action và Filter Hooks

Các “Hook” (Móc) là trụ cột trong cấu trúc plugin của WordPress và cũng được sử dụng rộng rãi trong quá trình phát triển các giao diện (theme).add_action()Cho phép bạn thực thi mã (hook hành động) vào những thời điểm cụ thể.add_filter()Bạn được phép thay đổi dữ liệu (hoặc các thành phần liên quan đến bộ lọc – filter hooks).

Ví dụ, bạn có thể sử dụng…wp_enqueue_scriptsCác “hook hành động” (action hooks) được sử dụng để tải các tệp biểu mẫu (style sheets) và tập lệnh (script files) một cách an toàn, nhằm tránh việc chúng được đưa trực tiếp vào phần đầu của mẫu (template header).

function my_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Một ví dụ phổ biến khác là sử dụngexcerpt_lengthCác bộ lọc được sử dụng để thay đổi số lượng ký tự mặc định trong phần tóm tắt bài viết.

Đọc thêm Hướng dẫn toàn diện xây dựng website: Quy trình hoàn chỉnh và công nghệ cốt lõi để xây dựng website chuyên nghiệp từ con số 0。

function my_custom_excerpt_length( $length ) {
    return 30; // 将摘要字数改为30个词
}
add_filter( 'excerpt_length', 'my_custom_excerpt_length' );

Thực hành phát triển hiện đại và tối ưu hóa hiệu suất

Kèm theo sự phổ biến của trình soạn thảo WordPress (Gutenberg) và sự phát triển của công nghệ front-end, cách thức phát triển các giao diện (theme) cũng không ngừng được cập nhật.

Áp dụng chủ đề “block” và tính năng biên tập toàn trang (full-site editing).

Từ phiên bản WordPress 5.9 trở đi, Block Theme (Chủ đề dựa trên các khối nội dung) đã trở thành hướng phát triển chính cho tương lai. Các Block Theme chủ yếu sử dụng các tệp mẫu HTML để tạo cấu trúc trang web.theme.jsonCác tệp cấu hình được sử dụng để định nghĩa phong cách và thiết lập toàn cục của trang web, giúp giảm đáng kể số lượng các tệp mẫu PHP. Hãy tạo một tệp cấu hình như vậy.theme.jsonVới các tệp tin này, bạn có thể kiểm soát tập trung các thiết lập như bảng màu (palette), bố cục trang (layout), khoảng cách giữa các thành phần trên trang (spacing), v.v.

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

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                { "slug": "primary", "color": "#007cba", "name": "主色" },
                { "slug": "secondary", "color": "#1e1e1e", "name": "次色" }
            ]
        }
    }
}

Đảm bảo tính thích ứng (responsive) và hiệu suất (performance) của chủ đề (theme).

Tất cả các chủ đề hiện đại đều phải có khả năng thích ứng với nhiều loại thiết bị khác nhau (tính tương tác với nhiều kích thước màn hình khác nhau). Điều này đòi hỏi rằng mã CSS của bạn phải sử dụng các câu lệnh truy vấn phương tiện truyền thông (Media Queries) để điều chỉnh giao diện cho từng kích thước màn hình cụ thể
– Tối ưu hóa hình ảnh: Sử dụng công cụ để cải thiện chất lượng hình ảnh (như giảm kích thước, nâng cao độ phân giải, loại bỏ nhiễu, v.v.).the_post_thumbnail()Khi bạn sử dụng các hàm liên quan đến việc tạo hình ảnh, WordPress sẽ tự động tạo ra những hình ảnh có khả năng thích ứng với nhiều kích thước màn hình khác nhau (hình ảnh responsive).srcsetthuộc tính.
– Quản lý script và kiểu dáng (styles): Như đã đề cập trước đó, hãy sử dụng công cụ phù hợp để quản lý các tập tin script và tài liệu liên quan đến thiết kế giao diện người dùng.wp_enqueue_script()和wp_enqueue_style()Thực hiện quản lý, và thêm các đoạn mã (script) vào những vị trí thích hợp.async或deferthuộc tính.
– Giảm số lượng yêu cầu HTTP: Hợp nhất các tệp CSS/JS lại với nhau và tận dụng chức năng lưu trữ đệm (cache) của trình duyệt.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress bắt đầu bằng việc hiểu rõ cấu trúc cơ bản của các tệp tin, sau đó dần dần nắm vững cách thức hoạt động của các mẫu (templates), hàm cốt lõi (core functions) và vòng lặp (loops), và cuối cùng là cách áp dụng những kiến thức đó đểfunctions.phpQuá trình mở rộng chức năng bằng cách sử dụng các công cụ như “hook” (các thành phần có thể được gắn vào hệ thống để thực hiện các tác vụ cụ thể). Khi việc phát triển tiếp diễn, bạn cần chú ý đến các phương pháp tiếp cận hiện đại, chẳng hạn như kiến trúc chủ đề dựatheme.jsonHãy cấu hình thủ công và luôn đặt thiết kế thích ứng với các thiết bị khác nhau (responsive design) cùng hiệu năng của trang web lên vị trí hàng đầu. Bằng cách tuân theo những bước và thực hành tốt nhất này, bạn sẽ có thể xây dựng được một chủ đề WordPress tùy chỉnh với nhiều tính năng mạnh mẽ, mã nguồn gọn gàng và trải nghiệm người dùng xuất sắc.

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức tiên quyết nào?

Bạn cần nắm vững kiến thức cơ bản về HTML và CSS để xây dựng cấu trúc và thiết kế giao diện trang web. Ngoài ra, bạn cũng cần có hiểu biết cơ bản về PHP, vì phần lớn các chức năng cốt lõi của WordPress cũng như hệ thống template được thực hiện bằng PHP. Việc am hiểu JavaScript (đặc biệt là những thứ liên quan đến việc tương tác với các công cụ chỉnh sửa nội dung trên web) ngày càng trở nên quan trọng trong quá trình phát triển các giao diện web hiện đại.

Khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic) là gì? Khi nào nên sử dụng chủ đề con?

Chủ đề cha (parent theme) là một chủ đề WordPress có chức năng đầy đủ và có thể được cài đặt độc lập. Chủ đề con (child theme) kế thừa tất cả các chức năng và kiểu dáng của chủ đề cha, đồng thời cho phép bạn thay đổi hoặc tùy chỉnh chúng mà không cần phải sửa đổi các tệp cốt lõi của chủ đề cha. Khi bạn muốn tùy chỉnh một chủ đề phổ biến hiện có (chẳng hạn như Twenty Twenty-Four) theo ý muốn của mình, nhưng vẫn muốn giữ nguyên khả năng nhận các bản cập nhật từ chủ đề cha một cách an toàn, bạn nên tạo và sử dụng chủ đề con.

Làm thế nào để tạo một mẫu trang tùy chỉnh trong một chủ đề (theme)?

Chỉ cần tạo một tệp PHP bắt đầu bằng phần ghi chú tiêu đề (header comment) được chỉ định. Ví dụ, hãy tạo một tệp có tên…template-custom.phpĐối với tệp tin đó, hãy thêm một ghi chú ở phần đầu của tệp tin./* Template Name: 全宽页面 */Sau khi lưu thay đổi, khi bạn vào phần quản lý trang trong giao diện WordPress, bạn sẽ thấy mục “Mẫu” (Template) trong phần “Thuộc tính trang” (Page Attributes), và có thể chọn mẫu tùy chỉnh “Trang toàn màn hình” (Full-width Page) từ danh sách các mẫu có sẵn.

Tại sao thay đổi về chủ đề của tôi không được hiển thị sau khi nó được cập nhật?

Điều này thường xảy ra do cơ chế lưu trữ đệm (cache) của trình duyệt hoặc WordPress. Trước tiên, hãy thử thực hiện thao tác “tái tải ngay lập tức” (force refresh) trong trình duyệt (thường là Ctrl+F5 hoặc Cmd+Shift+R). Nếu vấn đề vẫn còn tồn tại, hãy kiểm tra xem bạn có đang sử dụng các tiện ích lưu trữ đệm hoặc dịch vụ CDN (Content Delivery Network) hay không, và thử xóa bộ đệm của chúng. Ngoài ra, hãy đảm bảo rằng bạn đang chỉnh sửa đúng tệp thể hiện chủ đề (theme file) cần thay đổi, và các thay đổi đã được lưu lại.