Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển trên máy tính cá nhân (môi trường local development). Môi trường này thường bao gồm một máy chủ local (chẳng hạn như XAMPP, MAMP hoặc Local by Flywheel), PHP, cơ sở dữ liệu MySQL, và một trình soạn thảo mã (chẳng hạn như VS Code hoặc Sublime Text). Hãy đảm bảo rằng phiên bản PHP của bạn phù hợp với yêu cầu chính thức của WordPress.
Tiếp theo, trong thư mục cài đặt WordPress của bạn…wp-content/themestạo một thư mục mới, ví dụ:my-first-themeThư mục này sẽ chứa tất cả các tệp liên quan đến chủ đề của bạn.
Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin:style.css和index.phpTrước hết, hãy tạo…style.cssBạn cần tạo một tệp tin và thêm ghi chú thông tin về chủ đề (theme information) ở phần đầu của tệp tin đó; điều này là bắt buộc để WordPress có thể nhận diện được chủ đề bạn đang sử dụng.
Đọc thêm Tùy chỉnh WordPress Theme: Hướng dẫn toàn diện từ đầu để tạo giao diện website độc quyền。
/*
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
*/Sau đó, hãy tạo ra phiên bản đơn giản nhất (simplest version) của nó.index.phpTệp tin hiện tại chỉ chứa một khung cấu HTML cơ bản (skeleton) và dòng chữ “Hello World”.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1001>
<h1>Chào thế giới! Đây là chủ đề (theme) đầu tiên của tôi.</h1>
<?php wp_footer(); ?>
</body>
</html>Bây giờ, hãy đăng nhập vào giao diện quản trị WordPress của bạn, sau đó chọn mục “Trang chủ” (Appearance) -> “Chủ đề” (Themes). Bạn sẽ thấy chủ đề “My First Theme” xuất hiện và có thể kích hoạt nó. Mặc dù chủ đề này hiện tại còn có rất nhiều hạn chế về chức năng, nhưng bạn đã thành công trong việc tạo ra một chủ đề mà WordPress có thể nhận diện được.
Tệp mẫu cốt lõi để xây dựng chủ đề
Một chủ đề hoàn chỉnh được tạo thành từ một loạt tệp mẫu (template files), những tệp này kiểm soát cách hiển thị các phần khác nhau của trang web. Hãy bắt đầu xây dựng từ những tệp quan trọng nhất.
Tách phần tiêu đề (header) khỏi phần chân trang (footer).
Bước đầu tiên quan trọng là tách những đoạn mã lặp lại (chẳng hạn như phần đầu trang và phần cuối trang) ra thành các tệp riêng biệt. Hãy thực hiện điều này nhé.header.phptệp, chứa từ<!DOCTYPE html>đến khi mở<body>Mọi nội dung nằm trước thẻ (tag).
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>Tạo rafooter.phpTệp tin này chứa nội dung phần chân trang (footer) và các thẻ kết thúc (end tags).
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Sau đó, hãy sửa đổi nó của bạn.index.phptệp, sử dụngget_header()和get_footer()Chúng ta sử dụng các hàm để đưa những phần này vào chương trình.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 文章内容输出
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
<?php get_footer(); ?>Tạo vòng lặp bài viết và thanh bên cạnh (Create an article loop with a sidebar)
Trên đóindex.phpNó đã bao gồm vòng lặp chính (The Loop) của WordPress, được sử dụng để truy xuất và hiển thị danh sách bài viết. Tiếp theo, hãy tạo…sidebar.phpHãy thêm một thanh bên vào nhé.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Để đưa thanh bên vào trang web, bạn cần phải…index.phpChỉnh sửa cấu trúc của khu vực nội dung chính, và sử dụng…get_sidebar()Hàm. Đồng thời, cần phải tạo ra một…functions.phpTệp tin này được sử dụng để đăng ký khu vực hiển thị các tiện ích bên cạnh (sidebar widgets).
Thực hiện bố cục và kiểu dáng phản ứng (responsive layout and design)
Thiết kế thích ứng đảm bảo rằng chủ đề của bạn sẽ hiển thị tốt trên mọi loại thiết bị. Chúng ta sẽ bắt đầu với cấu trúc CSS cơ bản và các câu lệnh truy vấn phương tiện (media queries).
Thiết lập các kiểu dáng cơ bản và mô hình hộp linh hoạt (Flexible Box Model)
Trongstyle.cssDưới phần chú thích thông tin chủ đề, hãy thêm các lệnh để thiết lập lại kiểu trình bày (reset styles) và cấu trúc cơ bản (basic layout). Sử dụng công cụ Flexbox để tạo ra một bố cục thích ứng (responsive layout) là một khởi đầu tốt.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}Thêm truy vấn phương tiện truyền thông (media query)
Truy vấn phương tiện truyền thông (Media Query) là yếu tố cốt lõi trong thiết kế thích ứng (Responsive Design). Chúng tôi đã thêm một điểm dừng (breakpoint) đơn giản: khi độ rộng màn hình nhỏ hơn 768px (thường là các thiết bị máy tính bảng cỡ nhỏ), cấu trúc bố cục của khu vực nội dung và thanh bên cạnh sẽ được thay đổi từ dạng song song thành dạ
Đọc thêm Phát triển chủ đề WordPress: Hướng dẫn toàn diện từ cơ bản đến nâng cao。
Trước tiên, hãy thay đổi cấu trúc HTML.index.phpSử dụng một container để bao bọc nội dung chính và thanh bên cạnh.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>Sau đó, hãy thêm các kiểu dáng tương ứng vào CSS.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}Tăng cường chức năng chủ đề qua functions.php
functions.phpTệp tin chính là “phòng máy” (engine room) của chủ đề bạn, nơi bạn có thể thêm các tính năng mới, đăng ký các đặc điểm cần thiết, và đưa các script (chương trình nhỏ) cũng như các định dạng thiết kế (styles) vào hệ thống một cách an toàn.
Đăng ký menu điều hướng và khu vực widget
在functions.phptrong đó, sử dụngregister_nav_menusHàm này dùng để đăng ký vị trí của các mục menu cho chủ đề (theme) trong hệ thống điều hướng (navigation).
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>Sau khi đăng ký, bạn có thể sử dụngheader.php和footer.phpsử dụngwp_nav_menu()Chức năng này được sử dụng để gọi các menu đó.
Tải các kiểu dáng (styles) và script một cách an toàn
Đừng bao giờ đặt liên kết trực tiếp (hard link) đến các tệp CSS hoặc JavaScript trong các tệp mẫu (template files). Thay vào đó, bạn nên sử dụng các phương pháp khác để đưa chúng vào trang web một cách hiệu quả và dễ bảo trì hơn.wp_enqueue_style()和wp_enqueue_script()Hàm, và thông quawp_enqueue_scriptsCác “hook” được sử dụng để tải chúng (những thứ cần được tải vào hệ thống).
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载一个自定义JavaScript文件（如果需要）
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Tạo thêm các tệp mẫu để làm phong phú thêm các chức năng.
Hiện tại, chúng ta chỉ có một chủ đề duy nhất.index.phpNó sẽ được sử dụng trên tất cả các trang. Cấu trúc phân cấp của các mẫu WordPress quy định việc nó sẽ tìm kiếm những mẫu cụ thể hơn cho từng loại trang khác nhau. Hãy cùng tạo ra một vài mẫu như vậy nhé.
Một bài viết đơn lẻ và mẫu trang (Page Template)
Tạo rasingle.phpDùng để hiển thị một bài viết duy nhất.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Tạo rapage.phpDùng để hiển thị các trang tĩnh. Cấu trúc của nó giống với…single.phpTương tự, nhưng thường không hiển thị các thông tin phụ như danh mục, thẻ tag, v.v.
Để tuân theo nguyên tắc DRY (Don’t Repeat Yourself – Đừng lặp lại bản thân), chúng ta có thể trích xuất các phần nội dung hiển thị của bài viết và trang web vào các thành phần mẫu (Template Parts). Hãy thực hiện điều này trong thư mục gốc của chủ đề (theme root directory).template-partsTạo một thư mục và thêm nội dung vào đó.content-single.php和content-page.php。
Mẫu trang lưu trữ bài viết
Tạo raarchive.phpĐây là phần mô tả về trang hiển thị thông tin phân loại, thẻ, tác giả, và các dữ liệu khác liên quan đến tài liệu được lưu trữ. Nó có thể được sử dụng lại (tức là có thể được áp dụng cho nhiều mục đích khác nhau).index.phpTrong vòng lặp đó, tiêu đề của các tập tin được lưu trữ thường sẽ được hiển thị ở phía trên.
<?php get_header(); ?>
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
?>
</header>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation(); // 显示上一页/下一页导航
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>Tóm lại
Thông qua hướng dẫn này, bạn đã hoàn thành việc xây dựng một giao diện WordPress có khả năng thích ứng với nhiều thiết bị (responsive) một cách cơ bản nhưng đầy đủ. Bạn đã hiểu được cấu trúc tệp tin cơ bản của một giao diện WordPress, học cách tách các thành phần cấu tạo giao diện (tiêu đề trang, chân trang, bên cạnh), triển khai các vòng lặp cốt lõi của WordPress, và sử dụng các câu lệnh truy vấn phương tiện (media queries) trong CSS để tạo ra bố cục thích ứng với nhiều kích thước màn hình khác nhau. Ngoài ra, bạn còn nắm vững cách…functions.phpCách sử dụng các tệp tin để đăng ký các mục trong menu, tiện ích (widgets), và tài nguyên cần được tải một cách an toàn (secure loading of resources), đồng thời bắt đầu tìm hiểu về hệ thống cấu trúc mẫu (template hierarchy) mạnh mẽ của WordPress.
Việc phát triển các chủ đề (templates) là một quá trình không ngừng được cải thiện và sâu rộng hơn. Tiếp theo, bạn có thể khám phá thêm nhiều tệp mẫu (template files) khác.404.php、search.php），学习使用WordPress的Body Class和Post Class来增加样式控制的精细度，深入研究主题定制器（Customizer）API为用户提供可视化设置选项，甚至尝试将Sass或ES6等现代前端工作流集成到你的开发过程中。
FAQ 常见问题
Một chủ đề WordPress cần ít nhất những tệp tin nào?
Một chủ đề đơn giản nhất có thể được WordPress nhận diện chỉ cần hai tệp tin:style.css和index.php。style.cssPhần tiêu đề (header) phải chứa thông tin chú thích về chủ đề một cách chính xác.index.phpVậy nó sẽ trở thành mẫu mặc định cho tất cả các trang.
Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?
Bạn cần làm hai việc. Đầu tiên, sử dụng tên miền văn bản (Text Domain) trong phần chú thích đầu củastyle.cssCác chú thích ở phần đầu và tất cả các nơi mà văn bản được sử dụng (chẳng hạn như thông qua…)__()或_e()Chúng ta sẽ sử dụng các lĩnh vực văn bản (text domains) trong quá trình phát triển các chủ đề (themes). Trong hướng dẫn này, chúng ta sẽ sử dụng lĩnh vực văn bản có tên “my-first-theme”. Tiếp theo, hãy sử dụng các công cụ như Poedit để tạo các tệp tin có định dạng .pot, sau đó dịch nội dung của chúng sang các tệp tin .po và .mo, và đặt chúng vào thư mục tương ứng của chủ đề./languagesTrong thư mục đó. Cuối cùng,functions.phpsử dụngload_theme_textdomain().
Tại sao các kiểu dáng tùy chỉnh hoặc script của tôi không có hiệu lực?
Điều này thường xảy ra do các tệp không được tải vào theo cách được WordPress khuyến nghị. Vui lòng đảm bảo rằng bạn đang thực hiện theo đúng quy trình được hướng dẫn bởi WordPress.functions.phpTrong tệp functions.php, sử dụngwp_enqueue_style()和wp_enqueue_script()hàm, và gắn chúng vàowp_enqueue_scriptsBạn có thể sử dụng các “hook” (các điểm kết nối trong mã nguồn) để thêm phong cách (styles) và script vào trang web. Những liên kết được viết trực tiếp trong tệp template có thể bị các plugin lưu trữ dữ liệu (cache plugins) bỏ qua, hoặc có thể không được tải đúng thứ tự trong một số trường hợp.
Làm thế nào để thêm hỗ trợ cho việc sử dụng Logo tùy chỉnh cho chủ đề (theme) của tôi?
Đây là một tính năng rất phổ biến. Bạn cần phải…functions.phpTrong hàm thiết lập chủ đề của tệp (thông qua…)after_setup_theme(Thực thi lệnh thông qua “hook”), thêm vào.add_theme_support( 'custom-logo' )Bạn có thể truyền vào một mảng các tham số để định nghĩa kích thước và các thuộc tính khác của Logo. Sau khi thêm các thông tin này, người dùng có thể tải lên Logo của mình tại mục “Trang chủ” -> “Tùy chỉnh” -> “Thông tin trang web”. Ở phía front-end, bạn có thể sử dụng những thông tin này để hiển thị và thao tác với Logo.the_custom_logo()hàm để hiển thị nó.
Trong quá trình phát triển, làm thế nào để gỡ lỗi trong PHP?
It is recommended to use the local development environment.wp-config.phpBật chế độ gỡ lỗi (debug mode) của WordPress trong tệp tin.WP_DEBUGHằng số được thiết lậptrueBạn cũng có thể thiết lập nhiều thứ cùng lúc.WP_DEBUG_LOG和WP_DEBUG_DISPLAYĐiều này dùng để quyết định xem lỗi sẽ được ghi vào tệp nhật ký (log file) hay được hiển thị trên màn hình. Hãy nhớ rằng, trước khi đưa ứng dụng ra môi trường thực tế, bạn nhất định phải tắt chế độ gỡ lỗi (debug mode).
Bước tiếp theo, chúng ta nên làm gì tiếp theo?
Đọc thêm và kiến thức thực tế
Những nội dung sau đây liên quan đến chủ đề của bài viết này, thích hợp để tiếp tục đọc sâu hơn. Ưu tiên bắt đầu với bài viết gần nhất với vấn đề hiện tại của bạn, rồi dần dần mở rộng sang các chủ đề xung quanh, hiệu quả thường sẽ tốt hơn.
- Hướng dẫn phát triển chủ đề WordPress: Xây dựng trang web tùy chỉnh từ con số không
- Hướng dẫn toàn diện về phát triển theme WordPress: Từ con số không đến thành thục thông qua các bài học thực hành
- Hướng dẫn đầy đủ về phát triển chủ đề WordPress: Xây dựng các mẫu trang web chuyên nghiệp từ con số không
- Thực hành phát triển theme WordPress: Xây dựng từ đầu một trang web doanh nghiệp thích ứng với mọi thiết bị
- Xây dựng chủ đề WordPress mà không cần code: Hướng dẫn đầy đủ từ đầu đến nâng cao
Tiếng Việt