Trang chủ/Kiến thức/WordPress/Chi tiết nội dung

Cách phát triển và tùy chỉnh chủ đề WordPress đầu tiên của bạn với thiết kế đáp ứng

4 phút đọc
2026-03-21
2026-06-04
2,425
Tôi kiếm được hoa hồng khi bạn mua sắm thông qua các liên kết dưới đây, mà không phát sinh thêm chi phí nào cho bạn.

Chuẩn bị công việc và thiết lập môi trường phát triển

Trước khi bắt đầu viết mã, việc thiết lập một môi trường phát triển hiệu quả là điều vô cùng quan trọng. Điều này không chỉ giúp nâng cao hiệu suất làm việc của bạn mà còn đảm bảo tính chuẩn mực và khả năng bảo trì của mã nguồn.

Trước hết, bạn cần một môi trường phát triển trên máy tính cá nhân. Bạn có thể sử dụng các công cụ như XAMPP, MAMP hoặc Local by Flywheel – chúng giúp bạn dễ dàng thiết lập một môi trường máy chủ chứa PHP và MySQL trên máy tính của mình. Sau khi cài đặt và khởi động các công cụ này, hãy đảm bảo rằng Apache (hoặc Nginx) cùng với MySQL đang hoạt động bình thường.

Tiếp theo, hãy tải về các tệp cốt lõi mới nhất của WordPress và giải nén chúng vào thư mục gốc của trang web trên máy chủ cục bộ (ví dụ: thư mục gốc của XAMPP). htdocs Truy cập thông qua trình duyệt (tức là vào thư mục đó). http://localhost/your-wordpress-folder Hãy hoàn tất quá trình cài đặt WordPress. Nhớ rõ tên cơ sở dữ liệu, tên người dùng và mật khẩu mà bạn đã thiết lập.

Đọc thêm Hướng dẫn thiết kế xây dựng trang web hiện đại đáp ứng với Tailwind CSS: Bắt đầu thực hành。

Đối với các trình soạn thảo mã nguồn, bạn nên sử dụng Visual Studio Code, PhpStorm hoặc Sublime Text. Những trình soạn thảo này cung cấp hiệu ứng tô sáng ngữ pháp mạnh mẽ và các gợi ý về mã nguồn cho các ngôn ngữ PHP, HTML, CSS và JavaScript. Ngoài ra, hãy cài đặt thêm một số tiện ích mở rộng (plugin) cần thiết, chẳng hạn như những tiện ích hỗ trợ phát triển WordPress và công cụ quản lý phiên bản (version control) như Git.

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%
Logo UltaHost Truy cập trang

Cuối cùng, trong thư mục cài đặt WordPress của bạn trên máy tính, hãy điều hướng đến… wp-content/themes Thư mục. Tại đây, hãy tạo một thư mục mới cho chủ đề mà bạn sắp tạo, ví dụ như đặt tên nó là… 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.

Create the core file for the theme.

Một chủ đề WordPress được tạo thành từ một loạt các tệp tin tiêu chuẩn, trong đó có hai tệp tin là bắt buộc phải có:style.css 和 index.phpNhững tệp tin này định nghĩa thông tin cơ bản và cấu trúc của chủ đề.

Trước tiên, hãy tạo ra nó. style.css Đây không chỉ là các tệp định dạng kiểu (style sheets) của bạn, mà còn chứa cả thông tin meta về chủ đề (theme) đó. Những thông tin này sẽ được hiển thị trên trang “Giao diện” (Appearance) -> “Chủ đề” (Themes) trong bảng điều khiển WordPress.

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

Tiếp theo, hãy tạo… index.php Đây là tệp mẫu chính của chủ đề (theme template file). Khi WordPress không tìm thấy tệp mẫu cụ thể hơn (ví dụ: single.php 或 page.phpKhi cần sử dụng nó, chúng ta sẽ áp dụng phương pháp đơn giản nhất có thể. index.php Có thể chỉ chứa những đoạn mã cơ bản như phần đầu (header), vòng lặp chính (main loop), và phần chân (footer) của WordPress.

Đọc thêm Thông thạo Tailwind CSS: Hướng dẫn thực hành từ cơ bản đến nâng cao。

<!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>
    <?php wp_body_open(); ?>
    <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><?php the_title(); ?></h2>
                <?php the_content(); ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Lúc này, chủ đề của bạn đã có thể được kích hoạt. Hãy truy cập trang “Giao diện” -> “Chủ đề” trong bảng điều khiển WordPress, bạn sẽ thấy “Chủ đề phản ứng đầu tiên của tôi”. Hãy kích hoạt nó và truy cập trang chủ của trang web để xem hiệu ứng cơ bản.

Thêm hỗ trợ cho tính năng quản lý chủ đề (theme management).

Để hoàn thiện hơn chức năng chủ đề (theme function), chúng ta cần phải thực hiện một số bước nhất định. functions.php Tệp tin này được sử dụng để bổ sung hỗ trợ cho các tính năng cốt lõi của WordPress.functions.php Các tệp tin giống như “bộ não” của một chủ đề (theme), dùng để lưu trữ tất cả các hàm tùy chỉnh (custom functions), lớp (classes), các thành phần được kích hoạt tự động (hooks), và bộ lọc (filters).

Tạo một… functions.php Hãy thêm các tệp cần thiết vào dự án, và đồng thời thêm đoạn mã sau để hỗ trợ việc hiển thị ảnh thu nhỏ của bài viết, menu tùy chỉnh, cũng như các thẻ HTML5.

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%.
Logo của Hosting.com Truy cập trang 
<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面上的“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册一个导航菜单位置（主菜单）
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );

// 对评论表单、搜索表单等输出 HTML5 标记
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

// 添加对<title>标签的WordPress原生支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 引入样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>

Thực hiện bố cục và kiểu dáng phản ứng (responsive layout and design)

Thiết kế phản ứng (Responsive Design) có nghĩa là trang web của bạn có thể cung cấp trải nghiệm truy cập tốt trên các thiết bị khác nhau với kích thước màn hình khác nhau, chẳng hạn như máy tính để bàn, máy tính bảng và điện thoại di động. Chúng ta chủ yếu thực hiện điều này thông qua các truy vấn phương tiện (Media Queries) trong CSS và bố cục thay đổi theo kích thước màn hình (Fluid Layout).

Đầu tiên, trong style.css Dưới phần thông tin meta của trang web, hãy viết các kiểu dáng toàn cục (global styles) cơ bản để tạo nền tảng cho thiết kế thân thiện với mọi thiết bị (responsive design). Chúng ta sẽ sử dụng các công nghệ bố trí CSS hiện đại như Flexbox.

/* 基础样式 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
header, footer {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}
main {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
article {
    flex: 1 1 300px; /* 基础宽度300px，可伸缩 */
    background: #fff;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

Tiếp theo, hãy thêm các truy vấn phương tiện truyền thông (media queries) để điều chỉnh giao diện dựa trên độ rộng màn hình khác nhau. Đây chính là yếu tố cốt lõi của thiết kế phản ứng (responsive design).

Đọc thêm Xây dựng website độc nhất: Hướng dẫn toàn diện từ cơ bản đến nâng cao về phát triển chủ đề WordPress。

/* 平板设备（宽度小于 768px） */
@media (max-width: 768px) {
    body {
        padding: 0 15px;
    }
    main {
        flex-direction: column;
        gap: 1.5rem;
    }
    article {
        flex: 1 1 auto;
    }
}

/* 手机设备（宽度小于 480px） */
@media (max-width: 480px) {
    header, footer {
        padding: 1rem;
    }
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.2rem;
    }
}

Tối ưu hóa tính thích ứng của menu điều hướng (responsive navigation menu)

Trên các thiết bị màn hình nhỏ như điện thoại di động, menu điều hướng ngang truyền thống có thể trở nên chật chội và khó sử dụng. Một giải pháp phổ biến là chuyển đổi nó thành menu kiểu “hamburger” (menu có các mục được ẩn đi và chỉ hiển thị khi người dùng nhấp vào). Chúng ta cần kết hợp sử dụng CSS và một chút JavaScript để thực hiện điều này.

Đầu tiên, trong header Việc sửa đổi một phần cấu trúc HTML của menu thường được thực hiện bằng công cụ WordPress. wp_nav_menu Tạo hàm. Để kiểm soát phong cách, chúng ta thêm một tên lớp cho nó, và thêm một nút hình bánh hamburger.

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.
Logo của InterServer Truy cập trang

Trong header.php Trong tệp mẫu (cần lấy từ…) index.php (Khi được tách ra khỏi phần còn lại của ứng dụng), mã menu có thể như sau:

<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">菜单</button>
<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_id'        => 'primary-menu',
    'menu_class'     => 'nav-menu',
) );
?>

Sau đó, trong CSS, menu được ẩn mặc định trên màn hình nhỏ. Khi người dùng nhấp vào nút hamburger, một lớp (chẳng hạn như “menu-visible”) sẽ được thay đổi bằng JavaScript, làm cho menu hiển thị trở lại. .toggled） để hiển thị menu.

/* 小屏幕下隐藏菜单 */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    .nav-menu.toggled {
        display: flex;
    }
    .menu-toggle {
        display: block;
    }
}
/* 大屏幕下显示菜单并隐藏按钮 */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }
    .nav-menu {
        display: flex;
        list-style: none;
    }
}

Cuối cùng, hãy thêm một tệp JavaScript đơn giản (ví dụ:…) js/navigation.jsVà thông qua… functions.php Đây là đoạn mã được sử dụng để xử lý sự kiện nhấp vào nút (click event):

Tạo mẫu trang và thành phần tùy chỉnh

Sự linh hoạt của WordPress phần lớn đến từ hệ thống các cấp độ template (mẫu) và các thành phần (Widget) của nó. Việc tạo ra các template và khu vực chứa các thành phần tùy chỉnh có thể giúp nâng cao đáng kể chức năng của giao diện (theme) mà bạn đang sử dụng.

Xây dựng mẫu trang tùy chỉnh

Giả sử bạn muốn tạo một mẫu trang “toàn chiều rộng” (full-width page) – một mẫu trang không có thanh bên cạnh, nội dung trang chiếm toàn bộ chiều rộng màn hình. Đầu tiên, hãy tạo một tệp mới trong thư mục gốc của theme (theme root directory) và đặt tên cho nó là… page-fullwidth.phpỞ phần đầu tiên của tệp này, bạn phải thêm một ghi chú chứa tên của mẫu (template name).

<?php
/**
 * Template Name: 全宽页面
 */
get_header(); // 引入 header.php
?>
<main id="main" class="site-main full-width">
    &lt;?php
    while ( have_posts() ) :
        the_post();
        the_title( &#039;<h1 class="entry-title">', '</h1>' );
        the_content();
    endwhile;
    ?&gt;
</main>
<?php
get_footer(); // 引入 footer.php
?>

Bây giờ, khi bạn tạo hoặc chỉnh sửa một trang trong giao diện quản trị WordPress, bạn có thể chọn tùy chọn “Trang toàn màn hình” (Full-width Page) từ danh sách thả xuống “Mẫu” (Template) trong phần “Thuộc tính trang” (Page Properties). Sau khi chọn, trang đó sẽ được hiển thị bằng tệp mẫu mà bạn vừa tạo.

Regist the sidebar component area.

Khu vực các thành phần (Components) cho phép người dùng thêm nội dung vào những vị trí cụ thể của trang (chẳng hạn như thanh bên cạnh, phần chân trang) bằng cách kéo và thả. Chúng ta cần… functions.php Đăng ký một khu vực bên cạnh (sidebar) trên trang web.

Sử dụng register_sidebar Đây là một hàm được sử dụng để đăng ký các thành phần của bảng điều khiển bên cạnh (sidebar). Hàm này nhận vào một mảng các tham số, trong đó chứa thông tin về tên, ID, mô tả, và thẻ bao bọc (wrapper tag) của từng thành phần trong bảng điều khiển bên cạnh.

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        '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_first_theme_widgets_init' );

Sau khi đăng ký, bạn cần gọi (khai báo sử dụng) phần này ở vị trí thích hợp trong mẫu chủ đề (theme template). Thông thường, thanh bên cạnh (sidebar) nằm ở… sidebar.php Trong tệp tin đó, sau đó trong tệp tin mẫu chính (ví dụ:…) index.php 或 single.php) Thông qua get_sidebar() hàm để nhập.

在 sidebar.php trong đó, sử dụng dynamic_sidebar Hàm này được sử dụng để hiển thị nội dung trong khu vực các bộ phận (components).

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside>
<?php endif; ?>

Tóm lại

Việc phát triển và tùy chỉnh chủ đề WordPress có khả năng thích ứng với nhiều thiết bị (responsive theme) là một quá trình đầy thách thức nhưng cũng mang lại nhiều cảm giác thành công. Theo các bước được hướng dẫn trong bài viết này, bạn đã tự mình xây dựng môi trường phát triển và tạo ra những tệp cốt lõi cần thiết cho chủ đề của mình. style.css 和 index.phpvà thông qua functions.php Chức năng liên quan đến các chủ đề (themes) của trang web đã được cải thiện đáng kể. Bạn đã áp dụng những nguyên lý thiết kế web thích ứng (responsive web design) một cách chuyên nghiệp, sử dụng các công cụ như CSS Media Queries và Flexbox để đảm bảo trang web hoạt động tốt trên mọi loại thiết bị. Cuối cùng, bạn còn tìm hiểu sâu về hệ thống mẫu (templates) mạnh mẽ của WordPress cũng như API (Application Programming Interface) liên quan đến các thành phần (components) trong WordPress, học cách tạo các mẫu trang tùy chỉnh và các khu vực chứa thành phần có thể được kéo và thả (drag-and-drop components).

Sau khi nắm vững những kiến thức cơ bản này, bạn có thể tiếp tục khám phá các tính năng nâng cao hơn như tùy chỉnh loại bài viết, API cho công cụ tùy chỉnh giao diện (theme customizer), hỗ trợ trình soạn thảo khối nội dung (block editor), v.v., từ đó tạo ra những giao diện WordPress mạnh mẽ hơn và có thiết kế chuyên nghiệp hơn.

FAQ 常见问题

Phải bắt đầu từ con số không trong quá trình phát triển chủ đề (theme development) sao?

Không nhất thiết phải bắt đầu từ con số không. Mặc dù việc bắt đầu từ đầu sẽ giúp bạn kiểm soát hoàn toàn và hiểu rõ từng chi tiết, nhưng đối với người mới bắt đầu hoặc những trường hợp cần phát triển nhanh chóng, việc sử dụng các chủ đề có sẵn (như Underscores, _s) hoặc các framework (chẳng hạn như các chủ đề tích hợp của Bootstrap) là lựa chọn hiệu quả hơn. Điều này sẽ cung cấp cho bạn một nền tảng mã nguồn vững chắc và phù hợp với các chuẩn tốt nhất, từ đó bạn có thể tiếp tục tùy chỉnh theo nhu cầu của mình.

Làm thế nào để gỡ lỗi (debug) cho theme WordPress của tôi?

Một phương pháp gỡ lỗi thường được sử dụng trong quá trình phát triển WordPress là bật tính năng gỡ lỗi (debugging). WP_DEBUGTrong của bạn… wp-config.php tệp, đặt giá trị của hằng số define( 'WP_DEBUG', false ); Hãy thay đổi nó thành… define( 'WP_DEBUG', true );Điều này sẽ buộc WordPress hiển thị tất cả các lỗi PHP, cảnh báo và thông báo trên màn hình. Đồng thời, bạn có thể kết hợp sử dụng các công cụ phát triển của trình duyệt (Console, Elements, Network tab) để gỡ lỗi JavaScript, CSS và các yêu cầu mạng.

Tại sao sau khi tôi thay đổi chủ đề, nó không được áp dụng ngay lập tức?

Điều này thường xảy ra do lỗi trong bộ đệm của trình duyệt hoặc các tiện ích bổ sung (plugin) của WordPress. Trước tiên, hãy thử làm mới trang web một cách thủ công trong trình duyệt bằng phím Ctrl+F5 (hoặc Cmd+Shift+R). Nếu bạn đang sử dụng các tiện ích bổ sung hỗ trợ bộ đệm, hãy xóa dữ liệu đệm của chúng. Đồng thời, hãy đảm bảo rằng bạn đang chỉnh sửa đúng tệp tin trong thư mục chứa chủ đề (theme) đang được sử dụng hiện tại. functions.php Đôi khi, chỉ cần làm mới trang nền (refresh the background page) là đủ để cập nhật nội dung của tệp tin đó, vì tệp tin này sẽ được đọc lại mỗi lần trang được tải.

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

Việc hỗ trợ nhiều ngôn ngữ (quốc tế hóa và địa phương hóa) cho một chủ đề là một thói quen tốt. Điều này chủ yếu bao gồm hai bước: Đầu tiên, cần sử dụng các hàm dịch của WordPress để bao bọc tất cả các đoạn văn bản cần được dịch trong chủ đề. Ví dụ: __('Hello World', 'my-first-theme')Thứ hai, sử dụng các công cụ như Poedit để quét các tệp thể hiện chủ đề (theme files) và tạo ra nội dung cần thiết. .pot Cá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 và đã biên dịch .mo Tệp tin đó, hãy đặt nó vào phần liên quan đến chủ đề (theme). /languages/ Trong thư mục đó. Cuối cùng, functions.php sử dụng load_theme_textdomain hàm để tải bản dịch.

Khi phát triển các ứng dụng hoặc sản phẩm với chủ đề thương mại, cần lưu ý đến những điểm sau:

Việc phát triển các chủ đề thương mại dùng cho mục đích phân phối đòi hỏi tiêu chuẩn cao hơn nhiều so với các chủ đề dùng cho mục đích cá nhân. Bạn cần tuân thủ nghiêm ngặt các quy định kiểm duyệt của thư mục chủ đề WordPress, đảm bảo rằng mã nguồn an toàn và không chứa lỗi. Tất cả dữ liệu đầu vào và đầu ra từ người dùng đều phải được xử lý bằng cách đánh dấu (escape) và xác thực một cách chặt chẽ; đồng thời, bạn nên sử esc_html, esc_urlChủ đề bạn chọn nên đi kèm với tài liệu hướng dẫn chi tiết và các ghi chú giải thích rõ ràng về cách sử dụng. Ngoài ra, rất được khuyến nghị bạn bổ sung sự hỗ trợ đầy đủ cho các tính năng cốt lõi của WordPress (chẳng hạn như trình soạn thảo khối nội dung và khả năng tùy chỉnh biểu tượng), đồng thời đảm bảo rằng chủ đề đó tương thích tốt với các plugin phổ biến. Cuối cùng, hãy xem xét việc bổ sung tính năng tùy chỉnh chủ đề, nhằm mang đến cho người dùng trải nghiệm tùy chỉnh trực quan và theo th

Bước tiếp theo, chúng ta nên làm gì tiếp theo?

Nếu bạn đang xây dựng hoặc tối ưu hóa trang web WordPress của mình, bước tiếp theo là tiếp tục đọc về tối ưu hóa hiệu năng, cấu hình plugin và tùy chỉnh chủ đề.

Đọ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.

Thẻ: