Hướng dẫn nhập môn phát triển theme WordPress: Xây dựng theme tùy chỉnh từ con số không

Những kiến thức cơ bản về theme WordPress và cách chuẩn bị môi trường phát triển

Trước khi bắt đầu xây dựng một chủ đề WordPress tùy chỉnh, bạn cần hiểu rõ cấu trúc cơ bản của nó. Một chủ đề WordPress cơ bản nhất cần phải bao gồm ít nhất hai tệp tin:index.php和style.cssTrong đó,style.cssTệp tin không chỉ định kiểu dáng của chủ đề, mà các ghi chú ở phần đầu tệp (header comments) còn chứa các metadata cốt lõi của chủ đề, như tên chủ đề, tác giả, mô tả và phiên bản. Đây cũng là cơ sở để WordPress xác định liệu một thư mục có phải là một chủ đề hợp lệ hay không.

Bạn cần chuẩn bị một môi trường phát triển cục bộ. Bạn có thể sử dụng các công cụ như XAMPP, MAMP hoặc Local by Flywheel để nhanh chóng thiết lập một môi trường máy chủ chứa PHP và MySQL, sau đó cài đặt WordPress. Tiếp theo, trong thư mục cài đặt WordPress…wp-content/themesTrong thư mục đó, hãy tạo một thư mục mới để làm danh mục chứa các tài liệu liên quan đến chủ đề của bạn. Ví dụ, bạn có thể tạo một thư mục có tên là…my-first-themeĐây là thư mục chứa tất cả các tài liệu liên quan đến dự án của bạn; đây cũng chính là không gian làm việc chính của bạn. Chúng tôi khuyên bạn nên sử dụng các trình soạn thảo mã chuyên nghiệp như VS Code hoặc PhpStorm. Những công cụ này cung cấp tính năng hiển thị định dạng mã (syntax highlighting) và gợi ý (code suggestions) rất tốt cho các ngôn ngữ lập trình PHP, HTML, CSS, và JavaScript, giúp bạn nâng cao hiệu quả phát triển ứng dụng một cách đáng kể.

Chi tiết về cấu trúc tệp tin cốt lõi của chủ đề

Một chủ đề (theme) có chức năng đầy đủ và cấu trúc rõ ràng bao gồm một loạt các tệp tin tiêu chuẩn; những tệp tin này phối hợp với nhau để định nghĩa giao diện và chức năng của trang web.

Đọ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。

Vai trò của các tệp biểu mẫu (style sheets) và tệp hàm (function files)

style.cssĐây là bảng định dạng (stylesheet) của chủ đề, và khối chú thích ở phần đầu tệp rất quan trọng. Nó phải chứa những thông tin cụ thể; nếu không, WordPress sẽ không thể nhận diện được chủ đề này. Dưới đây là một ví dụ về đầu tệp cơ bản:

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: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

functions.phpFile là “bộ não” của một theme (giao diện website), đóng vai trò là một tệp mẫu đặc biệt dùng để thêm các tính năng của theme, thiết lập menu, thanh bên cạnh (sidebar), và tương tác với các chức năng cốt lõi của WordPress. Tệp này không thể được truy cập trực tiếp qua URL, mà được WordPress tự động tải vào khi theme được khởi tạo. Bạn có thể sử dụng mã PHP cùng các công cụ đặc biệt của WordPress để tùy chỉnh nội dung của tệp này.add_action()和add_filter()Chờ các công cụ hỗ trợ (như “hook”) được phát triển để mở rộng chức năng của ứng dụng.

Tác dụng của tệp mẫu

Các tệp tin mẫu (template files) quy định cách hiển thị của các trang khác nhau trên trang web. WordPress tuân theo những quy tắc cụ thể về cấu trúc các tệp tin mẫu; khi người dùng truy cập một trang, hệ thống sẽ tìm kiếm tệp tin mẫu tương ứng dựa trên thứ tự ưu tiên. Ví dụ:
- front-page.php:Dùng để hiển thị trang được thiết lập làm trang chủ.
- home.php:Dùng để hiển thị trang chỉ mục các bài viết trên blog.
- single.php: Dùng để hiển thị một bài viết blog đơn lẻ.
- page.php:Dùng để hiển thị một trang web duy nhất.
- archive.php:Dùng để hiển thị các trang liên quan đến phân loại, thẻ, tác giả, v.v.
1. 404.phpHiển thị khi trang không được tìm thấy.
- header.phpChứa phần đầu (header) của trang web.) và khu vực điều hướng ở phía trên.
- footer.phpChứa phần chân trang (footer) của trang web.
- sidebar.phpĐịnh nghĩa nội dung của thanh bên (sidebar content).
- index.phpĐây là mẫu dự phòng cuối cùng; nếu không có các mẫu cụ thể hơn, WordPress sẽ sử dụng mẫu này.

Xây dựng các chức năng cốt lõi của chủ đề (Building the core functions of a theme)

Một giao diện có chủ đề hiện đại cần phải có một số tính năng cơ bản như menu điều hướng, khu vực công cụ nhỏ (widget) và hỗ trợ hiển thị hình ảnh đặc trưng của bài viết.

Kích hoạt chức năng menu điều hướng

在functions.phpTrong tệp tin, bạn cần sử dụng…register_nav_menus()Hàm được sử dụng để đăng ký vị trí của các mục trong thực đơn. Ví dụ, để đăng ký một menu “Đầu Trang” (Main Navigation):

Đọc thêm Thành thạo phát triển chủ đề WordPress: Hướng dẫn cốt lõi và các bước thực hành từ cơ bản đến nâng cao。

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 mục menu vào các vị trí mong muốn trong phần “Giao diện” -> “Menu” của giao diện quản trị WordPress. Để hiển thị các mục menu trong template, bạn cần thực hiện một số thao tác cụ thể…header.phpHãy gọi hàm ở vị trí thích hợp.wp_nav_menu()Hàm.

Thêm hỗ trợ cho các tiện ích nhỏ (widgets).

Thanh bên (khu vực công cụ nhỏ) là một thành phần linh hoạt trong các chủ đề WordPress. Bạn có thể sử dụng nó để...register_sidebar()Hàm này được sử dụng để đăng ký một hoặc nhiều khu vực chứa các tiện ích (widgets).

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

Sau khi đăng ký, người dùng có thể kéo các tiện ích (widgets) từ mục “Trang chủ” -> “Công cụ nhỏ” (Appearance -> Widgets) vào “Thanh bên trái chính” (Main Left Bar) trong giao diện quản trị nội bộ. Để hiển thị thanh bên trái này trong các mẫu (templates), bạn cần phải thiết lập nó một cách thích hợp trong hệsidebar.php或single.phpĐược sử dụng trong các tệp tin như vậy…dynamic_sidebar()Hàm.

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

Thiết kế phong cách chủ đề và việc triển khai tính tương tác (Theme design and interaction implementation)

Việc trình bày hình ảnh cho chủ đề (visual presentation of the theme) và tương tác với người dùng (user interaction) là những trọng tâm trong quá trình phát triển phần mềm front-end.

Đưa CSS và JavaScript vào trang web

Thực hành tốt nhất là sắp xếp thứ tự để đưa các tệp biểu định kiểu (style sheets) và tệp script vào trang web, thay vì mã hóa trực tiếp các liên kết đến chúng trong HTML. Điều này giúp đảm bảo rằng các tệp được tải đúng theo thứ tự phụ thuộc vào nhau và tránh tình trạng chúng bị tải lại nhiều lần.functions.phptrong đó, sử dụngwp_enqueue_style()和wp_enqueue_script()Hàm.

function mytheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义CSS文件
    wp_enqueue_style( 'mytheme-custom-style', get_template_directory_uri() . '/assets/css/custom.css' );
    // 引入jQuery（WordPress已内置）和一个自定义JS文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

get_stylesheet_uri()Function retrievalstyle.cssURL của bạn,get_template_directory_uri()lấy URL của thư mục chủ đề.

Đọc thêm Hướng dẫn toàn diện về việc phát triển các chủ đề (themes) cho WordPress từ con số không đến mức thành thục。

Thực hiện thiết kế thích ứng (responsive design)

Các trang web hiện đại phải hiển thị tốt trên mọi loại thiết bị khác nhau. Điều này chủ yếu được thực hiện thông qua CSS Media Queries. Hãy đảm bảo rằng bạn đã sử dụng chúng một cách hiệu quả trong thiết kế trang web của mình.Nội dung này chứa các thẻ meta về khung xem (viewport meta tags), điều này thường xảy ra trong trường hợp...header.phpHoàn thành ở trung tâm:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sau đó, trong tệp CSS của bạn, hãy viết các quy tắc định dạng tùy theo độ rộng màn hình khác nhau. Ví dụ, hãy thiết lập một bố cục khác cho các màn hình có độ rộng nhỏ hơn 768px:

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

@media screen and (max-width: 768px) {
    .site-header, .site-main, .site-footer {
        padding: 10px;
    }
    .main-navigation ul {
        flex-direction: column;
    }
}

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình có hệ thống, bắt đầu từ việc hiểu rõ cấu trúc các tệp cơ bản, tiếp theo là xây dựng các chức năng cốt lõi như menu và công cụ hỗ trợ (widgets), và cuối cùng là triển khai phong cách thiết kế (style) cũng như các tương tác người dùng (user interactions) ở phía trước (frontend). Yếu tố then chốt là phải tuân thủ các tiêu chuẩn lập trình và cấu trúc mẫu (template hierarchy) của WordPress, đồng thời tận dụng tối đafunctions.phpBạn có thể mở rộng chức năng của theme bằng cách sử dụng các hệ thống hook (các công cụ được tích hợp sẵn trong framework). Bằng cách thiết lập môi trường phát triển cục bộ và thực hiện các bước một cách có hệ thống, ngay cả những người mới bắt đầu cũng có thể từng bước xây dựng nên những theme tùy chỉnh với chức năng đầy đủ và giao diện chuyên nghiệp. Hãy nhớ rằng, việc sắp xếp mã

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức cơ bản về ngôn ngữ lập trình nào?

Để phát triển một chủ đề (theme) cho WordPress, bạn cần nắm vững các ngôn ngữ và công cụ sau: HTML, CSS, và PHP. HTML dùng để xây dựng cấu trúc trang web, CSS dùng để kiểm soát phong cách trình bày và bố cục, còn PHP là ngôn ngữ lõi của WordPress, được sử dụng để xử lý logic, truy cập dữ liệu, và tạo ra nội dung động. Ngoài ra, việc hiểu biết một số kiến thức cơ bản về JavaScript cũng rất hữu ích để tạo ra các hiệu ứng tương tác trên giao diện người dùng (frontend).

Làm thế nào để chủ đề (theme) của tôi tuân thủ các tiêu chuẩn chính thức của WordPress?

Để chủ đề của bạn tuân thủ các tiêu chuẩn chính thức của WordPress, đề xuất tuân theo Sổ tay Phát triển Chủ đề WordPress và Sổ tay Đánh giá Chủ đề. Các điểm chính bao gồm: sử dụng thực hành mã hóa an toàn, thoát tất cả dữ liệu động đầu ra, xác thực và làm sạch tất cả dữ liệu đầu vào; đưa các tệp CSS và JavaScript vào hàng đợi một cách chính xác; đảm bảo chủ đề đáp ứng, hiển thị tốt trên các thiết bị khác nhau; cung cấp hỗ trợ dịch thuật đầy đủ, sử dụng__()和_e()Các hàm như `wait` được sử dụng để bao bọc toàn bộ nội dung cần được dịch; đồng thời tránh việc lập trình cứng các chức năng cốt lõi ngay trong mã nguồn chính.

Sự khác biệt giữa tệp functions.php của chủ đề (theme) và plugin là gì?

functions.phpTệp tin là một phần của chủ đề (theme), và chức năng của nó được liên kết với chủ đề đang được kích hoạt. Nó chủ yếu được sử dụng để thêm hoặc thay đổi các tính năng có liên quan trực tiếp đến giao diện và chức năng của chủ đề, chẳng hạn như menu đăng ký, thanh bên cạnh, hoặc các tính năng hỗ trợ chủ đề. Khi bạn chuyển đổi chủ đề, những thay đổi được thực hiện trên tệp tinfunctions.phpĐoạn mã trong đó sẽ không còn hiệu lực nữa.

Các plugin là những mô-đun chức năng độc lập so với giao diện (theme) của trang web, được thiết kế để bổ sung những tính năng cụ thể như biểu mẫu liên hệ, tối ưu hóa SEO, lưu trữ dữ liệu (cache), v.v. Chức năng của plugin không phụ thuộc vào giao diện nào cụ thể; vì vậy, ngay cả khi bạn thay đổi giao diện, các tính năng của plugin vẫn sẽ hoạt động bình thường. Một nguyên tắc đơn giản để phân biệt giữa chúng là: nếu một tính năng là một phần của giao diện (liên quan đến cách trang web được hiển thị), hãy đưa nó vào giao diện đó; còn nếu đó là một tính năng chung, có thể được sử dụng với nhiều giao diện khác nhau, hãy xem xét

Làm thế nào để gỡ lỗi các lỗi PHP xuất hiện trong quá trình phát triển?

Trong giai đoạn phát triển, bạn nên bật chế độ gỡ lỗi (debug mode) của WordPress để dễ dàng phát hiện lỗi. Hãy mở thư mục chứa theme (temple) của bạn và thực hiện các thao tác cần thiết.wp-config.phpTìm tệp tin liên quan, sau đó tìm các thiết lập cần thay đổi và chỉnh sửa chúng theo những hướng dẫn được cung cấp.

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误日志保存到 /wp-content/debug.log
define( 'WP_DEBUG_DISPLAY', false ); // 不要在页面上显示错误信息（避免用户看到）

Thiết lậpWP_DEBUG_LOGvìtrueSau đó, thông báo lỗi sẽ được ghi vào…wp-content/debug.logTrong tệp tin, nội dung cần được sắp xếp một cách dễ dàng để người dùng có thể xem mà không ảnh hưởng đến giao diện hiển thị trên trình duyệt (frontend). Đồng thời, việc sử dụng các công cụ phát triển trình duyệt (Console và tab Network) để gỡ lỗi liên quan đến JavaScript và CSS cũng là bước không thể thiếu trong quá trình kiểm thử và sửa lỗi phần mềm.