Từ cơ bản đến nâng cao: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress

Chuẩn bị môi trường và khái niệm cơ bản cho phát triển chủ đề

Để bắt đầu phát triển các chủ đề (themes) cho WordPress, trước tiên bạn cần thiết lập một môi trường phát triển cục bộ (local development environment) phù hợ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 những rủi ro có thể phát sinh khi gỡ lỗi trực tuyến. Một số giải pháp môi trường phát triển cục bộ phổ biến bao gồm XAMPP, MAMP, Local by Flywheel, v.v.; những công cụ này tích hợp sẵn PHP, MySQL và máy chủ web, và có thể được cài đặt chỉ với một cú nhấp chuột. Hãy chọn công cụ phù hợp với bạn và đảm bảo rằng phiên bản PHP của nó tương thích với môi trường máy chủ mà bạn muốn sử dụng.

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 các tệp PHP, CSS, JavaScript và hình ảnh – cả những tệp bắt buộc lẫn tùy chọn. Đối với một chủ đề cơ bản nhất, chỉ cần hai tệp là đủ.style.css和index.phpTrong đó,style.cssKhông chỉ là các bảng định dạng (style sheets), chúng còn chứa đựng thông tin siêu dữ liệu (metadata) liên quan đến chủ đề (theme). Những thông tin này được định nghĩa thông qua một khối chú thích đặc biệt, và đó là yếu tố then chốt giúp WordPress nhận diện được chủ đề đó.

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)

style.cssKhối chú thích ở đầu tệp là “chứng minh thư” của chủ đề đó. Một ví dụ tiêu biểu về dữ liệu metatag (metadata) như sau:

Đọc thêm WordPress Theme Development là gì。

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

index.phpĐây là tệp mẫu mặc định của chủ đề (theme), và nó là tệp mẫu dự phòng cuối cùng được sử dụng cho mọi yêu cầu truy cập trang web. Khi quá trình phát triển tiếp diễn, bạn sẽ dần tạo ra các tệp mẫu cụ thể hơn, chẳng hạn như…header.php、footer.php、single.phpV.v., để tạo thành một chức năng hoàn chỉnh.

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

Xây dựng cấu trúc phân cấp của mẫu chủ đề và các vòng lặp (Building the template hierarchy and loops for a theme)

WordPress sử dụng một hệ thống thông minh được gọi là “hệ thống phân cấp template” (template hierarchy) để quyết định cách hiển thị các nội dung khác nhau. Khi người dùng truy cập một trang, WordPress sẽ tìm kiếm tệp template tương ứng theo một thứ tự ưu tiên nhất định. Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ lần lượt tìm kiếm các tệp template liên quan…single-post.php、single.phpcuối cùng mới đếnindex.phpViệc hiểu rõ và tận dụng cấu trúc phân cấp này là yếu tố then chốt để tạo ra những chủ đề (themes) linh hoạt và mạnh mẽ về chức năng.

Nắm vững nguyên lý hoạt động của vòng lặp (loop) trong WordPress

Trọng tâm của toàn bộ nội dung được trình bày là “vòng lặp WordPress” (WordPress loop). Đây là một cấu trúc mã PHP dùng để kiểm tra xem trang hiện tại có bài viết nào cần được hiển thị hay không; nếu có, nó sẽ lặp qua từng bài viết đó và hiển thị chúng. Một cấu trúc vòng lặp cơ bản nhất như sau:

<h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>

Trong vòng lặp này,have_posts()和the_post()Đây là hàm cốt lõi (core function).the_title()和the_content()Các thẻ mẫu như `` và `` được sử dụng để hiển thị thông tin cụ thể của bài viết. Bằng cách sử dụng vòng lặp, bạn có thể kiểm soát danh sách các bài viết, trang hiển thị từng bài viết riêng lẻ, cũng như bất kỳ khu vực nào cần truy vấn và hiển thị nộ

Tạo các tệp mẫu cho phần đầu (header) và phần cuối (footer) của trang web.

Để nâng cao tính tái sử dụng và khả năng bảo trì của mã nguồn, phần đầu trang (Header) và phần cuối trang (Footer) thường được tách ra thành các tệp mẫu (template files) riêng biệt.header.phptệp, trong đó cần bao gồm khai báo loại tài liệu,Khu vực đó, cùng với phần điều hướng công cộng ở phía trên trang web. Sau đó,index.phpTrong các tệp tin như vậy, hãy sử dụng…get_header();hàm để nhập nó.

Đọc thêm Bắt đầu từ con số không: Cấu trúc cốt lõi trong việc phát triển giao diện WordPress。

Tương tự như vậy, việc tạo ra (create)…footer.phpTệp này chứa các thông tin phổ biến ở phần cuối trang web (như thông tin liên hệ, bản quyền, v.v.), cũng như các tham chiếu đến các tập tin script (script references), và được sử dụng để thiết lập cấu trúc của trang web.get_footer();hàm để nhập.get_sidebar();和get_template_part();Đây cũng là một hàm phổ biến được sử dụng trong các mẫu mã được thiết kế theo nguyên lý mô-đun hóa (modular templates).

Thực hiện các tính năng chủ đề và các đặc tính nâng cao

Một chủ đề WordPress chuyên nghiệp không chỉ cần có giao diện đẹp mắt mà còn phải được trang bị nhiều tính năng mạnh mẽ. Điều này chủ yếu được thực hiện thông qua cách thiết kế và phát triển các chức năng bên trong chủ đề đó.functions.phpĐiều này được thực hiện thông qua một tệp tin cụ thể. Tệp tin này giống như “bộ não” của chủ đề (theme), được sử dụng để thêm các tính năng mới, đăng ký các thành phần (components), và thay đổi hành vi mặc định của chủ đề đó.

Thêm hỗ trợ cho các chủ đề (themes) trong tệp tin chứa chức năng (function file).

functions.phpCác tệp tin này được sử dụng để kích hoạt các tính năng cốt lõi của WordPress, chẳng hạn như ảnh thu nhỏ cho bài viết, menu tùy chỉnh, hỗ trợ các thẻ HTML5, v.v. Dưới đây là một ví dụ về cách kích hoạt một tính năng phổ biến:

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_setup() {
    // 添加对文章特色图片（缩略图）的支持
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '底部菜单', 'my-first-theme' ),
    ) );

// 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_theme_support()Các hàm được sử dụng để tuyên bố các tính năng khác nhau mà chủ đề hỗ trợ.register_nav_menus()Vị trí của các mục trong thực đơn đã được đăng ký có thể được phân bổ trong phần “Giao diện” -> “Thực đơn” ở phía sau hậu trường, và sau đó được sử dụng trong các mẫu thiết kế.wp_nav_menu()Gọi hàm.

Nhập các tệp biểu mẫu (style sheets) và tệp script

Việc sắp xếp các tài nguyên một cách chính xác ( enqueue) là kỹ năng cơ bản mà mọi nhà phát triển chuyên nghiệp đều cần nắm vững. Đừng bao giờ đặt các liên kết trực tiếp (hard links) đến các tệp CSS hoặc JS trong template; thay vào đó, hãy sử dụng các phương pháp phùwp_enqueue_style()和wp_enqueue_script()Đây là một cách hiệu quả để đảm bảo rằng các mối phụ thuộc giữa các thành phần được xử lý một cách chính xác, đồng thời tránh tình trạng tài nguyên bị tải lại nhiều lần hoặc xảy ra xung đột.

在functions.phpthêm:

Đọc thêm Bắt đầu từ con số không: Hướng dẫn đầy đủ và chia sẻ thực tiễn tốt nhất về phát triển WordPress Theme。

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(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

get_stylesheet_uri()Điều được thu thập là…style.cssĐường dẫn đó…get_template_directory_uri()URL thu được là đường dẫn đến thư mục gốc của chủ đề (theme root directory).

Tạo mẫu trang tùy chỉnh và chủ đề con (custom page templates and subtopics)

Để đáp ứng các yêu cầu thiết kế trang web cụ thể, bạn có thể tạo các mẫu trang tùy chỉnh. Ví dụ, bạn có thể tạo một mẫu trang có chiều rộng toàn màn hình (không cần thanh bên cạnh). Chỉ cần thêm một dòng chú thích ghi tên mẫu trang đó ở đầu bất kỳ tệp PHP nào, sau đó tải tệp đó lên thư mục chứa các mẫu (theme directory), và mẫu đó sẽ xuất hiện trong danh sách các mẫu có sẵn trong trình soạn thảo trang (page editor) dưới mục “Templates”.

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 tạo mẫu trang tùy chỉnh

Tạo một tài liệu có tên là…template-fullwidth.phpĐối với các tệp tin này, phần đầu tiên của chúng nên bắt đầu bằng:

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

Trong tệp này, bạn có thể viết các cấu trúc HTML và PHP độc lập; tuy nhiên, chúng có thể không bao gồm một số thành phần cần thiết.get_sidebar();Khi bạn tạo một trang web, hãy chọn mẫu này; WordPress sẽ sử dụng nó để hiển thị nội dung trên trang đó.

Sử dụng các chủ đề con (sub-templates) để thực hiện việc tùy chỉnh và nâng cấp một cách an toàn.

Việc thay đổi trực tiếp các giao diện (theme) của bên thứ ba là rất nguy hiểm, vì những bản cập nhật mới của giao diện có thể 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 một “sub-theme” (giao diện con). Sub-theme chỉ chứa các tệp tin được bạn tự chỉnh sửa và kế thừa toàn bộ các tính năng từ giao diện gốc (parent theme). Bạn chỉ cần tạo một sub-theme là đủ.style.cssVà một người nữafunctions.php。

của chủ đề constyle.cssCác ghi chú ở phần đầu (header comments) phải bao gồm…Template:Bạn có thể chỉ định tên thư mục của chủ đề cha bằng cách sử dụng các thông tin liên quan đến đường dẫn (path).

/*
Theme Name: 我的子主题
Template: twentytwentyfour
*/

Trongfunctions.phpTrong đó, bạn có thể thêm các chức năng mới hoặc ghi đè các hàm của chủ đề cha (parent theme). Nếu chỉ cần thêm phong cách (styles) thì…style.cssNó sẽ được tự động tải sau khi các định dạng của chủ đề cha được áp dụng, do đó các quy tắc của bạn sẽ thay thế các quy tắc của chủ đề cha.

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ơ bản của các tệp tin, sau đó dần dần nắm vững cách sử dụng các cấu trúc mẫu (templates), cơ chế lặp (loops), và cuối cùng là thêm các tính năng mới thông qua các tệp tin chứa chức năng (function files). Trọng tâm của quá trình này là xây dựng các mẫu theo nguyên tắc mô-đun hóa (ví dụ: phần đầu trang, phần cuối trang, thanh bên cạnh), đồng thời quản lý các tài nguyên một cách có tổ chức bằng các quy tắc nhất định. Việc tạo ra các mẫu trang tùy chỉnh giúp đáp ứng những yêu cầu về bố cục đặc biệt, trong khi việc thành thạo công nghệ các chủ đề con (subthemes) là yếu tố then chốt để đảm bảo tính an toàn trong việc tùy chỉnh và khả năng bảo trì trong tương lai. Để hoàn thành quá trình này, nhà phát triển cần kết hợp kiến thức về PHP, HTML, CSS, JavaScript với hệ thống hàm và các công cụ đặc biệt của WordPress, nhằm tạo ra những giao diện trang web vừa đẹp mắt vừa mạnh mẽ về chức năng.

FAQ 常见问题

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

Vâng, bạn cần có nền tảng PHP vững chắc. WordPress được xây dựng bằng PHP; các tệp mẫu (templates) và logic chức năng của nó đều dựa trên mã PHP để thực hiện việc hiển thị nội dung động và tương tác dữ liệu. HTML, CSS, và JavaScript là những công cụ cơ bản để tạo giao diện người dùng (frontend), trong khi PHP đóng vai trò như cầu nối giữa các thành phần này với cơ sở dữ liệu (database) phía sau của WordPress.

Tại sao kiểu tùy chỉnh của tôi không có hiệu lực?

Điều này thường xảy ra do mức độ ưu tiên (specificity) của các bộ lọc CSS không đủ cao, hoặc bảng định dạng (style sheet) không được tải đúng cách. Trước hết, hãy kiểm tra công cụ phát triển trình duyệt để xác nhận liệu các quy tắc CSS của bạn có được áp dụng cho các phần tử cần thiết hay không, và liệu chúng có bị các quy tắc có mức độ ưu tiên cao hơn lấn át hay không. Tiếp theo, hãy đảm bảo rằng bạn đang sử dụng đúng phương thức để tải và áp dụng bảng định dạng CSS vào trang web của mình.functions.phptrongwp_enqueue_style()Các hàm được sử dụng để tải các bảng định dạng (style sheets), thay vì việc viết chúng trực tiếp trong phần đầu của tài liệu HTML (header). Khi sử dụng các chủ đề con (sub-templates), cần đảm bảo rằng các bảng định dạng của chủ đề cha (parent theme) được kế thừa một cách chính xác.

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

functions.phpCác tính năng trong đó được liên kết chặt chẽ với chủ đề hiện tại; khi người dùng thay đổi chủ đề, những tính năng này sẽ bị vô hiệu hóa. Phạm vi hoạt động của chúng chỉ giới hạn trong trang web đã kích hoạt chủ đề đó. Ngược lại, các tính năng do plugin cung cấp là độc lập với chủ đề, vì vậy chúng thường vẫn hoạt động bình thường sau khi thay đổi chủ đề, giúp việc sử dụng chúng trên nhiều trang web khác nhau trở nên dễ dàng hơn. Một nguyên tắc tốt là: nếu một tính năng chỉ nhằm mục đích trình bày nội dung (chẳng hạn như bố cục, kiểu dáng), hãy đặt nó vào chủ đề; còn nếu tính năng nhằm mục đích bổ sung chức năng cốt lõi cho trang web (chẳng hạn như biểu mẫu liên hệ, tối ưu hóa SEO), tốt nhất nên tạo nó dưới d

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

Bạn cần thực hiện hai việc: chuẩn bị các trường văn bản và tạo các tệp ngôn ngữ. Trước hết, trong toàn bộ nội dung của chủ đề này, hãy sử dụng hàm dịch của WordPress để bao bọc tất cả các chuỗi văn bản nhắm đến người dùng. Ví dụ:__('文本', 'my-theme')或_e('文本', 'my-theme')Và đảm bảo rằng…style.cssĐược định nghĩa trong…Text DomainPhải phù hợp với “my-theme” ở đây. Sau đó, sử dụng công cụ như Poedit để quét tệp tin thème và tạo ra (generate) nội dung cần thiết..potTệp mẫu (Template file)..po和.moTệp tin được đặt trong chủ đề (theme)./languages/Nó nằm trong thư mục. WordPress sẽ tự động tải các bản dịch tương ứng dựa trên cài đặt ngôn ngữ của trang web.