Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng trang web của bạn từ con số 0

Công tác chuẩn bị và thiết lập môi trường

Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển phù hợp. Điều này bao gồm một môi trường máy chủ cục bộ (chẳng hạn như XAMPP, MAMP hoặc Local by Flywheel) cùng với một trình soạn thảo mã (chẳng hạn như VS Code, Sublime Text hoặc PHPStorm). Môi trường máy chủ cục bộ có thể mô phỏng môi trường máy chủ trên mạng, cho phép bạn phát triển và thử nghiệm các tính năng của trang web một cách an toàn trên máy tính của mình, mà không cần phải tải lại nội dung lên máy chủ mỗi khi bạn thực hiện thay đổi.

Các tệp tin cốt lõi (core files) là nền tảng của mọi chủ đề (theme) trong WordPress. Một chủ đề cơ bản nhất cần ít nhất hai tệp tin:style.css 和 index.phpTrong đó,style.css Không chỉ đơn thuần là một bảng định dạng (stylesheet), chức năng quan trọng hơn của tệp này là đóng vai trò như “tiêu đề thông tin” (information header) của chủ đề (theme), dùng để thông báo với hệ thống WordPress về thông tin chi tiết của chủ đề bạn đang sử dụng. Trong tệp này, bạn cần sử dụng các khối chú thích (comment blocks) đặc biệt để định nghĩa tên chủ đề, tác giả, mô tả, phiên bản, và các thông tin meta khác.

Ngoài ra, mặc dù không bắt buộc, nhưng rất khuyến nghị bạn nên tạo một…functions.php Đây là tệp tin liên quan đến chủ đề của bạn, có tên là “Function Enhancer”. Nó được sử dụng để thêm các tính năng tùy chỉnh, tạo menu đăng ký, bổ sung thanh bên cạnh (sidebar), cũng như đưa vào các tệp script và tệp định dạng kiểu (style files). Nhờ vào tệp này, bạn có thể mở rộng chức năng của chủ đề mà không cần phải thay đổi các tệp cốt lõi (core files).

Đọc thêm Nhập môn phát triển chủ đề WordPress: Bắt đầu từ con số không để tạo chủ đề tùy chỉnh đầu tiên của bạn。

Việc phát triển các chủ đề WordPress hiện đại cũng khuyến nghị sử dụng các chủ đề con (Child Themes). Đây là một phương pháp an toàn để tùy chỉnh và thêm chức năng cho chủ đề mà không cần phải thay đổi trực tiếp các tệp của chủ đề gốc. Khi chủ đề gốc được cập nhật, những nội dung tùy chỉnh của bạn (lưu trữ trong chủ đề con) sẽ được giữ nguyên. Việc tạo một chủ đề con cũng yêu cầu hai tệp cốt lõi như đã đề cập ở trên, và bạn cần thực hiện các bước tương tự như khi tạo một chủ đề thông thường.style.css Trong phần tiêu đề định dạng (style header), điều này được thực hiện thông qua…Template:Trường (field) khai báo chủ đề (topic) của 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

Tệp mẫu cốt lõi để xây dựng chủ đề

WordPress sử dụng hệ thống Cấu trúc Các Mẫu (Template Hierarchy) để quyết định file mẫu PHP nào sẽ được sử dụng để hiển thị nội dung cho một yêu cầu trang cụ thể. Việc hiểu rõ các quy tắc này là rất quan trọng trong quá trình phát triển các giao diện (theme) cho WordPress.

Bài viết và mẫu hiển thị trang (Article and Page Display Templates)

Mẫu cơ bản nhất là…single.php和page.phpChúng được sử dụng riêng biệt để kiểm soát việc hiển thị của từng bài viết trên blog và của các trang web độc lập. Trong những mẫu này, bạn sẽ sử dụng một loạt hàm cốt lõi của WordPress để lặp lại và hiển thị nội dung. Cấu trúc lặp quan trọng nhất thường được trình bày như sau:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>

Đoạn mã này kiểm tra xem có bài viết nào không, sau đó đi vào vòng lặp và lần lượt hiển thị tiêu đề cùng nội dung của từng bài viết. Các hàm liên quan đến quá trình này bao gồm…the_title()和the_content()Dùng để hiển thị dữ liệu tương ứng.

Mẫu danh sách bài viết và mẫu lưu trữ

Khi người dùng truy cập trang chủ blog, trang danh mục hoặc trang lưu trữ bài viết của tác giả, WordPress sẽ sử dụng các mẫu danh sách (list templates). Mẫu danh sách phổ biến nhất là…index.php(Là lựa chọn cuối cùng, dùng để đảm bảo mọi tình huống được xử lý.) Vàarchive.phpTrong mẫu danh sách, vòng lặp sẽ duyệt qua nhiều bài viết; thường thì chúng ta sử dụng…the_excerpt()Vui lòng cung cấp nội dung bài viết cần tóm tắt thay vì toàn văn.

Đọc thêm Học cách phát triển các chủ đề (theme) cho WordPress từng bước một: Xây dựng chủ đề tùy chỉnh từ con số không。

// Trong vòng lặp, in ra các mục trong danh sách bài viết
<article>
    <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
</article>

the_permalink()Hàm này được sử dụng để lấy liên kết vĩnh cửu (permanent link) của bài viết hiện tại.

Các thành phần chung của một chủ đề (theme)

Để nâng cao tính tái sử dụng và khả năng bảo trì của mã nguồn, bạn nên tách các phần trang web chung ra thành các tệp mẫu (template files) riêng biệt. Điều này giúp cho việc quản lý và cập nhật mã nguồn trở nên dễ dàng hơn.get_header(), get_footer(), get_sidebar()和get_template_part()Các hàm như vậy được sử dụng để thực hiện những công việc cụ thể.

Ví dụ, của bạn…header.phpTệp tin chứa phần đầu (header) của tài liệu HTML.Khu vực và menu điều hướng ở phía trên của trang web.single.phpTrong đó, bạn chỉ cần gọi hàm ở phần đầu.get_header()Khi bạn sử dụng WordPress, nó sẽ tự động thêm các thành phần cần thiết vào trang web của bạn.header.phpnội dung.

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ương tự, đối với các đoạn mã được sử dụng lặp đi lặp lại ở nhiều nơi (chẳng hạn như thông tin meta của bài viết), bạn có thể lưu chúng lại dưới dạng tệp riêng.content.php或template-parts/content.phpSau đó, hãy sử dụng nó trong mẫu chính (main template).get_template_part('template-parts/content', get_post_format());Hãy gọi nó. Tham số thứ hai cho phép bạn tải các tệp biến thể khác nhau tùy theo định dạng bài viết (chẳng hạn như thư viện hình ảnh, trích dẫn), dựa trên định dạng đó.content-gallery.php）。

Sử dụng các tệp chứa hàm (function files) để nâng cao chức năng của chủ đề (theme).

functions.php Tệp tin chính là “trung tâm điều khiển” của chủ đề; tất cả các đoạn mã chức năng không thuộc phần hiển thị trực tiếp bằng HTML đều nên được đặt vào đây. Những đoạn mã này sẽ được WordPress tự động tải vào khi chủ đề được khởi tạo.

Chức năng đăng ký chủ đề và menu

Một thao tác cơ bản và cần thiết là sử dụng…add_theme_support() Bạn có thể sử dụng các hàm để chỉ định những tính năng của WordPress mà giao diện của bạn hỗ trợ. Ví dụ, việc kích hoạt tính năng hiển thị ảnh đại diện cho bài viết, tùy chỉnh menu, và hỗ trợ các thẻ HTML5 là những điều thường được thực hiện.

Đọc thêm Cấu trúc cốt lõi và nguyên lý hoạt động của WordPress。

function my_theme_setup() {
    // 添加文章和页面特色图片支持
    add_theme_support('post-thumbnails');
    // 为导航菜单功能添加支持
    add_theme_support('menus');
    // 为评论列表、搜索表单等添加HTML5标记支持
    add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');

Sau đó, bạn có thể sử dụng…register_nav_menus() Các hàm được sử dụng để xác định vị trí của các thành phần trên trang web có thể được truy cập trong chủ đề, chẳng hạn như “Nav đầu trang” (top navigation) và “Nav chân trang” (footer navigation).

Thêm các bảng định dạng (style sheets) và mã JavaScript vào trang web.

Việc sắp xếp các tệp CSS và JavaScript vào hàng chờ (enqueue) một cách chính xác là yếu tố then chốt trong quá trình phát triển chuyên nghiệp. Điều này giúp đảm bảo rằng các mối phụ thuộc giữa chúng được xử lý đúng cách và tránh được xung đột giữa các tập lệnh (script conflicts). Tuyệt đối không được sử dụng trực tiếp các tệp CSS và JavaScript trong các tệp mẫu (template files).或Thẻ được sử dụng để đưa các tài nguyên vào trang web.

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

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
    // 引入自定义JavaScript文件，依赖于jQuery
    wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Hookwp_enqueue_scripts Dùng để tải các tập lệnh (script) và phong cách (style) vào phía trước của trang web (frontend).get_stylesheet_uri()和get_template_directory_uri() Hàm này có thể giúp bạn lấy được địa chỉ URL chính xác của thư mục chủ đề (theme directory).

Tạo khu vực widget

Các khu vực công cụ (Widget Areas) ở thanh bên cạnh hoặc phần chân trang cho phép người dùng tự định hình nội dung thông qua giao diện kéo-thả ở phía sau hậu cần. Hãy sử dụng chúng!register_sidebar() Hàm có thể tạo ra một khu vực mới để chứa các công cụ (tools) hoặc tiện ích (utilities).

function my_theme_widgets_init() {
    register_sidebar(array(
        'name'          => '主侧边栏',
        'id'            => 'sidebar-1',
        'description'   => '此区域的小工具将显示在文章和页面侧边。',
        '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', 'my_theme_widgets_init');

Sau khi đăng ký, bạn sẽ cần sử dụng các tệp mẫu (templates) để…sidebar.php）sử dụngdynamic_sidebar('sidebar-1');Hàm được sử dụng để hiển thị nội dung của khu vực này.

Tạo bố cục đáp ứng và viết mã CSS

Các trang web hiện đại phải hoạt động tốt trên mọi loại thiết bị khác nhau. Điều này đòi hỏi rằng giao diện của trang web phải có khả năng thích ứng với kích thước màn hình của người dùng (tức là phải “phản ứng tốt” với các điều kiện khác nhau). Việc thực hiện thiết kế phản ứng tốt chủ yếu dựa vào CSS Media Queries và các kiểu bố cục linh hoạt (Fluid Layouts).

Chiến lược thiết kế trang web tập trung vào trải nghiệm người dùng trên thiết bị di động (Mobile-first design strategy)

Đề nghị sử dụng chiến lược viết CSS theo nguyên tắc “di động trước” (mobile-first). Nghĩa là trước tiên hãy thiết lập các kiểu dáng cơ bản dành cho thiết bị di động (màn hình nhỏ), sau đó sử dụng các truy vấn phương tiện truyền thông (media queries) để từ từ thêm hoặc thay thế các kiểu dáng đó cho các

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 0 15px;
}
.article {
    font-size: 16px;
    line-height: 1.6;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .container {
        max-width: 750px;
        margin: 0 auto;
    }
}

/* 针对桌面设备 */
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
    .article {
        font-size: 18px;
    }
}

Chiến lược này đảm bảo rằng nội dung cốt lõi có thể được truy cập trên mọi thiết bị, đồng thời dần dần nâng cao trải nghiệm người dùng trên những màn hình có kích thước lớn hơn.

Xử lý linh hoạt hình ảnh và phương tiện truyền thông

Đảm bảo rằng hình ảnh và nội dung được nhúng vào (chẳng hạn như video) không tràn ra khỏi khung chứa của chúng là một yêu cầu cơ bản của thiết kế thích ứng. Một quy tắc đơn giản và phổ biến là:

img,
iframe,
video {
    max-width: 100%;
    height: auto;
}

Quy tắc CSS này đảm bảo rằng chiều rộng của các phần tử truyền thông (media elements) không vượt quá chiều rộng của container cha chúng, đồng thời chiều cao của chúng sẽ được điều chỉnh tự động theo tỷ lệ, nhằm tránh việc bị lỗi trong bố cục (layout corruption).

Sử dụng các lớp hỗ trợ và hàm trong WordPress

WordPress tự nó đã cung cấp rất nhiều lớp CSS hữu ích mà bạn có thể sử dụng để kiểm soát phong cách trang web một cách chính xác hơn. Ví dụ,Trên các thẻ (tags), sẽ được thêm các lớp (classes) xác định loại trang hoặc loại bài viết (ví dụ:…).page, .single-post), cũng như các loại ID liên quan đến bài viết (ví dụ:.postid-123Trong vòng lặp danh sách bài viết,post_class()Hàm sẽ tạo ra một loạt tên lớp (chẳng hạn như định dạng bài viết, thể loại, v.v.) cho từng container chứa bài viết, điều này rất tiện lợi cho việc thiết kế giao diện với các kiểu trình bày chi tiết.

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <!-- 文章内容 -->
</article>

Trong bảng định dạng (style sheet), bạn có thể định vị các phần trên trang web theo cách sau:

/* 为所有文章添加通用样式 */
article {
    margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
    background-color: #f9f9f9;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình kết hợp giữa sự sáng tạo, các công nghệ phía trước (HTML, CSS, JavaScript) và công nghệ phía sau (PHP). Bắt đầu từ việc xây dựng một chủ đề mới, bạn cần…style.css和index.phpHãy bắt đầu từ thư mục cơ bản, sau đó từng bước học cách xây dựng và triển khai hệ thống cấu trúc các mẫu (template hierarchy). Hãy chia các trang thành các thành phần mẫu có thể được tái sử dụng. Điều quan trọng nhất là…functions.phpTệp tin chính là nền tảng để bạn mở rộng các tính năng của chủ đề, đăng ký các menu và thực hiện các tác vụ liên quan đến các script (chương trình nhỏ). Cuối cùng, nhờ vào thiết kế CSS thích ứng, bạn có thể đảm bảo rằng chủ đề của mình mang lại trải nghiệm người dùng tuyệt vời trên mọi thiết bị, từ điện thoại đến máy tính để bàn. Bằng cách tuân theo các thực hành tốt nhất (chẳng hạn như sử dụng các sub-theme để thực hiện các thay đổi, sắp xếp các script và phong cách thiết kế một cách chính xác), bạn sẽ tạo ra một chủ đề chuyên nghiệp hơn, an toàn hơn và dễ bảo trì hơn

FAQ 常见问题

Có thể phát triển theme cho WordPress mà không có kiến thức cơ bản về PHP không?

Mặc dù về mặt lý thuyết, bạn có thể chỉ cần sửa đổi HTML và CSS để thay đổi giao diện của một chủ đề hiện có, nhưng để thực sự phát triển một chủ đề mới từ đầu với đầy đủ chức năng và tuân thủ các tiêu chuẩn của WordPress, kiến thức về PHP là điều không thể thiếu. Bạn cần hiểu rõ ngữ pháp PHP cơ bản, cách gọi các hàm, cũng như các thẻ mẫu (templates) và hệ thống Hook đặc trưng của WordPress. Được khuyến nghị bạn nên học cơ bản về PHP và các thẻ mẫu của WordPress trước.

Sau khi hoàn thành phát triển chủ đề, làm thế nào để phát hành cho người khác sử dụng?

Trước khi phát hành chủ đề lên thư mục chủ đề chính thức của WordPress hoặc bán thương mại, bạn cần thực hiện kiểm tra nghiêm ngặt và đảm bảo nó tuân theo các tiêu chuẩn mã hóa trong 'Sổ tay phát triển chủ đề WordPress'. Điều này bao gồm xem xét bảo mật mã, đảm bảo chủ đề hoàn toàn đáp ứng, chuẩn bị quốc tế hóa (i18n) (sử dụng các hàm dịch như__()和_e()Sau khi hoàn thành các thay đổi cần thiết, hãy xóa toàn bộ đoạn mã dùng để gỡ lỗi (debug code). Tiếp theo, bạn có thể chọn để gửi sản phẩm đó lên thư mục chính thức của dự án, hoặc phân phối nó thông qua trang web riêng của mình.

Thế nào là mối quan hệ giữa việc cập nhật các chủ đề con (sub-topics) và chủ đề cha (parent topic)?

Các chủ đề con (sub-templates) được tạo ra nhằm mục đích cho phép bạn thay đổi nội dung của chủ đề chính (parent template) một cách an toàn và có kiểm soát. Khi bạn sử dụng các chủ đề con, mọi thay đổi bạn thực hiện về thiết kế (phong cách trình bày) và chức năng đều được lưu trữ trong tệp tin thuộc chủ đề con đó. Khi chủ đề chính được cập nhật, bạn chỉ cần cập nhật chủ đề chính như bình thường; các tệp tin của chủ đề con sẽ không bị ảnh hưởng và mọi thay đổi cá nhân hóa vẫn được giữ nguyên. Đây là phương pháp tốt nhất để nâng cấp các chức năng cốt lõi của chủ đề mà không làm mất đi những thiết kế độc đáo đã được thiết lập trong chủ đề con.

Làm thế nào để thêm trang tùy chọn tùy chỉnh cho chủ đề của tôi?

Để thêm trang tùy chọn cho các chủ đề nâng cao, thông thường người ta sử dụng API Cài đặt (Settings API) của WordPress hoặc bằng cách tích hợp một framework tùy chọn phổ biến như Redux, Kirki, hoặc sử dụng thư viện Carbon Fields. API Cài đặt là một tập hợp các giao diện tiêu chuẩn được cung cấp bởi WordPress để tạo, xác thực, và lưu trữ các tùy chọn một cách an toàn. Đối với người mới bắt đầu, việc sử dụng một framework đã được phát triển sẵn có thể giúp xây dựng nhanh chóng một bảng điều khiển tùy chọn thân thiện với người dùng, nhưng điều này có thể làm tăng độ phức tạp của chủ đề và kích thước tệp tin.