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,PhpStorm hoặc Sublime Text). Hãy đảm bảo rằng môi trường cục bộ của bạn hỗ trợ PHP (phiên bản 7.4 trở lên) và MySQL/MariaDB.
Tiếp theo, bạn cần thực hiện các bước trong thư mục cài đặt của WordPress.wp-content/themesHãy tạo một thư mục mới bên trong thư mục đó; thư mục này sẽ trở thành thư 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 tên cho thư mục mới là…my-first-themeĐây là thư mục chứa tất cả các tệp liên quan đến các chủ đề của bạn. Nó được coi là “ngôi nhà” của tất cả các tệp tin liên quan đến các chủ đề đó.
Một chủ đề WordPress cơ bản chỉ gồm hai tệp tin chính:style.css和index.phpTrong đó,style.cssKhông chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của chủ đề (theme) – nó thông báo cho WordPress về tên chủ đề, tác giả, mô tả và các dữ liệu meta khác thông qua các thông tin chú thích ở phần đầu tệp (header).
Tạo tệp thông tin về chủ đề (Create a theme information file)
Trong thư mục chủ đề của bạn, hãy tạo…style.cssTệp tin, và hãy nhập các thông tin cơ bản sau:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习WordPress主题开发的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Đoạn chú thích này là cần thiết. WordPress chính xác là hoạt động bằng cách đọc nội dung từ các tệp tin cụ thể.Theme NameDòng này được sử dụng để nhận diện và hiển thị chủ đề của bạn trong danh sách các chủ đề ở phía sau hậu trường (nghĩa là trong hệ thống quản lý nội dung). Các thông tin khác như…Text DomainĐây là những bước chuẩn bị cho việc dịch nội dung sang các ngôn ngữ quốc tế.
Tạo tệp mẫu cốt lõi (Core Template File)
Tiếp theo, hãy tạo ra phiên bản cơ bản nhất.index.phpTệp tin… Ngay cả khi tệp tin này hiện tại trống rỗng, chỉ cần…style.cssThông tin đã được hoàn tất đầy đủ; chủ đề của bạn sẽ xuất hiện trong danh sách “Giao diện” -> “Chủ đề” trên giao diện quản trị WordPress và có thể được kích hoạt. Bây giờ, hãy cùng chúng ta…index.phpHãy viết một cấu trúc HTML đơn giản nhất để hiển thị tiêu đề blog và nội dung bài viết.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
<article>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_foot(); ?>
</body>
</html>Đoạn mã này sử dụng nhiều thành phần cốt lõi (core components) của WordPress.模板标签ví dụbloginfo()、the_title()、the_content()hàmwp_head()和wp_foot()Đây là những “khung” (hooks) quan trọng, cho phép phần cốt lõi của WordPress, các plugin, và các script khác chèn những đoạn mã cần thiết vào phần đầu (header) và phần cuối (footer) của trang web.
Hiểu về cấu trúc các cấp độ của mẫu (template hierarchy) và cách tạo ra các mẫu cốt lõi (core templates)
WordPress sử dụng một bộ công cụ được gọi là…模板层级Các quy tắc này được sử dụng để xác định file mẫu nào cần được sử dụng để hiển thị nội dung của một trang web cụ thể. Đây là một trong những khái niệm cốt lõi trong quá trình phát triển theme (giao diện website). Nói một cách đơn giản, WordPress sẽ tìm kiếm từ file mẫu cụ thể nhất; nếu không tìm thấy file đó, nó sẽ chuyển sang file mẫu có tính chất chung hơn, và cuối cùng sẽ sử dụng file mẫu mặc định.index.php。
Tạo mẫu cho trang chi tiết bài viết
Khi người dùng truy cập vào một bài viết cụ thể, WordPress sẽ ưu tiên tìm kiếm thông tin liên quan đến bài viết đó.single-post.phpNếu không tồn tại, hãy sử dụng.single.phpcuối cùng mới đếnindex.phpHãy cùng tạo ra một…single.phpĐược thiết kế để kiểm soát cách hiển thị của từng bài viết riêng lẻ.
<?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 1009>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
<div class="entry-meta">
发布于： | 作者：
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-footer">
分类：
</footer>
</article>
<?php
// 上一篇/下一篇导航
the_post_navigation();
// 评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>Mẫu này đã đưa vào ba thành phần mẫu quan trọng:get_header()、get_sidebar()和get_footer()。Chúng được sử dụng để nhậpheader.php、sidebar.php和footer.phpTệp tin là yếu tố then chốt để thực hiện việc tái sử dụng mã nguồn và thiết kế theo nguyên tắc mô-đun hóa.
Tạo mẫu trang (Create a page template)
Đối với các trang tĩnh (chẳng hạn như “Về chúng tôi”), WordPress sẽ tự động tìm kiếm nội dung cần hiển thị trên trang đó.page.phpTạopage.phpCấ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ẻ mô tả (tags), và thời gian đăng bài.
<?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 1005>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php
endwhile;
?>
</main>Thực hiện chức năng và phong cách của chủ đề (theme)
Một chủ đề hoàn chỉnh không chỉ cần các tệp mẫu (template files), mà còn cần các thành phần khác để được triển khai đầy đủ.functions.phpTệp tin này được sử dụng để thêm các tính năng mới, đăng ký các mục trong menu, quản lý khu vực chứa các tiện ích (widgets), và thực hiện các thao tác liên quan đến chúng.style.cssThêm phong cách (style).
File of theme function functions
Hãy tạo tập tin đó trong thư mục gốc của chủ đề (theme root directory) của bạn.functions.phpTệp này được tự động tải vào khi khởi tạo chủ đề, và dùng để lưu trữ tất cả các hàm PHP tùy chỉnh cũng như các thành phần liên quan đến việc kết nối (hooks).
<?php
/**
* 我的第一个主题的功能函数
*/
// 添加主题支持功能
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像（缩略图）功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus(
array(
'primary' => esc_html__( '主导航菜单', 'my-first-theme' ),
)
);
// 添加HTML5标记支持
add_theme_support(
'html5',
array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
'style',
'script',
)
);
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 注册小工具侧边栏
function my_first_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
// 加载主题样式表和脚本
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 加载通用CSS
wp_enqueue_style( 'my-first-theme-main-style', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0' );
// 加载通用JavaScript
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Thêm các kiểu dáng cơ bản
Bây giờ, hãy cùng chúng ta…style.cssSau phần chú thích ở đầu, hãy thêm một số đoạn CSS cơ bản để làm đẹp giao diện của bạn.
/* 基础重置与排版 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
}
header {
border-bottom: 2px solid #0073aa;
margin-bottom: 40px;
padding-bottom: 20px;
}
.entry-title {
color: #222;
}
.site-main {
float: left;
width: 70%;
}
/* 侧边栏样式 */
.widget-area {
float: right;
width: 25%;
padding-left: 5%;
}
/* 页脚样式 */
footer {
clear: both;
border-top: 1px solid #ddd;
margin-top: 60px;
padding-top: 20px;
text-align: center;
color: #666;
}Tính năng mô-đun và bộ phận mẫu
Để nâng cao khả năng bảo trì và tái sử dụng mã nguồn, WordPress khuyến khích việc tách các phần trang được lặp lại (như tiêu đề trang, chân trang, bên cạnh trang) thành các tệp template riêng biệt.
Tạo các thành phần cho tiêu đề trang (header) và chân trang (footer).
Tạo raheader.phpBao gồm từ...<!DOCTYPE html>Từ “bắt đầu” đến “mở”<main>Mọi nội dung nằm trước thẻ (tag).
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary">Nhảy đến nội dung chính</a>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
else :
?>
<p class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$my_first_theme_description = get_bloginfo( 'description', 'display' );
if ( $my_first_theme_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $my_first_theme_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
<?php endif; ?>
</div>
<nav id="site-navigation" class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
)
);
?>
</nav>
</header>
<div id="content" class="site-content">Tương ứng với đó, hãy thực hiện việc tạo ra (create).footer.phpBao gồm</div><!-- #content -->Tất cả nội dung tiếp theo.
</div><!-- #content -->
<footer id="colophon" class="site-footer">
<div class="site-info">
<p><?php printf( esc_html__( '主题：%1$s', 'my-first-theme' ), '<a href="https://example.com/">我的第一个主题</a>' ); ?></p>
</div>
</footer>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>Tạo rasidebar.phpĐể hiển thị khu vực công cụ nhỏ (widget area).
<?php
if ( is_active_sidebar( 'sidebar-1' ) ) :
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php
endif;
?>Sau khi hoàn thành những bộ phận này, bạn có thể sử dụng chúng ngay.get_header()、get_footer()和get_sidebar()Các hàm được gọi một cách gọn gàng trong tất cả các tệp mẫu (template files).
Tóm lại
Thông qua hướng dẫn này, bạn đã hoàn thành toàn bộ quá trình xây dựng một chủ đề WordPress cơ bản từ đầu. Bạn đã học cách thiết lập môi trường phát triển và tạo ra các tệp tin cần thiết cho chủ đề.style.css和index.phpVà thông qua đó, tôi đã hiểu sâu về hệ thống cấu trúc các mẫu (templates) trong WordPress, từ đó tạo ra những mẫu riêng biệt phù hợp với các loại trang khác nhau (chẳng hạn như bài viết, trang thông thường).single.php， page.phpBạn đã nắm được cách thực hiện điều đó thông qua…functions.phpTệp tin được thiết kế để bổ sung các tính năng cốt lõi cho chủ đề, chẳng hạn như menu đăng ký, các công cụ hỗ trợ (tools) và hình ảnh đặc trưng. Cuối cùng, người tạo tệp tin đã áp dụng nguyên lý phát triển dựa trên các mô-đun (modular development), bằng cách tách riêng phần tiêu đề (header), phần chân trang (footer) và thanh bheader.php， footer.php， sidebar.phpĐiều này đã giúp nâng cao đáng kể mức độ bảo trì của mã nguồn. Đây chỉ là điểm khởi đầu thôi; dựa trên nền tảng này, bạn có thể tiếp tục khám phá các loại bài viết tùy chỉnh, các tùy chọn chủ đề nâng cao, thiết kế thích ứng với màn hình khác nhau, cũng như các tương tác bằng JavaScript, từ đó dần xây dựng nên một chủ đề WordPress với nhiều tính năng mạnh mẽ và thiết kế chuyên nghiệp.
FAQ 常见问题
Tại sao chủ đề của tôi không hiển thị trong phần quản trị (backend)?
Hãy đảm bảo rằng thư mục chứa các chủ đề (theme folders) của bạn được đặt ở đúng vị trí.wp-content/themes/Nằm trong thư mục, và bên trong đó…style.cssPhần đầu của tệp chứa một khối chú thích có định dạng đúng, đặc biệt là…Theme Name:Dòng này phải tồn tại và phải chính xác. Định dạng mã hóa của tệp phải là UTF-8 (không kèm theo BOM – Byte Order Mark).
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?
Trongfunctions.phpphầnmy_first_theme_setupTrong hàm, hãy thêm một dòng mã:add_theme_support( 'custom-logo' );Sau khi thêm Logo vào, người dùng có thể tải lên và thiết lập nó trong mục “Giao diện” -> “Tùy chỉnh” -> “Tham chiếu trang web” (Appearance -> Custom -> Site Identity) ở phần quản trị WordPress. Bạn cần phải…header.phpsử dụngthe_custom_logo()Hàm này được sử dụng để hiển thị Logo.
Làm thế nào khi trang web bị màn hình trắng sau khi chỉnh sửa tệp functions.php?
Điều này thường có nghĩa là…functions.phpCó lỗi ngữ pháp PHP trong tệp tin. WordPress sẽ ngừng thực thi do lỗi nghiêm trọng này. Bạn cần truy cập vào máy chủ thông qua FTP hoặc trình quản lý tệp để sửa lỗi trong tệp tin đó.functions.phpĐổi tên (ví dụ: đổi thành…)functions.php.bakHãy thực hiện các bước cần thiết để khôi phục khả năng truy cập vào trang web. Sau đó, hãy kiểm tra và sửa lỗi trong mã nguồn của bạn, rồi tải lại các tệp tin chính xác lên máy chủ. Việc thực hiện các thử nghiệm trong môi trường phát triển cục bộ (local development environment) là một thói quen tốt để trán
Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?
Bạn đã làm xong rồi.style.cssIt has been set in the middle.Text Domain(Văn bản trường), vàfunctions.phpTrong chuỗi ký tự này, đã được sử dụng…esc_html__( ‘文本’， ‘my-first-theme’ )Một hàm dịch như vậy. Tiếp theo, bạn cần sử dụng các công cụ như Poedit để quét các chuỗi có thể được dịch trong các tệp chủ đề (theme files) và tạo ra bản dịch tương ứng..potCác tệp mẫu (template files), sau đó tạo các phiên bản tương ứng cho mỗi ngôn ngữ..po和.moCác tệp tin đó sẽ được lấy ra và đặt vào phần liên quan đến chủ đề (theme)./languagesNó 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.
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.
- Phát triển chủ đề WordPress từ cơ bản đến nâng cao: Hướng dẫn toàn diện để xây dựng trang web cá nhân hóa
- Hướng dẫn toàn diện về xây dựng trang web: Quy trình hoàn chỉnh từ ý tưởng đến ra mắt và phân tích công nghệ cốt lõi
- Phát triển chủ đề WordPress từ đầu: Tạo ra giao diện trang web độc đáo
- Tại sao lại chọn WordPress làm nền tảng trang web ưu tiên?
- Hướng dẫn cơ bản về WordPress: Xây dựng trang web chuyên nghiệp đầu tiên của bạn từ con số không
Tiếng Việt