Hướng dẫn tối thượng phát triển chủ đề WordPress: Từ nhập môn đến thành thạo với hướng dẫn đầy đủ và thực hành tốt nhất

Cơ bản phát triển giao diện WordPress và thiết lập môi trường

Trước khi bắt đầu phát triển các chủ đề (themes) cho WordPress, bạn cần thiết lập một môi trường phát triển cục bộ (local development environment) chuyên nghiệp. Điều này không chỉ giúp nâng cao hiệu quả phát triển mà còn giúp tránh gây ảnh hưởng đến trang web trực tuyến. Chúng tôi khuyến nghị sử dụng các môi trường tích hợp như XAMPP, MAMP hoặc Local by Flywheel, vì chúng cung cấp giải pháp tổng thể cho PHP, MySQL và các máy chủ web như Apache/Nginx.

Sau khi đã thiết lập môi trường xong, bạn cần thực hiện các bước tiếp theo trong thư mục cài đặt của WordPress.wp-content/themesHãy tạo một thư mục chủ đề mới bên trong thư mục đó. Một chủ đề cơ bản chỉ cần hai tệp tin: tệp tin biểu định kiểu (style sheet) và các tệp tin khác liên quan đến thiết kế.style.cssVà các tệp mẫu cốt lõi (core template files)index.php。

style.cssKhông chỉ đơn thuần là một tệp tin chứa định dạng thiết kế (style file), nó còn đóng vai trò như “chứng minh thư” của chủ đề (theme) bạn đang sử dụng. Bạn cần thêm các ghi chú chứa thông tin về chủ đề vào phần đầu của tệp tin này; nhờ đó, giao diện quản trị WordPress (WordPress backend) mới có thể nhận diện được chủ đề của bạn

Đọc thêm Hướng dẫn toàn diện về phát triển chủ đề WordPress: Từ cơ bản đến thực hành。

/*
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
*/

index.phpĐây là tệp tin mặc định dùng để bắt đầu triển khai một chủ đề (theme) trong WordPress; WordPress sẽ ưu tiên sử dụng tệp này để hiển thị nội dung trang web. Ngay cả khi nội dung ban đầu còn rất đơn giản, tệp tin này vẫn rất cần thiết. Sau khi hoàn tất việc tạo hai tệp tin này, bạn có thể tìm thấy và kích hoạt chủ đề của mình trong mục “Giao diện” (Appearance) -> “Chủ đề” (Themes) trên giao diện quản trị 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

Hiểu được cấu trúc cơ bản của các tệp liên quan đến chủ đề (core file structure of files related to the topic)

Một chủ đề WordPress hoàn chỉnh về mặt chức năng tuân theo một cấu trúc tệp tin tiêu chuẩn, điều này giúp tổ chức và bảo trì mã nguồn một cách dễ dàng. Ngoài ra…style.css和index.phpDưới đây là một số tệp tin quan trọng khác:

functions.phpĐây chính là “động cơ” của một giao diện (theme) – nó không phải là một đoạn mã (script) chạy trực tiếp trong trình duyệt, mà là một tệp tin được hệ thống WordPress tự động tải lên. Mọi cải tiến về chức năng của giao diện, như menu đăng ký, thanh bên cạnh, các tính năng hỗ trợ việc thêm mới giao diện, cũng như việc tải các đoạn mã và phong cách (styles) đều được thực hiện thông qua tệp tin này.

header.php和footer.phpMỗi phần chịu trách nhiệm riêng biệt cho phần đầu (header) và phần cuối (footer) của trang web.get_header()和get_footer()Các hàm có thể được sử dụng trong các tệp mẫu khác nhau, giúp tái sử dụng mã nguồn một cách hiệu quả.

page.phpDùng để hiển thị các trang tĩnh,single.phpDùng để hiển thị một bài viết duy nhất.archive.phpDùng để hiển thị các trang phân loại, thẻ, và các trang lưu trữ khác. Cấu trúc các mẫu (templates) trong WordPress quy định rằng đối với từng loại yêu cầu trang khác nhau, hệ thống sẽ tự động chọn tệp mẫu phù hợp nhất để hiển thị nội dung.

Đọc thêm Hướng dẫn đầy đủ để xây dựng một WordPress Theme hiệu suất cao từ con số không。

Hệ thống mẫu (Template System) và Cấu trúc phân cấp của các mẫu (Template Hierarchy)

Hệ thống mẫu của WordPress dựa trên một bộ quy tắc phân cấp rõ ràng, được gọi là “Template Hierarchy” (Hệ thống Phân cấp Mẫu). Những quy tắc này quy định rằng khi truy cập một trang cụ thể, WordPress sẽ tự động tìm kiếm và tải file mẫu tương ứng. Việc hiểu rõ cơ chế này là yếu tố then chốt để phát triển các giao diện (theme) một cách hiệu quả.

Ví dụ, khi người dùng truy cập một bài viết trên blog, WordPress sẽ tìm kiếm các tệp mẫu theo thứ tự sau:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpNó sẽ sử dụng tệp tin đầu tiên có sẵn mà nó tìm thấy. Điều này có nghĩa là bạn có thể tạo ra các mẫu được tùy chỉnh chặt chẽ cho các loại bài viết cụ thể, hoặc thậm chí cho một bài viết riêng lẻ.

Tạo và sử dụng mẫu trang tùy chỉnh

Ngoài các mẫu được thiết lập sẵn bởi hệ thống, bạn còn có thể tạo ra các mẫu trang tùy chỉnh và áp dụng chúng cho bất kỳ trang nào bạn chọn. Điều này mang lại sự linh hoạt rất lớn trong việc thiết kế các bố cục trang độc đáo.

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

Để tạo một mẫu trang tùy chỉnh, bạn cần thêm các khối chú thích PHP cụ thể ở phía trên của tệp mẫu. Ví dụ, để tạo một mẫu có tên “Trang toàn màn hình”, bạn có thể tạo một tệp mới như sau:template-fullwidth.phpVà hãy viết ở phần đầu:

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

Sau khi hoàn thành việc viết mã, khi bạn vào phần quản trị WordPress để chỉnh sửa trang, bạn sẽ thấy tùy chọn “Trang rộng toàn màn hình” (Full-width page) trong danh sách thả xuống “Mẫu” (Template) của “Thuộc tính trang” (Page Properties). Hãy chọn tùy chọn đó và lưu thay đổi. Lúc này, trang đó sẽ được hiển thị bằng mẫu tự định của bạn.

Sử dụng các thẻ điều kiện (conditional tags) để hiển thị nội dung động (dynamic content).

Các thẻ điều kiện (Conditional Tags) là một tập hợp các hàm logic (Boolean functions) được cung cấp bởi WordPress, dùng để xác định xem trang hiện tại có đáp ứng một điều kiện nào đó hay không. Chúng được sử dụng rộng rãi trong các tệp mẫu (template files) để kiểm soát việc hiển thị nội dung một cách dinh hình.

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

Ví dụ,is_front_page()Xác định xem liệu đó có phải là trang chủ của một trang web hay không.is_single()Xác định xem trang hiện tại có phải là trang của một bài viết đơn lẻ hay không.is_page()Dự đoán xem liệu trang web có phải là trang tĩnh (static page) hay không.is_archive()判断是否为任何归档页。通过它们，你可以用简单的if语句为不同页面定制不同的逻辑和输出。

<?php if ( is_front_page() ) : ?>
    <h1>Chào mừng bạn đến với trang chủ của chúng tôi!</h1>
<?php elseif ( is_single() ) : ?>
    <h1><?php the_title(); ?></h1>
    <div class="post-meta">发布时间：</div>
<?php endif; ?>

Chức năng chủ đề (Theme Features) và Hàm cốt lõi (Core Functions)

functions.phpTệp tin chính là trung tâm quản lý các tính năng liên quan đến chủ đề (theme) trong WordPress. Tại đây, bạn có thể mở rộng các chức năng của chủ đề một cách an toàn mà không cần phải thay đổi các tệp tin cốt lõi (core files) của 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

Đăng ký menu điều hướng và thanh bên cạnh

WordPress cho phép các giao diện (theme) chỉ định vị trí của các mục menu (navigation items) mà chúng hỗ trợ, và điều này được thực hiện thông qua…register_nav_menus()Thực hiện hàm. Thông thường chúng ta ở trongfunctions.phpTrong đó, sử dụng một thứ được gắn (mount) vào…after_setup_themeHàm được đặt trên “hook” sẽ được thực thi để hoàn thành công việc cần thực hiện.

function mytheme_setup() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Sau khi đăng ký, người dùng có thể phân bổ các menu cho hai vị trí này trong mục “Giao diện” -> “Menu”. Trong mẫu (template), hãy sử dụng các tham số và cấu trúc đã được định nghĩa sẵn để thực hiện việc này.wp_nav_menu( array( 'theme_location' => 'primary' ) )ở vị trí tương ứng để hiển thị menu.

Việc đăng ký sidebar (hay còn gọi là “khu vực widget”) tương tự, sử dụngregister_sidebar()Sau khi sử dụng các hàm liên quan, người dùng có thể thêm các tiện ích (gadget) khác nhau vào những khu vực đó bằng cách truy cập vào mục “Nhìn” (Appearance) -> “Tiện ích nhỏ” (Widgets).

Thêm hỗ trợ cho tính năng quản lý chủ đề (theme management).

Nhiều tính năng của các chủ đề WordPress hiện đại yêu cầu phải được khai báo rõ ràng để hỗ trợ chúng. Ví dụ, nếu bạn muốn các bài viết và trang có hình ảnh đại diện (hình thu nhỏ), bạn cần thêm khả năng hỗ trợ cho tính năng đó. Điều này cũng đúng với nhiều tính năng khác trong WordPress.functions.phpViệc này được thực hiện trong hàm khởi tạo (initialization function).

function mytheme_setup() {
    // ... 其他设置代码
    add_theme_support( 'post-thumbnails' ); // 支持特色图像
    add_theme_support( 'title-tag' ); // 让WordPress管理标题标签
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记
}

Cách đưa các tập lệnh (script) và phong cách trình bày (style) vào trang web một cách an toàn:

Việc thêm các tệp CSS và JavaScript vào đúng hàng đợi (queue) là một thực hành tốt nhất trong quá trình phát triển WordPress, giúp tránh xung đột giữa các tài nguyên và tình trạng tải chúng lặp đi lặp lại. Hãy sử dụng cách này để đảm bảo hiệu suất tốt nhất cho trang web của bạn.wp_enqueue_style()和wp_enqueue_script()Các hàm (functions), và đảm bảo rằng chúng được gắn (mounted) vào đúng vị trí cần thiết.wp_enqueue_scriptshook.

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义的JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Kỹ thuật phát triển chủ đề nâng cao

Sau khi nắm vững những kiến thức cơ bản, một số kỹ thuật nâng cao có thể giúp chủ đề (theme) của bạn trở nên mạnh mẽ và chuyên nghiệp hơn.

Tạo các chủ đề con để tùy chỉnh nội dung.

Việc thay đổi trực tiếp chủ đề gốc là hành động nguy hiểm và không bền vững, vì mỗi lần cập nhật chủ đề sẽ xóa bỏ tất cả những thay đổi mà bạn đã thực hiện. Cách đúng đắn là tạo ra các chủ đề con (subtopics). Các chủ đề con chỉ chứa những tệp tin được tùy chỉnh riêng của bạn.style.css、functions.phpNó sử dụng các tệp mẫu được áp dụng (các tệp mẫu được thay thế), đồng thời kế thừa tất cả các tính năng của chủ đề cha (parent theme).

của chủ đề constyle.cssCác ghi chú ở phần đầu (header comments) phải bao gồm…Template:Dòng này được sử dụng để chỉ định tên thư mục của chủ đề cha (parent topic).

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

của chủ đề confunctions.phpNó sẽ được tải trước chủ đề cha (parent theme), và bạn có thể thêm hoặc sửa đổi các tính năng tại đây.

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

“The Loop” là cấu trúc mã PHP trong các mẫu WordPress dùng để truy xuất và hiển thị nhiều nội dung từ cơ sở dữ liệu. Đây là thành phần cốt lõi của hầu hết các trang mẫu trong WordPress.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div><?php the_excerpt(); ?></div>
    </article>
<?php endwhile; endif; ?>

Trong vòng lặp, bạn có thể sử dụng một loạt các thẻ mẫu (template tags), chẳng hạn như…the_title()、the_content()、the_excerpt()、the_permalink()Đợi đã… Hãy hiển thị thông tin về bài viết hiện tại.

Thực hiện tính năng tùy chỉnh chủ đề

WordPress Customizer cho phép người dùng xem trước và thay đổi một số thiết lập của giao diện (như màu sắc, logo) một cách thời gian thực. Bạn có thể sử dụng nó để…functions.phpHãy thêm các tùy chọn tùy chỉnh cho chủ đề của bạn.

Điều này liên quan đến việc sử dụng…WP_Customize_ManagerBạn có thể sử dụng các lớp (classes) để thêm các thiết lập (settings), điều khiển (controls), và các khối nội dung (blocks) vào giao diện. Mặc dù đoạn mã tương đối phức tạp, nhưng nó mang lại trải nghiệm tùy chỉnh mượt mà cho người dùng. Thông thường, bạn sẽ thêm một bảng điều khiển (control panel), sau đó thêm vài phần (sections) bên dưới bảng điều khiển đó, và cuối cùng thêm các thiết lập cụ thể cùng các điều khiển tương ứ

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'header_color', array(
        'default' => '#ffffff',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 添加一个控件来控制这个设置
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label' => __( '头部背景色', 'my-first-theme' ),
        'section' => 'colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sau đó, trong template (mẫu), hãy sử dụng nó.get_theme_mod( 'header_color' )Lấy các giá trị mà người dùng đã thiết lập và áp dụng chúng lên trang web.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress bắt đầu từ việc hiểu rõ cấu trúc cơ bản của các tệp tin, sau đó dần dần tìm hiểu sâu hơn về hệ thống template (mẫu thiết kế), các hàm chức năng, và cuối cùng là nắm vững các kỹ thuật tùy chỉnh nâng cao. Một nhà phát triển thành công không chỉ cần am hiểu PHP, HTML, CSS và JavaScript mà còn cần có sự hiểu biết sâu sắc về các khái niệm cốt lõi của WordPress, như cấu trúc các template, cơ chế lặp (loop), các hook (hàm được gọi tự động trong quá trình xử lý nội dung) và các hàm (functions). Việc tuân theo các thực hành tốt nhất (best practices), chẳng hạn như sử dụng các sub-theme (chủ đề con) và các công cụ hỗ trợ phát triển chủ đề, sẽ giúp quá trình phát triểnfunctions.phpViệc thêm các tính năng mới và đảm bảo tính bảo mật trong thiết kế giao diện (script styles) sẽ giúp bạn xây dựng những chủ đề (themes) cho WordPress một cách ổn định, hiệu quả và dễ bảo trì. Qua quá trình thực hành liên tục, bạn sẽ có thể tạo ra những chủ đề mạnh mẽ, chuyên nghiệp, đáp ứng được mọi nhu cầu của người dùng.

FAQ 常见问题

Phát triển theme WordPress có bắt buộc phải thành thạo PHP không?

Đúng vậy, PHP là ngôn ngữ cốt lõi trong việc phát triển các giao diện (theme) cho WordPress. Bạn cần nắm vững ngữ pháp cơ bản của PHP và hiểu cách nhúng mã PHP vào HTML để hiển thị nội dung một cách dinh hồi. Mặc dù các công nghệ front-end (HTML, CSS, JavaScript) cũng rất quan trọng, nhưng mọi thao tác tương tác với dữ liệu, thực hiện các phép xử lý logic và mở rộng chức năng của WordPress đều phải dựa vào PHP.

Có thể đổi tên tệp style.css của chủ đề thành một tên khác.

Không được.style.cssTên tệp này là yêu cầu bắt buộc để WordPress nhận diện được chủ đề và dữ liệu meta của nó (như tên chủ đề, phiên bản, tác giả). Bạn phải sử dụng đúng tên tệp này và đặt nó trong thư mục gốc (root directory) của chủ đề. Tuy nhiên, bạn có thể…functions.phpHãy sử dụng các tệp CSS bổ sung khác để tổ chức mã stile của bạn một cách có tổ chức hơn.

Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?

Việc làm cho chủ đề của bạn hỗ trợ quốc tế hóa (i18n) là rất quan trọng. Khi phát triển, bạn cần bao bọc tất cả các chuỗi văn bản dành cho người dùng bằng các hàm dịch chuyên dụng.__( ‘文本’, ‘text-domain’ )或_e( ‘文本’, ‘text-domain’ )Đồng thời,style.cssHãy đảm bảo rằng các ghi chú ở phần đầu (header comments) được thiết lập một cách chính xác.Text Domainvà trongfunctions.phpsử dụngload_theme_textdomain()Một hàm được sử dụng để tải các tệp dịch. Sau khi quá trình tải hoàn tất, những người dịch có thể sử dụng các công cụ như Poedit để tiếp tục thực hiện công việc dịch..po和.motệp dịch.

Tại sao mẫu tùy chỉnh của tôi không xuất hiện trong danh sách thả xuống của thuộc tính trang (page properties)?

Vui lòng đảm bảo rằng bạn đã thêm đúng khối chú thích PHP theo định dạng chuẩn ở phía trên cùng của tệp tin mẫu tùy chỉnh. Khối chú thích này phải bao gồm dòng “Template Name:”. Tệp tin phải nằm trong thư mục gốc hoặc thư mục con của chủ đề (theme) của bạn. Đồng thời, hãy kiểm tra xem tệp tin có chứa lỗi ngữ pháp hay không; những lỗi này có thể khiến WordPress không thể đọc được thông tin tiêu đề của tệp tin một cách chính xác. Hãy chắc chắn rằng bạn đang chỉnh sửa một “trang” (page) chứ không phải một “bài viết” (article), vì các mẫu tùy chỉnh chỉ có hiệu lực đối với các trang.

Được chứ. Bạn hoàn toàn có thể viết trực tiếp các truy vấn SQL trong chủ đề để lấy dữ liệu.

Đây là một cách thức không được khuyến nghị chút nào. Việc viết trực tiếp các truy vấn SQL sẽ vượt qua các lớp bảo mật dữ liệu cốt lõi của WordPress (như quá trình làm sạch dữ liệu, lưu trữ dữ liệu trong bộ đệm, kiểm tra quyền truy cập), dẫn đến nguy cơ bị xâm nhập (chẳng hạn qua kỹ thuật SQL injection), đồng thời có thể gây ra sự không tương thích với cấu trúc cơ sở dữ liệu trong các phiên bản WordPress sau này. Bạn nên luôn sử dụng các API và hàm mà WordPress cung cấp để truy xuất dữ liệu.WP_QueryLớp,get_posts()、get_pages()Và vân vân… Chúng an toàn hơn, hiệu quả hơn và dễ bảo trì hơn.