Từ không đến có: Hướng dẫn toàn diện và thực hành phát triển chủ đề WordPress

Cơ bản phát triển giao diện WordPress và thiết lập môi trường

Để bắt đầu phát triển các chủ đề (themes) cho WordPress, trước hết bạn cần hiểu rõ các khái niệm cơ bản của nó. Một chủ đề WordPress về cơ bản là một tập hợp các tệp tin, bao gồm các bảng định dạng (style sheets), tệp tin mẫu (template files), hình ảnh và tệp tin JavaScript; tất cả những tệp tin này cùng nhau quy định giao diện và chức năng của trang web. Việc phát triển một chủ đề có nghĩa là bạn đang tạo ra một bộ quy tắc hoàn chỉnh, chỉ định cho WordPress cách hiển thị nội dung trong cơ sở dữ liệu (database) đến người truy cập.

Việc chuẩn bị môi trường trước khi bắt đầu phát triển là vô cùng quan trọng. Bạn cần một môi trường phát triển trên máy tính cá nhân, và điều này có thể được thực hiện một cách dễ dàng bằng cách cài đặt các công cụ như XAMPP, MAMP, Local by Flywheel hoặc Docker. Môi trường này cho phép bạn thực hiện các công việc như phát triển, kiểm thử và gỡ lỗi mà không ảnh hưởng đến trang web trên hệ thống trực tuyến. Ngoài ra, một trình soạn thảo mã hiệu quả là công cụ không thể thiếu; ví dụ như Visual Studio Code,PhpStorm hoặc Sublime Text – những công cụ này cung cấp các tính năng như hiển thị mã nguồn theo cú pháp, gợi ý mã nguồn và hỗ trợ gỡ lỗi, từ đó giúp nâng cao đáng kể hiệu quả phát triển.

Tiếp theo, bạn cần tìm hiểu về cấu trúc thư mục của từng chủ đề. Mỗi chủ đề được đặt tại…/wp-content/themes/Nó nằm trong thư mục và tồn tại dưới dạng một thư mục độc lập. Đối với một chủ đề cơ bản nhất, chỉ cần hai tệp tin là đủ:style.css和index.php… trong…style.cssTrong phần chú thích ở đầu, bạn cần cung cấp thông tin meta về chủ đề.

Đọc thêm Phân tích chuyên sâu về trường tùy chỉnh WordPress: Từ cơ bản đến ứng dụng thực tế nâng cao。

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

Thisstyle.cssCác tệp tin không chỉ chứa các bảng định dạng (style sheets) mà còn là “chứng minh thư” của chủ đề (theme) bạn đang sử dụng. WordPress sẽ đọc những ghi chú (comments) trong các tệp tin này để nhận diện và hiển thị chủ đề đó ở phía sau nền (background).

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

Core template files and theme hierarchy structure

WordPress sử dụng một hệ thống thông minh được gọi là “Cấu trúc phân cấp của các mẫu” (Template Hierarchy) để quyết định nên sử dụng tệp mẫu nào để hiển thị nội dung cho một yêu cầu trang cụ thể. Việc hiểu rõ cấu trúc này là yếu tố then chốt trong quá trình phát triển các giao diện (theme) cho WordPress.

Tệp mẫu cốt lõi nhất là…index.phpNó đóng vai trò là mẫu dự phòng cuối cùng cho tất cả các trang web. Khi WordPress không tìm thấy mẫu cụ thể nào khác, nó sẽ sử dụng mẫu này. Trang chủ thường được tạo dựng dựa trên mẫu này.front-page.php或home.php“Kiểm soát. Trang đơn của bài viết được ưu tiên sử dụng.”single.phpĐối với các loại bài viết cụ thể, chẳng hạn như “sản phẩm”, WordPress sẽ tự động tìm kiếm nội dung liên quan.single-product.phpTrang web được thiết kế để sử dụng một cách dễ dàng và thuận tiện cho người dùng.page.phpNếu trang có mẫu tùy chỉnh, thì mẫu đó sẽ được sử dụng.page-{slug}.php或page-{id}.phpTrang lưu trữ bài viết (chẳng hạn như theo thể loại, thẻ, tác giả, ngày xuất bản) tương ứng với…archive.phpcùng với các biến thể cụ thể hơn của nó, chẳng hạn nhưcategory.php、tag.phpv.v.

Mẫu đầu và cuối trang chủ đề (Theme Header and Footer Templates)

Để tuân theo nguyên tắc DRY (Don't Repeat Yourself – Đừng lặp lại bản thân), các chủ đề WordPress sử dụng…get_header()、get_footer()和get_sidebar()Sử dụng các hàm như `include` để đưa các phần chung vào. Điều này có nghĩa là bạn cần tạo ra những hàm hoặc tệp chứa các đoạn mã có thể được sử dụng lại trong nhiều nơi khác nhau trong dự án.header.php和footer.phpTệp.

header.phpCác tệp tin thường chứa phần đầu của tài liệu HTML (document header), các thẻ meta (meta tags), các liên kết đến bảng định dạng (style sheets) và các tập lệnh (scripts), cũng như khu vực điều hướng ở phía trên của trang web. Điều cực kỳ quan trọng là, tệp tin đó phải bao gồm tất cả những thành phwp_head()Lời gọi hàm này cho phép phần cốt lõi của WordPress, các plugin, và chính các giao diện (theme) thực hiện các thao tác cần thiết.<head>Một phần mã cần thiết được chèn vào hệ thống.

Đọc thêm 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。

footer.phpTệp tin chứa thông tin ở phần cuối trang web, các tham chiếu đến script, v.v., và được lưu dưới dạng…wp_footer()Hàm đã kết thúc; điều này phù hợp với…wp_head()Chức năng của nó tương tự; nó được sử dụng để chèn mã lệnh vào phần cuối trang web.

Trong tệp mẫu, bạn có thể đưa chúng vào theo cách sau:

<?php get_header(); ?>

<!-- 主内容区 -->

<?php get_footer(); ?>

Chức năng chủ đề và vòng lặp trong WordPress

Chức năng của một chủ đề không chỉ giới hạn ở vẻ bề ngoài. Thông qua…functions.phpBạn có thể thêm các tính năng mới, đăng ký các đặc điểm cụ thể, hoặc tích hợp các plugin vào chủ đề (theme) của mình. Tệp tin này sẽ được tự động tải khi chủ đề được kích hoạt, và nó hoạt động tương tự như một plugin dành riêng cho chủ đề đó.

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

理解WordPress循环

Vòng lặp trong WordPress là logic cốt lõi trong quá trình phát triển các giao diện (theme). Đó là một đoạn mã PHP dùng để kiểm tra xem trang hiện tại có bài viết (hay bài đăng) nào cần được hiển thị hay không; nếu có, nó sẽ lặp qua từng bài và hiển thị chúng. Cấu trúc vòng lặp cơ bản như sau:

<!-- 在这里输出文章内容 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    
    <p>Không tìm thấy bất kỳ bài viết nào.</p>
<?php endif; ?>

Trong vòng lặp, bạn có thể sử dụng một loạt thẻ mẫu (template tags) để hiển thị thông tin bài viết, ví dụ như:the_title()Xuất tiêu đề,the_content()Nội dung đã được cung cấp đầy đủ. Nếu bạn cần bất kỳ phần nào được dịch thêm hoặc có bất kỳ yêu cầu cụ thể nào khác, vui lòng cho biết!the_excerpt()Xuất tóm tắt,the_permalink()Lấy liên kết bài viết.the_post_thumbnail()Hiển thị hình ảnh đặc sắc.

Đăng ký menu và thanh bên

Các chủ đề hiện đại thường hỗ trợ người dùng tự định cấu menu và tiện ích (gadget) thông qua giao diện quản trị (backend). Điều này đòi hỏi phải có khả năng...functions.phpBạn có thể đăng ký tại đây.

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

Sử dụngregister_nav_menus()Một hàm có thể đăng ký một hoặc nhiều vị trí mục (menu items).

function mytheme_register_menus() {
    register_nav_menus(
        array(
            'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
            'footer-menu'  => __( '页脚菜单', 'my-first-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

Sau đó, trong tệp mẫu (nhưheader.php）sử dụngwp_nav_menu()ở vị trí tương ứng để hiển thị menu.

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

Tương tự như vậy, thanh bên cạnh (khu vực hiển thị các tiện ích/phụ kiện) cũng được thiết kế để hiển thị các nội dung liên quan thông qua cách thức tương tự.register_sidebar()函数注册：

function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-first-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在这里添加你的挂件。', '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', 'mytheme_widgets_init' );

Trong mẫu, hãy sử dụng…dynamic_sidebar( 'sidebar-1' )Hãy gọi hàm để thao tác với khu vực này.

样式、脚本与主题定制器集成

Để làm cho chủ đề trở nên chuyên nghiệp và thân thiện hơn với người dùng, cần xử lý việc tải các phong cách (styles) và script một cách chính xác, đồng thời tích hợp tối đa các tính năng tùy chỉnh (customizers) có sẵn trong WordPress.

Tải các kiểu dáng (styles) và script theo thứ tự (đợi xếp hàng)

Cách đúng là sử dụng nó.wp_enqueue_style()和wp_enqueue_script()Hãy thêm các hàm đó vào…functions.phpNó được đặt trong các “hook” tương ứng, điều này đảm bảo rằng các mối phụ thuộc được xử lý đúng cách và tránh tình trạng tải lại các tài nguyên không cần thiết.

function mytheme_enqueue_assets() {
    // 主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );

// 谷歌字体
    wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );

// 主JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Tích hợp bộ tùy chỉnh giao diện

WordPress Customizer cho phép người dùng điều chỉnh cài đặt của giao diện (theme) trong khi xem trực tiếp bản xem trước (preview) của trang web.$wp_customizeBạn có thể thêm các thiết lập (settings) và các công cụ điều khiển (controls) cho đối tượng (object) đó.

Ví dụ, thêm một tùy chọn để chọn màu cho tiêu đề trang web:

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置（存储在数据库中）
    $wp_customize->add_setting( 'header_color', array(
        'default'           => '#333333',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色选择器控件
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
        'label'    => __( '页眉颜色', 'my-first-theme' ),
        'section'  => 'colors',
        'settings' => 'header_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sau đó, trong phần của bạn…style.cssHoặc sử dụng giá trị này trong các kiểu dữ liệu được hiển thị một cách động (động):

function mytheme_customizer_css() {
    ?>
    <style type="text/css">
        .site-header {
            background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
        }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );

Tóm lại

Việc phát triển các chủ đề (themes) cho WordPress là một kỹ năng thú vị, kết hợp giữa thiết kế và lập trình. Quá trình này bắt đầu với việc tìm hiểu về các tệp tin cốt lõi (core files) của hệ thống WordPress, chẳng hạn như…style.css和index.phpHiểu biết sâu sắc về cấu trúc dữ liệu, cũng như cách thức hoạt động của các thành phần trong hệ thống WordPress; đồng thời nắm vững cách thức sử dụng các vòng lặp (loops) và cấu trúc mẫu (templates) trong WordPress để tạo ra những trang web hiệu quả và linh hoạt.functions.phpTrong những tính năng mạnh mẽ của WordPress, bạn có thể xây dựng những giao diện (theme) có cấu trúc rõ ràng và hiệu suất tốt bằng cách sắp xếp các tệp template một cách hợp lý, sử dụng các thẻ template (template tags) đúng chỗ, đăng ký các mục trong menu và các khu vực hiển thị nội dung (plugin areas), cũng như áp dụng phương thức tải các tài nguyên theo thứ tự (queue loading). Việc tích hợp công cụ tùy chỉnh theme (theme customizer) sẽ mang đến trải nghiệm tùy chỉnh trực quan cho người dùng cuối cùng. Sau khi nắm vững những kiến thức cơ bản này, bạn sẽ có khả năng chuyển đổi thiết kế của mình thành những giao diện WordPress hoàn chỉnh với nhiều tính năng hữu ích, đồng thời tạo nền tảng vững chắc cho việc học các framework theme nâng cao hơn như Underscores hoặc Genesis, cũng như các giao diện dựa trên công nghệ Block Theme.

FAQ 常见问题

Có phải để phát triển một theme cho WordPress, bạn cần phải am hiểu sâu rộng về PHP không?

Mặc dù không cần phải đạt đến trình độ chuyên gia, nhưng một nền tảng PHP vững chắc là điều kiện bắt buộc. Bạn cần hiểu rõ về ngữ pháp PHP, biến, hàm, vòng lặp và câu lệnh điều kiện, vì cả phần lõi của WordPress lẫn các tệp mẫu chủ đề đều được viết bằng PHP. Đồng thời, việc nắm vững HTML, CSS và JavaScript cơ bản cũng rất quan trọng.

Làm thế nào để chủ đề của tôi tuân thủ các tiêu chuẩn chính thức của WordPress?

Để chủ đề của bạn đáp ứng các tiêu chuẩn và có khả năng được đưa vào danh mục chủ đề chính thức của WordPress, bạn cần tuân thủ “Hướng dẫn phát triển chủ đề WordPress” (WordPress Theme Development Manual) và “Yêu cầu kiểm tra chủ đề” (Theme Review Requirements). Điều này bao gồm việc sử dụng các thực hành lập trình an toàn, chuẩn bị cho tính quốc tế hóa (sử dụng các biến dữ liệu văn bản và hàm dịch), đảm bảo thiết kế thích ứng với nhiều loại thiết bị (responsive design), không lưu trữ các chức năng quan trọng trong mã nguồn chính của chủ đề (khuyến nghị sử dụng các chủ đề con – subthemes – hoặc plugin), và thực hiện kiểm tra bằng plugin Theme Check được cung cấp bởi WordPress.

Tại sao thay đổi về chủ đề của tôi không hiển thị sau khi tôi làm mới trang web?

Điều này thường xảy ra do lỗi đệm (cache) của trình duyệt hoặc cơ chế đệm của WordPress. Trước tiên, hãy thử nhấn các phím cùng lúc…Ctrl + F5(Dành cho Windows/Linux) hoặcCmd + Shift + RTrên máy Mac, hãy thực hiện thao tác làm mới hoàn toàn (hard refresh) để xóa bộ nhớ đệm của trình duyệt. Nếu vấn đề vẫn còn tồn tại, hãy đảm bảo rằng bạn đang làm việc trong môi trường phát triển cục bộ (local development environment), kiểm tra xem có cài đặt bất kỳ tiện ích nào liên quan đến việc lưu trữ bộ nhớ đệm hay không, và thử vô hiệu hóa chúng tạm thời. Cuối cùng, hãy xác nhận lại rằng bạn đã sửa đổi đúng tệp m

Thế nào là sự khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic), và khi nào nên sử dụng chúng?

Chủ đề cha (parent theme) là một chủ đề hoàn chỉnh về mặt chức năng và có thể hoạt động độc lập. Chủ đề con (child theme) phụ thuộc vào chủ đề cha; nó chỉ chứa một số ít tệp tin (ít nhất là một tệp tin cần thiết).style.cssSub-themes (còn được gọi là child themes) được sử dụng để thay thế hoặc mở rộng các kiểu dáng (styles) và chức năng (functions) của một theme cha (parent theme). Khi bạn muốn thực hiện những thay đổi tùy chỉnh trên một theme hiện có nhưng vẫn muốn giữ nguyên những thay đổi đó ngay cả khi theme cha được cập nhật, bạn nên tạo một sub-theme. Đây là phương pháp tốt nhất để nâng cấp và tùy chỉnh các theme.

Làm thế nào để thêm sự hỗ trợ đầy đủ cho Trình biên tập Gutenberg cho chủ đề của tôi?

Để hoàn thiện việc hỗ trợ Trình biên tập Gutenberg, bạn cần phải…functions.phpsử dụngadd_theme_support()Một hàm được khai báo với một loạt các đặc tính (features). Ví dụ, việc thêm (adding) một số tính năng mới vào hàm là một phần quan trọng trong quá trình phát triển phần mềm.align-wide和align-fullHỗ trợ việc tùy chỉnh bảng màu, tạo nền có hiệu ứng chuyển màu (gradient), kiểm soát kích thước phông chữ, v.v. Đồng thời, tạo các bảng định dạng (style sheets) riêng biệt cho trình soạn thảo bài viết và trang web, và sử dụng chúng một cách hiệu quả.add_editor_style()Hãy thêm nó vào. Để có thể tùy chỉnh nhiều hơn, bạn có thể cần học cách tạo các khối (blocks) tùy chỉnh.