Làm chủ phát triển chủ đề WordPress: Hướng dẫn hoàn chỉnh từ con số 0 đến thành thạo với kỹ năng thực chiến

Đọc thêm Xây dựng trang web hoàn hảo: Phát triển một chủ đề WordPress chuyên nghiệp từ đầu。

Tệp mẫu cốt lõi và hệ thống phân cấp mẫu

WordPress sử dụng một hệ thống thông minh được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định cách hiển thị các loại nội dung khác nhau. Khi người dùng truy cập một trang, WordPress sẽ tìm kiếm tệp template tương ứng theo một thứ tự ưu tiên nhất định. 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.

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

Cơ chế hoạt động của các cấp độ mẫu (Template Hierarchy)

Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ tìm kiếm theo thứ tự sau:single-post-{post-type}-{slug}.php -> single-post-{post-type}.php -> single.php -> singular.php -> Cuối cùng quay vềindex.phpCác nhà phát triển có thể tùy chỉnh cách hiển thị nội dung khác nhau bằng cách tạo các tệp mẫu (template files) cụ thể hơn. Trang lưu trữ (archive page), trang tìm kiếm (search page), trang 404 (404 page), v.v., đều có những quy tắc cấu trúc riêng biệt.

Tạo tệp mẫu cơ bản

Từ những điều cơ bản nhất…header.php、footer.php和index.phpBắt đầu xây dựng.header.phpTrong đó, nhất định phải sử dụng…wp_head()Đây là một hàm (function) cho phép WordPress Core, các plugin, và các theme chèn vào đây những đoạn mã cần thiết (chẳng hạn như các liên kết đến bảng định dạng (style sheets)). Tương tự như vậy…footer.phpNên sử dụngwp_footer()Hàm. Trong mẫu chính (main template).index.phpwp_footer()get_header()、get_footer()、get_sidebar()Chờ các thẻ mẫu được sử dụng để đưa những thành phần này vào.

Một thiết kế cực kỳ đơn giản (minimalist design).index.phpVí dụ về cấu trúc như sau:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
        endwhile;
    else :
        // 显示未找到内容
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Chức năng chủ đề được tích hợp với API của WordPress.

functions.phpTệp tin chính là “bộ não” của một chủ đề (theme), được sử dụng để mở rộng chức năng của chủ đề đó mà không cần phải thay đổi các tệp tin cốt lõi. Tại đây, bạn có thể sử dụng các hook hành động (action hooks) và hook lọc (filter hooks) để can thiệp vào quá trình vận hành của WordPress.

Đọc thêm Cách tạo một chủ đề WordPress chuyên nghiệp: Hướng dẫn đầy đủ từ con số 0 đến khi ra mắt。

Các tính năng được hỗ trợ khi đăng ký chủ đề:

Thông quaadd_theme_support()Bạn có thể khai báo các chức năng khác nhau mà chủ đề hỗ trợ thông qua các hàm. Ví dụ, bạn có thể kích hoạt tính năng hiển thị ảnh thu nhỏ của bài viết (hình ảnh đại diện), tùy chỉnh biểu tượng, định dạng bài viết, v.v.

function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Đoạn mã trên thực hiện công việc thông qua… (The above code performs its task by…)after_setup_themeCác “hook” (móc) được thực thi khi chủ đề được khởi tạo, và chúng được sử dụng để đăng ký các tính năng của chủ đề đó.

Nhập script và kiểu dáng 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 và JS trong tệp mẫu (template file). Thay vào đó, hãy sử dụng các phương pháp khác để đưa chúng vào tệp mẫu một cách có tổ chức và dễ bảo trì hơn.wp_enqueue_scriptsCác “hook hành động” (action hooks) và hàm tương ứng được sử dụng để xếp hàng và thực hiện việc tải dữ liệu.

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

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Phương pháp này đảm bảo việc quản lý các thành phần phụ thuộc (dependencies), ngăn chặn tình trạng tải chúng nhiều lần, và phù hợp với các thực tiễn tốt nhất của WordPress (WordPress best practices).

Tùy chỉnh giao diện và tính năng nâng cao

Việc phát triển các chủ đề WordPress hiện đại không thể thiếu các tính năng tùy chỉnh. Những tính năng này bao gồm khả năng xem trước nội dung ngay lập tức thông qua công cụ tùy chỉnh chủ đề (theme customizer), cũng như việc tạo các loại bài viết và thể loại tùy chỉnh nhằm quản lý nội dung đặc biệt.

Sử dụng API của công cụ tùy chỉnh chủ đề (Theme Customizer)

API của công cụ Tùy chỉnh (Customizer) trong WordPress cho phép bạn thêm các tùy chọn cấu hình có thể được xem trước (preview) ngay lập tức. Bạn có thể thêm các bảng điều khiển (panels), các phần nội dung (sections) và các tùy chọn cấu hình (settings), đồng thời tạo ra các công cụ điều khiển (controllers) cho những tùy chọn đó – chẳng hạn như công cụ chọn màu sắc (color picker) hoặc công cụ để tải tệp (upload control).

Đọc thêm Hướng dẫn tối thượng: Cách phát triển một chủ đề WordPress chuyên nghiệp từ con số 0。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个节
    $wp_customize->add_section( 'mytheme_colors', array(
        'title' => __( '主题颜色', 'mytheme' ),
    ) );
    // 添加一个设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置添加一个颜色控制器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色', 'mytheme' ),
        'section' => 'mytheme_colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Trong tệp chủ đề (theme file), bạn có thể sử dụng…get_theme_mod( 'primary_color' )Để lấy giá trị mà người dùng đã thiết lập.

Tạo loại bài viết tùy chỉnh

Đối với trường hợp cần hiển thị các nội dung không thuộc loại bài viết tiêu chuẩn như bộ sưu tác phẩm, sản phẩm, đội ngũ, v.v., việc đăng ký loại bài viết tùy chỉnh (Custom Post Type – CPT) là lựa chọn tốt nhất. Quá trình này thường được thực hiện thông qua…register_post_type()Về việc triển khai hàm, tốt nhất nên thực hiện nó trong plugin để đảm bảo dữ liệu không bị mất khi thay đổi chủ đề. Tuy nhiên, để mục đích minh họa, bạn cũng có thể thực hiện nó trực tiếp trong chính file liên quan đến chủ đề.functions.phpDiễn ra trong quá trình này.

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

function mytheme_register_portfolio() {
    $args = array(
        'public' => true,
        'label'  => __( '作品集', 'mytheme' ),
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'mytheme_register_portfolio' );

Sau khi đăng ký, một menu có tên “Bộ sưu tập tác phẩm” sẽ xuất hiện ở phía sau hậu trường (nền tảng quản trị). Bạn có thể quản lý nó giống như cách bạn quản lý các bài viết, và bạn cũng có thể tạo các tệp mẫu riêng biệt cho nó.single-portfolio.php。

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình mang tính hệ thống, bắt đầu từ việc hiểu rõ cấu trúc tệp tin cơ bản và cấu trúc các mẫu (templates), cho đến việc sử dụng chúng một cách thành thạo.functions.phpMở rộng chức năng của các loại API WordPress (chẳng hạn như API Customizer, API loại bài viết) là điều rất quan trọng. Việc tuân theo các thực hành tốt nhất – như tải các tài nguyên một cách an toàn thông qua các hook, sử dụng các sub-theme để thực hiện các thay đổi, và viết mã có thể được dịch – là chìa khóa để phát triển những theme chuyên nghiệp, hiệu quả và dễ bảo trì. Bằng cách thực hiện theo các bước trong hướng dẫn này, bạn đã nắm vững được cách xây dựng một theme tùy chỉnh từ đầu. Bước tiếp theo là thông qua việc thực hành và khám phá thêm các API sâu hơn để nâng cao kỹ năng của mình.

FAQ 常见问题

Một chủ đề WordPress (theme) loại ### cần ít nhất những tệp tin nào?
Một chủ đề WordPress cần ít nhất hai tệp tin:style.css 和 index.php。style.cssKhối chú thích ở đầu tệp phải chứa thông tin meta về chủ đề (chẳng hạn như tên chủ đề), điều này là bắt buộc để WordPress có thể nhận diện được chủ đề đó.index.phpĐó chính là tệp mẫu chính mặc định.

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

Bạn cần chuẩn bị tốt cho việc quốc tế hóa văn bản. Trong các chủ đề, tất cả các chuỗi dữ liệu nhắm đến người dùng đều phải được bao bọc bởi hàm dịch. Ví dụ:__('Hello World', 'mytheme-textdomain')或_e('Hello World', 'mytheme-textdomain')Sau đó, sử dụng các công cụ như Poedit để tạo ra sản phẩm cần thiết..potTệp mẫu, và tạo ra phiên bản tương ứng bằng ngôn ngữ cần thiết..po和.moCuối cùng,functions.phpsử dụngload_theme_textdomain().

Khi phát triển một chủ đề (theme), làm thế nào để tránh tình trạng mất đi các thay đổi tùy chỉnh sau khi cập nhật chủ đề đó?

Tuyệt đối không được trực tiếp sửa đổi các tệp tin của chủ đề gốc (chủ đề được tải về từ bên thứ ba). Cách thức đúng đắn là sử dụng công nghệ “chủ đề con” (sub-theme). Hãy tạo một thư mục chủ đề mới và đặt các tệp tin cần thay đổi vào đó.style.csshãy tải bản dịch thông qua hàmTemplate:Hãy chỉ định tên thư mục của chủ đề cha. Trong chủ đề con, bạn chỉ cần thêm các tệp tin mà bạn muốn sửa đổi hoặc tạo mới.style.css、functions.phpHoặc sử dụng các tệp mẫu để thay thế (hoặc ghi đè) những tệp hiện có. Nhờ đó, chủ đề gốc có thể được cập nhật một cách an toàn mà các tùy chỉnh của bạn vẫn được giữ nguyên.

Làm thế nào để thêm mẫu trang tùy chỉnh cho chủ đề của tôi?

Trước tiên, hãy tạo một tệp PHP mới trong thư mục gốc của chủ đề của bạn, ví dụ như:page-fullwidth.phpỞ phần đầu tiên của tệp này, hãy thêm một dòng chú thích đặc biệt để tuyên bố rằng đây là một mẫu trang (page template). Ví dụ:<?php /* Template Name: 全宽页面 */ ?>Sau đó, hãy viết mã mẫu của bạn vào tệp này. Sau khi lưu tệp, khi bạn tạo hoặc chỉnh sửa trang trong giao diện quản trị WordPress, bạn sẽ thấy mẫu “Trang toàn màn hình” trong danh sách thả xuống “Mẫu” thuộc mục “Thuộc tính trang” và có thể sử dụng nó.