Học cách phát triển các chủ đề (theme) cho WordPress từ đầu: Tạo ra những trang web cá nhân hóa

Thiết lập môi trường phát triển WordPress theme

Trước khi bắt đầu viết mã, việc cấu hình môi trường phát triển cục bộ một cách chính xác là bước đầu tiên vô cùng quan trọng. Một môi trường phát triển hiệu quả có thể nâng cao đáng kể hiệu suất làm việc của bạn và giúp bạn dễ dàng hơn trong việc gỡ lỗi và kiểm thử mã nguồn. Trong số nhiều công cụ có sẵn, chúng tôi khuyên bạn nên sử dụng… Local、MAMP 或 XAMPP Là một giải pháp máy chủ địa phương, những công cụ này có thể được cài đặt chỉ với một cú nhấp chuột, và đã bao gồm sẵn PHP, MySQL (hoặc MariaDB) cũng như các máy chủ web (như Apache hoặc Nginx) cần thiết để vận hành WordPress.

Đồng thời, một trình soạn thảo mã mạnh mẽ là điều không thể thiếu. Ví dụ: Visual Studio Code 或 PhpStormTất cả chúng đều hỗ trợ hiển thị định dạng văn bản theo cú pháp (syntax highlighting), gợi ý về cách sử dụng các lệnh trong mã nguồn (code hints), và tích hợp với các công cụ quản lý phiên bản (version control), giúp bạn viết và gỡ lỗi mã nguồn một cách hiệu quả hơn. Bạn nên cài đặt các tiện ích mở rộng (plugins) liên quan đến việc phát triển WordPress trong trình soạn thảo của mình, chẳng hạn như PHP Intelephense.

Tạo cấu trúc cơ bản cho chủ đề đầu tiên của bạn

Về bản chất, một chủ đề WordPress là một thư mục nằm trong wp-content/themes/your-theme-name Các thư mục nằm trong thư mục chính. Thành phần cốt lõi nhất của thư mục này là các tệp định dạng kiểu (style files) và các tệp mẫu (template files). Trước tiên, bạn cần tạo thư mục này thủ công hoặc thông qua dòng lệnh.

Đọc thêm Tạo website hoàn hảo: Phát triển một chủ đề WordPress tùy chỉnh từ đầu。

Tiếp theo, hãy tạo tệp định dạng (style file) cho chủ đề (theme). Tệp này thường được đặt tên là… style.cssNó không chỉ đơn thuần là nơi lưu trữ các quy tắc CSS mà, quan trọng hơn, phần chú thích ở đầu tệp chứa các thông tin metadata liên quan đến chủ đề (theme). Những thông tin này rất quan trọng đối với WordPress trong việc nhận diện một chủ đề cụ thể. Một ví dụ điển hình… style.css Mục đầu của tệp tin có thể trông như sau:

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: 我的个性化主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始打造的个性化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-personal-theme
*/

Trong đó,Text Domain Đây là tệp dùng để hỗ trợ quá trình quốc tế hóa (internationalization). Bạn cần sử dụng nó trong tất cả các chuỗi văn bản có thể được dịch trong các phần tiếp theo của dự án. Sau khi tạo xong tệp này, hãy đặt nó vào thư mục chứa các chủ đề (theme) của bạn. Lúc đó, bạn sẽ thấy nó trong danh sách “Giao diện” (Appearance) -> “Chủ đề” (Themes) trên trang quản trị WordPress; tuy nhiên, hiện tại nội dung bên trong tệp vẫn còn trống.

Hiểu rõ về tệp mẫu cốt lõi của chủ đề (Understanding the core template file of the theme)

WordPress sử dụng một hệ thống phân cấp các mẫu (templates) để quyết định nên tải tệp nào cho từng trang được yêu cầu. Điều này có nghĩa là, khi người dùng truy cập trang chủ của trang web bạn, WordPress sẽ ưu tiên tìm kiếm các tệp liên quan đến trang chủ đó. front-page.phpNếu không có, hãy tìm kiếm. home.phpCuối cùng là tùy chọn mặc định. index.phpViệc hiểu rõ mối quan hệ phân cấp này là nền tảng để xây dựng logic cho các chủ đề (topics).

Tạo tệp mẫu cơ bản

Tệp tin cơ bản nhất mà tất cả các chủ đề đều phải chứa là… index.php 和 style.cssNhưng để xây dựng một trang web có cấu trúc rõ ràng và chức năng đầy đủ, chúng ta thường cần tạo ra một loạt tệp mẫu (template files). Trong số đó,header.php 和 footer.php Đó là hai phần mẫu vô cùng quan trọng. Chúng bao gồm phần đầu (như menu điều hướng, biểu tượng trang web) và phần cuối (như thông tin bản quyền) mà sẽ xuất hiện trên mọi trang của trang web.

Trong mẫu trang (page template), bạn có thể sử dụng các hàm mẫu (template functions) do WordPress cung cấp để đưa các phần cần hiển thị vào trang. Ví dụ, bạn có thể… index.php Bạn có thể sử dụng “ở đầu” để bắt đầu phần giải thích hoặc mô tả. Ví dụ: “Ở đầu bài viết, tác giả đưa ra một số thông tin quan trọng về chủ đề.” Để đưa vào mẫu đầu (header template), hàm này sẽ tự động tìm kiếm và tải nội dung từ thư mục chứa các tài liệu liên quan đến chủ đề (theme directory). header.php Tệp tin. Tương tự như vậy, hãy sử dụng nó ở cuối trang. Đây là cách để chèn các mẫu (templates) vào phần cuối của mã nguồn. Thiết kế modular (mô-đun hóa) như vậy giúp việc tái sử dụng và bảo trì mã nguồn trở nên rất dễ dàng.

Đọc thêm Hướng dẫn toàn diện về phát triển theme WordPress: Tạo ra trang web cá nhân hóa từ con số không。

Xây dựng vòng lặp chính (Building the main loop)

Chức năng cốt lõi của WordPress là hiển thị nội dung, và việc hiển thị nội dung được thực hiện thông qua “vòng lặp chính” (main loop). Vòng lặp là cấu trúc mã PHP trong WordPress dùng để lấy các bài viết (hoặc trang, loại bài viết tùy chỉnh) từ cơ sở dữ liệu và hiển thị chúng trên trang web. Đoạn mã vòng lặp cơ bản nhất như sau:

<article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    
    <p>Không có nội dung.</p>
<?php endif; ?>

Đoạn mã này trước tiên kiểm tra xem có bài viết nào không.have_posts()Nếu có, thì tiến vào vòng lặp (if there is, then enter the loop).while ( have_posts() ) : the_post();Bên trong vòng lặp, bạn có thể sử dụng một loạt thẻ mẫu bắt đầu bằng “the_” để hiển thị thông tin bài viết, ví dụ như: the_title() xuất tiêu đề bài viết,the_content() Cấu trúc lặp này sẽ được sử dụng trên trang chủ, trang danh mục, trang tìm kiếm, và các trang liệt kê khác.

Thêm tính năng và phong cách cho chủ đề (Themes).

Một chủ đề (theme) xuất sắc không chỉ cần có cấu trúc tốt, mà còn phải được trang bị nhiều tính năng hữu ích và thiết kế đẹp mắt. WordPress thực hiện được điều này thông qua hai tệp tin: tệp tin chứa các tính năng (features) và tệp tin chứa các thiết lập về giao diện (styles).

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

Sử dụng các tệp chức năng để nâng cao chất lượng của chủ đề (theme).

Chủ đề functions.php Tệp tin này chính là “con dao Thụy Sĩ” của bạn – một công cụ đa năng và linh hoạt. Đây không phải là một tệp tin mẫu (template file), mà là một tệp PHP được tự động tải vào khi chủ đề (theme) được khởi tạo, nhằm bổ sung nhiều tính năng khác nhau cho chủ đề đó. Bạn có thể sử dụng tệp này để định nghĩa các tính năng mà chủ đề hỗ trợ, đăng ký các mục trong menu điều hướng, tải các tệp định dạng kiểu (style sheets) và tệp lệnh (script files), cũng như thiết lập các khu vực hiển thị công cụ hỗ tr

Ví dụ, để thêm hỗ trợ cho việc hiển thị hình ảnh đặc trưng (hình ảnh thu nhỏ) của bài viết trong chủ đề, bạn có thể… functions.php Hãy thêm đoạn mã sau vào đó:

<?php
add_theme_support( 'post-thumbnails' );

Để đăng ký một vị trí cho mục menu chính, bạn có thể sử dụng:

Đọc thêm Làm thế nào để thiết kế và phát triển một theme WordPress ở cấp độ chuyên nghiệp?。

<?php
register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-personal-theme' ),
) );

Sau đó, bạn có thể tiếp tục thực hiện các bước tiếp theo. header.php sử dụng wp_nav_menu( array( 'theme_location' => 'primary' ) ); để hiển thị menu này.

Viết CSS đáp ứng và mô-đun hóa

Các trang web hiện đại phải có khả năng thích ứng với nhiều loại thiết bị khác nhau và phải hiển thị tốt trên mọi kích thước màn hình. style.css Trong quá trình thiết kế, bạn nên áp dụng chiến lược CSS “mobile-first” (ưu tiên thiết kế cho thiết bị di động) và sử dụng các truy vấn phương tiện truyền thông (media queries) một cách hợp lý để thích ứng với cả thiết bị bảng và máy tính để bàn. Ngoài ra, việc tách mã CSS thành các mô-đun riêng biệt là một thói quen tốt; ví dụ, bạn có thể viết các khối mã riêng cho phần đầu trang (header), điều hướng (navigation), bài viết (article cards), phần chân trang (footer), v.v., đồng thời thêm các ghi chú rõ ràng để giúp người khác

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

Để nâng cao khả năng bảo trì mã nguồn, khuyến nghị nên sử dụng các quy tắc CSS chính một cách có tổ chức và dễ hiểu. wp_enqueue_style() Hàm đăng ký vùng tiện ích trong functions.php Các tài liệu được tải vào hàng một, thay vì tất cả được tải cùng lúc. style.css Đúng vậy. Điều này giúp bạn quản lý các mối phụ thuộc giữa các thành phần (components) và thứ tự tải chúng một cách hiệu quả hơn.

Thực hành: Xây dựng một mẫu trang cho một bài viết đơn lẻ

Bây giờ, hãy kết hợp những gì chúng ta đã học để tạo ra một mẫu trang bài viết có cấu trúc rõ ràng hơn. single.phpMẫu này được sử dụng để hiển thị một bài viết blog đơn lẻ.

Xây dựng cấu trúc mẫu bài viết hoàn chỉnh

Một thứ gì đó hoàn chỉnh… single.php Thông thường, một bài viết sẽ bao gồm phần đầu (header), phần nội dung chính (article content), và phần cuối (footer). Trong phần nội dung chính, chúng ta sẽ tổ chức các thông tin meta của bài viết một cách chi tiết hơn, chẳng hạn như ngày đăng, tác giả, thể loại, và các thẻ (tags).

<?php get_header(); ?>
<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
            <header class="entry-header">
                <h1 class="entry-title"><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <span class="posted-on">
                        <?php the_time( 'Y年m月d日' ); ?>
                    </span>
                    <span class="byline">
                        作者：
                    </span>
                    <span class="cat-links">
                        分类：
                    </span>
                </div>
            </header>

<?php if ( has_post_thumbnail() ) : ?>
                <div class="post-thumbnail">
                    <?php the_post_thumbnail( 'large' ); ?>
                </div>
            <?php endif; ?>

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

<footer class="entry-footer">
                <span class="tags-links">
                    标签：
                </span>
            </footer>
        </article>


</main>

Mẫu này minh họa cách sử dụng các công cụ hoặc phương pháp nhất định để thực hiện một nhiệm vụ cụ thể. the_time()、the_author_posts_link()、the_category()、the_tags() Sử dụng các thẻ mẫu (template tags) để làm phong phú nội dung trang web. Đồng thời, nó cũng áp dụng (it also uses)… post_class() Hàm tự động thêm các lớp CSS có ý nghĩa vào container của bài viết, giúp việc kiểm soát định dạng trở nên dễ dàng hơn.

Thêm bảng điều khiển bên cạnh và mẫu bình luận

Trên trang của một bài viết đơn lẻ, thanh bên cạnh (sidebar) và khu vực bình luận (comment section) là những thành phần phổ biến. Bạn có thể sử dụng chúng để hiển thị thông tin bổ sung, phản hồi từ độc giả, hoặc các tính năng khác liên quan đến bài viết đó. get_sidebar() Hàm được sử dụng để thực hiện việc nhập (import) các thành phần cần thiết. sidebar.php Đây là tệp tin mẫu (template file), thường chứa mã lệnh để gọi các tiện ích (tools). Các mẫu bình luận (comment templates) được tạo ra dựa trên tệp tin này. comments_template() Khi một hàm được nhập vào chương trình, nó sẽ tự động tải các tài liệu liên quan từ thư mục chứa các chủ đề (theme) được chỉ định. comments.php Các tệp tin này được sử dụng để xử lý việc hiển thị các bình luận và các biểu mẫu (forms). Bạn cần tự tạo hai tệp template này để triển khai toàn bộ chức năng.

Tóm lại

Việc phát triển một theme WordPress từ đầu là một quá trình học tập có hệ thống, đòi hỏi bạn phải nắm vững cả kỹ năng lập trình PHP, cấu trúc HTML, thiết kế giao diện bằng CSS, cũng như hiểu sâu về các khái niệm cốt lõi của WordPress (như cấu trúc các template, vòng lặp chính, các hàm hook). Bạn cần thực hiện các bước sau: thiết lập môi trường phát triển, tạo các tệp template cơ bản, và áp dụng những công cụ có sẵn để hoàn thiện theme. functions.php Bằng cách thêm các tính năng mới và sau đó xây dựng các mẫu trang cụ thể, bạn không chỉ có thể tạo ra một trang web cá nhân hóa hoàn toàn phù hợp với nhu cầu của mình mà còn có thể hiểu sâu sắc hơn về cách thức hoạt động của WordPress – hệ thống quản lý nội dung mạnh mẽ này. Hãy nhớ rằng, việc phát triển các giao diện (theme) là một quá trình liên tục được cải tiến, bắt đầu từ những bước đơn giản nhất… style.css 和 index.php Bắt đầu và từng bước thêm các tính năng phức tạp vào sản phẩm là con đường tốt nhất dẫn đến thành công.

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 những kiến thức cơ bản về PHP, HTML, CSS và JavaScript. PHP được sử dụng để xử lý logic và gọi các hàm của WordPress; HTML chịu trách nhiệm xây dựng cấu trúc trang web; CSS kiểm soát phong cách trình bày và bố cục; còn JavaScript thì giúp tạo ra các hiệu ứng tương tác trên giao diện người dùng. Trong số đó, PHP cùng với các thẻ mẫu (templates), hàm và cơ chế hook đặc trưng của WordPress là những yếu tố then chốt cần học.

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

functions.php Tệ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 hiện tại. Khi bạn thay đổi chủ đề, các tệp tin này cũng sẽ được thay đổi theo để phản ánh chủ đề mới. functions.php Các tính năng mới được thêm vào sẽ không còn hoạt động nữa. Trong khi đó, các plugin là những mô-đun độc lập với chủ đề (theme), vì vậy chúng không thay đổi khi bạn thay đổi chủ đề. Thông thường, những tính năng liên quan mật thiết đến giao diện và bố cục của trang web sẽ được đặt trong phần thuộc v functions.php Những thành phần cung cấp chức năng độc lập và có tính chất tổng quát (không phụ thuộc vào bối cảnh cụ thể) thì thích hợp hơn để được tạo thành các plugin, nhằm nâng cao khả năng di chuyển (portability) của mã nguồn.

Làm thế nào để chủ đề của tôi hỗ trợ đa ngôn ngữ (quốc tế hóa)?

Để một chủ đề hỗ trợ quốc tế hóa (internationalization), trước tiên cần phải… style.css Các ghi chú ở phần đầu (header comments) và việc thiết lập đúng cách các trường văn bản được tải (loaded text fields) là rất quan trọng. Text DomainSau đó, trong tất cả các tệp mẫu PHP của chủ đề, hãy bao bọc tất cả các chuỗi dữ liệu dành cho người dùng bằng các hàm dịch của WordPress. Ví dụ: __( ‘字符串’, ‘your-text-domain’ ) 或 _e( ‘字符串’, ‘your-text-domain’ )。

Tiếp theo, bạn cần sử dụng các công cụ như Poedit để quét mã nguồn của chủ đề (theme code) và tạo ra các tài liệu cần thiết. .pot Tệp mẫu và dựa trên tệp này tạo tương ứng cho mỗi ngôn ngữ .po và đã biên dịch .mo Cuối cùng, hãy đặt các tệp dịch này vào thư mục tương ứng của chủ đề (theme). /languages 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.

Trong quá trình phát triển, làm thế nào để gỡ lỗi và kiểm tra các vấn đề (bug)?

Trong giai đoạn phát triển, rất khuyến nghị bạn bật chế độ gỡ lỗi (debug mode) của WordPress. Bạn có thể thực hiện điều này trên trang web của mình… wp-config.php Trong tệp tin, các hằng số sau được định nghĩa để kích hoạt chức năng tương ứng:

define( ‘WP_DEBUG’, true );
define( ‘WP_DEBUG_LOG’, true ); // 将错误记录到 /wp-content/debug.log 文件
define( ‘WP_DEBUG_DISPLAY’, false ); // 不建议在页面上直接显示错误

Đồng thời, hãy sử dụng công cụ phát triển tích hợp sẵn trong trình duyệt (mở bằng phím F12) để kiểm tra cấu trúc HTML, định dạng CSS và các lỗi trong console JavaScript. Đối với logic mã PHP, bạn có thể kết hợp sử dụng các công cụ hỗ trợ phát triển chuyên dụng để phân tích và gỡ lỗi. var_dump() 或 error_log() Hàm thực hiện việc xuất ra kết quả và ghi chép thông tin, nhằm theo dõi giá trị của các biến cũng như quá trình thực thi chương trình.