Hướng dẫn thực hành phát triển theme WordPress: Xây dựng theme hiện đại responsive từ con số 0

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

Để khởi động một dự án phát triển theme WordPress, trước tiên cần cấu hình môi trường làm việc phù hợp. Điều này không chỉ bao gồm máy chủ phát triển cục bộ, mà còn cần thiết lập cấu trúc thư mục dự án rõ ràng cũng như sử dụng các công cụ phát triển hiện đại.

Việc thiết lập môi trường phát triển cục bộ có nhiều lựa chọn. Bạn có thể sử dụng các gói phần mềm tích hợp như XAMPP, MAMP hoặc Local by Flywheel, chúng có thể cài đặt nhanh chóng Apache, MySQL và PHP trên máy tính cục bộ. Để có trải nghiệm gần với môi trường sản xuất hơn, có thể cân nhắc sử dụng container Docker. Ngoài ra, hầu hết việc phát triển theme hiện đại đều bắt đầu từ một trình soạn thảo mã cơ bản, như VS Code, và kết hợp với các plugin cần thiết để nâng cao hiệu quả viết mã.

Một cấu trúc thư mục theme tiêu chuẩn và rõ ràng là nền tảng cho khả năng bảo trì của dự án. Trong WordPress,wp-content/themesTrong thư mục, tạo một thư mục có tên trùng với tên chủ đề của bạn, ví dụmy-modern-theme. Trong thư mục này, bạn phải tạo hai tệp cốt lõi:style.css和index.phpTrong đó,style.csskhông chỉ là bảng định kiểu, mà còn chứa thông tin siêu dữ liệu của chủ đề. Các tệp và thư mục còn lại, chẳng hạn như để lưu trữ tập lệnh JavaScript/js, lưu trữ các thành phần mẫu/template-partsNơi lưu trữ các mẫu trang (page templates)/page-templatesV.v., những thứ này có thể được xây dựng dần dần trong quá trình phát triển.

Đọc thêm Hướng dẫn tối thượng Tailwind CSS: Từ cơ bản đến thông thạo các kỹ thuật thực tế。

Thông tin tiêu đề bảng định dạng chủ đề (Theme Style Table Header Information)

Chủ đềstyle.cssPhần đầu của tệp tin phải chứa một đoạn chú thích theo định dạng chuẩn, dùng để thông báo với hệ thống WordPress về chủ đề (theme) của bạn. Thông tin này rất quan trọng; nó xác định tên chủ đề, tác giả, mô tả, phiên bản, và các thông tin khác liên quan đến chủ đề đó.

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: My Modern Theme
Theme URI: https://example.com/my-modern-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个从零开始构建的现代、响应式WordPress主题。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-modern-theme
*/

Trong đóText DomainĐược sử dụng cho mục đích quốc tế hóa (internationalization), nó sẽ đóng vai trò là vùng chứa văn bản cho các hàm dịch tiếp theo. Sau khi bạn định nghĩa đầy đủ các thông tin này, chủ đề của bạn sẽ xuất hiện trong danh sách “Themes” (Chủ đề) tại mục “Appearance” (Giao diện) trong giao diện quản trị WordPress.

Import the core function file.

Mặc dùindex.php和style.cssĐủ để một chủ đề được nhận diện, nhưng một chủ đề hoàn chỉnh về chức năng phải chứafunctions.phptệp. Tệp này không dùng để xuất nội dung trực tiếp, mà đóng vai trò như “động cơ chức năng” của chủ đề, dùng để thêm hỗ trợ chủ đề, đăng ký menu, sidebar, cũng như nhập các kiểu dáng và tập lệnh.

Tạofunctions.phptệp trong thư mục gốc của chủ đề. Trong giai đoạn đầu, chúng ta có thể thêm một số hỗ trợ chức năng cơ bản vào đó. Bạn có thể thông quaadd_theme_support()Hàm để khai báo các tính năng được hỗ trợ bởi chủ đề, chẳng hạn như Ảnh đại diện bài viết (Featured Image), Logo tùy chỉnh, đánh dấu HTML5, v.v.

Xây dựng các tệp mẫu cốt lõi

WordPress sử dụng hệ thống phân cấp mẫu để quyết định cách hiển thị các loại nội dung khác nhau. Hiểu và tạo các tệp mẫu cốt lõi này là chìa khóa để biến thiết kế của bạn thành một trang web động.

Đọc thêm Hướng dẫn thực hành toàn diện về xây dựng trang web hiện đại: Từ lập kế hoạch đến triển khai。

Tệp mẫu cơ bản nhất làindex.phpđây là mẫu dự phòng cuối cùng cho tất cả các trang. Nhưng để kiểm soát chi tiết hơn, chúng ta nên tạo các mẫu cụ thể hơn. Ví dụ, mẫu dùng để hiển thị danh sách bài viết bloghome.php或index.phpmẫu dùng để hiển thị một bài viết đơn lẻsingle.phpmẫu dùng để hiển thị trang tĩnhpage.phpcũng như dùng để hiển thị các trang lưu trữ như danh mục bài viết, thẻ tag, v.v.archive.php. Ngoài ra,header.php和footer.phpdùng để tách mã phần đầu và phần chân trang web, thông quaget_header()和get_footer()hàm được gọi trong các template khác nhau, giúp tái sử dụng mã.

tạo template phần đầu trang

header.phpTệp thường chứa phần<head>của tài liệu HTML và cấu trúc ở đầu trang, như biểu tượng trang web và menu điều hướng chính. Một bước quan trọng là gọi hook<head>trongwp_head(), đây là nơi WordPress core, plugin và chủ đề tự xuất ra CSS, JavaScript và metadata cần thiết.

<!DOCTYPE html>
<html no numeric noise key 1008>
<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 1005>
<?php wp_body_open(); ?>
<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php the_custom_logo(); ?>
        <div class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></div>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-1',
            'menu_id'        =&gt; 'primary-menu',
        ) );
        ?&gt;
    </nav>
</header>

Thực hiện vòng lặp bài viết

Vòng lặp bài viết là cơ chế cốt lõi để xuất nội dung động trong WordPress. Trongindex.php、single.phpcác mẫu giao diện (template), chúng ta sử dụngif ( have_posts() ) : while ( have_posts() ) : the_post();để lặp qua và hiển thị từng bài viết.

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

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?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>
</div>

get_template_part()Hàm là một thực hành tốt, nó khuyến khích bạn tách cấu trúc HTML hiển thị nội dung bài viết sangtemplate-parts/content.phpcác tệp thành phần như vậy, giúp tệp mẫu chính trở nên gọn gàng và rõ ràng hơn.

Triển khai thiết kế đáp ứng và kiểu dáng

Chủ đề hiện đại phải có tính đáp ứng, có khả năng cung cấp trải nghiệm duyệt web tốt trên mọi kích thước màn hình từ điện thoại đến máy tính để bàn. Điều này chủ yếu được thực hiện thông qua truy vấn phương tiện CSS, mô hình hộp linh hoạt (Flexbox) và bố cục lưới (CSS Grid).

Đầu tiên, trongfunctions.phpSử dụng đúng cáchwp_enqueue_style()hàm để đưa bảng định kiểu chính của bạn vào hàng đợi. Đảm bảo đặt phụ thuộc vào các kiểu mặc định của WordPress khi gọi, chẳng hạn nhưdashicons。

Đọc thêm Hướng dẫn toàn diện về Tailwind CSS: Từ cơ bản đến thành thạo phát triển Web hiện đại。

function my_modern_theme_scripts() {
    // 引入主题主要样式表
    wp_enqueue_style( 'my-modern-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义脚本（如果有）
    wp_enqueue_script( 'my-modern-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()-`get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_modern_theme_scripts' );

Chiến lược CSS ưu tiên thiết bị di động

Áp dụng chiến lược “Ưu tiên di động” khi viết CSS. Điều này có nghĩa là đầu tiên viết kiểu cơ bản cho các thiết bị màn hình nhỏ (như điện thoại), sau đó sử dụng media query để thêm kiểu nâng cao và điều chỉnh bố cục cho các màn hình lớn dần (máy tính bảng, máy tính để bàn).

/* 基础样式 - 针对移动设备 */
.site-header {
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.main-navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
}

/* 针对平板及以上设备 */
@media (min-width: 768px) {
    .site-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .main-navigation ul {
        flex-direction: row;
        gap: 2rem;
    }
}

/* 针对大桌面设备 */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

Xử lý hình ảnh đáp ứng

WordPress cung cấp hỗ trợ mạnh mẽ cho hình ảnh đáp ứng. Sử dụngthe_post_thumbnail()hàm và truyền các tham số kích thước phù hợp, WordPress sẽ tự động xuất ra vớisrcset和sizesThuộc tính `

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

` của thẻ, cho phép trình duyệt chọn tệp hình ảnh phù hợp nhất dựa trên màn hình thiết bị, từ đó tối ưu hóa hiệu suất tải.

<?php if ( has_post_thumbnail() ) : ?>
    <figure class="post-thumbnail">
        <?php the_post_thumbnail( 'large', array( 'class' => 'img-fluid' ) ); ?>
    </figure>
<?php endif; ?>

Thêm tính năng và tùy chỉnh cho giao diện

Sau khi một giao diện cơ bản được hình thành, bạn có thể thêm nhiều tính năng khác nhau thông qua API của WordPress để nâng cao tính khả dụng và chuyên nghiệp. Điều này bao gồm menu tùy chỉnh, khu vực widget (thanh bên), và tùy chỉnh giao diện thông qua công cụ tùy chỉnh hoặc trang tùy chọn.

Đăng ký menu điều hướng

在functions.phpsử dụngregister_nav_menus()Hàm để xác định các vị trí menu mà chủ đề của bạn hỗ trợ. Sau đó, người dùng có thể phân bổ menu vào các vị trí này trong phần “Giao diện” -> “Menu” ở khu vực quản trị.

function my_modern_theme_setup() {
    // 注册一个主菜单
    register_nav_menus( array(
        'menu-1' => esc_html__( 'Primary Menu', 'my-modern-theme' ),
        'footer' => esc_html__( 'Footer Menu', 'my-modern-theme' ),
    ) );
    // 添加其他主题支持...
}
add_action( 'after_setup_theme', 'my_modern_theme_setup' );

Tạo khu vực widget

Khu vực widget (Sidebar) cho phép người dùng tùy chỉnh các khối trang bằng cách kéo và thả widget. Sử dụngregister_sidebar()Hàm đăng ký. Thông thường, bạn sẽ tạo nhiều khu vực widget cho thanh bên chính, khu vực widget chân trang, v.v.

function my_modern_theme_widgets_init() {
    register_sidebar( array(
        'name'          => esc_html__( 'Sidebar', 'my-modern-theme' ),
        'id'            => 'sidebar-1',
        'description'   => esc_html__( 'Add widgets here.', 'my-modern-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_modern_theme_widgets_init' );

Sau khi đăng ký, trong tệp mẫu (ví dụ:sidebar.php）sử dụngdynamic_sidebar( 'sidebar-1' )gọi hàm để hiển thị khu vực đó.

Tích hợp API Customizer

Trình tùy chỉnh WordPress cho phép người dùng điều chỉnh tùy chọn giao diện với bản xem trước trực tiếp. Bạn có thể thêm các cài đặt đơn giản thông qua API tùy chỉnh, như chọn màu, tải lên Logo, v.v. Điều này liên quan đến việc sử dụng$wp_customize->add_setting()和$wp_customize->add_control()phương pháp.

function my_modern_theme_customize_register( $wp_customize ) {
    // 添加一个站点标题颜色的设置
    $wp_customize->add_setting( 'header_textcolor', array(
        'default'           => '#000000',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'    => __( 'Header Text Color', 'my-modern-theme' ),
        'section'  => 'colors',
    ) ) );
}
add_action( 'customize_register', 'my_modern_theme_customize_register' );

Sau đó, trongheader.phpcó thể thông quaget_theme_mod( 'header_textcolor' )Lấy giá trị này và áp dụng nó thông qua các phương pháp như inline style.

Tóm lại

Phát triển một chủ đề WordPress hiện đại, đáp ứng từ đầu là một quy trình có hệ thống, đòi hỏi nhà phát triển không chỉ thành thạo PHP và các API cốt lõi của WordPress, mà còn phải tinh thông HTML5, CSS3 (đặc biệt là Flexbox/Grid và media queries) cũng như JavaScript. Toàn bộ quá trình tuân theo nguyên tắc mô-đun hóa và dễ bảo trì: bắt đầu từ việc thiết lập môi trường, xác định thông tin chủ đề, sau đó từng bước xây dựng các tệp PHP tuân theo hệ thống phân cấp mẫu, triển khai vòng lặp bài viết cốt lõi. Tiếp theo, thông qua chiến lược CSS “ưu tiên thiết bị di động” và công nghệ hình ảnh đáp ứng để đảm bảo trang web hoạt động xuất sắc trên mọi thiết bị. Cuối cùng, sử dụng các API chức năng mạnh mẽ của WordPress để thêm hỗ trợ menu điều hướng, khu vực widget và trình tùy chỉnh, trao cho người dùng khả năng tùy biến linh hoạt. Tuân theo các bước này, bạn sẽ có thể xây dựng một chủ đề WordPress chuyên nghiệp, hiệu quả và dễ bảo trì.

FAQ 常见问题

Phát triển chủ đề WordPress cần nắm vững những công nghệ cốt lõi nào?

Để phát triển một chủ đề WordPress hoàn chỉnh, bạn cần nắm vững một loạt công nghệ cốt lõi. Đầu tiên là PHP, vì bản thân WordPress được viết bằng PHP, tất cả các tệp mẫu và logic chức năng đều phụ thuộc vào nó. Tiếp theo là HTML5 và CSS3, dùng để xây dựng cấu trúc và kiểu dáng trang, đặc biệt thiết kế đáp ứng không thể thiếu media queries CSS và các mô hình bố cục hiện đại (như Flexbox và Grid). Hiểu biết cơ bản về JavaScript cũng rất quan trọng để triển khai các chức năng tương tác. Cuối cùng, bạn phải hiểu sâu các khái niệm cốt lõi của WordPress, như hệ thống phân cấp mẫu, vòng lặp bài viết, hooks và filters.

Tệp style.css có tác dụng gì với Text Domain

Text DomainLà định danh quan trọng cho việc quốc tế hóa và bản địa hóa chủ đề. Tác dụng của nó là tạo ra một không gian tên duy nhất cho tất cả các chuỗi có thể dịch trong chủ đề của bạn. Trong mã nguồn, khi bạn sử dụng các hàm dịch như__('Hello World', 'my-modern-theme')或_e('Read More', 'my-modern-theme')tham số thứ hai chính là text domain. Điều này đảm bảo các công cụ dịch (như Poedit) có thể nhận diện và trích xuất chính xác các chuỗi thuộc về chủ đề của bạn, từ đó tạo ra.po和.motệp dịch, giúp chủ đề của bạn có thể dễ dàng được dịch sang bất kỳ ngôn ngữ nào.

Làm thế nào để chủ đề hỗ trợ tính năng ảnh thu nhỏ bài viết

Để chủ đề hỗ trợ ảnh thu nhỏ bài viết (còn gọi là ảnh đặc trưng), bạn cần thêm khai báo hỗ trợ chủ đề tương ứng trong tệpfunctions.phpcủa chủ đề. Sử dụngadd_theme_support()hàm và truyền'post-thumbnails'Tham số. Bạn có thể bật trên tất cả các loại bài viết, hoặc chỉ định chỉ bật trên một số loại bài viết nhất định (ví dụ:post和page).

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    // 或者指定文章类型：add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );
    // 你还可以在这里定义默认的缩略图尺寸：set_post_thumbnail_size( 800, 600, true );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Sau khi thêm hỗ trợ, hộp meta “Ảnh đại diện” sẽ xuất hiện trên trang chỉnh sửa bài viết, cho phép người dùng tải lên hoặc chọn ảnh. Trong mẫu, sử dụnghas_post_thumbnail()để kiểm tra xem có ảnh thu nhỏ không, và sử dụngthe_post_thumbnail()hàm để hiển thị nó.

Tại sao nên sử dụng hàm get_template_part

get_template_part()Hàm này là một trong những phương pháp thực hành tốt nhất để tái sử dụng mã và mô-đun hóa trong phát triển chủ đề WordPress. Nó chủ yếu được sử dụng để tách mã mẫu thông dụng (như cấu trúc HTML hiển thị nội dung bài viết) vào các tệp bộ phận độc lập. Việc này có một số ưu điểm nổi bật: đầu tiên là cải thiện khả năng đọc và bảo trì mã, tệp mẫu chính (nhưindex.php) trở nên rất gọn gàng; thứ hai là tăng cường tính linh hoạt, bạn có thể tải các tệp bộ phận khác nhau dựa trên các điều kiện khác nhau (như loại bài viết), ví dụget_template_part( 'template-parts/content', 'page' )Sẽ ưu tiên tải trướccontent-page.php; Cuối cùng, nó tạo điều kiện thuận lợi cho việc ghi đè của theme con, theme con chỉ cần cung cấp một tệp widget cùng tên để sửa đổi logic hiển thị của theme cha.